/* Author: Tobalt — https://tobalt.lt
 * Telecentras overrides layered over techwix.css.
 * Brand tokens defined in brand-tokens.css (loaded earlier in stack).
 */

/* === Global type — apply DM Sans across all surfaces === */
body,
input,
textarea,
button,
select,
.techwix-section-title .title,
.section-title-wrap .title,
.hero-content .title,
.hero-content .desc,
h1, h2, h3, h4, h5, h6,
p, a, li, span, blockquote,
.btn, .btn-theme, .btn-primary, .btn-outline, .submit,
.wpcf7-form-control,
.menu-area, .header-section,
.footer-section, .copyright-area {
    font-family: var(--tcl-font-sans);
}

/* === WCAG 2.1 AA — accessibility foundations === */

/* Skip-link target — invisible focus point right after header. */
.tcl-skip-target {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Skip-to-content link — visible only when focused (WCAG 2.4.1 Bypass Blocks) */
.tcl-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000000; /* above everything including offcanvas */
    background: var(--tcl-blue-text, #0073B2);
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 6px 0;
    transform: translateY(-120%);
    transition: transform 0.18s ease;
}
.tcl-skip-link:focus,
.tcl-skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Global :focus-visible — WCAG 2.4.7 Focus Visible (Level AA).
 * Applies a clear focus ring to all interactive elements that don't already
 * have a custom focus style. Component-level rules with their own focus
 * styles win via specificity. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
    outline: 2px solid var(--tcl-blue, #0082C5);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Reduce motion — WCAG 2.3.3 (Level AAA). Respect user preference. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Native mouse-wheel scrolling. A global `scroll-behavior: smooth` leaking from the
 * template/vendor layer made the page animate EVERY scroll — Chrome applies that to
 * the wheel too, so it felt heavy and overshot (scrolled back a touch). Force native
 * scroll; deliberate smooth scrolls still pass behavior:'smooth' in JS (history rail). */
html { scroll-behavior: auto !important; }

/* Headings — heavy DM Sans with tight tracking matching AINIS Space design */
h1, h2, h3, h4, h5, h6,
.section-title-wrap .title,
.hero-content .title {
    font-weight: var(--tcl-fw-bold);
    letter-spacing: -0.01em;
}

/* Body baseline — slightly tighter line-height than vendor default for DM Sans rhythm */
body {
    color: var(--tcl-text);
}

/* === Header — Figma-exact overlay on dark navy hero ===
 * Per AINIS Space design (Frame 8, 1440x79, Figma node 1151:28462):
 * - Header sits as transparent overlay ON TOP of the dark navy hero.
 * - Logo: 188x40 white wordmark + cyan glyph.
 * - Menu items: DM Sans 500, 16px lh20.8, white.
 * - Search icon (16x16 white) + Kontaktai button (#0082C5, padding 12/32, r=4).
 * - LT flag dropdown deferred per user (Plan E).
 */
.header-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 100;
    box-shadow: none;
}
.header-wrap {
    padding: 16px 0;            /* Figma: top 16, bottom 16 → ~79px tall */
    align-items: center;
    position: relative;        /* anchor for mega-menu panel → aligns to the site container, not the menu block */
}
.header-menu { position: static; }       /* was relative; panel now anchors to .header-wrap so it spans the container width */
.header-menu .main-menu > li {
    padding: 12px 0;
}
.header-menu .main-menu > li > .menu-icon,
.header-menu .main-menu > li > a > .menu-icon { display: none; }

/* Brand logo SVG */
.tcl-brand-logo,
.header-logo a img.tcl-brand-logo,
.offcanvas-logo a img.tcl-brand-logo {
    display: block;
    width: 188px !important;
    height: 40px !important;
    max-height: 40px;
    object-fit: contain;
}
/* Two-tone brand logo (Figma 46:2896): blue wave icon #0D80C8 + WHITE wordmark
 * on dark/overlay headers. Two SVG variants ship; CSS toggles which is visible.
 * Default (navy overlay) = white-text variant. */
.header-section .header-logo .tcl-brand-logo--dark { display: none; }
.header-section .header-logo .tcl-brand-logo--white { display: block; }
/* Light-header pages (apie-mus, Figma 1151:30065): header overlays a WHITE
 * hero → show the dark-text variant (blue icon + #231F20 wordmark) + dark menu
 * items + dark search icon. `tcl-light-header` is added to <body> via body_class. */
body.tcl-light-header .header-section .header-logo .tcl-brand-logo--white { display: none; }
body.tcl-light-header .header-section .header-logo .tcl-brand-logo--dark { display: block; }
body.tcl-light-header .header-menu .main-menu > li > a,
body.tcl-light-header .header-menu .main-menu > li > a:hover,
body.tcl-light-header .header-menu .main-menu > li.current-menu-item > a,
body.tcl-light-header .header-menu .main-menu > li.current-menu-parent > a {
    color: var(--tcl-text, #231F20);
    opacity: 1;
}
body.tcl-light-header .header-meta .tcl-header-search {
    color: var(--tcl-text, #231F20);
}

.header-menu .main-menu > li > a,
.header-menu .main-menu li .sub-menu li a {
    /* Match parent techwix rule's `.header-menu .main-menu li .sub-menu li a` exactly
     * (0,3,3) — our prior selector (0,3,2) lost to the parent and left mega-menu
     * items capitalized. Equal specificity, later in cascade → we win. */
    text-transform: none;
}
.header-menu .main-menu > li > a {
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    color: var(--tcl-white);     /* Figma: white menu items on navy hero */
    font-size: 16px;             /* Figma: 16px lh 20.8 */
    line-height: 20.8px;
    padding: 8px 14px;
    transition: color 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
    opacity: 0.92;
}
.header-menu .main-menu > li {
    margin: 0 2px;
}
.header-menu .main-menu > li > a:hover,
.header-menu .main-menu > li.current-menu-item > a,
.header-menu .main-menu > li.current-menu-parent > a {
    color: var(--tcl-white);
    opacity: 1;
}

/* Down-chevron affordance on top-level items that open a submenu — signals
 * "more to open". mask + currentColor so it matches the menu text colour
 * (white on navy header, dark on body.tcl-light-header). Same chevron shape as
 * the buttons, rotated to point down; flips up while the dropdown is open. */
.header-menu .main-menu > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s ease;
}
.header-menu .main-menu > li.menu-item-has-children:hover > a::after,
.header-menu .main-menu > li.menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
}

/* Header search icon (visual only — search functionality deferred) */
.header-meta .tcl-header-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--tcl-white);
    text-decoration: none;
    transition: opacity 0.18s ease;
    opacity: 0.92;
    margin-right: 8px;
}
.header-meta .tcl-header-search:hover { opacity: 1; }
.header-meta .tcl-header-search svg { width: 18px; height: 18px; stroke: currentColor; }

/* Sub-menu dropdowns from the white-on-navy header — keep them light surfaced */
.header-menu .main-menu .sub-menu {
    border-radius: var(--tcl-radius);
    box-shadow: var(--tcl-shadow);
    border: 1px solid rgba(9, 8, 72, 0.06);
    padding: 12px 0;
    background: var(--tcl-white);
}
.header-menu .main-menu .sub-menu li a {
    font-weight: 400;
    color: var(--tcl-text);
    font-size: 0.92rem;
    padding: 8px 20px;
}
.header-menu .main-menu .sub-menu li a:hover {
    color: var(--tcl-blue-text);
    background: rgba(0, 130, 197, 0.06);
}

/* === Mega menu (admin opt-in via CSS class on parent menu item) ============
 * Admin: Appearance → Menus → Screen Options → enable "CSS Classes",
 *        then add `mega-menu` to a top-level item with sub-items.
 * Optional sub-item classes:
 *   `mega-heading`      — renders as bold column header (no link styling)
 *   `mega-column-break` — starts a new column (CSS column-rule break)
 *   `mega-feature`      — highlighted "feature" tile with background
 *
 * When parent has class `mega-menu`, sub-menu becomes:
 *   - Full-width dropdown (1440 max), 4 columns, position relative to nav row
 *   - Items distributed across columns by CSS column-count
 */
.header-menu .main-menu > li.mega-menu { position: static; }      /* anchor to .header-menu, not the LI */
/* Mega menu panel — Figma Frame 1151:32678 (1440 padding 24, fill #FFFFFF, rounded-bl/br 16).
 * After JS restructure, DOM is:
 *   <ul.sub-menu>
 *     <li.mega-heading>
 *       <a>Title</a>
 *       <ul.mega-sublist><li><a>sub item</a></li>...</ul>
 *     </li>
 *     ... (6 cards total)
 *   </ul>
 * 6 cards lay out in 3 cols × 2 rows. */
.header-menu .main-menu > li.mega-menu > .sub-menu {
    position: absolute;
    top: calc(100% - 18px);                       /* tuck the panel up ~18px so the navy gap below the menu row is small (~10px) */
    left: 0;
    right: 0;                                     /* fill .header-wrap → left/right edges align with the site container */
    width: auto;
    padding: 32px 40px;                           /* a touch more inner breathing room than the content edge */
    border-radius: 0 0 16px 16px;                 /* Figma 1151:32678: rounded-bl/br 16 only */
    background: var(--tcl-white);
    box-shadow: 0 4px 8px rgba(9, 8, 72, 0.08);   /* Figma exact */
    /* 6 cards: 3 cols × 2 rows */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 28px;
    align-items: start;
    list-style: none;
    margin: 0;
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li {
    list-style: none;
    margin: 0;
}
/* Each .mega-heading <li> is now a CARD with: 24px icon (LEFT) + content column (heading + sublist). */
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 16px;                             /* Figma: gap 16 between icon and content */
    align-items: start;
}
/* Icon column — Figma 1151:32680 ships full-color gradient SVGs (navy → light-blue),
 * NOT monochrome mask icons. Use background-image directly so the gradient survives. */
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Default fallback — small navy gradient dot for items without an icon-* class
     * (e.g. Apie mus categories Įmonė/Atsakomybė/Darnumas which have no Figma icon). */
    background-image: radial-gradient(circle at 30% 30%, #ABE0F9 0%, #032587 60%);
    border-radius: 50%;
    /* mask the gradient to a smaller centered dot via clip-path */
    background-color: transparent;
}
/* Specific icons override the default via background-image — those don't need clip-path */
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading[class*="icon-"]::before {
    border-radius: 0;
    background-image: none;          /* reset before per-class rule sets it */
}
/* Heading link — Figma p18/bold (DM Sans 700, 18/23.4) */
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading > a {
    grid-column: 2;
    grid-row: 1;
    display: block;
    padding: 0;                                   /* override base .sub-menu li a 8/20 padding */
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: 23.4px;
    color: #231F20;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    margin-bottom: 16px;                          /* tightened from Figma 24 for a denser panel */
    transition: color 0.15s ease;
    cursor: default;                              /* non-navigable label, not a link */
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading > a:hover {
    color: #231F20;                               /* static label — no link hover cue */
}
/* Some heading cards ARE real links (Naujienos categories, Karjera pages) — those
   show the link cursor. Non-navigable label headings (Apie mus / Paslaugos) render
   an <a> with no href, so they keep cursor:default from the rule above. */
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading > a[href]:not([href="#"]):not([href=""]) {
    cursor: pointer;
}
/* Sub-items list inside each card (created by JS restructure) */
.header-menu .main-menu > li.mega-menu > .sub-menu .mega-sublist {
    grid-column: 2;
    grid-row: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;                                    /* tightened from Figma 16 */
}
.header-menu .main-menu > li.mega-menu > .sub-menu .mega-sublist li {
    list-style: none;
    margin: 0;
}
.header-menu .main-menu > li.mega-menu > .sub-menu .mega-sublist a {
    display: block;
    padding: 0;                                   /* override base .sub-menu li a 8/20 padding */
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;                              /* Figma p16/regular */
    line-height: 20.8px;
    color: #231F20;
    text-decoration: none;
    transition: color 0.15s ease;
}
.header-menu .main-menu > li.mega-menu > .sub-menu .mega-sublist a:hover,
.header-menu .main-menu > li.mega-menu > .sub-menu .mega-sublist .current-menu-item > a {
    color: var(--tcl-blue-text);                       /* Figma #0082C5 hover/active */
}
/* (Legacy `.mega-heading > a::before` icon rule removed — icon now sits on
 *  `.mega-heading::before` at the LI level per Figma 1151:32678 grid layout.) */
/* Per-category icon — Figma 1151:32680 navy→light-blue gradient SVGs.
 * Stored separately from the existing /icons/ directory because those are white-on-navy
 * outlines for the home services section, while these are colored for the white mega menu. */
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-radijo::before {
    background-image: url('../images/design/icons/mega-menu/radijo.svg');
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-duomenys::before {
    background-image: url('../images/design/icons/mega-menu/duomenys.svg');
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-centralizuoti::before {
    background-image: url('../images/design/icons/mega-menu/centralizuoti.svg');
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-saugumas::before {
    background-image: url('../images/design/icons/mega-menu/saugumas.svg');
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-perdavimas::before {
    /* Duomenų perdavimas → servers glyph (lives in infrastruktura.svg) */
    background-image: url('../images/design/icons/mega-menu/infrastruktura.svg');
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-infrastruktura::before {
    /* Infrastruktūros nuoma → tower glyph (lives in perdavimas.svg) */
    background-image: url('../images/design/icons/mega-menu/perdavimas.svg');
}
/* Apie mus mega-menu icons (auto-assigned by Tobalt\Menu\map_apie_mus_heading_classes filter) */
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-imone::before {
    background-image: url('../images/design/icons/mega-menu/imone.svg');
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-atsakomybe::before {
    background-image: url('../images/design/icons/mega-menu/atsakomybe.svg');
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-heading.icon-darnumas::before {
    background-image: url('../images/design/icons/mega-menu/darnumas.svg');
}
/* `.mega-column-break` is a no-op in the new card grid — kept as legacy class for
 * admin-set menu items but doesn't force grid-column-start (which broke Apie mus
 * by stacking 3 cards vertically: each was forced to column 1). With proper
 * grid-template-columns:repeat(3,1fr), cards flow naturally row-by-row. */
/* mega-feature: highlighted tile (kept from earlier; less common in Figma 1151:32678 but supported) */
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-feature > a {
    background: linear-gradient(135deg, var(--tcl-blue) 0%, #1AA0DD 100%);
    color: var(--tcl-white);
    padding: 16px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px;
}
.header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-feature > a:hover {
    background: linear-gradient(135deg, var(--tcl-blue-hover, #006da6) 0%, #0e8bc8 100%);
    color: var(--tcl-white);
}
/* Show on hover — default WP nav uses :hover for desktop dropdowns.
 * Default-hidden via opacity + visibility (NOT display:none, which would override
 * the panel's display:grid layout when restored). */
.header-menu .main-menu > li.mega-menu > .sub-menu {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
.header-menu .main-menu > li.mega-menu:hover > .sub-menu,
.header-menu .main-menu > li.mega-menu:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s ease, visibility 0s linear 0s;
}
@media (max-width: 991px) {
    /* Mobile: collapse to single-column accordion (handled by offcanvas anyway) */
    .header-menu .main-menu > li.mega-menu > .sub-menu {
        grid-template-columns: 1fr;
        position: static;
        transform: none;
        width: 100%;
        padding: 16px;
    }
    .header-menu .main-menu > li.mega-menu > .sub-menu > li.mega-column-break {
        grid-column-start: auto;
    }
}

/* Hero now starts at y=0 since header is absolute overlay.
 * Both home hero (.tcl-hero-section) and inner-hero (.tcl-inner-hero) have
 * their own padding-top tuned for header clearance — see those sections. */

/* Primary CTA — Figma-exact: padding 12/32, radius 4, font 18 lh 23.4 */
.btn.tcl-btn-primary,
.tcl-btn-primary {
    background: var(--tcl-blue-text);
    color: var(--tcl-white) !important;
    border: 0;
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-medium);
    font-size: var(--tcl-fs-lead);
    line-height: 1.3;
    padding: 12px 32px;
    border-radius: var(--tcl-radius-button);
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn.tcl-btn-primary:hover,
.tcl-btn-primary:hover {
    background: #006BA3;   /* darker blue hover — AA-safe with white text (was #6AA7D5=2.6:1) */
    transform: translateY(-1px);
}
/* Techwix .btn paints dark #0e0e0e ::before/::after overlays that wipe over the
 * button on hover (z-index:-1 but ABOVE the button background) — that's the
 * "black hover". Recolour them to the brand hover so the wipe stays on-brand. */
.btn.tcl-btn-primary::before,
.btn.tcl-btn-primary::after {
    background: #6AA7D5 !important;
}
/* Smaller variant for service-card Plačiau (Figma: 110x33, padding 6/16, font 16 lh 20.8) */
.tcl-btn-primary.tcl-btn-sm {
    padding: 6px 16px;
    font-size: var(--tcl-fs-body);
    line-height: 1.3;
}

/* Hide vendor demo placeholder images until client content is uploaded.
 * Real scraped photos live in /wp-content/uploads/ and filenames start with
 * `tcl-` (see scraper), so these selectors only match the bundled /assets/
 * placeholder graphics. */
img[src*="/hero/hero-img"],
img[src*="/about/about-img"],
img[src*="/about-big"],
img[src*="/about-sm"],
img[src*="/blog/blog-"],
img[src*="/blog-details/"],
img[src*="/case-study/"],
img[src*="/case-"],
img[src*="/testimonial/"],
img[src*="/team/team-"],
img[src*="/brand/brand-"],
img[src*="/brand-"],
img[src*="/shop/shop-cart-"],
img[src*="/shop-cart-"],
img[src*="/shape/sign"],
img[src*="/sign.png"] {
    visibility: hidden;
}

/* Collapse the right-side image column in the hero so the hero
 * doesn't show a big empty box. */
.techwix-hero-section-03 .hero-img:has(img[src*="/hero/hero-img"]),
.techwix-hero-section-03 .hero-img:has(img[src*="hero-img"]) {
    display: none;
}

/* Collapse the stacked about-04 image column when placeholders are inside it. */
.techwix-about-section-04 .about-img-wrap:has(img[src*="about-big"]),
.techwix-about-section-04 .about-img-wrap:has(img[src*="about-sm"]),
.techwix-about-section-04 .about-img-wrap:has(img[src*="/about/about-img"]) {
    display: none;
}

/* Blog card thumbnail fallback — collapse the thumb container if it wraps a placeholder. */
.techwix-blog-section .single-blog .blog-thumb:has(img[src*="/blog/blog-"]),
.techwix-blog-section .single-blog .blog-thumb:has(img[src*="blog-"]) {
    display: none;
}

/* Team card photo — collapse the image wrapper ONLY when it contains a
 * Vendor placeholder (filenames under /assets/images/techwix-originals/team/).
 * Real scraped photos live under /wp-content/uploads/ and render normally. */
.techwix-team-section .single-team .team-img:has(img[src*="/techwix-originals/team/"]) {
    display: none;
}

/* Sign image caption block (Alen Morno sin) fallback — handled by template edit,
 * but keep author image hidden as belt+braces in case a cached partial lingers. */
.about-author img[src*="sign"] {
    display: none;
}

/* === Hero (AINIS Space) — Frame 1151:28465 structured rebuild 2026-05-06 === */
.tcl-hero {
    /* Card spec: 1856×640 design canvas, padding 164/8/164/8 (Figma EXACT —
     * symmetric top+bottom for vertical centering), radius 32, fill #090848.
     * Figma parent (1151:28464) has px-32 — card breathes 32px from viewport edges.
     * Cap card at 1856 design width so wider viewports don't drift the .container
     * (1440 max-width, centered) right as the card grows. */
    position: relative;
    background: var(--tcl-navy) !important;
    color: var(--tcl-white);
    padding: 164px 8px;
    height: auto !important;
    min-height: 640px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--tcl-radius-panel);       /* Figma exact: rounded ALL 4 corners */
    max-width: 1920px;                             /* Figma design canvas width */
    width: calc(100% - 4vw);                       /* 2vw breathing room on each side */
    /* Explicit margins (not `auto`) — auto resolved to 0/0 in this stylesheet
     * cascade on 2026-05-13 (verified with display:block AND display:flex,
     * both broke). max() also keeps the card centered at viewports > 1920px
     * where the design canvas caps and extra space grows symmetrically. */
    margin-left: max(2vw, calc((100% - 1920px) / 2));
    margin-right: max(2vw, calc((100% - 1920px) / 2));
}
.tcl-hero-decor {
    /* Decoration layer fills card; SVG composites use viewBox 0 0 1920 640
     * (Figma exact) with preserveAspectRatio "slice" so decorations scale
     * with card and stay at correct relative positions across viewports. */
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.tcl-hero-decor img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    user-select: none;
}
.tcl-hero-blobs {
    /* Gaussian-blurred ellipse halos behind everything. */
    z-index: 0;
}
/* `.tcl-hero-decor img` (specificity 0,1,1) sets inset:0 + height:100%, so a
 * bare `.tcl-hero-silhouettes` (0,1,0) can't override top/height. Match the
 * img too (0,2,1) so the height + bottom-anchor below actually win. */
.tcl-hero-decor img.tcl-hero-silhouettes {
    /* City + TV-tower silhouettes — multiplied by navy via hard-light.
     * Anchored to the BOTTOM of the card at a reduced height so the city +
     * tower read as a skyline band rather than stretching the full card
     * height behind the title (object-fit:fill on the full-height img made
     * them too tall — flagged 2026-06-20). cover + center-bottom keeps the
     * SVG aspect and crops symmetrically off the top. Mobile media blocks
     * below re-anchor for the compact card and override this height. */
    z-index: 1;
    mix-blend-mode: hard-light;
    top: auto;
    height: 70%;
    object-fit: cover;
    object-position: center bottom;
}
@media (max-width: 991px) {
    /* Mobile keeps decoration but anchors silhouettes to BOTTOM of the tall
     * mobile card (Figma 1191:3874 design — city + tower at card bottom-center,
     * not L+R like desktop). preserveAspectRatio override via CSS object-fit. */
    .tcl-hero-decor { display: block; }
    .tcl-hero-decor img {
        object-fit: cover;
        object-position: center bottom;
    }
    /* Blobs at full card behind everything (give soft navy ambience) */
    .tcl-hero-blobs { opacity: 0.7; }
    /* Silhouettes only show in BOTTOM 50% of mobile card (Figma intent) */
    .tcl-hero-silhouettes {
        top: 50%;
        height: 50%;
        bottom: 0;
        inset: auto 0 0 0;
    }
}
.tcl-hero .container {
    /* Override Bootstrap's .container max-width (1296 at xxl). Figma Frame 12
     * specifies 1440 content width inside the 1856 card. Without this override
     * Bootstrap clamped content to 1296, forcing the title to wrap wider and
     * overlap the silhouettes more than Figma intends. */
    position: relative;
    z-index: 2;
    max-width: 1440px;
}
.tcl-hero-content {
    /* Figma Frame 12: 1440px content width inside the 1856 card. Capped at
     * 1440 here so title can render in 2 lines (Figma) at desktop instead of
     * wrapping to 3+ lines as it did at the prior 920px max-width — that
     * 3-line wrap was the "squeezed in height" symptom user flagged. */
    text-align: center;
    max-width: 1440px;
    margin: 0 auto;
}
.tcl-hero-title {
    /* Figma: DM Sans 700, 64px @ 1856 design width, lh 76.8, CENTER aligned.
     *
     * Font scales LINEARLY with viewport so card+text proportions stay
     * Figma-faithful at any width:
     *   64 / 1856 × 100vw = 3.45vw → 64px at 1856vp, ~50px at 1440vp, etc.
     * Clamped 28-64 so it doesn't shrink unreadably small on mobile or
     * grow past Figma intent on ultra-wide.
     *
     * letter-spacing: -0.04em compensates for the browser-vs-Figma DM Sans
     * metric difference — empirically verified cap-height matches (~44px
     * both) but glyph advance is 11% wider in browser. Tightening here
     * prevents the title from overlapping the side silhouettes more than
     * the designer intended. */
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-bold);
    /* Hard-clamp max at 56px (down from Figma 64) so title doesn't bleed
     * into silhouettes at smaller viewports. Figma renders at 1856 where
     * 64px fits the clear center; at smaller cards the same 64 forces
     * title across silhouettes. 56px is a compromise: less Figma-faithful
     * size but the "text overlaps elements" perception is resolved. */
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--tcl-white);
    /* Text-shadow improves legibility where title naturally overlaps the
     * decorative silhouettes (Figma design intent: title sits ON silhouette
     * graphics, not in a clear gap — the layered look). */
    text-shadow: 0 2px 16px rgba(9, 8, 72, 0.6);
    margin: 0 0 16px;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
}
.tcl-hero-subtitle {
    /* Figma: DM Sans 500, 18px, lh 23.4 */
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-medium);
    font-size: var(--tcl-fs-lead);
    line-height: 1.3;
    color: var(--tcl-white);
    max-width: 720px;
    margin: 0 auto 40px;
}
.tcl-hero-cta .tcl-btn-primary {
    padding: 12px 32px;            /* Figma: 12/32 → height 47 (matches Component 7 spec) */
    font-size: 18px;
    line-height: 23.4px;
}
.tcl-btn-arrow {
    margin-left: 0;                /* gap:8 already on parent flex container */
    font-weight: 400;
    transition: transform 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.tcl-btn-arrow svg {
    width: 16px;
    height: 16px;
    display: block;
}
/* Visually hide the legacy `›` text fallback when an SVG is present */
.tcl-btn-arrow:has(svg) > .tcl-btn-arrow-text { display: none; }
.tcl-btn-primary:hover .tcl-btn-arrow {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .tcl-hero {
        padding: 80px 8px;            /* symmetric, scaled-down for tablet */
        min-height: 480px;
    }
}
@media (max-width: 600px) {
    .tcl-hero {
        padding: 56px 8px;            /* tighter on mobile so the card isn't a wall */
        min-height: 400px;
    }
}

/* === Inner-page hero — Figma Frame 13 (1856x301, padding 119/8/64/8, fill #090848 r=32) === */
.tcl-inner-hero {
    /* Card spec: 1856×301 design canvas, padding 119/8/64, radius 32 ALL corners, fill #090848.
     * Cap card at 1856 design width — same rationale as .tcl-hero. */
    position: relative;
    /* Techwix's `.section { float:left; width:100% }` leaks onto this full-width
     * banner; the floated hero then sits OUTSIDE flow so the following content box
     * (and its top padding) renders behind it and the text glues to the hero. Keep
     * the hero a normal block so content clears it with the intended spacing. */
    float: none;
    clear: both;
    background: var(--tcl-navy) !important;
    color: var(--tcl-white);
    padding: 140px 8px 64px;
    max-width: 1920px;                             /* Figma design canvas width */
    width: calc(100% - 4vw);                       /* 2vw breathing room on each side */
    /* Explicit margins (not `auto`) — same fix as .tcl-hero, see comment there. */
    margin-left: max(2vw, calc((100% - 1920px) / 2));
    margin-right: max(2vw, calc((100% - 1920px) / 2));
    border-radius: var(--tcl-radius-panel);       /* Figma exact: rounded ALL 4 corners */
    overflow: hidden;
    min-height: 301px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.tcl-inner-hero .container { position: relative; z-index: 2; }

/* Decoration layer — fills card; SVG composites use viewBox 0 0 1920 301 (Figma exact). */
.tcl-ih-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.tcl-ih-decor img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    user-select: none;
}
.tcl-ih-blobs {
    /* Gaussian-blurred ellipse halos behind everything */
    z-index: 0;
}
.tcl-ih-silhouettes {
    z-index: 1;
    /* Solid (no blend) so the building bases read flush in the bottom-right
     * corner; hard-light faded the lower edge into the navy gradient and made
     * the cluster look like it floated too high. */
}
/* Silhouettes = Figma group 1151:29722, natural 414×218 in a 1856-wide hero
 * → 22.3% of hero width. Scale proportionally so the cluster reads at the
 * same relative size whether the viewport is 1280, 1440, or 1920.
 * Specificity-matched override of `.tcl-ih-decor img { width:100%; height:100%;
 * inset:0 }` (0,2,1 > 0,1,1). */
.tcl-ih-decor img.tcl-ih-silhouettes {
    inset: auto 0 -4px auto;            /* bottom -4px: bleed the base to the very bottom (overflow:hidden clips overshoot) so no residual gap */
    width: 30%;                         /* enlarged so the cluster anchors the corner */
    max-width: 520px;
    min-width: 280px;
    height: auto;                       /* preserves 414:218 ratio */
}

/* Breadcrumb — Pagrindinis › Page Title */
.tcl-ih-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--tcl-font-sans);
    font-weight: 300;
    font-size: 14px;
    line-height: 18.2px;
    color: var(--tcl-white);
    margin-bottom: 16px;
}
.tcl-ih-breadcrumb a { color: var(--tcl-white); text-decoration: none; opacity: 0.9; }
.tcl-ih-breadcrumb a:hover { opacity: 1; }
.tcl-ih-crumb-sep { opacity: 0.6; padding: 0 4px; }
.tcl-ih-crumb-current { color: #ABE0F9; font-weight: 500; }

/* Title — DM Sans 700 44/52.8 white */
.tcl-ih-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 44px);
    line-height: 1.2;
    color: var(--tcl-white);
    margin: 0;
    letter-spacing: -0.01em;
}
/* Subtitle — DM Sans 500 18/23.4 white */
.tcl-ih-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 23.4px;
    color: var(--tcl-white);
    margin: 8px 0 0;
    max-width: 720px;
}

/* CTA button — paslaugos inner-hero variant (Figma 1151:29759 "Component 7"). */
.tcl-ih-cta {
    margin-top: 16px;
}
.tcl-ih-cta .tcl-btn-primary {
    padding: 12px 32px;
    font-size: 18px;
    line-height: 1.3;
}
/* Variant gets a bit more bottom padding to accommodate the button. */
.tcl-inner-hero--with-cta {
    padding-bottom: 80px;
    min-height: 364px;
}

@media (max-width: 991px) {
    .tcl-inner-hero { padding: 96px 16px 48px; min-height: 240px; }
    .tcl-inner-hero--with-cta { padding-bottom: 64px; min-height: auto; }
    .tcl-ih-decor { display: none; }
}

/* === Inner page body content (.tcl-page-content) === */
.tcl-page {
    background: var(--tcl-white);
}
.tcl-page-container {
    max-width: 1194px;
    margin: 0 auto;
    padding: 56px 16px 80px;
}
.tcl-page-content {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;   /* airier reading rhythm — matches the /apie-mus editorial feel (was a tight 1.3) */
    color: #727376;
}
.tcl-page-content p,
.tcl-page-content li { line-height: 1.65; }
.tcl-page-content > * + * { margin-top: 18px; }
.tcl-page-content ul > li,
.tcl-page-content ol > li { margin-bottom: 10px; }
.tcl-page-content > h1 { font-size: 44px; line-height: 52.8px; font-weight: 700; color: #231F20; margin-top: 40px; }
.tcl-page-content > h2 { font-size: 28px; line-height: 33.6px; font-weight: 700; color: #231F20; margin-top: 40px; }
.tcl-page-content > h3 { font-size: 24px; line-height: 28.8px; font-weight: 700; color: #231F20; margin-top: 32px; }
.tcl-page-content > h4 { font-size: 18px; line-height: 23.4px; font-weight: 700; color: #231F20; margin-top: 24px; }
.tcl-page-content > h5 { font-size: 18px; line-height: 23.4px; font-weight: 700; color: #231F20; margin-top: 24px; }
.tcl-page-content > h6 { font-size: 16px; line-height: 20.8px; font-weight: 700; color: #231F20; margin-top: 20px; }
.tcl-page-content > p  { color: #727376; }
.tcl-page-content a    { color: var(--tcl-blue-text); text-decoration: underline; }
.tcl-page-content a:hover { color: var(--tcl-blue-hover); }
.tcl-page-content strong { color: #231F20; font-weight: 700; }
.tcl-page-content ul,
.tcl-page-content ol { padding-left: 24px; color: #727376; }
.tcl-page-content li { margin-bottom: 8px; }
.tcl-page-content blockquote {
    border-left: 4px solid var(--tcl-blue);
    padding: 8px 0 8px 20px;
    margin: 24px 0;
    color: #231F20;
    font-style: italic;
}
.tcl-page-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0;
}
.tcl-page-content table th,
.tcl-page-content table td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border: 1px solid rgba(9, 8, 72, 0.08);
    font-size: 16px;
    line-height: 20.8px;
}
.tcl-page-content table th {
    color: #231F20;
    font-weight: 700;
    background: rgba(9, 8, 72, 0.02);
}
.tcl-page-content table td { color: #727376; }
.tcl-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tcl-radius-card);
    margin: 24px 0;
}
/* === Figma 1151:32031 content polish (applies to all default-template pages) === */
.tcl-page-content > *:first-child { margin-top: 0; }
/* Branded bullet markers (blue dot) per the AINIS content design */
.tcl-page-content ul { list-style: none; padding-left: 0; }
.tcl-page-content ul > li { position: relative; padding-left: 26px; }
.tcl-page-content ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tcl-blue);
}
.tcl-page-content ul ul { margin-top: 8px; }
/* Rounded, clean comparison tables (Figma 4-col grids) */
.tcl-page-content table {
    border: 1px solid rgba(9, 8, 72, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
.tcl-page-content table th:first-child,
.tcl-page-content table td:first-child { border-left: 0; }
.tcl-page-content table tr:first-child th,
.tcl-page-content table tr:first-child td { border-top: 0; }
/* Wide tables scroll horizontally on mobile instead of overflowing */
@media (max-width: 767px) {
    .tcl-page-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tcl-page-content table th,
    .tcl-page-content table td { min-width: 150px; }
}

/* === Text-page content sections (ACF tcl_sections, Figma 1151:32032) ===
 * Each section = 44px title + optional 18px subtitle + a .tcl-page-content body
 * (which carries all the editorial body/bold/list/link styling above). */
.tcl-sections { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.tcl-section   { display: flex; flex-direction: column; gap: 16px; }   /* Figma 16px block rhythm */
.tcl-sections .tcl-section-title {   /* subsection heading (matches the editorial h2 scale) */
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #231F20;
    margin: 0;
}
/* The first section is the page lead — keep the full Figma 44px headline. */
.tcl-sections .tcl-section:first-child .tcl-section-title {
    font-size: 44px;
}
.tcl-section-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    margin: 0;
}
/* The section body reuses .tcl-page-content; just reset its leading block margin
 * so the 16px section gap is the only space under the title/subtitle. */
.tcl-section-content > *:first-child { margin-top: 0; }
@media (max-width: 767px) {
    .tcl-sections .tcl-section-title { font-size: 24px; }
    .tcl-sections .tcl-section:first-child .tcl-section-title { font-size: 30px; }
    .tcl-sections { gap: 36px; }
}

/* Featured image on single posts */
.tcl-post-featured { margin-bottom: 32px; }
.tcl-post-featured img { width: 100%; height: auto; border-radius: var(--tcl-radius-card); display: block; }

/* === Naujienos single — Figma 1151:31541 social share + related grid === */
.tcl-news-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    margin: 40px 0 0;
    background: #f8fafc;
    border-radius: 12px;
}
.tcl-news-share-text { display: flex; flex-direction: column; gap: 4px; }
.tcl-news-share-text strong { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--tcl-text); }
.tcl-news-share-text span { font-size: 14px; color: #727376; }
.tcl-news-share-links { display: flex; gap: 24px; align-items: center; }
.tcl-news-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--tcl-blue-text);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.tcl-news-share-link:hover { opacity: 0.7; transform: translateY(-1px); }

/* === Single post (Naujiena) — Figma 1151:31541 / 31680 === */
.tcl-single { display: block; padding-top: 8px; padding-bottom: 56px; }

/* Centered title block — Figma 1151:31681 */
.tcl-single-head {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 24px 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.tcl-single-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.2;
    color: #231F20;
    margin: 0;
    width: 100%;
}
.tcl-single-excerpt {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    margin: 0;
    max-width: 1100px;
}
.tcl-single-meta {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
}
.tcl-single-date {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
}

/* Featured image card — Figma 1151:31691 (950×450, inner padding 12, radius 32 + 24, shadow) */
.tcl-single-featured {
    max-width: 950px;
    margin: 0 auto 40px;
    padding: 0 16px;
}
.tcl-single-featured-inner {
    padding: 12px;
    background: var(--tcl-white);
    border-radius: 32px;
    box-shadow: 0 0 21px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.tcl-single-featured-img,
.tcl-single-featured-inner img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 24px;
}

/* Content stack — 1000px column */
.tcl-single-stack {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.tcl-pb { margin: 0; }

/* paragraph layout */
.tcl-pb-paragraph,
.tcl-pb-paragraph p {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
}
.tcl-pb-paragraph > * + * { margin-top: 16px; }
.tcl-pb-paragraph h2 { font-family: var(--tcl-font-sans); font-weight: 700; font-size: 28px; line-height: 1.2; color: #231F20; margin-top: 24px; }
.tcl-pb-paragraph h3 { font-family: var(--tcl-font-sans); font-weight: 700; font-size: 22px; line-height: 1.2; color: #231F20; margin-top: 20px; }
.tcl-pb-paragraph a { color: var(--tcl-blue-text, #0073B2); text-decoration: underline; }
.tcl-pb-paragraph a:hover { color: var(--tcl-blue-hover, #006BA3); }
.tcl-pb-paragraph strong { color: #231F20; font-weight: 700; }
.tcl-pb-paragraph ul, .tcl-pb-paragraph ol { padding-left: 20px; }
.tcl-pb-paragraph li + li { margin-top: 8px; }

/* image_collage_3 — Figma 1151:31698 (3 × 300×300 radius 16 gap 40, centered) */
.tcl-pb-collage-3 {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
}
.tcl-pb-collage-item {
    width: 300px;
    height: 300px;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #f4f6f8;
}
.tcl-pb-collage-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* video — Figma 1151:31706 (~900×506 radius 16, embed or file) */
.tcl-pb-video { width: 100%; }
.tcl-pb-video-embed {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #000;
}
.tcl-pb-video-embed iframe,
.tcl-pb-video-embed video,
.tcl-pb-video-embed .fluid-width-video-wrapper {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    border: 0;
}
.tcl-pb-video-file {
    width: 100%;
    border-radius: 16px;
    background: #000;
    display: block;
}

/* quote — branded blockquote */
.tcl-pb-quote {
    margin: 0;
    padding: 24px 28px;
    background: rgba(0, 130, 197, 0.06);
    border-left: 4px solid #0082C5;
    border-radius: 0 16px 16px 0;
}
.tcl-pb-quote-text {
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #231F20;
    margin: 0 0 12px;
    font-style: italic;
}
.tcl-pb-quote-author {
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: #727376;
    font-style: normal;
}

/* stat_strip — N tiles, brand blue accents */
.tcl-pb-stats {
    display: grid;
    grid-template-columns: repeat(var(--tcl-pb-stats-count, 3), minmax(0, 1fr));
    gap: 24px;
}
.tcl-pb-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
    background: var(--tcl-white);
    border-radius: 16px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
}
.tcl-pb-stat-number {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    color: #0073B2;
}
.tcl-pb-stat-label {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #727376;
}

/* Dark gradient share — Figma 1151:31718 (#090848 → #161BCB, border #E0E5C4, radius 16) */
.tcl-single-share {
    max-width: 1000px;
    margin: 56px auto 0;
    padding: 24px;
    background: linear-gradient(173deg, #090848 3%, #161BCB 100%);
    border: 1px solid #E0E5C4;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
}
.tcl-single-share-text { display: flex; flex-direction: column; gap: 0; }
.tcl-single-share-text strong {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
}
.tcl-single-share-text span {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #fff;
}
.tcl-single-share-links { display: flex; gap: 24px; align-items: center; }
.tcl-single-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fff;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.tcl-single-share-link:hover { opacity: 0.75; transform: translateY(-1px); }

/* Related section ("Panašūs straipsniai") — reuse .tcl-news-card-page but in a wrap */
.tcl-news-related-section {
    padding-top: 32px;
    padding-bottom: 32px;
}
.tcl-news-related-section .tcl-news-related-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: #231F20;
    text-align: center;
    margin: 0 0 32px;
}

@media (max-width: 900px) {
    .tcl-single-title { font-size: 28px; }
    .tcl-single-meta { flex-direction: column; gap: 12px; }
    .tcl-single-featured-img,
    .tcl-single-featured-inner img { height: 240px; }
    .tcl-single-featured-inner { padding: 8px; border-radius: 20px; }
    .tcl-pb-collage-item { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; }
    .tcl-pb-stats { grid-template-columns: 1fr; }
    .tcl-single-share { flex-direction: column; align-items: flex-start; gap: 16px; }
    .tcl-single-stack { gap: 28px; }
}

/* === Naujienos related list (legacy single.php block — keep until removed) === */
.tcl-news-related { padding: 80px 0; background: var(--tcl-white); }
.tcl-news-related-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: #000;
    text-align: center;
    margin: 0 0 40px;
}
.tcl-news-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto;
}
@media (max-width: 600px) { .tcl-news-related-grid { grid-template-columns: 1fr; } }

/* === Naujienos (Figma 1151:31498 / 31511 / 31527) — pixel-faithful === */
/* Outer wrap: 2 × 680 cards + 32 gap + 16 padding each side = 1424 max */
.tcl-naujienos-wrap {
    max-width: 1424px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}
.tcl-naujienos { background: var(--tcl-white); clear: both; display: block; width: 100%; }
.tcl-naujienos-wrap--grid { padding-top: 32px; padding-bottom: 0; }

/* 2-col grid (Figma 1151:31511) — gap 32 */
.tcl-news-grid-page {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 991px) { .tcl-news-grid-page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Card (Figma 886:18912) — 680×534, padding 24, radius 24, shadow */
.tcl-news-card-page {
    background: var(--tcl-white);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 534px;
}
.tcl-news-card-page .tcl-news-thumb-link {
    position: relative;
    display: block;
    height: 280px;
    flex: 0 0 280px;
    border-radius: 16px;
    overflow: hidden;
}
.tcl-news-thumb-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    background: #f4f6f8;
}
.tcl-news-thumb-wrap > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    z-index: 0;
}
.tcl-news-thumb-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #E6F3FB 0%, #c6ddec 100%);
    z-index: 0;
}
.tcl-news-card-page:hover .tcl-news-thumb-wrap > img { transform: scale(1.04); }

/* Badge — pill, blue #0082C5, megaphone icon + 14px white text */
.tcl-news-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tcl-blue-text);
    color: #fff;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    padding: 4px 12px;
    border-radius: 50px;
    align-self: flex-start;
    text-decoration: none;
}
.tcl-news-badge-icon { width: 16px; height: 16px; flex: 0 0 16px; color: #fff; }

.tcl-news-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.tcl-news-card-page-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #231F20;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcl-news-card-page-title a { color: inherit; text-decoration: none; }
.tcl-news-card-page-title a:hover { color: #0073B2; }
.tcl-news-card-excerpt {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcl-news-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.tcl-news-readmore-page {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #231F20;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.18s ease;
}
.tcl-news-readmore-page svg { width: 16px; height: 16px; }
.tcl-news-readmore-page:hover { color: #0073B2; }
.tcl-news-card-date {
    color: #727376;
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
}

/* Pagination (Figma 1151:31527) — text-only, gap 24 */
.tcl-pagination {
    margin: 32px 0 80px;
}
.tcl-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.tcl-pagination .page-numbers {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    min-width: auto;
    transition: color 0.18s ease;
}
.tcl-pagination .page-numbers:hover { color: #0073B2; }
.tcl-pagination .page-numbers.current,
.tcl-pagination .page-numbers[aria-current="page"] { color: #0073B2; }
.tcl-pagination .dots { color: #727376; }

@media (max-width: 900px) {
    .tcl-news-grid-page { grid-template-columns: 1fr; gap: 24px; }
    .tcl-news-card-page { min-height: 0; gap: 16px; padding: 16px; border-radius: 16px; }
    .tcl-news-card-page .tcl-news-thumb-link { height: 220px; flex: 0 0 220px; }
    .tcl-news-card-page-title { font-size: 20px; }
    .tcl-news-card-excerpt { font-size: 16px; -webkit-line-clamp: 3; }
    .tcl-news-readmore-page, .tcl-news-card-date { font-size: 16px; }
    .tcl-pagination { margin: 24px 0 56px; }
}

/* === Service grid — Figma Frame 1984078013: padding 56/16/32/16, gap 32 === */
.tcl-service-grid {
    background: var(--tcl-white) !important;
    background-image: none !important;
    padding: 56px 16px 32px;
    position: relative;
    z-index: 3;
}
.tcl-service-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 32px;
    max-width: var(--tcl-container);
    margin: 0 auto;
}
@media (max-width: 1199px) { .tcl-service-row { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 767px)  { .tcl-service-row { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px)  { .tcl-service-row { grid-template-columns: 1fr; } }

/* Service card — Figma Frame 16: 213x244, padding 16, gap 16, fill #090C51, radius 16, shadow 0 0 16 rgba(9,8,72,0.16) */
.tcl-service-card {
    background: var(--tcl-navy-2);                  /* #090C51 */
    color: var(--tcl-white);
    border-radius: var(--tcl-radius-card);          /* 16 */
    padding: 16px;
    box-shadow: var(--tcl-shadow-card);             /* 0 0 16 rgba(9,8,72,0.16) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 0;
}
.tcl-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(9, 8, 72, 0.30);
}
/* Icon — 40x40 white, Figma "voice-recording (1) 1" / "cloud (1) 1" / etc */
.tcl-service-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--tcl-white);
}
.tcl-service-icon i { color: var(--tcl-white); font-size: 28px; line-height: 1; }
.tcl-service-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: none;     /* SVG icons ship white-fill from Figma */
}
.tcl-service-title {
    /* Figma: DM Sans 500, 18px, lh 23.4, align CENTER */
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-medium);
    font-size: var(--tcl-fs-lead);
    line-height: 1.3;
    margin: 0;
    color: var(--tcl-white);
}
.tcl-service-text {
    /* Figma: DM Sans 400, 14px, lh 18.2 */
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-regular);
    font-size: var(--tcl-fs-small);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}
/* Service-card Plačiau button — Figma 110x33, padding 6/16, radius 4 (smaller than hero CTA) */
.tcl-service-link {
    color: var(--tcl-white) !important;
    background: var(--tcl-blue-text);
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-medium);
    font-size: var(--tcl-fs-body);
    line-height: 1.3;
    padding: 6px 16px;
    border-radius: var(--tcl-radius-button);
    text-decoration: none;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.18s ease;
}
.tcl-service-link:hover { background: var(--tcl-blue-hover); }

/* === CTA banner — pixel-exact Figma Frame 1984078075 / Frame 51 ===
 * Outer (Frame 1984078075): 1440x365, py 80
 * Inner panel (Frame 51): 1194x205 max-width centered, padding 40/80/40/32, fill #ABE0F9, r=32
 *
 * Per Figma layoutPositioning audit: ALL 4 confetti shapes are ABSOLUTE
 * (Rect 18 + Rect 21 + Rect 20 + Group 27); only the text+button row is
 * in the panel's flex flow. Rect 20 and Group 27 INTENTIONALLY extend
 * past the panel edges — the panel does NOT clip overflow.
 */
.tcl-cta-banner-section {
    padding: 80px 0;
    background: transparent;
}
.tcl-cta-banner-wrap {
    max-width: 1440px;
    margin: 0 auto;
}
.tcl-cta-banner {
    position: relative;
    background: #ABE0F9;
    border-radius: 32px;
    padding: 40px 80px 40px 32px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
    max-width: 1194px;
    margin: 0 auto;
    overflow: hidden;     /* Figma Frame 51 clipsContent=true — Rect 20 + Group 27 are partially clipped at the rounded-32px panel edge */
}

/* Floating confetti shapes — absolute positions relative to Frame 51 */
.tcl-cta-shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.tcl-cta-shape-1 {              /* Rect 18: 40x40 #8CBC71 r=4 — green sq lower-left */
    width: 40px; height: 40px;
    background: #8CBC71;
    border-radius: 4px;
    left: 68.5px;
    top: 109px;
}
.tcl-cta-shape-2 {              /* Rect 21: 103x54 #79BBF1 r=100 — light-blue pill lower-left */
    width: 103px; height: 54px;
    background: #79BBF1;
    border-radius: 100px;
    left: 26.5px;
    top: 159px;
}
.tcl-cta-shape-3 {              /* Rect 20: 99x106 #0077BD r=30/30/0/30 — dark-blue lopsided, extends LEFT past panel */
    width: 99px; height: 106px;
    background: #0077BD;
    border-radius: 30px 30px 0 30px;
    left: -40px;
    top: 113.5px;
}
.tcl-cta-confetti-group {       /* Group 27 SVG cluster, extends past top+right edges */
    position: absolute;
    width: 149px;
    height: 133px;
    right: -25px;
    top: -21px;
    z-index: 1;
    pointer-events: none;
}

/* In-flow content — Frame 1984078035 (823x125 horizontal, gap 40) */
.tcl-cta-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    /* Text block sits ~130px in from left to clear the 3 standalone rects */
    margin-left: 130px;
    margin-right: 24px;        /* small breathing space before Group 27 */
}
.tcl-cta-banner-text {
    flex: 1 1 564px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 564px;
}
.tcl-cta-banner-title {
    /* Figma: DM Sans 700 36/43.2 #231F20 LEFT */
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 36px;
    line-height: 43.2px;
    color: #231F20;
    text-align: left;
    margin: 0;
    white-space: pre-line;     /* preserves Figma's line break "Norite gauti\nTelecentras pasiūlymą?" */
}
.tcl-cta-banner-subtitle {
    /* Figma: DM Sans 400 18/23.4 #231F20 LEFT */
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 23.4px;
    color: #231F20;
    text-align: left;
    margin: 0;
}
.tcl-cta-banner-btn {
    flex: 0 0 auto;
    /* Component 7 — 219x47 fill #0082C5 r=4, padding 12/32, gap 8, label 18/23.4 white */
    padding: 12px 32px !important;
    border-radius: 4px !important;
    height: 47px;
    font-size: 18px !important;
    line-height: 23.4px;
    gap: 8px;
}
.tcl-cta-btn-icon { flex-shrink: 0; }

/* Mobile: stack content; hide all confetti */
@media (max-width: 991px) {
    .tcl-cta-banner {
        padding: 32px;
    }
    .tcl-cta-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-left: 0;
        margin-right: 0;
    }
    /* In the row layout `flex: 1 1 564px` is a WIDTH basis; once the content
     * stacks to a column that 564px becomes a HEIGHT basis, forcing a tall
     * empty text block that pushed the button far down (flagged 2026-06-20).
     * Reset to content height on mobile. */
    .tcl-cta-banner-text {
        flex: 0 1 auto;
        max-width: 100%;
    }
    .tcl-cta-banner-title { font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.25; }
    .tcl-cta-shape-1,
    .tcl-cta-shape-2,
    .tcl-cta-shape-3,
    .tcl-cta-confetti-group { display: none; }
}

/* === Stats panel ("Telecentras šiandien") === */
.tcl-stats-section {
    /* Section padding matches Figma Frame 45 (1921×456) — panel IS the section,
     * no outer whitespace. Previous 80/0 padding doubled the section height
     * from Figma's 456 → 738 (client pixel audit). */
    padding: 0;
    background: var(--tcl-white);
}
/* Figma Frame 36 navy panel: 1856×456. To match Figma pixel-tight, panel uses
 * 40/0 internal padding and title/grid use 24/24 margins (not 80 + 40/40 — that
 * over-inflates by ~120px per client audit). */
.tcl-stats-panel {
    background: #090848;
    border-radius: 32px;
    padding: 40px 0;                       /* tighter — matches Figma 456 total height */
    color: var(--tcl-white);
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 8px;                         /* visual breathing from viewport edges */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;                             /* Figma vertical gap between title/grid/button */
}
.tcl-stats-blob {
    /* Figma 1151:28672 — Ellipse 6 halo behind content.
     * Wrapper centered horizontally with 38px right offset, vertically centered.
     * SVG natural is 1555×684 (the inset[-135.87% -23.7%] inflation from a 1055×184
     * box) — preserveAspectRatio=none stretches non-uniformly. */
    position: absolute;
    top: 50%;
    left: calc(50% + 38px);
    width: 1555px;
    height: 684px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.tcl-stats-panel > :not(.tcl-stats-blob) {
    position: relative;
    z-index: 1;                            /* keep title/grid/cta above the blob */
}
.tcl-stat-static {
    /* Non-numeric value — counter-up disabled to avoid "NaN" output (e.g. "A+") */
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.tcl-stats-title {
    /* Figma Frame 31 / Type@69: 56/67.2 wt700 white CENTER */
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 56px);
    line-height: 1.2;
    color: var(--tcl-white);
    margin: 0 0 24px;
    text-align: center;
}
.tcl-stats-grid {
    /* Figma Frame 41: 1195x102, gap 24, 5 stats × ~216 width */
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    max-width: 1195px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1199px) { .tcl-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .tcl-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.tcl-stat {
    /* Figma Frame 41/37/38/39: 216x102 each, gap 4 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.tcl-stat-value {
    /* Figma: number 64/76.8 wt700 white + suffix 44/52.8 wt700 #0082C5 */
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 64px);
    line-height: 76.8px;
    color: var(--tcl-white);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.tcl-stat-value .counter {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.tcl-stat-suffix {
    /* Suffix +/% in Figma blue, smaller font (44px), inline with the number */
    color: #0073B2;
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 44px);
    line-height: 52.8px;
    margin-left: 2px;
}
.tcl-stat-label {
    /* Figma: label 16/20.8 wt700 white, LEFT-aligned (overrides inherited
     * center from the panel) so multi-line labels wrap left like single-line ones. */
    font-size: 16px;
    line-height: 20.8px;
    color: var(--tcl-white);
    font-weight: 700;
    text-align: left;
}
.tcl-stats-cta {
    margin-top: 8px;
}

/* === About section (photo collage + tower SVG + content) === */
.tcl-about-section {
    padding: 80px 0;
    background: var(--tcl-white);
}
.tcl-about-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
@media (max-width: 991px) {
    .tcl-about-row { grid-template-columns: 1fr; gap: 40px; }
}

/* Figma Group 19: 621x840 — 2 stacked white-card-framed photos + 4 decorative shapes
 * Group 18 (525x840) outer wrapper:
 *   - Rectangle 13 (222x222 #BBDBA9 r=100, bottom-left)            light-green circle
 *   - Rectangle 15 (198x290 #79BBF1 r=30/30/0/0, mid-left below)   lopsided light-blue
 *   - Group 14 (171x143 r=100, 4 green pills #8DBB72)              pill cluster
 *   - Group 8 (235x622, light-cyan vertical decorations)           vertical decorative band
 * Frame 1984077995 (336x398, top): white card r=24 padding 8 — TOP photo
 * Frame 32 (336x398, +222,+244): white card r=24 padding 8 — BOTTOM photo, offset diagonally
 */
.tcl-about-visual {
    position: relative;
    width: 100%;
    /* Match the decor PNG's own aspect (638×840). The decor is object-fit:contain,
     * so any container whose ratio differs LETTERBOXES it — which detached the
     * silhouette's bottom shapes from the photos and left a gap between the photo
     * bottoms and the decoration (flagged 2026-06-20, desktop + mobile). Sizing
     * the box to the decor ratio makes it paint edge-to-edge so the shapes wrap
     * the photos as designed. min-height:0 stops the photos' own 642px floor
     * (its min-height, needed to keep the diagonal reaching the decor base) from
     * expanding this box back past the decor ratio and re-letterboxing it. */
    aspect-ratio: 638 / 840;
    min-height: 0;
}
/* Group 17 PNG export: 525x840 about decorative composition.
 * Replaces 4 hand-placed CSS shapes. Photos overlay it as functional content. */
.tcl-about-decor-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}
/* The 2 photo cards — Figma Frame 1984077995 + Frame 32, each 336x398, white card r=24 padding 8 */
.tcl-about-photos {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    /* No min-height floor: the photos share the decor box's height so photo-2 can
     * anchor to the decor base (below). A 642px floor previously left the photos
     * floating well above the decoration on wide screens. */
    min-height: 0;
}
.tcl-about-photo {
    /* Each = white card with internal photo r=16 (Figma: outer 24, inner 16) */
    background: #FFFFFF;
    border-radius: 24px;
    padding: 8px;
    box-shadow: 0 14px 28px rgba(9, 8, 72, 0.12);
    overflow: visible;
    position: absolute;
}
.tcl-about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.tcl-about-photo-1 {
    /* Top photo: 336x398. Pushed down so it overlaps the decoration instead of
     * hanging above it (pairs with photo-2's base anchor). */
    width: 54%;
    aspect-ratio: 336 / 398;
    top: 22%;
    left: 0;
}
.tcl-about-photo-2 {
    /* Bottom photo: 336x398. Anchored to the decor BASE (bottom) so it always sits
     * on the decoration regardless of column height, instead of floating above. */
    width: 54%;
    aspect-ratio: 336 / 398;
    bottom: 3%;
    left: 38%;
}
@media (max-width: 991px) {
    /* aspect-ratio on the base rule now governs the height — no fixed min-height
     * (which re-introduced the letterbox/gap at narrow widths). */
    .tcl-about-decor-pills,
    .tcl-about-decor-vertical { display: none; }
}
@media (max-width: 520px) {
    /* On phones the visual box (aspect 638/840) is shorter than the photos'
     * own 642px min-height floor, so the photos sit in a TALLER coordinate space
     * than the decor — leaving the top tower photo floating above the decoration
     * (flagged 2026-06-20). Nudge photo-1 down so its base meets the green/blue
     * shapes. Only ≤520px is affected; wider single-column layouts already match. */
    .tcl-about-photo-1 { top: 14%; }
}

/* Right content column */
.tcl-about-content { padding: 8px 0; }
/* Figma Frame 1984077996 / Frame 31: eyebrow wt700 16/20.8 #0082C5, title 56/67.2 wt700 #231F20 with literal \n */
.tcl-about-content .tcl-eyebrow {
    font-weight: 700;
    font-size: 16px;
    line-height: 20.8px;
    text-transform: none;
    letter-spacing: 0;
    color: #0073B2;
    margin-bottom: 8px;
}
.tcl-about-content .tcl-section-title {
    font-size: clamp(2rem, 4vw, 56px);
    line-height: 1.2;
    color: #231F20;
    margin: 0 0 16px;
    letter-spacing: 0;
    white-space: pre-line;       /* preserves Figma forced \n */
}
.tcl-eyebrow {
    display: inline-block;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--tcl-blue-text);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
.tcl-section-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--tcl-text);
    margin: 0 0 20px;
}
.tcl-about-body {
    color: var(--tcl-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 28px;
}
.tcl-about-body p { margin: 0 0 12px; }
.tcl-about-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.tcl-link-secondary {
    color: var(--tcl-text);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color 0.18s ease;
}
.tcl-link-secondary:hover { color: var(--tcl-blue-text); }

/* === Certificates === */
.tcl-certificates-section {
    /* Figma Frame 706: 1440x272, padding 80/0/80/0, gap 32, HORIZONTAL 2-col */
    padding: 80px 0;
    background: var(--tcl-white);
}
.tcl-certificates-row {
    display: grid;
    /* Figma 1151:28743: title flexes (flex-1), badges row is fixed 688px (justify-end).
     * minmax(0,1fr) lets the title shrink without pushing the badges off-row. */
    grid-template-columns: minmax(0, 1fr) 688px;
    gap: 32px;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}
.tcl-certificates-head {
    /* Figma Frame 489: 720x84 — title + subtitle, LEFT-aligned */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tcl-certificates-title {
    /* Figma: 44/52.8 wt700 #000000 LEFT */
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 44px;
    line-height: 52.8px;
    color: #000000;
    margin: 0;
    text-align: left;
}
.tcl-certificates-subtitle {
    /* Figma: 18/23.4 wt400 #727376 */
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 23.4px;
    color: #727376;
    margin: 0;
    max-width: 720px;
}
.tcl-certificates-badges {
    /* Figma Frame 1984077980: 688x112, gap 32, RIGHT side, single row */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.5vw, 32px);    /* gap shrinks at narrower viewports to keep badges on one row */
    flex-wrap: nowrap;
}
/* Desktop ISO sprite (688×112). max-width:100% + height:auto keeps the row
 * aspect-correct when the column is narrower — the height="112" attribute alone
 * was locking the height and stretching the badges vertically. */
.tcl-iso-sprite {
    display: block;
    width: 688px;
    max-width: 100%;
    height: auto;
}
@media (max-width: 991px) {
    .tcl-certificates-row { grid-template-columns: 1fr; gap: 32px; }
    .tcl-certificates-badges { justify-content: flex-start; flex-wrap: wrap; }
    .tcl-certificates-title { font-size: 32px; line-height: 1.2; }
}
.tcl-iso-badge {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Badge size scales with right-column width so 5-6 badges fit in one row.
 * Figma Frame 1984077980: 688x112 (5 badges of 112x112 with gap 32 = 688). */
.tcl-iso-badge img {
    width: clamp(64px, 8.5vw, 112px);
    height: clamp(64px, 8.5vw, 112px);
    display: block;
    transition: transform 0.2s ease;
}
.tcl-iso-badge:hover img { transform: translateY(-2px); }
/* Desktop: data-driven admin-managed ISO badges in a single right-aligned row. */
@media (min-width: 768px) {
    .tcl-certificates-badges > .tcl-iso-badge {
        width: clamp(64px, 8.5vw, 112px);
        height: auto;
        object-fit: contain;
        display: block;
        transition: transform 0.2s ease;
    }
    .tcl-certificates-badges > .tcl-iso-badge:hover { transform: translateY(-2px); }
}

/* === Kaip mes veikiame (3 image tiles) === */
.tcl-how-section {
    padding: 70px 0;
    background: var(--tcl-white);
}
.tcl-how-header {
    margin-bottom: 40px;
    text-align: center;
}
.tcl-text-center { text-align: center; }
.tcl-section-subtitle {
    color: var(--tcl-text-muted);
    font-size: 1rem;
    margin: 0 0 4px;
}
.tcl-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;                       /* Figma Frame 1984077984: gap 32 */
    align-items: stretch;            /* equal-height cards in same row */
    /* Reserve hover-rise space so cards don't jump the surrounding flow on hover. */
    padding-top: 32px;
}
@media (max-width: 991px) {
    .tcl-how-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 0; }
}

/* Frame 1984077984: 3 cards, white-glass chrome (padding 12 / radius 32) wrapping
 * inner photo (radius 24). Bottom gradient overlay reveals title + subtitle. */
.tcl-how-card {
    position: relative;
    border-radius: 32px;            /* Figma Frame 58: r=32 outer wrapper */
    aspect-ratio: 458.7/585.2;
    background: #FFFFFF;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
    padding: 12px;                   /* Figma: outer card padding ~12.6 */
    cursor: pointer;
    /* Figma 1151:31349: card rises 32px on hover (parent has padding-top:32). */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.tcl-how-card:hover {
    transform: translateY(-32px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
.tcl-how-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;             /* Frame 25 inner radius */
    overflow: hidden;
    /* Navy fallback so the white overlay title/body never sits on a blank
     * white card while the lazy photo is still loading or fails. */
    background: #0a1a3a;
}
.tcl-how-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.tcl-how-card:hover .tcl-how-img { transform: scale(1.03); }

.tcl-how-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    color: var(--tcl-white);
    /* Figma: bg-gradient-to-b from-rgba(0,0,0,0) to-black (transparent → black) */
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0)   0%,
        rgba(0, 0, 0, 0.6) 55%,
        rgba(0, 0, 0, 0.92) 100%
    );
    /* Default: ~22% of card (Figma Frame 54: 66-120px on 560 = 12-22%). On hover expand to ~87%. */
    padding-top: 30%;
    transition: padding-top 0.35s ease;
}
.tcl-how-card:hover .tcl-how-overlay {
    /* 46% (was 65%) keeps the dark panel compact so long value lists like
       "Mes veikiame" fit without clipping the title at the top edge. */
    padding-top: 46%;
}
.tcl-how-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 28px;                 /* Figma h5/bold: 28/33.6 */
    line-height: 1.2;
    color: var(--tcl-white);
    margin: 0 0 8px;
    transition: color 0.25s ease;
}
.tcl-how-card:hover .tcl-how-title {
    color: #ABE0F9;
}
.tcl-how-subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}
/* Body — hidden by default, revealed on hover per Figma 1151:31349 */
.tcl-how-body {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    line-height: 1.45;
    margin: 12px 0 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease 0.05s;
}
.tcl-how-card:hover .tcl-how-body {
    max-height: 520px;
    opacity: 1;
}
/* Overlay body polish (homepage "Kaip mes veikiame" photo tiles only — scoped to
   .tcl-how-overlay so the white /karjera/ card variant is untouched). Long tiles
   carry an intro + several "<strong>sub-head</strong> + description" pairs as raw
   <p>s; tighten the wp-editor paragraph spacing so it fits the block and surface
   the bold sub-heads in brand blue. */
.tcl-how-overlay .tcl-how-body { font-size: 14px; line-height: 1.42; }
.tcl-how-overlay .tcl-how-body p { margin: 0 0 6px; }
.tcl-how-overlay .tcl-how-body p:last-child { margin-bottom: 0; }
.tcl-how-overlay .tcl-how-body strong,
.tcl-how-overlay .tcl-how-body b { color: #ABE0F9; font-weight: 700; }
/* A paragraph that is only a bold sub-head hugs the description beneath it. */
.tcl-how-overlay .tcl-how-body p:has(> strong:only-child),
.tcl-how-overlay .tcl-how-body p:has(> b:only-child) { margin: 8px 0 0; }
.tcl-how-body ul.tcl-how-values {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tcl-how-body .tcl-how-values li {
    margin: 0 0 10px;
    padding: 0;
    font-size: 14px;
    line-height: 1.45;
}
.tcl-how-body .tcl-how-values li:last-child { margin-bottom: 0; }
.tcl-how-body .tcl-how-values strong { color: #ABE0F9; font-weight: 700; }
/* Touch devices can't hover, so the homepage "Kaip mes veikiame" tiles stay
 * photo + label and surface the philosophy body on TAP instead (flagged
 * 2026-06-20). A round +/✕ toggle (telecentras-how.js) flips `.is-open`, which
 * slides the body up over the photo with a taller navy gradient behind it. */
.tcl-how-toggle {
    display: none;                  /* desktop uses hover — affordance is touch-only */
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 26, 58, 0.55);
    color: var(--tcl-white);
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, transform 0.3s ease;
}
.tcl-how-toggle .tcl-how-toggle-icon { transition: transform 0.3s ease; }
.tcl-how-card.is-open .tcl-how-toggle { background: rgba(10, 26, 58, 0.85); }
.tcl-how-card.is-open .tcl-how-toggle .tcl-how-toggle-icon { transform: rotate(45deg); }  /* + → ✕ */
@media (hover: none), (max-width: 991px) {
    .tcl-how-toggle { display: inline-flex; }
    /* 🪤 The card's height came ONLY from `aspect-ratio` on the grid ITEM, and
     * its image + overlay are position:absolute (no intrinsic height). Headless
     * Chromium honours the item aspect-ratio, but Safari/Edge let the grid's
     * `align-items: stretch` win and collapse the card to ~16px (padding only)
     * → the three tiles vanished under the heading (reported 2026-06-20).
     * Fix: source the height from the IMAGE in normal flow — img + aspect-ratio
     * is bulletproof cross-browser and degrades to natural size if unsupported. */
    .tcl-how-card { aspect-ratio: auto; height: auto; }
    .tcl-how-card-inner { height: auto; }
    .tcl-how-img {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 458.7 / 585.2;
        object-fit: cover;
    }
    .tcl-how-card.is-open .tcl-how-body {
        display: block;
        max-height: 600px;       /* fit long value lists (e.g. "Mes veikiame") on narrow widths */
        opacity: 1;
        margin-top: 10px;
    }
    .tcl-how-card.is-open .tcl-how-overlay {
        padding-top: 32px;
        background: linear-gradient(to bottom,
            rgba(10, 26, 58, 0)   0%,
            rgba(10, 26, 58, 0.5) 28%,
            rgba(10, 26, 58, 0.9) 68%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tcl-how-card,
    .tcl-how-img,
    .tcl-how-title,
    .tcl-how-subtitle,
    .tcl-how-overlay,
    .tcl-how-body { transition: none !important; }
}

/* === how-slides "card" variant (Figma 1151:29894) — used on /karjera/ ==========
   White bordered content card: blue line icon + title + always-visible body.
   Scoped to .tcl-how-card--card so the homepage photo tiles stay unaffected. */
.tcl-how-grid--card {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    padding-top: 0;
}
.tcl-how-card--card {
    aspect-ratio: auto;
    padding: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    cursor: default;
    will-change: auto;
}
.tcl-how-card--card:hover { transform: none; box-shadow: none; }
.tcl-how-card--card .tcl-how-card-inner {
    position: static;
    height: 100%;
    overflow: visible;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #ABE0F9;       /* main/200 */
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.tcl-how-card--card .tcl-how-icon { display: inline-flex; color: #0073B2; } /* main/100 */
.tcl-how-card--card .tcl-how-icon svg { display: block; }
.tcl-how-card--card .tcl-how-title {
    position: static;
    color: #231F20;                  /* neutral/400 */
    font-size: 24px;                 /* h6/bold */
    line-height: 1.2;
    margin: 0;
}
.tcl-how-card--card:hover .tcl-how-title { color: #231F20; } /* no hover recolor */
.tcl-how-card--card .tcl-how-body {
    position: static;
    color: #727376;                  /* neutral/300 */
    font-size: 18px;                 /* p18/regular */
    line-height: 1.3;
    margin: 0;
    max-height: none;
    opacity: 1;
    overflow: visible;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .tcl-how-grid--card { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .tcl-how-grid--card { grid-template-columns: 1fr; }
}

/* === Patikimas partneris (4 circular % dials) === */
.tcl-reliability-section {
    padding: 70px 0;
    background: var(--tcl-white);
}
.tcl-reliability-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
@media (max-width: 991px) {
    .tcl-reliability-row { grid-template-columns: 1fr; gap: 30px; }
}
.tcl-reliability-desc {
    color: var(--tcl-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 28px;
}
.tcl-dials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.tcl-dial {
    /* Figma 1151:28832 etc.: 248×248 ring container. */
    position: relative;
    aspect-ratio: 1/1;
    max-width: 248px;
    margin: 0 auto;
    /* Default state for scroll-in animation — JS toggles .is-visible
     * when section enters viewport. Stagger via nth-child delay below. */
    opacity: 0;
    transform: scale(0.92);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.55s ease,
                filter 0.25s ease;
    will-change: transform, opacity;
}
.tcl-dial.is-visible {
    opacity: 1;
    transform: scale(1);
}
/* Stagger entry: dial 1 first, dial 4 last (150ms apart). */
.tcl-dials-grid .tcl-dial:nth-child(1) { transition-delay: 0s; }
.tcl-dials-grid .tcl-dial:nth-child(2) { transition-delay: 0.15s; }
.tcl-dials-grid .tcl-dial:nth-child(3) { transition-delay: 0.30s; }
.tcl-dials-grid .tcl-dial:nth-child(4) { transition-delay: 0.45s; }
/* Hover: subtle lift — dial floats up + soft navy shadow. */
.tcl-dial:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 8px 24px rgba(9, 8, 72, 0.15));
}
@media (prefers-reduced-motion: reduce) {
    .tcl-dial { opacity: 1; transform: none; transition: none; }
    .tcl-dial:hover { transform: none; filter: none; }
}
.tcl-dial-svg {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
}
.tcl-dial-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18%;
    text-align: center;
}
/* Figma Frame 60-63 inside each dial: number + label, both #231F20 wt700.
 * Number 36/43.2, label 18/23.4 — labels are NOT muted gray, they're the
 * same dark text color as numbers but smaller.
 * % carries a navy→indigo gradient (linear-gradient(166.97deg, #090848 3.31%, #161BCB 103.29%)). */
.tcl-dial-value {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.8vw, 36px);
    line-height: 43.2px;
    color: #231F20;
    display: inline-flex;
    align-items: baseline;
}
.tcl-dial-number {
    color: #231F20;
}
.tcl-dial-percent {
    background: linear-gradient(166.97deg, #090848 3.31%, #161BCB 103.29%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tcl-dial-label {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(0.875rem, 1.3vw, 18px);
    line-height: 23.4px;
    color: #231F20;
    margin-top: 4px;
    max-width: 191px;
    text-align: center;
}

/* === TV Bokštas — Figma Frame 1984078056 ===
 * Frame 1984077994 (1439x611, py 80, gap 32) — 2-col layout
 *   Left: Frame 15 (704x402) — title block + buttons row
 *   Right: Group 12 (702x451) — composed image: 2 cyan rects (Rect 22 + Rect 21) +
 *     centered white-card-framed photo (Frame 32 with radius 32, padding 12; Frame 25 inner radius 24)
 *     + small light-blue circle (Group 10, 113x113 r=100)
 */
.tcl-tvbokstas-section {
    padding: 80px 16px;
    background: var(--tcl-white);
}
.tcl-tvbokstas-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    max-width: var(--tcl-container);
    margin: 0 auto;
}
@media (max-width: 991px) { .tcl-tvbokstas-row { grid-template-columns: 1fr; gap: 30px; } }
.tcl-tvbokstas-content { padding: 8px 0; }
/* Eyebrow override: Figma wt700 16px lh20.8 #0082C5, sentence case */
.tcl-tvbokstas-content .tcl-eyebrow {
    font-weight: 700;
    font-size: 16px;
    line-height: 20.8px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tcl-blue-text);
    margin-bottom: 8px;
}
/* Title override: Figma 56/67.2 wt700 #231F20 */
.tcl-tvbokstas-content .tcl-section-title {
    font-size: clamp(2rem, 4vw, 56px);
    line-height: 1.2;
    color: #231F20;
    margin: 0 0 16px;
    letter-spacing: 0;
}
.tcl-tvbokstas-desc {
    color: #727376;
    font-size: 18px;
    line-height: 23.4px;
    font-weight: 400;
    margin: 0 0 32px;
}
/* Frame 30: 372x47 horizontal, gap 32, align-items center.
 * Children: Component 7 button (149x47) + Component 8 secondary link (191x23) */
.tcl-tvbokstas-actions {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
/* Component 8 link — 16x16 location-pin SVG + text, gap 8, vertically centered */
.tcl-tvbokstas-actions .tcl-link-secondary {
    color: #231F20;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 23.4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: color 0.18s ease;
}
.tcl-tvbokstas-actions .tcl-link-secondary:hover { color: var(--tcl-blue-text); }
.tcl-tvbokstas-actions .tcl-link-secondary .tcl-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #231F20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tcl-tvbokstas-actions .tcl-link-secondary:hover .tcl-link-icon { color: var(--tcl-blue-text); }
.tcl-tvbokstas-actions .tcl-link-secondary svg { width: 16px; height: 16px; display: block; }

/* Right column: Group 12 = Group 11 (decorative cyan rects + circle PNG) +
 * white-card-framed photo (HTML overlay) */
.tcl-tvbokstas-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 702 / 451;
    max-width: 702px;
    margin-left: auto;
}
/* Group 11 PNG export — full size, fills the visual area */
.tcl-tvbokstas-decor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}
/* White card frame around the image (Frame 32) */
.tcl-tvbokstas-image-card {
    position: absolute;
    left: 4%;
    top: 6%;
    width: 83%;
    height: 88%;
    background: #FFFFFF;
    border-radius: 32px;
    padding: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    z-index: 2;
}
.tcl-tvbokstas-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;        /* Frame 25 inner radius */
    display: block;
}

/* === Projektai === */
.tcl-projects-section {
    padding: 80px 0;
    background: var(--tcl-white);
}
.tcl-projects-header { margin-bottom: 40px; text-align: center; }
.tcl-projects-header .tcl-eyebrow { display: block; margin-bottom: 8px; }
.tcl-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 991px) { .tcl-projects-grid { grid-template-columns: 1fr; gap: 24px; } }
/* Figma Frame 68: 3 project cards 459x547 each.
 * Outer (Frame 32/54/55): #FFFFFF r=24 padding 8/8/8/16, drop-shadow 0/0 blur 16 #000@0.08
 * Inner image (Frame 25): 443x264 r=16 (ALL 4 corners), padding 16
 * Content title 24/28.8 wt700 #231F20 + excerpt 18/23.4 wt400 #727376
 * "Skaityti daugiau" link 18/23.4 wt500 #231F20 + 16x16 SVG arrow */
.tcl-project-card {
    background: var(--tcl-white);
    border-radius: 24px;                              /* Figma r=24 outer */
    border: 0;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);          /* Figma drop-shadow */
    display: flex;
    flex-direction: column;
    padding: 8px 8px 16px;                             /* Figma asymmetric padding */
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.tcl-project-card:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}
.tcl-project-thumb {
    display: block;
    aspect-ratio: 443/264;
    overflow: hidden;
    background: var(--tcl-bg-soft);
    border-radius: 16px;                               /* Figma Frame 25: r=16 ALL 4 CORNERS */
}
.tcl-project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    border-radius: 16px;
}
.tcl-project-card:hover .tcl-project-thumb img { transform: scale(1.04); }
.tcl-project-body {
    padding: 16px;                                     /* Figma Frame 67: padding 16/0 horiz */
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.tcl-project-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 24px;                                   /* Figma 24/28.8 wt700 */
    line-height: 28.8px;
    margin: 0;
}
.tcl-project-title a { color: #231F20; text-decoration: none; }
.tcl-project-title a:hover { color: var(--tcl-blue-text); }
.tcl-project-excerpt {
    color: #727376;                                    /* Figma exact */
    font-size: 18px;                                   /* Figma 18/23.4 wt400 */
    line-height: 23.4px;
    font-weight: 400;
    margin: 0;
}
.tcl-project-readmore {
    /* Figma: 18/23.4 wt500 #231F20 + 16x16 SVG arrow, 8px gap */
    color: #231F20;
    font-weight: 500;
    font-size: 18px;
    line-height: 23.4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    align-self: flex-start;
    transition: color 0.18s ease;
}
.tcl-project-readmore .tcl-btn-arrow {
    transition: transform 0.18s ease;
}
.tcl-project-readmore:hover .tcl-btn-arrow {
    transform: translateX(4px);
}
.tcl-project-readmore:hover { color: var(--tcl-blue-text); }

/* === Naujienos (dark navy panel + 2 cards w/ chips) === */
.tcl-news-section {
    padding: 60px 0;
    background: var(--tcl-white);
}
.tcl-news-panel {
    background: var(--tcl-navy);
    border-radius: var(--tcl-radius-xl);
    padding: 60px 50px 50px;
    color: var(--tcl-white);
}
.tcl-news-header {
    text-align: center;
    margin-bottom: 36px;
}
.tcl-news-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    color: var(--tcl-white);
    margin: 0 0 8px;
}
.tcl-news-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    margin: 0;
}
.tcl-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 36px;
}
@media (max-width: 991px) { .tcl-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .tcl-news-grid { grid-template-columns: 1fr; } }

.tcl-news-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--tcl-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tcl-news-thumb-link {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}
.tcl-news-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.tcl-news-card:hover .tcl-news-thumb { transform: scale(1.04); }

.tcl-news-chips {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 8px;
}
.tcl-news-chip {
    background: rgba(9, 8, 72, 0.72);
    color: var(--tcl-white);
    padding: 5px 10px;
    border-radius: var(--tcl-radius-pill);
    font-size: 0.72rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
}
.tcl-news-chip svg { color: var(--tcl-blue-soft); }

.tcl-news-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.tcl-news-card-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0;
}
.tcl-news-card-title a {
    color: var(--tcl-white);
    text-decoration: none;
}
.tcl-news-card-title a:hover { color: var(--tcl-blue-soft); }
.tcl-news-excerpt {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}
.tcl-news-readmore {
    color: var(--tcl-white);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    margin-top: auto;
    align-self: flex-start;
    padding-top: 8px;
    transition: color 0.18s ease;
}
.tcl-news-readmore:hover { color: var(--tcl-blue-soft); }

.tcl-news-cta { text-align: center; }

/* === Newsletter — Figma Frame 75 (1440x431, py 80) + Frame 51 inner (1194x271, navy r=32) === */
.tcl-newsletter-section {
    padding: 80px 0;
    background: var(--tcl-white);
}
.tcl-newsletter-container {
    /* Figma Frame 75: 1440x431, padding 80/0/80/0 (handled on .tcl-newsletter-section).
     * No extra inner padding — confetti bleed handled via section overflow:hidden + abs-positioned PNG. */
    position: relative;
    max-width: var(--tcl-container);
    margin: 0 auto;
}

/* Frame 1151:28914 — 6-shape decoration SVG (1680×430 viewBox).
 * Centered horizontally; section overflow:hidden trims edges below 1680px. */
.tcl-nl-decor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1680px;
    height: 430px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.tcl-newsletter-section {
    overflow: hidden;          /* clip cyan shapes that extend past viewport */
}
/* Outer confetti rects — Figma Rectangles 17/18/21/16/20/22 around the panel
 * (kept as fallback if PNG fails; hidden by default since PNG version overrides) */
.tcl-nl-shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    display: none;
}
/* Frame 75 wrapper is 1440x431 in Figma. Inner panel (Frame 51) sits at
 * rel(123, 80) — meaning 123px left margin from wrapper edge.
 * Confetti rect positions (Figma absolute → wrapper-relative):
 *   Rect 18: rel(62.5, 156.4)   middle-left of wrapper
 *   Rect 21: rel(-12.5, 188.8)  off the left edge slightly
 *   Rect 17: rel(1296.5, 161.8) right side, mid-height
 *   Rect 16: rel(1352.5, 174.8) far right, slightly below
 *   Rect 20: rel(-119.5, 145.8) off the LEFT edge significantly
 *   Rect 22: rel(1406.5, 145.8) off the RIGHT edge significantly
 *
 * In wrapper-percent: at 1440px wrapper:
 *   62.5/1440=4.3%, 1296.5/1440=90%, 1352.5/1440=93.9%, 1406.5/1440=97.7%
 * Y positions assume wrapper top=0; panel sits at top:80.
 */
.tcl-nl-shape-1 { /* Rect 17: 74x108 #79BBF1 r=30 — right side, mid-height */
    width: 74px; height: 108px;
    background: #79BBF1; border-radius: 30px;
    right: 8.5%; top: 162px;
}
.tcl-nl-shape-2 { /* Rect 18: 83x118 #8CBC71 r=15 — middle-left */
    width: 83px; height: 118px;
    background: #8CBC71; border-radius: 15px;
    left: 4.3%; top: 156px;
}
.tcl-nl-shape-3 { /* Rect 21: 103x54 #79BBF1 r=100 — far left, slightly off */
    width: 103px; height: 54px;
    background: #79BBF1; border-radius: 100px;
    left: -1%; top: 188px;
}
.tcl-nl-shape-4 { /* Rect 16: 82x82 #BBDBA9 r=1000 — far right corner */
    width: 82px; height: 82px;
    background: #BBDBA9; border-radius: 100%;
    right: 6%; top: 174px;
}
.tcl-nl-shape-5 { /* Rect 20: 141x138 #CBEBFC r=30/30/0/30 — far LEFT, off edge */
    width: 141px; height: 138px;
    background: #CBEBFC; border-radius: 30px 30px 0 30px;
    left: -8%; top: 145px;
}
.tcl-nl-shape-6 { /* Rect 22: 141x138 #CBEBFC r=30/30/0/30 — far RIGHT, off edge */
    width: 141px; height: 138px;
    background: #CBEBFC; border-radius: 30px 30px 0 30px;
    right: -2.3%; top: 145px;
    transform: scaleX(-1);
}

/* Inner navy panel — Frame 51 (Figma 1151:28919): 1194x271 centered.
 * Asymmetric padding 40/80/40/32 — LEFT=32, RIGHT=80. The 32px-left side
 * accommodates the 3 decorative white sub-frames clustered at panel left
 * (Frames 1151:28932/28933/28934 at x=158-329). */
.tcl-newsletter-panel {
    background: var(--tcl-navy);
    border-radius: 32px;
    padding: 40px 32px;                       /* mobile fallback symmetric */
    color: var(--tcl-white);
    position: relative;
    z-index: 2;
    overflow: hidden;                         /* Figma clipsContent=true */
    max-width: 1194px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .tcl-newsletter-panel { padding: 40px 80px 40px 32px; }   /* Figma exact */
}

/* Inner white decorative shapes inside the navy panel (3 small frames) */
.tcl-nl-inner {
    position: absolute;
    background: var(--tcl-white);
    pointer-events: none;
    border-radius: 8px;
}
.tcl-nl-inner-1 { width: 102px; height: 102px; left: 24px;  top: 24px;  border-radius: 16px; opacity: 0.9; }
.tcl-nl-inner-2 { width: 62px;  height: 60px;  right: 100px; top: 30px;  border-radius: 12px; opacity: 0.85; }
.tcl-nl-inner-3 { width: 81px;  height: 78px;  right: 32px;  bottom: 28px; border-radius: 14px; opacity: 0.92; }

.tcl-newsletter-content {
    position: relative;
    z-index: 3;
    text-align: center;        /* Figma: title + subtitle centered */
    max-width: 625px;
    margin: 0 auto;
}

.tcl-newsletter-title {
    /* Figma: DM Sans 700, 36px, lh 43.2, white, CENTER aligned */
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-bold);
    font-size: 36px;
    line-height: 43.2px;
    color: var(--tcl-white);
    margin: 0 0 16px;
    text-align: center;
}
.tcl-newsletter-subtitle {
    /* Figma: DM Sans 400, 18px, lh 23.4, white, CENTER aligned.
     * Margin-bottom: 40px = Figma Frame 74 gap between title block and form block. */
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-regular);
    font-size: 18px;
    line-height: 23.4px;
    color: var(--tcl-white);
    margin: 0 0 40px;
    text-align: center;
}
.tcl-newsletter-form {
    /* Figma Frame 1984077983: gap-4. items-start — email row + privacy line
     * are LEFT-aligned (only the title/subtitle above are centered). */
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.tcl-newsletter-row {
    /* Figma Frame 73: gap-40 between email input and submit button, left-aligned. */
    display: flex;
    align-items: stretch;
    gap: 40px;
    width: 100%;
    max-width: 625px;
    justify-content: flex-start;
}
.tcl-newsletter-input {
    /* Figma Frame 72: 440x47, padding 8/16, fill white, border 1px #E6E7E8, radius 4 */
    flex: 1 1 440px;
    max-width: 440px;
    height: 47px;
    background: var(--tcl-white);
    border: 1px solid #E6E7E8;
    border-radius: 4px;
    padding: 8px 16px;
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-medium);
    font-size: 18px;
    line-height: 23.4px;
    color: var(--tcl-text);
    outline: none;
    transition: box-shadow 0.18s ease;
}
.tcl-newsletter-input::placeholder { color: #727376; }
.tcl-newsletter-input:focus { box-shadow: 0 0 0 3px rgba(0, 130, 197, 0.4); }

.tcl-newsletter-submit {
    /* Component 7: 145x47, padding 12/32, radius 4, fill #0082C5 */
    height: 47px;
    flex: 0 0 auto;
}

.tcl-newsletter-consent {
    /* Figma Frame 1984077981 (1151:28929): gap-8, DM Sans Light 14, white.
     * LEFT-aligned under the email field (icon + sentence), not centered. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--tcl-white);
    font-family: var(--tcl-font-sans);
    font-weight: 300;
    font-size: 14px;
    line-height: 18.2px;
    margin: 0;
}
.tcl-newsletter-consent a { color: var(--tcl-white); text-decoration: underline; }

/* === Newsletter LIGHT variant (Figma 1321:10848 — paslaugos archive) ===
 * Inner panel #ABE0F9 cyan, title/subtitle/consent in dark #231F20.
 * Button + decorations unchanged. */
.tcl-newsletter-light .tcl-newsletter-panel { background: #ABE0F9 !important; }
.tcl-newsletter-light .tcl-newsletter-title { color: #231F20 !important; }
.tcl-newsletter-light .tcl-newsletter-subtitle { color: #3A424E !important; }  /* AA on #ABE0F9 (was #727376=3.3:1) */
.tcl-newsletter-light .tcl-newsletter-consent,
.tcl-newsletter-light .tcl-newsletter-consent * { color: #231F20 !important; }
.tcl-newsletter-light .tcl-newsletter-consent a { color: #231F20 !important; text-decoration: underline; }  /* AA on #ABE0F9 */
.tcl-newsletter-light .tcl-newsletter-consent-shield { color: #231F20 !important; }
.tcl-newsletter-light .tcl-newsletter-input { border: 1px solid #d6e8f5; }

/* Form status messages — appended below form by JS for accessible feedback */
.tcl-newsletter-status {
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 18.2px;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    display: none;
}
.tcl-newsletter-status.is-pending,
.tcl-newsletter-status.is-success,
.tcl-newsletter-status.is-error { display: block; }
.tcl-newsletter-status.is-pending { background: rgba(255,255,255,0.1); color: var(--tcl-white); }
.tcl-newsletter-status.is-success { background: rgba(140,188,113,0.2); color: #4a7836; border: 1px solid #8CBC71; }
.tcl-newsletter-status.is-error   { background: rgba(193,39,45,0.12); color: #c1272d; border: 1px solid #c1272d; }
/* Light variant: status colors adjusted for cyan bg */
.tcl-newsletter-light .tcl-newsletter-status.is-pending { background: rgba(0,0,0,0.05); color: #231F20; }
/* Override vendor CSS that title-cases label descendants — violates
 * the casing rule (sentence-case only). */
.tcl-newsletter-consent,
.tcl-newsletter-consent *,
.tcl-newsletter-consent-label,
.tcl-newsletter-consent-label * { text-transform: none !important; }
.tcl-newsletter-consent-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tcl-newsletter-consent-shield { flex: 0 0 12px; color: var(--tcl-white); }
.tcl-newsletter-consent-check { width: 14px; height: 14px; flex: 0 0 14px; accent-color: var(--tcl-blue-text); margin: 0; }

@media (max-width: 991px) {
    .tcl-nl-shape { display: none; }
    .tcl-nl-inner { display: none; }
    .tcl-newsletter-panel { padding: 28px 24px; }
    .tcl-newsletter-title { font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.25; }
    .tcl-newsletter-row { flex-direction: column; }
    .tcl-newsletter-input { max-width: 100%; }
    .tcl-newsletter-submit { width: 100%; }
}

/* === Testimonials horizontal scroll — Figma Frame 703 ===
 * Each card 453x199 (Figma exact), padding 24, gap 16, fill #FFFFFF, r=16
 * Card shadow: 0/2 blur 4 rgba(0,0,0,0.06) + 0/4 blur 8 rgba(0,0,0,0.10)
 * Quote icon 64x64, quote text 18/23.4 wt400 #231F20
 * Section gap 32 between cards horizontally
 */
.tcl-testimonials-section {
    padding: 80px 0;
    background: var(--tcl-white);
    /* No overflow:hidden — must let edge fade gradient + scroll arrows render */
    position: relative;
}
.tcl-testimonials-header { margin-bottom: 48px; }

/* Marquee scroll lane — auto right-to-left infinite loop, no user scroll
 * (client direction: section scrolls right to left).
 * Partial duplicates testimonials so the loop seam is invisible. */
.tcl-testimonials-scroll {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    /* original scroll behavior retained as fallback if JS sets overflow back */
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 8px 0 32px;
    -webkit-overflow-scrolling: touch;
    /* Visual scroll affordance: edge fade gradient masks the left+right ends */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.tcl-testimonials-scroll::-webkit-scrollbar { display: none; }
.tcl-testimonials-track {
    display: flex;
    gap: 32px;
    padding: 0 32px;
    width: max-content;                          /* let content overflow naturally */
    animation: tcl-testi-marquee 60s linear infinite;
}
.tcl-testimonials-scroll:hover .tcl-testimonials-track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .tcl-testimonials-track { animation: none; }
}
@keyframes tcl-testi-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }       /* -50% because partial duplicates the cards */
}

.tcl-testimonial-card {
    flex: 0 0 453px;                 /* Figma Frame 149: 453px wide */
    background: var(--tcl-white);
    border: 0;
    border-radius: 16px;             /* Figma r=16 */
    padding: 24px;                   /* Figma padding 24 all sides */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 4px 8px rgba(0, 0, 0, 0.10);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    gap: 16px;                       /* Figma itemSpacing 16 */
    min-height: 199px;               /* Figma height */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tcl-testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 12px 24px rgba(0, 0, 0, 0.14);
}
.tcl-testimonial-quote-icon {
    /* Figma "quotation 1": 64x64 */
    color: var(--tcl-blue-text);
    width: 48px;                     /* slightly smaller than Figma 64 to balance with 453x199 card */
    height: 48px;
    flex: 0 0 auto;
}
.tcl-testimonial-quote-icon svg { width: 100%; height: 100%; display: block; }
.tcl-testimonial-quote {
    /* Figma: 18/23.4 wt400 #231F20 */
    color: #231F20;
    font-family: var(--tcl-font-sans);
    font-size: 18px;
    line-height: 23.4px;
    font-weight: 400;
    margin: 0;
    flex: 1;
}
.tcl-testimonial-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(9, 8, 72, 0.06);
    padding-top: 14px;
    margin-top: auto;
}
/* Logo placeholder (3-letter initial when no logo image uploaded) — Figma 84x42 */
.tcl-testimonial-logo {
    width: 84px;
    height: 42px;
    background: rgba(9, 8, 72, 0.06);
    border-radius: var(--tcl-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--tcl-text-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    flex: 0 0 auto;
}
/* Real logo image variant — admin uploads via ACF, replaces placeholder */
.tcl-testimonial-logo-img {
    width: auto;
    max-width: 120px;
    height: 42px;
    background: transparent;
    border-radius: 0;
    object-fit: contain;
    object-position: left center;
    display: block;
    flex: 0 0 auto;
}
.tcl-testimonial-attribution {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.2;
}
.tcl-testimonial-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--tcl-text);
}
.tcl-testimonial-role {
    font-size: 0.75rem;
    color: var(--tcl-text-muted);
    margin-top: 2px;
}

/* === Contact section (collage + form) === */
.tcl-contact-section {
    padding: 70px 0 90px;
    background: var(--tcl-white);
}
.tcl-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
@media (max-width: 991px) {
    .tcl-contact-row { grid-template-columns: 1fr; gap: 40px; }
}

/* Frame 34 → Group 2: 558x642 contact-photo collage.
 * Per Figma the 3 photos are NOT mixed sizes — they're all white-card-framed
 * (r=24, padding 8, inner image r=16) with these dimensions:
 *   Photo 1 (Frame 32 #2): 336x398 at rel(0, 0)         top-left, big portrait
 *   Photo 2 (Frame 32 #1): 336x398 at rel(222, 244)     bottom-right diagonal offset, big portrait
 *   Photo 3 (Frame 34):    166x196 at rel(352.5, 32)    top-right SMALL portrait
 *
 * Container aspect: 558/642 ≈ 0.869.
 * Each photo % is its own width / 558, position is rel-x / 558 for left, rel-y / 642 for top.
 */
.tcl-contact-collage {
    position: relative;
    aspect-ratio: 558 / 642;
    width: 100%;
    max-width: 558px;
    margin-left: 0;
}
.tcl-contact-photo {
    /* All 3 photos: white card frame r=24 padding 8 (Figma) */
    position: absolute;
    background: #FFFFFF !important;
    border-radius: 24px;
    padding: 8px;
    /* Neutral gray shadow (was navy-tinted, which read as "black background"
     * when overlapping photo shadows stacked at the diagonal overlap zone). */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;                /* clip image to the rounded white frame */
}
.tcl-contact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;             /* Figma inner Frame 25/29 r=16 */
    background: #FFFFFF;             /* ensure no transparent fallback bleeds dark */
}
.tcl-contact-photo-1 {
    /* 336x398 at (0, 0) — top-left, BIG */
    width: 60.2%;                   /* 336/558 */
    aspect-ratio: 336 / 398;
    top: 0;
    left: 0;
    z-index: 1;
}
.tcl-contact-photo-2 {
    /* 336x398 at (222, 244) — bottom-right diagonal, BIG */
    width: 60.2%;
    aspect-ratio: 336 / 398;
    top: 38%;                       /* 244/642 */
    left: 39.8%;                    /* 222/558 */
    z-index: 3;
}
.tcl-contact-photo-3 {
    /* 166x196 at (352.5, 32) — top-right, SMALL */
    width: 29.7%;                   /* 166/558 */
    aspect-ratio: 166 / 196;
    top: 5%;                        /* 32/642 */
    left: 63.2%;                    /* 352.5/558 */
    z-index: 2;
}
@media (max-width: 991px) {
    .tcl-contact-collage { max-width: 480px; margin: 0 auto; }
}

/* Frame 15 (Kontaktai right column): 704x579 gap 40
 * Frame 31 (text + form): gap 16
 *   Frame 29 (eyebrow + title): gap 8
 *     Eyebrow #0082C5 16/20.8 wt700
 *     Title #231F20 56/67.2 wt700
 *   Description #727376 18/23.4 wt400
 *   Frame 1984077975 (form): gap 32 between rows
 */
.tcl-contact-content {
    padding: 8px 0;
    max-width: 704px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.tcl-contact-content > .tcl-eyebrow {
    font-weight: 700;
    font-size: 16px;
    line-height: 20.8px;
    text-transform: none;
    letter-spacing: 0;
    color: #0073B2;
    margin: 0;
}
.tcl-contact-content > .tcl-section-title {
    font-size: clamp(2rem, 4vw, 56px);
    line-height: 1.2;
    color: #231F20;
    margin: 0;
    letter-spacing: 0;
    font-weight: 700;
}
/* Combine eyebrow + title + description into a single "Frame 31 → text" group
 * so the 16px gap inside is preserved and the 40px gap to the form below works. */
.tcl-contact-content .tcl-contact-description {
    color: #727376;
    font-size: 18px;
    line-height: 23.4px;
    font-weight: 400;
    margin: 0;
    max-width: 704px;
}
/* Increase the gap between consecutive eyebrow/title/desc to Figma 8/16 spacing.
 * Negative top-margin on subsequent siblings keeps overall block flex gap consistent. */
.tcl-contact-content > .tcl-section-title { margin-top: -32px; }       /* 40 (parent gap) - 8 (Figma inner) */
.tcl-contact-content > .tcl-contact-description { margin-top: -24px; } /* 40 (parent gap) - 16 (Figma inner) */

/* CF7 form styling override — Figma Frame 1984077975 (704x359, gap 32 between rows)
 * Frame 1984077973 (704x47, gap 32) — 2-col row: Vardas + Telefonas
 * Frame 72 — full-width Email
 * Frame 1984078014 — full-width Žinutė + privacy line
 * Component 8 button — Išsiųsti */
.tcl-contact-form-wrap .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;                      /* tightened — less vertical air between fields */
    max-width: 620px;
}
.tcl-contact-form-wrap .wpcf7-form p { margin: 0; }
.tcl-contact-form-wrap .wpcf7-form p:nth-of-type(1),
.tcl-contact-form-wrap .wpcf7-form p:nth-of-type(2) { grid-column: span 1; }
.tcl-contact-form-wrap .wpcf7-form p:nth-of-type(3),
.tcl-contact-form-wrap .wpcf7-form p:nth-of-type(4),
.tcl-contact-form-wrap .wpcf7-form p:nth-of-type(5),
.tcl-contact-form-wrap .wpcf7-form p:nth-of-type(6) { grid-column: 1 / -1; }
.tcl-contact-form-wrap .tcl-cf-label {
    display: block;
    font-family: var(--tcl-font-sans);
    line-height: 1.4;
}
/* Figma 1151:28991 has placeholder-only fields, no visible labels.
 * Hide the label text + the <br> after it, but keep them in the DOM for screen readers. */
.tcl-contact-form-wrap .tcl-cf-label > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tcl-contact-form-wrap .tcl-cf-label > br { display: none; }
.tcl-contact-form-wrap .tcl-cf-required > span:first-child::after {
    content: " *";       /* still announced to AT, not visible */
}
/* Inputs — Figma Frame 72/148: 47h, padding 8/16, fill #FFFFFF, radius 4
 * placeholder #727376 wt500 18/23.4. NO border in Figma — ring shadow on focus only. */
.tcl-contact-form-wrap input[type="text"],
.tcl-contact-form-wrap input[type="tel"],
.tcl-contact-form-wrap input[type="email"],
.tcl-contact-form-wrap textarea {
    width: 100%;
    height: 47px;                            /* Figma exact */
    padding: 8px 16px;                       /* Figma exact */
    border: 1px solid rgba(9, 8, 72, 0.18);  /* subtle border (Figma drops it but UX needs it) */
    border-radius: 4px;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;                         /* Figma 18/23.4 wt500 */
    line-height: 23.4px;
    color: #231F20;
    background: var(--tcl-white);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* iOS auto-zooms the page when an input < 16px is focused. The vendor techwix.css
 * forces all inputs to 13px via a high-specificity :not() chain (0,4,1) that beat
 * the rules above — so CF7 fields were 13px and tapping them zoomed the page.
 * Match that selector's shape (+ the .wpcf7-form class for higher specificity) and
 * pin to 16px so iOS never zooms, on every CF7 form site-wide. */
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7-form textarea,
.wpcf7-form select {
    font-size: 16px;
}
.tcl-contact-form-wrap input::placeholder,
.tcl-contact-form-wrap textarea::placeholder {
    color: #727376;                          /* Figma exact */
    font-weight: 500;
}
.tcl-contact-form-wrap input:hover,
.tcl-contact-form-wrap textarea:hover {
    border-color: rgba(9, 8, 72, 0.45);
}
.tcl-contact-form-wrap input:focus,
.tcl-contact-form-wrap textarea:focus {
    outline: none;
    border-color: var(--tcl-blue-text);
    box-shadow: 0 0 0 3px rgba(0, 130, 197, 0.18);
}
.tcl-contact-form-wrap textarea { min-height: 112px; resize: vertical; }
/* GDPR consent line — Figma Frame 1151:29016: 12px shield icon + 14px light text + underlined link */
.tcl-contact-form-wrap .wpcf7-form p.tcl-cf-consent {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 0;          /* pull the GDPR line up — 6px effective gap above it (was 14px row-gap).
                                  needs the `.wpcf7-form p.` specificity to beat the `p{margin:0}` reset. */
    color: #231F20;
    font-family: var(--tcl-font-sans);
    font-weight: 300;
    font-size: 14px;
    line-height: 18.2px;
}
.tcl-contact-form-wrap .tcl-cf-consent svg {
    flex-shrink: 0;
    color: #231F20;
}
.tcl-contact-form-wrap .tcl-cf-consent a {
    color: #231F20;
    text-decoration: underline;
}
.tcl-contact-form-wrap .tcl-cf-consent a:hover { color: var(--tcl-blue-text); }
.tcl-contact-form-wrap .wpcf7-submit,
.tcl-contact-form-wrap .tcl-btn-primary {
    background: var(--tcl-blue-text);
    color: var(--tcl-white);
    border: 0;
    padding: 12px 32px;            /* Figma 12/32 to match Component 7 across the site */
    border-radius: 4px;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 23.4px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease;
    margin-top: 8px;
    min-width: 200px;
}
.tcl-contact-form-wrap .wpcf7-submit:hover,
.tcl-contact-form-wrap .tcl-btn-primary:hover {
    background: #6AA7D5;   /* match primary-button hover */
    transform: translateY(-1px);
}
.tcl-contact-form-wrap .wpcf7-not-valid-tip {
    color: #d23f3f;
    font-size: 0.825rem;
    margin-top: 4px;
    display: block;
}
/* Techwix forces `text-transform: capitalize` on validation tips, turning the
 * sentence-case CF7 message ("Šį lauką reikia užpildyti.") into ugly Title-Case
 * ("Šį Lauką Reikia Užpildyti."). Reset it so the human-written message shows as
 * authored. !important beats the vendor rule regardless of load order. */
.tcl-contact-form-wrap .wpcf7-not-valid-tip { text-transform: none !important; }
.tcl-contact-form-wrap .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 4px;
    border-width: 1px;
    font-size: 0.9rem;
}

/* --- LT phone field (telecentras-phone.js): prefix overlaid inside input --- */
.tcl-phone {
    position: relative;
    display: block;
}
.tcl-phone > input[type="tel"] {
    /* !important beats the vendor techwix.css :not() chain (specificity 0,4,1)
     * that otherwise sets the input padding; leaves room for flag + +3706. */
    padding-left: 104px !important;
}
.tcl-phone__prefix {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none; /* clicks focus the input */
    font-weight: 600;
    color: var(--tcl-navy, #090848);
}
.tcl-phone__prefix::after {
    content: "";
    width: 1px;
    height: 20px;
    margin-left: 4px;
    background: rgba(9, 8, 72, 0.15);
}
.tcl-phone__flag {
    display: block;
    border-radius: 2px;
    flex: none;
}
.tcl-phone__code {
    line-height: 1;
    letter-spacing: 0.01em;
}

/* === Footer === */
.tcl-footer {
    background: var(--tcl-navy) !important;
    background-image: none !important;
    color: var(--tcl-text-on-dark);
    padding: 60px 0 30px;
    border-radius: var(--tcl-radius-xl) var(--tcl-radius-xl) 0 0;
    /* No margin-top — Figma 1151:28949 city-silhouette band sits flush
     * against the footer with no gap. The decor band already carries
     * margin-bottom: -1px to overlap into the footer's top edge. */
    margin-top: 0;
}
/* Figma Frame 1151:29020 desktop footer: 3-row layout.
 *  Row 1 .tcl-footer-header — logo only
 *  Row 2 .tcl-footer-body   — 2-col (Paslaugos | right-stack with Apie+Naudinga+Draugaukime)
 *  Row 3 .tcl-footer-bottom — copyright LEFT + AINIS SPACE RIGHT
 */
.tcl-footer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.tcl-footer-body {
    display: grid;
    grid-template-columns: 1fr 2fr;      /* Paslaugos 459 | stack 949 — Figma 1440 = 459+949+32 */
    gap: 32px;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tcl-footer-stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.tcl-footer-cols-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;       /* Apie įmonę | Naudinga informacija */
    gap: 32px;
}
/* Legacy class kept for backwards compat — alias to body */
.tcl-footer-top { display: none; }
@media (max-width: 991px) {
    .tcl-footer-body { grid-template-columns: 1fr; gap: 32px; }
    .tcl-footer-cols-pair { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 600px) {
    .tcl-footer-cols-pair { grid-template-columns: 1fr; }
    /* Single column: Draugaukime + icons span full width, left-aligned.
     * !important: this block precedes the base rule, so beat it on the tie. */
    .tcl-footer-social-row { grid-template-columns: 1fr !important; }
    .tcl-footer-social-title,
    .tcl-footer-socials { grid-column: 1 !important; }
}
.tcl-footer-logo {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--tcl-white);
    text-decoration: none;
    letter-spacing: 0.04em;
    display: inline-block;
    margin-bottom: 18px;
}
/* Footer logo: white-wordmark variant (blue icon + #FFFFFF text) renders as-is
 * on the navy footer — no filter (keeps the blue wave icon, matches Figma). */
.tcl-footer .tcl-brand-logo,
.tcl-footer-logo .tcl-brand-logo {
    filter: none;
}
/* Figma 1151:29020: column title 24/28.8 wt700 white, link items 18/23.4 wt400 white */
.tcl-footer-col-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 28.8px;
    color: var(--tcl-white);
    margin: 0 0 24px;
}
.tcl-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tcl-footer-links a {
    color: var(--tcl-white);
    text-decoration: none;
    font-size: 18px;
    line-height: 23.4px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.18s ease;
}
/* Paslaugos column: chevron-right icon before each item (Figma Frame 1151:29020
 * Frame 716 shows 16×16 icon + 8 gap + text on each Paslaugos sub-link). */
.tcl-footer-links--icons a::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>') no-repeat center / 16px 16px;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>') no-repeat center / 16px 16px;
    opacity: 0.85;
}
/* Footer link bullets removed per client pixel audit (cleaner look) */
.tcl-footer-links a:hover { color: var(--tcl-blue-soft); }
.tcl-footer-links li.current-menu-item a { color: var(--tcl-blue-soft); }

/* Admin-managed footer columns 1 & 2 (Telecentras → Poraštė WYSIWYG output).
 * Styles generic rich-text HTML (p / strong / ul / a) for the navy footer. */
.tcl-footer-richtext {
    color: var(--tcl-white);
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}
.tcl-footer-richtext p { margin: 0 0 14px; }
.tcl-footer-richtext p:last-child { margin-bottom: 0; }
.tcl-footer-richtext a {
    color: var(--tcl-white);
    text-decoration: none;
    transition: color 0.18s ease;
}
.tcl-footer-richtext a:hover { color: var(--tcl-blue-soft); }
.tcl-footer-richtext ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tcl-footer-richtext ul li {
    position: relative;
    padding-left: 24px;
}
.tcl-footer-richtext ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background: var(--tcl-blue-soft);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>') no-repeat center / 16px 16px;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>') no-repeat center / 16px 16px;
}

/* Draugaukime block sits under the LAST footer column: mirror the cols-pair
 * grid and drop the title + icons (stacked) into the second column. */
.tcl-footer-social-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 0;
    margin-bottom: 18px;
}
.tcl-footer-social-title {
    grid-column: 2;
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: var(--tcl-white);
    margin: 0 0 16px;
}
/* Icons directly under the title, in the last column (Figma 407:11296). */
.tcl-footer-socials {
    grid-column: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}
/* Plain 24px white glyphs, no chip — matches Figma 407:13662. */
.tcl-footer-socials a {
    color: var(--tcl-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.18s ease;
}
.tcl-footer-socials a:hover {
    opacity: 0.7;
}
.tcl-footer-socials svg {
    display: block;
    width: 24px;
    height: 24px;
}

.tcl-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.tcl-footer-copyright {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
.tcl-footer-credit {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tcl-credit-mark {
    color: var(--tcl-white);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
    transition: color 0.18s ease;
}
.tcl-credit-mark:hover { color: var(--tcl-blue-soft, #ABE0F9); }

/* === Paslaugos archive — Figma node 1321:10804 === */

/* ISO certs band — Figma Frame 1151:29633 (3×2 grid, bordered cards, bullets) */
.tcl-iso-band {
    padding: 80px 0;
    background: var(--tcl-white);
}
.tcl-iso-band-head {
    text-align: center;
    max-width: 950px;
    margin: 0 auto 40px;
}
.tcl-iso-band-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: #000;
    margin: 0 0 8px;
}
.tcl-iso-band-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    margin: 0;
}
.tcl-iso-grid {
    /* Figma 1151:29637 + 1151:29677: 3×2 grid, gap 32px, equal-width cards. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto;
}
.tcl-iso-card {
    /* Figma 1151:29638: 1px solid #0082C5 border, padding 16, gap 16 col, radius 16 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
    padding: 16px;
    border: 1px solid #0082C5;
    border-radius: 16px;
    background: var(--tcl-white);
    box-shadow: none;
}
.tcl-iso-card-badge {
    width: 112px;
    height: 112px;
    object-fit: contain;
    flex: 0 0 auto;
}
.tcl-iso-card-badge-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tcl-blue-text);
    color: var(--tcl-white);
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
}
.tcl-iso-card-name {
    /* Figma 1151:29651: DM Sans Bold 18/23.4 #231F20, full-width card title */
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: #231F20;
    margin: 0;
    width: 100%;
}
.tcl-iso-card-bullets {
    /* Figma 1151:29652: DM Sans Regular 14/18.2 #727376, list-disc, indent ~21px */
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: #727376;
    margin: 0;
    padding: 0 0 0 21px;
    list-style: disc;
    width: 100%;
}
.tcl-iso-card-bullets li {
    margin: 0 0 4px;
}
.tcl-iso-card-bullets li:last-child {
    margin-bottom: 0;
}
.tcl-iso-band-note {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    text-align: center;
    margin: 40px auto 0;
    max-width: 950px;
}
@media (max-width: 991px) {
    .tcl-iso-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
    .tcl-iso-grid { grid-template-columns: 1fr; }
}

/* Tier III certificates band (VDC3 / VDC4) — mirrors the ISO band head + card. */
.tcl-tier3-band {
    padding: 80px 0;
    background: var(--tcl-white);
}
.tcl-tier3-head {
    text-align: center;
    max-width: 950px;
    margin: 0 auto 40px;
}
.tcl-tier3-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: #000;
    margin: 0 0 8px;
}
.tcl-tier3-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    margin: 0;
}
.tcl-tier3-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}
.tcl-tier3-card {
    flex: 0 1 250px;            /* smaller, proportional badges (was full-width grid cells) */
    max-width: 250px;
    margin: 0;
    padding: 12px;
    border: 1px solid #0082C5;
    border-radius: 16px;
    background: var(--tcl-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tcl-tier3-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
@media (max-width: 600px) {
    .tcl-tier3-band { padding: 56px 0; }
    .tcl-tier3-grid { gap: 20px; }
    .tcl-tier3-card { flex-basis: 220px; max-width: 220px; }
}

/* Paslaugos list — Frame 1984078323 — 6 category groups */
.tcl-paslaugos-list {
    padding: 40px 0 80px;
    background: var(--tcl-white);
}
.tcl-paslaugos-group { padding: 32px 0; }
.tcl-paslaugos-group + .tcl-paslaugos-group { border-top: 1px solid rgba(9, 8, 72, 0.06); }
.tcl-paslaugos-group-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 28px;
    line-height: 33.6px;
    color: #231F20;
    margin: 0 0 32px;
}
/* Figma 1321:11029: each category renders ONE horizontal row of fixed-width
 * 213px cards (gap 32). Card count varies 2-5 per category based on which
 * paslaugos CPT entries have that service_category term — items appear /
 * disappear via taxonomy assignment in WP admin. Cards stay 213px wide;
 * flex-wrap allows fallback to next row if a category exceeds row width. */
.tcl-paslaugos-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: flex-start;
    align-items: stretch;
}
.tcl-paslaugos-cards > .tcl-paslauga-card {
    flex: 0 0 213px;
    width: 213px;
    min-height: 272px;
}
@media (max-width: 991px) {
    .tcl-paslaugos-cards > .tcl-paslauga-card {
        flex: 0 0 calc(50% - 16px);
        width: calc(50% - 16px);
    }
}
@media (max-width: 600px) {
    .tcl-paslaugos-cards > .tcl-paslauga-card {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* Paslauga card — Figma 1151:29216: 459×244, bg #090C51 (dark navy, slightly more
 * saturated than tcl-navy #090848), padding 16, rounded 16, shadow 0 0 16
 * rgba(9,8,72,0.16), white text, gap 16, ALL CENTERED. Icon at top, title + excerpt
 * stacked centered, "Plačiau" blue pill at bottom. */
.tcl-paslauga-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    background: #090C51;
    border-radius: 16px;
    padding: 16px;
    min-height: 244px;
    color: var(--tcl-white);
    text-decoration: none;
    box-shadow: 0 0 16px rgba(9, 8, 72, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    position: relative;
}
.tcl-paslauga-card:hover,
.tcl-paslauga-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(9, 8, 72, 0.22);
    color: var(--tcl-white);
}
.tcl-paslauga-icon {
    width: 40px;
    height: 40px;
    /* Figma icons are gradient blue — invert to white-ish on the dark navy card */
    filter: brightness(0) invert(1) opacity(0.95);
    flex: 0 0 auto;
}
.tcl-paslauga-text {
    /* Inner gap-4 wrapper around title+excerpt (Figma 1151:29228). */
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.tcl-paslauga-title {
    font-family: var(--tcl-font-sans);
    font-weight: 500;             /* Figma: DM Sans Medium 18 */
    font-size: 18px;
    line-height: 1.3;
    color: var(--tcl-white);
    margin: 0;
    width: 100%;
}
.tcl-paslauga-excerpt {
    font-family: var(--tcl-font-sans);
    font-weight: 400;             /* Figma: DM Sans Regular 14 */
    font-size: 14px;
    line-height: 1.3;
    color: var(--tcl-white);
    margin: 0 0 -4px;              /* tighten gap before button (gap:16 already added above) */
    width: 100%;
    opacity: 0.92;
}
.tcl-paslauga-cta {
    /* Figma 1151:29231 "Component 7" small variant: bg #0082C5, padding 6/16, radius 4,
     * DM Sans Medium 16 white, gap 8 (between label and arrow). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--tcl-blue-text);
    border-radius: 4px;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--tcl-white);
}
.tcl-paslauga-card:hover .tcl-paslauga-cta {
    background: #0093de;          /* subtle lift on hover */
}
.tcl-paslauga-card:hover .tcl-paslauga-cta svg {
    transform: translateX(2px);
    transition: transform 0.18s ease;
}

/* === Single-projektai related cards (modernized 2026-05-13) === */
.tcl-projekt-figure {
    margin: 0 0 32px;
    border-radius: 16px;
    overflow: hidden;
}
.tcl-projekt-figure img { width: 100%; height: auto; display: block; }
.tcl-projekt-related { padding: 80px 0; background: var(--tcl-white); }
.tcl-projekt-related-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 36px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    text-align: center;
    margin: 0 0 40px;
}
.tcl-projekt-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 700px) { .tcl-projekt-related-grid { grid-template-columns: 1fr; } }
.tcl-projekt-related-card {
    display: flex;
    flex-direction: column;
    background: var(--tcl-white);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tcl-text, #231F20);
    box-shadow: 0 0 16px rgba(9,8,72,0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tcl-projekt-related-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(9,8,72,0.14); }
.tcl-projekt-related-thumb { aspect-ratio: 16/9; overflow: hidden; background: #f4f6f8; }
.tcl-projekt-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcl-projekt-related-thumb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #E6F3FB 0%, #c6ddec 100%);
}
.tcl-projekt-related-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.tcl-projekt-related-name {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
}
.tcl-projekt-related-excerpt {
    color: #727376;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.tcl-projekt-related-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0067a3;
    font-weight: 500;
    font-size: 14px;
    margin-top: 4px;
}

/* === 404 link cards (2026-05-13) === */
.tcl-404-links { padding: 60px 0 80px; background: var(--tcl-white); }
.tcl-404-links-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 32px);
    color: var(--tcl-text, #231F20);
    text-align: center;
    margin: 0 0 40px;
}
.tcl-404-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}
@media (max-width: 800px) { .tcl-404-links-grid { grid-template-columns: 1fr; } }
.tcl-404-link-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background: var(--tcl-white);
    border: 1px solid #E6E7E8;
    border-radius: 16px;
    text-decoration: none;
    color: var(--tcl-text, #231F20);
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.tcl-404-link-card:hover { border-color: #0073B2; transform: translateY(-2px); }
.tcl-404-link-card h3 { font-size: 18px; font-weight: 700; margin: 0; }
.tcl-404-link-card p { font-size: 14px; color: #727376; margin: 0; line-height: 1.5; }
.tcl-404-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0067a3;
    font-weight: 500;
    font-size: 14px;
    margin-top: 8px;
}
.tcl-404-search { text-align: center; max-width: 560px; margin: 0 auto; }
.tcl-404-search p { color: #727376; margin: 0 0 16px; }
.tcl-404-search .search-form {
    display: flex;
    gap: 8px;
    border: 1px solid #E6E7E8;
    border-radius: 8px;
    padding: 8px;
}
.tcl-404-search .search-form input { flex: 1; border: 0; outline: 0; background: transparent; padding: 8px 12px; font-size: 14px; }
.tcl-404-search .search-form button { padding: 8px 20px; background: var(--tcl-blue-text); color: #fff; border: 0; border-radius: 6px; font-weight: 500; cursor: pointer; }

/* === Search results page (2026-05-13) === */
.tcl-search-form-section { padding: 8px 0 40px; background: var(--tcl-white); }
.tcl-search-lead {
    max-width: 720px;
    margin: 0 auto 20px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: #727376;
}
.tcl-search-form-section .search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding: 7px 7px 7px 22px;
    background: var(--tcl-white);
    border: 1px solid #E6E7E8;
    border-radius: var(--tcl-radius-pill, 999px);
    box-shadow: var(--tcl-shadow-card, 0 0 16px rgba(9, 8, 72, 0.08));
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tcl-search-form-section .search-form:focus-within {
    border-color: var(--tcl-blue-text, #0073B2);
    box-shadow: 0 0 0 3px rgba(0, 130, 197, 0.12);
}
.tcl-search-form-section .search-form-icon {
    color: var(--tcl-blue-text, #0073B2);
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
}
.tcl-search-form-section .search-form-label { flex: 1; min-width: 0; display: flex; margin: 0; }
/* Beat techwix.css input reset (specificity 0,4,1) per the child-theme cascade rule. */
.tcl-search-form-section .search-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none;
    border: 0;
    outline: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: #231F20;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}
.tcl-search-form-section .search-form input::placeholder { color: #727376; font-weight: 500; opacity: 1; }
.tcl-search-form-section .search-form input::-webkit-input-placeholder { color: #727376; font-weight: 500; opacity: 1; }
.tcl-search-form-section .search-form input::-webkit-search-decoration,
.tcl-search-form-section .search-form input::-webkit-search-cancel-button,
.tcl-search-form-section .search-form input::-webkit-search-results-button,
.tcl-search-form-section .search-form input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
.tcl-search-form-section .search-form .search-submit {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 30px;
    background: var(--tcl-blue, #0082C5);
    color: #fff;
    border: 0;
    border-radius: var(--tcl-radius-pill, 999px);
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
.tcl-search-form-section .search-form .search-submit:hover { background: var(--tcl-blue-hover, #006BA3); }
@media (max-width: 575px) {
    .tcl-search-form-section .search-form { padding-left: 16px; gap: 8px; }
    .tcl-search-form-section .search-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { font-size: 16px; }
    .tcl-search-form-section .search-form .search-submit { padding: 0 18px; }
}
.tcl-search-empty {
    text-align: center;
    padding: 60px 16px;
    color: #727376;
    font-size: 16px;
}
.tcl-search-empty p { margin: 0 0 12px; }
.tcl-search-empty a { color: #0073B2; }

/* Multi-CPT search chip filters (Tobalt Multi-CPT Search plugin → telecentras skin) */
.tcl-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.tcl-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(9, 8, 72, 0.14);
    border-radius: var(--tcl-radius-pill, 999px);
    background: #fff;
    color: var(--tcl-navy, #090848);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tcl-search-chip:hover { background: var(--tcl-bg-soft, #F1F5F6); border-color: var(--tcl-blue-text, #0073B2); }
.tcl-search-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--tcl-radius-pill, 999px);
    background: var(--tcl-bg-soft, #F1F5F6);
    color: var(--tcl-navy, #090848);
    font-size: 12px;
    font-weight: 700;
}
.tcl-search-chip.is-active {
    background: var(--tcl-navy, #090848);
    border-color: var(--tcl-navy, #090848);
    color: #fff;
}
.tcl-search-chip.is-active .tcl-search-chip-count {
    background: var(--tcl-blue, #0082C5);
    color: #fff;
}

/* Empty-state recovery — newest content grid */
.tcl-search-fallback { padding-top: 8px; }
.tcl-search-fallback-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--tcl-navy, #090848);
    margin: 0 0 24px;
}

/* Scroll-anchor markers — inline span before sections, scroll-margin keeps
 * jumps below the fixed/transparent header overlay. Zero visual impact. */
.tcl-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 100px;
}

/* === Inner-hero light variant (Figma 1151:30087 Apie mus composite) === */
.tcl-inner-hero--light {
    background: var(--tcl-white) !important;
    color: var(--tcl-text, #231F20);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    padding: 120px 8px 80px;
    min-height: 536px;
    text-align: center;
}
.tcl-inner-hero--light .tcl-ih-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 2;
}
.tcl-inner-hero--light .tcl-ih-breadcrumb {
    color: #727376;
    margin-bottom: 0;
    justify-content: center;
}
.tcl-inner-hero--light .tcl-ih-breadcrumb a { color: #727376; opacity: 1; }
.tcl-inner-hero--light .tcl-ih-breadcrumb a:hover { color: #0073B2; }
.tcl-inner-hero--light .tcl-ih-crumb-sep { color: #727376; }
.tcl-inner-hero--light .tcl-ih-crumb-current { color: #0073B2; }
.tcl-inner-hero--light .tcl-ih-title {
    color: var(--tcl-text, #231F20);
    font-size: clamp(2.5rem, 5vw, 64px);
    line-height: 1.1;
}
.tcl-inner-hero--light .tcl-ih-subtitle {
    color: #727376;
    max-width: 720px;
    margin: 0 auto;
}
.tcl-inner-hero--light .tcl-ih-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: 80px;
    margin-top: 32px;
    justify-content: center;
}
@media (max-width: 700px) {
    .tcl-inner-hero--light .tcl-ih-stats { grid-template-columns: 1fr; gap: 24px; }
}
.tcl-ih-stat-number {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 64px);
    line-height: 1.1;
    color: #0073B2;
}
.tcl-ih-stat-label {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--tcl-text, #231F20);
    margin-top: 8px;
    max-width: 200px;
}
.tcl-inner-hero--light .tcl-ih-cta { margin-top: 16px; }
.tcl-inner-hero--light .tcl-ih-cta .tcl-btn-primary {
    background: var(--tcl-blue-text);
    color: #fff;
    padding: 12px 32px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* L/R silhouette PNG backgrounds — pinned to bottom corners, behind content */
.tcl-ih-decor-left,
.tcl-ih-decor-right {
    position: absolute;
    bottom: 0;
    width: auto;
    height: 70%;
    max-height: 380px;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.tcl-ih-decor-left  { left: 0;   }
.tcl-ih-decor-right { right: 0;  }
@media (max-width: 900px) {
    .tcl-ih-decor-left, .tcl-ih-decor-right { height: 200px; opacity: 0.5; }
}

/* === Karjera job posts grid (Figma 1151:31918) === */
.tcl-job-posts { padding: 80px 0; background: var(--tcl-white); }
.tcl-job-posts-head { text-align: center; max-width: 800px; margin: 0 auto 40px; }
.tcl-job-posts-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0 0 16px;
}
.tcl-job-posts-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #727376;
    margin: 0;
}
.tcl-job-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
/* Karjera intro (Figma 1151:31863) — 2 diagonal-cascade photos in white-frame cards
 * + green circle (bottom-left) + blue blobs (top-right + mid). */
.tcl-content-block--photos-collage .tcl-content-block-decor { position: relative; min-height: 560px; }
.tcl-content-block--photos-collage .tcl-content-block-shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    display: block;
    border-radius: 50%;
}
.tcl-content-block-shape--blue-blob-tr {
    width: 140px; height: 140px;
    background: #CBEBFC;
    top: 8%; right: 4%;
    border-radius: 60% 40% 50% 50% / 50%;
}
.tcl-content-block-shape--green-circle-bl {
    width: 200px; height: 200px;
    background: #BBDBA9;
    bottom: -6%; left: -4%;
    opacity: 0.85;
}
.tcl-content-block-shape--blue-circle-mid {
    width: 110px; height: 110px;
    background: #79BBF1;
    top: 40%; left: 50%;
    transform: translate(-50%, 0);
    opacity: 0.45;
}
.tcl-content-block-collage-photo {
    position: absolute;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(9, 8, 72, 0.16);
    background: #fff;
    padding: 8px;
    z-index: 2;
}
.tcl-content-block-collage-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
/* Top-left photo (~3:4 aspect, the person) */
.tcl-content-block-collage-photo-1 { top: 0; left: 6%; width: 56%; aspect-ratio: 3/4; z-index: 2; }
/* Bottom-right photo (~3:4 aspect, the TV tower) */
.tcl-content-block-collage-photo-2 { bottom: 0; right: 4%; width: 54%; aspect-ratio: 3/4; z-index: 3; }

/* Karjera praktikos (Figma 1151:31929) — single photo card + blue circle to the right */
.tcl-content-block--photo-square .tcl-content-block-decor {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.tcl-content-block-photo-single {
    position: relative;
    z-index: 2;
    width: 84%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(9, 8, 72, 0.16);
    aspect-ratio: 3/2;
    background: #fff;
    padding: 8px;
}
.tcl-content-block-photo-single img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
.tcl-content-block-shape--praktikos-circle {
    position: absolute;
    width: 76px; height: 76px;
    background: #79BBF1;
    border-radius: 50%;
    top: 50%;
    right: 0;
    transform: translateY(-30%);
    z-index: 1;
}

@media (max-width: 991px) {
    .tcl-content-block--photos-collage .tcl-content-block-decor,
    .tcl-content-block--photo-square .tcl-content-block-decor { min-height: 380px; }
    .tcl-content-block-collage-photo-1 { width: 64%; left: 2%; }
    .tcl-content-block-collage-photo-2 { width: 60%; right: 0; }
    .tcl-content-block-photo-single { width: 96%; }
    .tcl-content-block-shape--blue-blob-tr { width: 80px; height: 80px; }
    .tcl-content-block-shape--green-circle-bl { width: 130px; height: 130px; }
    .tcl-content-block-shape--blue-circle-mid { display: none; }
}

/* Stats panel — count-based grid override so 3-stat layouts (karjera) don't cluster left */
.tcl-stats-grid--count-3 { grid-template-columns: repeat(3, 1fr) !important; max-width: 900px; gap: 80px; justify-content: center; }
.tcl-stats-grid--count-4 { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 991px) {
    .tcl-stats-grid--count-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 32px; max-width: 100%; }
}
@media (max-width: 600px) {
    .tcl-stats-grid--count-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Karjera — "Kodėl verta dirbti pas mus?" Figma 1151:31944, 5 photo cards 3+2. */
.tcl-karjera-why { padding: 80px 0; background: var(--tcl-white); }
.tcl-karjera-why-head {
    max-width: 950px;
    margin: 0 auto 40px;
    text-align: center;
    padding: 0 16px;
}
.tcl-karjera-why-label {
    display: inline-block;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    color: #0073B2;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tcl-karjera-why-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.2;
    color: #231F20;
    margin: 0 0 12px;
}
.tcl-karjera-why-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    margin: 0;
}
.tcl-karjera-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
}
/* 3+2: rows two has 2 cards centered. nth-child(n+4) shifts onto its own row. */
.tcl-karjera-why-grid--5 > .tcl-karjera-why-card:nth-child(4) { grid-column: 1 / span 1; grid-column-start: 1; }
.tcl-karjera-why-grid--5 > .tcl-karjera-why-card:nth-child(5) { grid-column: 2 / span 1; }
.tcl-karjera-why-grid--4 > .tcl-karjera-why-card:nth-child(4) { grid-column: 1 / span 1; }
.tcl-karjera-why-card { margin: 0; }
.tcl-karjera-why-card-inner {
    position: relative;
    background: var(--tcl-white);
    padding: 12px;
    border-radius: 32px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    aspect-ratio: 459 / 585;
}
.tcl-karjera-why-card-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}
.tcl-karjera-why-card-overlay {
    position: absolute;
    inset: 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(9,8,72,0) 35%, rgba(9,8,72,0.55) 75%, rgba(9,8,72,0.85) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    gap: 8px;
}
.tcl-karjera-why-card-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}
.tcl-karjera-why-card-desc {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: rgba(255,255,255,0.92);
    margin: 0;
}
@media (max-width: 991px) {
    .tcl-karjera-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tcl-karjera-why-grid--5 > .tcl-karjera-why-card:nth-child(4),
    .tcl-karjera-why-grid--5 > .tcl-karjera-why-card:nth-child(5),
    .tcl-karjera-why-grid--4 > .tcl-karjera-why-card:nth-child(4) { grid-column: auto; }
    .tcl-karjera-why-title { font-size: 32px; }
}
@media (max-width: 600px) {
    .tcl-karjera-why-grid { grid-template-columns: 1fr; }
    .tcl-karjera-why-title { font-size: 26px; }
}

/* Asymmetric — Figma 1151:31918: 3 cards top row + 1 card bottom-left (no fill). */
.tcl-job-posts-grid--asymmetric {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.tcl-job-posts-grid--asymmetric > .tcl-job-post-card:nth-child(n+4) {
    /* Bottom-row cards stay 1/3 width, aligned LEFT (no grid-column stretch). */
    grid-column: 1;
}
@media (max-width: 991px) { .tcl-job-posts-grid,
    .tcl-job-posts-grid--asymmetric { grid-template-columns: repeat(2, 1fr); }
    .tcl-job-posts-grid--asymmetric > .tcl-job-post-card:nth-child(n+4) { grid-column: auto; }
}
@media (max-width: 600px) { .tcl-job-posts-grid,
    .tcl-job-posts-grid--asymmetric { grid-template-columns: 1fr; }
}
/* Job cards: no logo/photo — the position title IS the tile; "Peržiūrėti"
 * reveals on hover (Tobalt 2026: the identical logos added no value). */
.tcl-job-post-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 168px;
    padding: 28px 24px;
    background: var(--tcl-white);
    border: 1px solid #E6E7E8;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tcl-text, #231F20);
    box-shadow: 0 0 16px rgba(9, 8, 72, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.tcl-job-post-card:hover,
.tcl-job-post-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--tcl-blue, #0082C5);
    box-shadow: 0 8px 24px rgba(9, 8, 72, 0.12);
}
.tcl-job-post-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.tcl-job-post-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--tcl-text, #231F20);
    margin: 0;
}
.tcl-job-post-location {
    font-family: var(--tcl-font-sans);
    font-size: 13px;
    line-height: 1.4;
    color: var(--tcl-muted, #727376);
    margin: 2px 0 0;
}
/* Hidden until hover/focus, then slides in (WCAG AA: #0067a3 on white = 5.85:1). */
.tcl-job-post-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-family: var(--tcl-font-sans);
    font-weight: 600;
    font-size: 14px;
    color: #0067a3;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.tcl-job-post-card:hover .tcl-job-post-cta,
.tcl-job-post-card:focus-visible .tcl-job-post-cta { opacity: 1; transform: none; }
@media (hover: none) { .tcl-job-post-cta { opacity: 1; transform: none; } }
/* In-page anchor targets land below the sticky header (e.g. the "Pildyti formą"
 * button jumping to the Pretendento anketa form). */
#pretendento-anketa, #darbo-skelbimai { scroll-margin-top: 110px; }

/* === Naujienos filter bar (Figma 1151:31498) === */
.tcl-news-filter { padding: 56px 0 0; background: var(--tcl-white); }
.tcl-news-filter-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}
.tcl-news-filter-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 400px;
    height: 52px;
    padding: 8px 22px;
    box-sizing: border-box;
    background: var(--tcl-white);
    border: 1px solid #E6E7E8;
    border-radius: var(--tcl-radius-pill, 999px);
    box-shadow: var(--tcl-shadow-card, 0 0 16px rgba(9, 8, 72, 0.08));
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tcl-news-filter-field:focus-within {
    border-color: var(--tcl-blue-text, #0073B2);
    box-shadow: 0 0 0 3px rgba(0, 130, 197, 0.12);
}
.tcl-news-filter-icon { color: var(--tcl-blue-text, #0073B2); flex: 0 0 18px; width: 18px; height: 18px; }
/* Techwix techwix.css:468 has `input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file])` at specificity 0,4,1 — match that chain so our reset wins the cascade (per the child-theme specificity rule used elsewhere). */
.tcl-news-filter-search input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: #231F20;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    width: auto;
    max-width: none;
    transition: none;
}
.tcl-news-filter-search input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::placeholder { color: #727376; font-weight: 500; font-size: 18px; opacity: 1; }
.tcl-news-filter-search input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::-webkit-input-placeholder { color: #727376; font-weight: 500; font-size: 18px; opacity: 1; }
.tcl-news-filter-search input::-webkit-search-decoration,
.tcl-news-filter-search input::-webkit-search-cancel-button,
.tcl-news-filter-search input::-webkit-search-results-button,
.tcl-news-filter-search input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
.tcl-news-filter-clear {
    color: #727376;
    text-decoration: none;
    line-height: 1;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    flex: 0 0 16px;
}
.tcl-news-filter-clear:hover { color: #231F20; }
.tcl-news-filter-select select {
    flex: 1; min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    cursor: pointer;
}
.tcl-news-filter-chevron {
    color: #727376;
    flex: 0 0 16px;
    width: 16px; height: 16px;
    pointer-events: none;
    transition: transform 0.18s ease;
}

/* Custom rounded category dropdown (JS-enhanced; native <select> popups can't be
   border-radius'd). The panel mirrors the calendar popup for a consistent look. */
.tcl-news-filter-select select.tcl-cat-native { display: none; }
.tcl-news-filter-select:has(.tcl-cat-trigger) { cursor: pointer; }
.tcl-cat-trigger {
    flex: 1;
    min-width: 0;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: #231F20;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tcl-news-filter-select.is-open .tcl-news-filter-chevron { transform: rotate(180deg); }
.tcl-cat-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    display: none;
    z-index: 60;
    padding: 8px;
    background: #fff;
    border-radius: var(--tcl-radius-card, 16px);
    box-shadow: 0 12px 40px rgba(9, 8, 72, 0.16), 0 0 0 1px #E6E7E8;
}
.tcl-news-filter-select.is-open .tcl-cat-panel { display: block; }
.tcl-cat-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    color: #231F20;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.tcl-cat-option:hover,
.tcl-cat-option:focus-visible { background: rgba(0, 130, 197, 0.08); color: #0073B2; outline: 0; }
.tcl-cat-option.is-selected { background: var(--tcl-blue-text); color: #fff; }

/* Month-picker — Flatpickr-driven readonly text input. The :not() chain
   matches techwix.css:468 (0,4,1) so we win the input-default cascade. */
.tcl-news-filter-month-picker,
.tcl-news-filter-month input[type="text"]:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    flex: 1; min-width: 0;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: #231F20;
    background: transparent;
    border: 0; outline: 0;
    padding: 0; margin: 0;
    box-shadow: none; border-radius: 0;
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    width: auto; max-width: none;
    transition: none;
}
.tcl-news-filter-month-picker::placeholder { color: #727376; font-weight: 500; opacity: 1; }
.tcl-news-filter-month-picker::-webkit-input-placeholder { color: #727376; font-weight: 500; opacity: 1; }

/* Flatpickr brand-color theme (telecentras blue #0082C5 + DM Sans).
 * NOTE: flatpickr.min.css + monthSelect/style.css load AFTER telecentras.css, so
 * plain `.flatpickr-*` overrides lose on source order (the calendar fell back to its
 * 5px square radius). Prefix with `body ` to outrank flatpickr's own rules. */
body .flatpickr-calendar {
    font-family: var(--tcl-font-sans);
    border-radius: var(--tcl-radius-card, 16px);
    box-shadow: 0 12px 40px rgba(9, 8, 72, 0.16), 0 0 0 1px #E6E7E8;
    border: 0;
    overflow: hidden;
    padding: 4px;
}
/* flatpickr's little pointer triangle reads as a square nub against the rounded
 * panel — drop it (the field-to-popup gap is small anyway). */
body .flatpickr-calendar.arrowTop:before,
body .flatpickr-calendar.arrowTop:after,
body .flatpickr-calendar.arrowBottom:before,
body .flatpickr-calendar.arrowBottom:after { display: none; }
body .flatpickr-calendar .flatpickr-monthDropdown-months,
body .flatpickr-calendar .flatpickr-current-month input.cur-year {
    font-family: var(--tcl-font-sans);
    font-weight: 600;
    color: #231F20;
}
/* Neutralise techwix's global `input { … }` height/padding (0,4,1) on Flatpickr's
 * internal year <input>. Without this it renders ~52px tall, overflowing the 34px
 * month header and overlapping the month grid (the "year hidden under months" bug). */
body .flatpickr-calendar .flatpickr-current-month input.cur-year:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    vertical-align: middle;
}
body .flatpickr-calendar .numInputWrapper { height: auto; }
body .flatpickr-months { padding: 4px 6px 0; }
body .flatpickr-months .flatpickr-prev-month,
body .flatpickr-months .flatpickr-next-month { color: #231F20; fill: #231F20; }
body .flatpickr-months .flatpickr-prev-month:hover svg,
body .flatpickr-months .flatpickr-next-month:hover svg { fill: #0082C5; }

/* monthSelect plugin — month tiles. */
body .flatpickr-monthSelect-months { padding: 10px 12px 12px; gap: 6px; }
body .flatpickr-monthSelect-month {
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 14px;
    color: #231F20;
    border-radius: 10px;
    padding: 9px 4px;
    transition: background 0.15s ease, color 0.15s ease;
}
body .flatpickr-monthSelect-month:hover { background: rgba(0, 130, 197, 0.08); color: #0073B2; }
body .flatpickr-monthSelect-month.selected,
body .flatpickr-monthSelect-month.selected:hover {
    background: var(--tcl-blue-text) !important;
    color: #fff !important;
    border-color: transparent !important;
}
body .flatpickr-monthSelect-month.today { box-shadow: inset 0 0 0 1px #0082C5; }
body .flatpickr-monthSelect-month.flatpickr-disabled,
body .flatpickr-monthSelect-month.flatpickr-disabled:hover { color: #C0C2C7; background: transparent; cursor: not-allowed; }
@media (max-width: 900px) {
    .tcl-news-filter { padding-top: 32px; }
    .tcl-news-filter-form { flex-direction: column; align-items: stretch; gap: 12px; }
    .tcl-news-filter-field { width: 100%; }
}

/* === Apie mus — generic content-block / card-stack / data-table === */

/* Content block (Figma 1151:30114 / 30132 / 30276 / 30549) */
.tcl-content-block { padding: 80px 0; background: var(--tcl-white); }
.tcl-content-block-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    /* Top-align the columns so the eyebrow/title line up with the top of the
     * decoration/photo column instead of floating vertically centered. */
    align-items: start;
}
@media (max-width: 991px) {
    .tcl-content-block-grid { grid-template-columns: 1fr; }
    .tcl-content-block-text, .tcl-content-block-decor { order: unset !important; }
}
.tcl-content-block-text { display: flex; flex-direction: column; gap: 16px; }
.tcl-content-block-eyebrow {
    color: #0073B2;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 14px;
    /* Sentence-case (capitalize first word only). Admin enters text exactly
     * how it should display; CSS does not transform. */
    letter-spacing: 0.06em;
}
.tcl-content-block-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0;
}
.tcl-content-block-body {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: #5B5C5F;
}
.tcl-content-block-body p { margin: 0 0 16px; }
.tcl-content-block-body p:last-child { margin: 0; }
.tcl-content-block-body a { color: #0073B2; }
.tcl-content-block-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--tcl-font-sans);
    /* Match the body paragraph type + branded blue-dot bullets for consistency. */
    font-size: 16px;
    line-height: 1.75;
    color: #5B5C5F;
}
.tcl-content-block-list > li {
    position: relative;
    padding-left: 26px;
}
.tcl-content-block-list > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tcl-blue);
}
.tcl-content-block-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.tcl-content-block-cta .btn { padding: 12px 24px; }
.tcl-btn-secondary {
    background: transparent;
    color: #0073B2;
    border: 1px solid #0082C5;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tcl-btn-secondary:hover { background: rgba(0,130,197,0.08); color: #0073B2; }
/* Decoration variants (no asset, pure CSS) */
.tcl-content-block-decor { position: relative; min-height: 360px; }
.tcl-content-block-card-outline {
    position: absolute;
    border: 1.5px solid #E6F3FB;
    background: rgba(230, 243, 251, 0.4);
    border-radius: 24px;
}
.tcl-content-block-card-1 { top: 0; left: 0; width: 60%; height: 80%; }
.tcl-content-block-card-2 { top: 12%; right: 0; width: 52%; height: 84%; }
.tcl-content-block-blob {
    position: absolute;
    border-radius: 50%;
}
.tcl-content-block-blob-1 { width: 60px; height: 60px; background: #0082C5; top: 8%; right: 6%; opacity: 0.85; }
.tcl-content-block-blob-2 { width: 40px; height: 40px; background: #6BBAE5; bottom: 18%; left: 38%; opacity: 0.7; }
/* Photo variant */
.tcl-content-block--photos .tcl-content-block-decor { min-height: 380px; }
.tcl-content-block-photo {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(9,8,72,0.12);
    background: #f4f6f8;
}
.tcl-content-block-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcl-content-block-photo-1 { left: 0; top: 0; width: 60%; aspect-ratio: 4/3; z-index: 2; }
.tcl-content-block-photo-2 { right: 0; top: 24%; width: 55%; aspect-ratio: 3/4; z-index: 1; }

/* Card stack (Figma 1151:30257) */
.tcl-card-stack { padding: 64px 0; background: var(--tcl-white); }
.tcl-card-stack-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1024px;
    margin: 0 auto;
}
.tcl-card-stack-item {
    background: var(--tcl-white);
    border: 1px solid #E6E7E8;
    border-radius: 16px;
    padding: 48px;
    display: flex;
    align-items: center;
    min-height: 220px;
}
.tcl-card-stack-item--text-right { justify-content: flex-end; }
.tcl-card-stack-item--text-left  { justify-content: flex-start; }
.tcl-card-stack-content {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (max-width: 700px) {
    .tcl-card-stack-item { padding: 24px; }
    .tcl-card-stack-content { width: 100%; }
}
.tcl-card-stack-eyebrow {
    color: #0073B2;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 14px;
}
.tcl-card-stack-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: var(--tcl-text, #231F20);
    margin: 0;
}
.tcl-card-stack-body {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: #727376;
    margin: 0;
}
.tcl-card-stack-content .btn { align-self: flex-start; }

/* Data table (Figma 1151:30420) */
.tcl-data-table { padding: 80px 0; background: var(--tcl-white); }
.tcl-data-table-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    text-align: center;
    margin: 0 0 40px;
}
.tcl-data-table-wrap {
    border: 1px solid #0082C5;
    border-radius: 16px;
    overflow: hidden;
    overflow-x: auto;
}
.tcl-data-table-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tcl-font-sans);
    font-size: 13px;
}
.tcl-data-table-table th,
.tcl-data-table-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 130, 197, 0.12);
}
.tcl-data-table-table th {
    color: #727376;
    font-weight: 500;
    font-size: 12px;
}
.tcl-data-table-table td {
    color: var(--tcl-text, #231F20);
    line-height: 1.4;
}
.tcl-data-table-table tbody tr:last-child td { border-bottom: 0; }
.tcl-data-table-table td:last-child,
.tcl-data-table-table th:last-child { text-align: right; }

/* Highlight blocks on /apie-mus/ — Figma 1151:30167. 3 dark navy blocks,
 * white text + outlined icon centered, equal-width grid with comfortable gap. */
.tcl-highlight-blocks { padding: 64px 0 80px; background: var(--tcl-white); }
.tcl-highlight-blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.tcl-highlight-block {
    background: #090C51;
    color: var(--tcl-white);
    border-radius: 24px;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    min-height: 220px;
    box-shadow: 0 4px 24px rgba(9, 8, 72, 0.10);
}
.tcl-highlight-block-icon {
    width: 40px; height: 40px;
    filter: brightness(0) invert(1);    /* SVGs are blue-stroked by default — flip to white */
    flex: 0 0 40px;
}
.tcl-highlight-block-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--tcl-white);
    margin: 0;
}
.tcl-highlight-block-text {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}
/* Clickable variant — same lift/shadow hover as .tcl-paslauga-card. */
a.tcl-highlight-block {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.tcl-highlight-block:hover,
a.tcl-highlight-block:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(9, 8, 72, 0.22);
    color: var(--tcl-white);
}
.tcl-highlight-blocks--cols-2 .tcl-highlight-blocks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcl-highlight-blocks--cols-4 .tcl-highlight-blocks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 4-up value cards are tighter than the default 3-up — trim padding so copy fits. */
.tcl-highlight-blocks--cols-4 .tcl-highlight-block { padding: 32px 24px; }
@media (max-width: 1199px) { .tcl-highlight-blocks--cols-4 .tcl-highlight-blocks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .tcl-highlight-blocks-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Light variant — white cards with blue titles (Apie mus document/strategy boxes). */
.tcl-highlight-blocks--light .tcl-highlight-block {
    background: var(--tcl-white);
    color: #4a4b4d;
    border: 1px solid #E1E8F0;
    box-shadow: 0 4px 24px rgba(9, 8, 72, 0.06);
}
.tcl-highlight-blocks--light .tcl-highlight-block-title { color: var(--tcl-text, #231F20); }
.tcl-highlight-blocks--light .tcl-highlight-block-text {
    color: #5b5c5e;
    /* Keep the three cards visually balanced even when one body is long. */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcl-highlight-blocks--light .tcl-highlight-block-icon { filter: none; }
.tcl-highlight-blocks--light a.tcl-highlight-block:hover,
.tcl-highlight-blocks--light a.tcl-highlight-block:focus-visible {
    color: #4a4b4d;
    box-shadow: 0 12px 28px rgba(9, 8, 72, 0.14);
}

/* Optional centered header above the grid (eyebrow + title + intro). */
.tcl-highlight-blocks-head {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tcl-highlight-blocks-eyebrow {
    color: var(--tcl-blue-text);
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.06em;
}
.tcl-highlight-blocks-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0;
}
.tcl-highlight-blocks--light .tcl-highlight-blocks-title { color: var(--tcl-blue-text); }
.tcl-highlight-blocks-intro {
    font-family: var(--tcl-font-sans);
    font-size: 18px;
    line-height: 1.6;
    color: #5B5C5F;
    margin: 0;
}

/* Paslauga cards on Apie mus — 6-col single-row per Figma 1151:30575.
 * Smaller card variant inside this section: tighter padding, smaller fonts. */
.tcl-paslaugos-list-apie { padding: 40px 0 80px; }
.tcl-paslaugos-cards-flat {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}
.tcl-paslaugos-cards-flat > .tcl-paslauga-card { padding: 20px 16px; gap: 12px; }
.tcl-paslaugos-cards-flat > .tcl-paslauga-card .tcl-paslauga-title { font-size: 16px; line-height: 1.25; }
.tcl-paslaugos-cards-flat > .tcl-paslauga-card .tcl-paslauga-excerpt { font-size: 13px; line-height: 1.4; }
.tcl-paslaugos-cards-flat > .tcl-paslauga-card .tcl-paslauga-icon { width: 32px; height: 32px; }
.tcl-paslaugos-cards-flat > .tcl-paslauga-card .tcl-paslauga-cta { font-size: 13px; padding: 8px 14px; }
@media (max-width: 1199px) { .tcl-paslaugos-cards-flat { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width: 767px)  { .tcl-paslaugos-cards-flat { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px)  { .tcl-paslaugos-cards-flat { grid-template-columns: 1fr; } }

/* === Bendrovės valdymas — tabs + team grid + docs-photo (Figma 1151:30765 / 30774 / 30854 / 30899) === */

/* Tabs (Figma 1151:30765) */
.tcl-bv-tabs { padding: 56px 0 16px; background: var(--tcl-white); }
.tcl-bv-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 48px;
    border-bottom: 1px solid #E6E7E8;
    padding-bottom: 0;
}
.tcl-bv-tab {
    padding: 16px 4px;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    color: var(--tcl-text, #231F20);
    text-decoration: none;
    position: relative;
    transition: color 0.18s ease;
}
.tcl-bv-tab:hover { color: #0073B2; }
.tcl-bv-tab.is-active { color: var(--tcl-text, #231F20); }
.tcl-bv-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: #0082C5;
    border-radius: 2px;
}

/* ===== Darnus verslas — tabbed groups (page-darnus-verslas.php) ===== */
.tcl-dv .tcl-dv-group { margin-bottom: 64px; }
.tcl-dv .tcl-dv-group:last-child { margin-bottom: 0; }
.tcl-dv-group-head { max-width: 980px; margin: 0 0 20px; }
.tcl-dv-group-head h2 { font-family: var(--tcl-font-sans); font-weight: 700; font-size: clamp(1.75rem, 3vw, 32px); line-height: 1.2; color: var(--tcl-text, #231F20); margin: 0 0 8px; }
.tcl-dv-group-head p { color: #727376; font-size: 16px; line-height: 1.5; margin: 0; }
/* 4-tab rows: left-aligned + wrap so they never overflow. */
.tcl-dv-tabs { justify-content: flex-start; flex-wrap: wrap; gap: 8px 36px; margin-bottom: 28px; }
.tcl-dv-panel { max-width: 980px; color: #727376; font-family: var(--tcl-font-sans); font-size: 16px; line-height: 1.6; }
.tcl-dv-panel > :first-child { margin-top: 0; }
.tcl-dv-panel h3, .tcl-dv-panel h4, .tcl-dv-panel h5 { color: var(--tcl-text, #231F20); font-family: var(--tcl-font-sans); font-weight: 700; line-height: 1.25; margin: 24px 0 12px; }
.tcl-dv-panel h5 { font-size: 18px; }
.tcl-dv-panel p { margin: 0 0 14px; }
.tcl-dv-panel strong { color: var(--tcl-text, #231F20); }
.tcl-dv-panel a:not(.tbt-docs-linklist-link) { color: var(--tcl-blue-text, #0073B2); text-decoration: underline; text-underline-offset: 2px; }
.tcl-dv-panel ul:not(.tbt-docs-linklist-items) { list-style: none; padding-left: 0; margin: 0 0 16px; }
.tcl-dv-panel ul:not(.tbt-docs-linklist-items) > li { position: relative; padding-left: 26px; margin: 0 0 8px; }
.tcl-dv-panel ul:not(.tbt-docs-linklist-items) > li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--tcl-blue, #0082C5); }
.tcl-dv-panel img { max-width: 100%; height: auto; border-radius: 8px; }
/* The doc lists sit under their own <h5> heading (KERTINIAI DOKUMENTAI / POLITIKOS
 * IR TVARKOS), so hide the document-system's gray category auto-title to avoid a
 * duplicate, mismatched-color heading. */
.tcl-dv-panel .tbt-docs-linklist-title { display: none; }
.tcl-dv-panel table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; line-height: 1.45; }
.tcl-dv-panel table td, .tcl-dv-panel table th { border: 1px solid rgba(9, 8, 72, 0.10); padding: 12px 14px; text-align: left; vertical-align: top; color: #727376; }
.tcl-dv-panel table th, .tcl-dv-panel table tr:first-child td { background: var(--tcl-light-blue-2, #def2fd); color: #0A2A57; font-weight: 700; }
.tcl-dv-panel table strong { color: var(--tcl-text, #231F20); }
@media (max-width: 767px) {
    .tcl-dv-tabs { gap: 4px 20px; }
    .tcl-bv-tab { font-size: 16px; padding: 12px 2px; }
    .tcl-dv-panel table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tcl-dv-panel table td, .tcl-dv-panel table th { min-width: 150px; }
}

/* Team grid (Figma 1151:30774 / 30845 / 30783) */
.tcl-team-section { padding: 48px 0 80px; background: var(--tcl-white); scroll-margin-top: 100px; }
.tcl-team-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.tcl-team-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0 0 12px;
}
.tcl-team-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    color: #727376;
    margin: 0;
}
.tcl-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 991px) { .tcl-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tcl-team-grid { grid-template-columns: 1fr; } }

/* Lead-row: per Figma 1151:30783 — the first team member (by menu_order) renders
 * as a single centered card spanning the middle column of the 3-col grid.
 * Card width matches one grid column so visually it sits exactly above the
 * middle column of the cards below it. Edit "Page Attributes → Order" on a
 * team member in wp-admin to control who is the lead (lowest order = lead). */
.tcl-team-lead-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 32px;
}
.tcl-team-lead-row > .tcl-team-card {
    grid-column: 2;
}
@media (max-width: 991px) {
    .tcl-team-lead-row { grid-template-columns: repeat(2, 1fr); }
    .tcl-team-lead-row > .tcl-team-card { grid-column: 1 / -1; max-width: calc((100% - 32px) / 2); margin: 0 auto; }
}
@media (max-width: 600px) {
    .tcl-team-lead-row { grid-template-columns: 1fr; }
    .tcl-team-lead-row > .tcl-team-card { grid-column: 1; max-width: none; }
}
/* Employee card — Figma 1151:30781: outer 459x568 r=32 white + drop-shadow,
 * inner photo r=24 ~435x420, body 24px padding, name 24/700, role 18/400,
 * actions row HORIZONTAL space-between: 2 round icon buttons LEFT + Daugiau RIGHT. */
.tcl-team-card {
    background: var(--tcl-white);
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 12px 12px 24px;
    gap: 12px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tcl-team-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.tcl-team-photo {
    width: 100%;
    aspect-ratio: 435 / 420;            /* Figma exact */
    overflow: hidden;
    border-radius: 24px;                /* Figma inner Frame 46 r=24 */
    background: #f4f6f8;
}
.tcl-team-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tcl-team-photo-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #E6F3FB 0%, #c6ddec 100%);
}
.tcl-team-body {
    padding: 4px 12px 0;                /* outer card has 12 horizontal padding; body adds small inset */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tcl-team-text { display: flex; flex-direction: column; gap: 8px; }
.tcl-team-name {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0;
}
.tcl-team-role {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #727376;
    margin: 0;
}
.tcl-team-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tcl-team-social { display: flex; gap: 12px; }
.tcl-team-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    color: #0073B2;
    text-decoration: none;
    background: transparent;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.tcl-team-social-btn:hover { color: #00598a; opacity: 0.85; }
.tcl-team-social-btn[aria-hidden="true"] { opacity: 0.4; pointer-events: none; }
.tcl-team-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: #231F20;                     /* Figma: dark, not blue */
    text-decoration: none;
    transition: color 0.18s ease;
}
.tcl-team-more:hover { color: #0073B2; }
.tcl-team-more[aria-hidden="true"] { opacity: 0.4; pointer-events: none; }

/* "Plačiau" expander (valdyba / audito komitetas bios) — native <details>. */
.tcl-team-bio-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    cursor: pointer;
    list-style: none;
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: #0073B2;
    transition: color 0.18s ease;
}
.tcl-team-bio-summary::-webkit-details-marker { display: none; }
.tcl-team-bio-summary:hover { color: #00598a; }
.tcl-team-bio-chevron { flex: 0 0 16px; transition: transform 0.2s ease; }
.tcl-team-bio[open] > .tcl-team-bio-summary .tcl-team-bio-chevron { transform: rotate(180deg); }
.tcl-team-bio-content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E1E8F0;
    font-family: var(--tcl-font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: #5b5c5e;
}
.tcl-team-bio-content p { margin: 0 0 8px; }
.tcl-team-bio-content p:last-child { margin-bottom: 0; }
.tcl-team-bio-content strong { color: #231F20; font-weight: 600; }

/* Docs-photo (Figma 1151:30854 left photos / 1151:30899 right photos) */
/* Bendrovės organizacinė struktūra — Administracija tab org-chart -------- */
.tcl-bv-structure { padding: 16px 0 80px; background: var(--tcl-white); }
.tcl-bv-structure .container { text-align: center; }

/* The team grid + its documents/structure inside a management tab read as ONE
 * group — tighten the seam (those sections were spaced for standalone use). */
.tcl-bv-tab-target [role="tabpanel"] > .tcl-team-section { padding-bottom: 16px; }
.tcl-bv-tab-target [role="tabpanel"] > .tcl-docs-photo,
.tcl-bv-tab-target [role="tabpanel"] > .tcl-bv-structure { padding-top: 24px; }
.tcl-bv-structure-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0 0 32px;
}
.tcl-bv-structure-figure {
    margin: 0 auto;
    max-width: 860px;
    background: var(--tcl-white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 0 16px rgba(9, 8, 72, 0.10);
}
.tcl-bv-structure-figure img { width: 100%; height: auto; display: block; border-radius: 8px; }
@media (max-width: 575px) {
    .tcl-bv-structure-figure { padding: 12px; }
}

.tcl-docs-photo { padding: 80px 0; background: var(--tcl-white); }
.tcl-docs-photo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: center;
}
.tcl-docs-photo--photos-right .tcl-docs-photo-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.tcl-docs-photo--photos-right .tcl-docs-photo-collage { order: 2; }
.tcl-docs-photo--photos-right .tcl-docs-photo-list    { order: 1; }
@media (max-width: 991px) {
    .tcl-docs-photo-grid { grid-template-columns: 1fr; gap: 32px; }
    .tcl-docs-photo--photos-right .tcl-docs-photo-collage,
    .tcl-docs-photo--photos-right .tcl-docs-photo-list { order: unset; }
}
.tcl-docs-photo-collage {
    position: relative;
    min-height: 580px;                  /* Figma 607x620 — give vertical room for 2-photo overlap */
    width: 100%;
}
.tcl-docs-photo-img {
    position: absolute;
    border-radius: 24px;                /* Figma corner radius */
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(9, 8, 72, 0.14);
    background: #f4f6f8;
}
.tcl-docs-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Figma 1151:30854 layout (LEFT photos):
 * - img-1: upper-left ~461x432 landscape (~4:3.7)
 * - img-2: lower-right ~607x620 nearly square (offset down + right, overlaps img-1) */
.tcl-docs-photo-img-1 { left: 0;    top: 0;     width: 60%; aspect-ratio: 4/3.7; z-index: 2; }
.tcl-docs-photo-img-2 { right: 0;   bottom: 0;  width: 75%; aspect-ratio: 1/1;   z-index: 3; }

/* RIGHT-photo variant: mirror horizontally so collage reads as upper-right + lower-left */
.tcl-docs-photo--photos-right .tcl-docs-photo-img-1 { left: auto; right: 0; }
.tcl-docs-photo--photos-right .tcl-docs-photo-img-2 { right: auto; left: 0; }

.tcl-docs-photo-blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.85;
    z-index: 0;
}
/* Two organic accent dots per Figma. LEFT photos: green dot bottom-left, blue dot upper-right.
 * RIGHT photos: mirrored. Sizes approximate Figma's small decorative blobs. */
.tcl-docs-photo-blob-1 { width: 40px; height: 40px; background: #8CBC71; left: -4%;   bottom: 22%; }
.tcl-docs-photo-blob-2 { width: 32px; height: 32px; background: #0082C5; right: 8%;   top: 4%;     }
.tcl-docs-photo--photos-right .tcl-docs-photo-blob-1 { left: auto; right: -4%; }
.tcl-docs-photo--photos-right .tcl-docs-photo-blob-2 { right: auto; left: 8%;  }
.tcl-docs-photo-list { padding: 16px 0; }
.tcl-docs-photo-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0 0 24px;
}
.tcl-docs-photo-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tcl-docs-photo-items li { margin: 0; }
.tcl-docs-photo-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--tcl-text, #231F20);
    text-decoration: underline;
    text-decoration-color: rgba(0,0,0,0.15);
    text-underline-offset: 3px;
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.tcl-docs-photo-link:hover {
    color: #0073B2;
    text-decoration-color: #0073B2;
}
.tcl-docs-photo-icon { color: #0073B2; flex: 0 0 20px; margin-top: 2px; }

/* tobalt-documents "links" layout skin — use the Telecentras brand blue accent */
.tbt-docs-linklist { --tbt-accent: #0082C5; }

/* === Korupcijos prevencija page ========================================== */
/* All content blocks left-aligned (margin-left:0 → start at container's left). */
.tcl-kor { padding: 64px 0; background: var(--tcl-white); }
/* Intro — Figma 1151:29762 intro typography (no right-side decor): gray body
 * (#727376, DM Sans 16/1.5) + bold dark heading. */
.tcl-kor-intro { max-width: 980px; margin: 0 0 28px; color: #727376; font-family: var(--tcl-font-sans, "DM Sans", sans-serif); font-size: 16px; font-weight: 400; line-height: 1.5; }
.tcl-kor-intro p { color: #727376; font-size: 16px; line-height: 1.5; margin: 0 0 16px; }
.tcl-kor-intro li { color: #727376; font-size: 16px; line-height: 1.5; }
.tcl-kor-intro strong { color: var(--tcl-text, #231F20); }
.tcl-kor-intro h3 { font-family: var(--tcl-font-sans); font-weight: 700; font-size: clamp(1.75rem, 3vw, 32px); line-height: 1.2; color: var(--tcl-text, #231F20); margin: 28px 0 12px; }
/* Branded blue-dot bullets — same rule as .tcl-page-content rich text. */
.tcl-kor-intro ul { list-style: none; padding-left: 0; margin: 0 0 16px; }
.tcl-kor-intro ul > li { position: relative; padding-left: 26px; margin-bottom: 6px; }
.tcl-kor-intro ul > li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--tcl-blue, #0082C5); }
.tcl-kor-policy { max-width: 980px; margin: 0 0 40px; }
.tcl-kor-section-title { max-width: 980px; font-family: var(--tcl-font-sans); font-weight: 700; font-size: clamp(1.75rem, 3vw, 32px); line-height: 1.2; color: var(--tcl-text, #231F20); margin: 8px 0 24px; }
.tcl-kor-nav { max-width: 980px; margin: 0 0 32px; }
.tcl-kor-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tcl-kor-nav a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: rgba(0,130,197,0.08); color: #0073B2; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .18s ease, color .18s ease; }
.tcl-kor-nav a:hover { background: var(--tcl-blue-text); color: #fff; }
.tcl-kor .tcl-kor-list { max-width: 980px; margin: 0; }   /* beats .tcl-paslauga-faq-list { margin:0 auto } */

/* ===== Left-rail variant (.tcl-kor--sidebar): sticky vertical nav + content ===== */
.tcl-kor--sidebar .tcl-kor-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: start; }
.tcl-kor--sidebar .tcl-kor-list { max-width: none; }
.tcl-kor--sidebar .tcl-kor-nav { position: sticky; top: 96px; max-width: none; margin: 0; }
.tcl-kor--sidebar .tcl-kor-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.tcl-kor--sidebar .tcl-kor-nav li { width: 100%; }
.tcl-kor--sidebar .tcl-kor-nav a {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: transparent;
    border-left: 3px solid transparent;
    color: #45474A;
    font-size: 15px;
    line-height: 1.35;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tcl-kor--sidebar .tcl-kor-nav a:hover { background: var(--tcl-light-blue-2, #def2fd); color: #0A2A57; }
.tcl-kor--sidebar .tcl-kor-nav a.is-active {
    background: var(--tcl-navy, #090848);
    border-left-color: var(--tcl-blue, #0082C5);
    color: #fff;
}
@media (max-width: 991px) {
    .tcl-kor--sidebar .tcl-kor-layout { grid-template-columns: 1fr; gap: 20px; }
    .tcl-kor--sidebar .tcl-kor-nav { position: static; }
    .tcl-kor--sidebar .tcl-kor-nav ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .tcl-kor--sidebar .tcl-kor-nav li { width: auto; }
    .tcl-kor--sidebar .tcl-kor-nav a { width: auto; border-left: 0; border-radius: 999px; padding: 8px 16px; }
    .tcl-kor--sidebar .tcl-kor-nav a.is-active { border-left: 0; }
}
.tcl-kor-item { scroll-margin-top: 120px; }

/* Accordion body text — identical to the intro body (Figma 1151:29762). */
.tcl-kor-list .tcl-paslauga-faq-answer,
.tcl-kor-list .tcl-paslauga-faq-answer p,
.tcl-kor-list .tcl-paslauga-faq-answer li {
    color: #727376;
    font-family: var(--tcl-font-sans, "DM Sans", sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
/* Accordion content follows the site rich-text rules — branded blue-dot
 * bullets, tidy spacing, brand links — matching the intro (.tcl-kor-intro). */
.tcl-kor-list .tcl-paslauga-faq-answer ul:not(.tbt-docs-linklist-items) {
    list-style: none;
    padding-left: 0;
    margin: 0 0 16px;
    display: block;
}
.tcl-kor-list .tcl-paslauga-faq-answer ul:not(.tbt-docs-linklist-items) > li {
    position: relative;
    padding-left: 26px;
    margin: 0 0 8px;
}
.tcl-kor-list .tcl-paslauga-faq-answer ul:not(.tbt-docs-linklist-items) > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tcl-blue, #0082C5);
}
.tcl-kor-list .tcl-paslauga-faq-answer p { margin: 0 0 14px; }
.tcl-kor-list .tcl-paslauga-faq-answer p:last-child { margin-bottom: 0; }
/* Numbered ethics principles inside the "I. Etikos ir elgesio principai" panel. */
.tcl-kor-list .tcl-paslauga-faq-answer ol.tcl-vp-principles { list-style: decimal; padding-left: 22px; margin: 4px 0 0; }
.tcl-kor-list .tcl-paslauga-faq-answer ol.tcl-vp-principles > li { margin: 0 0 16px; padding-left: 6px; }
.tcl-kor-list .tcl-paslauga-faq-answer ol.tcl-vp-principles > li::marker { color: var(--tcl-blue, #0082C5); font-weight: 700; }
.tcl-kor-list .tcl-paslauga-faq-answer ol.tcl-vp-principles > li > strong { display: block; color: var(--tcl-text, #231F20); margin-bottom: 4px; }
.tcl-kor-list .tcl-paslauga-faq-answer ol.tcl-vp-principles > li > p { margin: 0 0 8px; }
.tcl-kor-list .tcl-paslauga-faq-answer ol.tcl-vp-principles > li > p:last-child { margin-bottom: 0; }

/* === Privatumo politika (page-privatumo-politika.php) === */
/* Reuses the korupcijos sidebar-accordion design; these rules cover the dense,
   migrated legal content: sub-headings, nested lists and the many retention/
   cookie tables (wrapped in .tcl-priv-table for horizontal scroll). */
.tcl-priv-list .tcl-paslauga-faq-answer > strong:first-child,
.tcl-priv-list .tcl-paslauga-faq-answer p > strong:only-child {
    color: var(--tcl-blue-text, #0073B2);
}
.tcl-priv-list .tcl-paslauga-faq-answer h2,
.tcl-priv-list .tcl-paslauga-faq-answer h3,
.tcl-priv-list .tcl-paslauga-faq-answer h4 {
    font-size: 18px;
    line-height: 1.3;
    margin: 22px 0 10px;
    color: var(--tcl-text, #231F20);
}
.tcl-priv-list .tcl-paslauga-faq-answer a { color: var(--tcl-blue-text, #0073B2); word-break: break-word; }
/* Horizontal-scroll wrapper so wide fixed-width tables never overflow the panel. */
.tcl-priv-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; }
.tcl-priv-table > table {
    width: 100%;
    min-width: 560px;            /* below this, scroll rather than crush columns */
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
}
.tcl-priv-table th,
.tcl-priv-table td {
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.tcl-priv-table th,
.tcl-priv-table tr:first-child td {
    background: rgba(0, 130, 197, 0.06);
    font-weight: 700;
}
.tcl-priv-table td > strong { color: var(--tcl-text, #231F20); }
@media (max-width: 767px) {
    .tcl-priv-table > table { font-size: 13px; }
    .tcl-priv-table th, .tcl-priv-table td { padding: 6px 9px; }
    /* The quick-nav duplicates the accordion titles; on mobile the accordion IS
       the navigation, so drop the long redundant list and lead with the toggles. */
    .tcl-priv .tcl-kor-nav { display: none; }
}

/* Veiklos principai — Misija/Vizija navy cards (modern intro region). */
.tcl-vp-mv-section { padding: 56px 0 8px; }
.tcl-vp-mv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 980px; }
.tcl-vp-mv-card { position: relative; overflow: hidden; background: var(--tcl-navy, #090848); border-radius: 20px; padding: 32px 30px; color: #fff; }
.tcl-vp-mv-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(0,130,197,.35), transparent 70%); pointer-events: none; }
.tcl-vp-mv-title { position: relative; font-family: var(--tcl-font-sans); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tcl-light-blue, #abe0f9); margin: 0 0 12px; }
.tcl-vp-mv-text { position: relative; margin: 0; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; color: #fff; }
@media (max-width: 767px) {
    .tcl-vp-mv-section { padding: 36px 0 4px; }
    .tcl-vp-mv { grid-template-columns: 1fr; gap: 16px; }
    .tcl-vp-mv-card { padding: 26px 24px; }
}
/* Policy-document PDF buttons (under the ethics accordions). */
.tcl-vp-policy-docs { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }

.tcl-kor-list .tcl-paslauga-faq-answer a:not(.tbt-docs-linklist-link):not(.tcl-kor-btn) {
    color: var(--tcl-blue-text, #0073B2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tcl-kor-list .tcl-paslauga-faq-answer .tbt-docs-linklist { margin-top: 8px; padding-top: 0; }
/* Data tables inside accordions (e.g. stakeholder matrix) — readable grid. */
.tcl-kor-list .tcl-paslauga-faq-answer table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 16px;
    font-size: 15px;
    line-height: 1.45;
}
.tcl-kor-list .tcl-paslauga-faq-answer table td,
.tcl-kor-list .tcl-paslauga-faq-answer table th {
    border: 1px solid rgba(9, 8, 72, 0.10);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    color: #727376;
}
.tcl-kor-list .tcl-paslauga-faq-answer table tr:first-child td,
.tcl-kor-list .tcl-paslauga-faq-answer table th {
    background: #EAF2FB;
    color: var(--tcl-text, #231F20);
    font-weight: 700;
}
.tcl-kor-list .tcl-paslauga-faq-answer table strong { color: var(--tcl-text, #231F20); }
.tcl-kor-list .tcl-paslauga-faq-answer img { max-width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 767px) {
    .tcl-kor-list .tcl-paslauga-faq-answer table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tcl-kor-list .tcl-paslauga-faq-answer table td,
    .tcl-kor-list .tcl-paslauga-faq-answer table th { min-width: 160px; }
}
/* Title-less section → plain content (no accordion card chrome). */
.tcl-kor-list .tcl-kor-plain { padding: 4px 0 8px; }
.tcl-kor-list .tcl-kor-plain, .tcl-kor-list .tcl-kor-plain p, .tcl-kor-list .tcl-kor-plain li {
    color: #727376;
    font-family: var(--tcl-font-sans, "DM Sans", sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.tcl-kor-contact { max-width: 980px; margin: 32px 0 0; padding: 20px 24px; border-radius: 16px; background: rgba(0,130,197,0.06); }
.tcl-kor-contact-name { font-weight: 600; margin: 0 0 6px; color: var(--tcl-text); }
.tcl-kor-contact-lines { margin: 0; display: flex; flex-wrap: wrap; gap: 18px; color: var(--tcl-text); }
.tcl-kor-contact-lines a { color: #0073B2; }

/* Report-channel buttons in the Pranešimai section. */
.tcl-kor-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.tcl-kor-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--tcl-blue-text); color: #fff; font-family: var(--tcl-font-sans, "DM Sans", sans-serif); font-weight: 600; font-size: 15px; text-decoration: none; transition: background .18s ease; }
.tcl-kor-btn:hover { background: #006aa3; color: #fff; }

/* Report sub-accordions — nested inside „Pranešimai apie korupciją". Visually
   set apart from the top-level left-rail sections (bordered card, slight indent,
   smaller summary) so the nesting reads clearly. */
.tcl-kor-sublist { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
/* Equal, compact bordered cards. .tcl-kor-subitem is self-contained (no base
   .tcl-paslauga-faq-item padding/border bleeding in) so every card is identical. */
.tcl-kor-subitem { border: 1px solid #d8e3ee; border-radius: 10px; background: #f6f9fc; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.tcl-kor-subitem:hover { border-color: #b9d5ec; }
.tcl-kor-subitem[open] { background: #fff; border-color: #b9d5ec; box-shadow: 0 1px 2px rgba(23,35,59,.05); }
.tcl-kor-subitem > .tcl-paslauga-faq-question { padding: 13px 18px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.tcl-kor-subitem > .tcl-paslauga-faq-question:hover,
.tcl-kor-subitem[open] > .tcl-paslauga-faq-question { color: var(--tcl-blue-text, #0073B2); }
.tcl-kor-subitem[open] .tcl-paslauga-faq-chevron { transform: rotate(180deg); }
.tcl-kor-subitem > .tcl-paslauga-faq-answer { padding: 0 18px 16px; }
.tcl-kor-subitem .wpcf7 { margin-top: 6px; }

/* Report sub-items wrapper — holds visible subsections (collapsed off) and
   sub-toggles (collapsed on) inside „Pranešimai apie korupciją". */
.tcl-kor-subitems { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.tcl-kor-subsection { scroll-margin-top: 120px; }
.tcl-kor-subsection-title { font-family: var(--tcl-font-sans, "DM Sans", sans-serif); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--tcl-text, #231F20); margin: 4px 0 6px; }
.tcl-kor-subsection-body.tcl-paslauga-faq-answer { padding-top: 0; }

/* Always-visible section blocks — ToC-navigated, non-collapsing. (Client: the
   side anchors + collapsed accordion titles duplicated each other; sections now
   stay open and the left ToC jumps to them, so the anchors are meaningful.) */
.tcl-kor-blocks { display: flex; flex-direction: column; }
.tcl-kor-block { scroll-margin-top: 120px; }
.tcl-kor-block + .tcl-kor-block { margin-top: 40px; padding-top: 34px; border-top: 1px solid #e3e9f0; }
.tcl-kor-block-title { font-family: var(--tcl-font-sans, "DM Sans", sans-serif); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.25; color: var(--tcl-blue-text, #0082c5); margin: 0 0 4px; }
.tcl-kor-block-body.tcl-paslauga-faq-answer { max-width: none; }

/* === Single-paslauga sections (Figma 1151:29762 / 29780 / 29889 / 29979) === */

/* --- Section 3b — Extra full-width content (e.g. service-levels table) --- */
.tcl-paslauga-extra { padding: 56px 0; background: var(--tcl-white); }
/* Standout notice callout (e.g. „Eterinės televizijos žiūrovų dėmesiui") — placed
 * below the accordions, left-aligned to match them. */
.tcl-paslauga-extra-notice {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    max-width: 980px;
    margin: 32px 0 0;
    padding: 24px 28px;
    background: linear-gradient(135deg, #E8F3FB 0%, #F5FAFD 100%);
    border: 1px solid #CDE4F4;
    border-left: 5px solid var(--tcl-blue, #0082C5);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(9, 12, 81, 0.06);
}
.tcl-paslauga-extra-notice-icon { flex: 0 0 auto; color: var(--tcl-blue-text, #0073B2); margin-top: 2px; }
.tcl-paslauga-extra-notice-body { min-width: 0; }
.tcl-paslauga-extra-notice-body p { margin: 0 0 8px; font-size: 16px; line-height: 1.55; color: #3A3D40; }
.tcl-paslauga-extra-notice-body p:last-child { margin-bottom: 0; }
.tcl-paslauga-extra-notice-body strong { color: var(--tcl-blue-text, #0073B2); font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.tcl-paslauga-extra-notice-body a { color: var(--tcl-blue-text, #0073B2); font-weight: 600; }
@media (max-width: 600px) { .tcl-paslauga-extra-notice { flex-direction: column; gap: 12px; padding: 20px; } }
.tcl-paslauga-extra table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tcl-paslauga-extra td, .tcl-paslauga-extra th {
    border: 1px solid rgba(9, 8, 72, 0.10);
    padding: 12px 14px; text-align: left; vertical-align: top; color: #727376;
}
.tcl-paslauga-extra tr:first-child td, .tcl-paslauga-extra th {
    background: #EAF2FB; color: var(--tcl-text, #231F20); font-weight: 700;
}
.tcl-paslauga-extra ul { margin: 0; padding-left: 18px; }
.tcl-paslauga-extra ul li { margin: 0 0 4px; }
.tcl-paslauga-extra h2 { font-family: var(--tcl-font-sans); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--tcl-text, #231F20); margin: 0 0 24px; }
@media (max-width: 767px) {
    .tcl-paslauga-extra table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tcl-paslauga-extra td, .tcl-paslauga-extra th { min-width: 160px; }
}

/* --- Section #18 — Intro (Figma 1151:29762) --- */
.tcl-paslauga-intro {
    padding: 56px 0;
    background: var(--tcl-white);
}
.tcl-paslauga-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
@media (max-width: 991px) {
    .tcl-paslauga-intro-grid { grid-template-columns: 1fr; }
    .tcl-paslauga-intro-decor { display: none; }
}
.tcl-paslauga-intro-text { display: flex; flex-direction: column; gap: 24px; }
/* Main service image (ACF tcl_intro_image) layered OVER the decorative placeholder;
 * the placeholder shapes stay and peek out behind/around the image. */
.tcl-paslauga-intro-decor.tcl-has-image { min-height: 360px; }
.tcl-paslauga-intro-decor-card-outline,
.tcl-paslauga-intro-decor-pill,
.tcl-paslauga-intro-decor-blob,
.tcl-paslauga-intro-decor-dot { z-index: 0; }
.tcl-paslauga-intro-media {
    position: absolute;
    top: 4%;
    left: 4%;
    width: 80%;
    z-index: 1;
}
.tcl-paslauga-intro-media img,
.tcl-paslauga-intro-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(9, 12, 81, 0.14);
}
@media (max-width: 991px) {
    /* Mobile: show the real image, drop the decorative shapes (they overlap oddly when stacked). */
    .tcl-paslauga-intro-decor.tcl-has-image { display: block; min-height: 0; }
    .tcl-paslauga-intro-decor.tcl-has-image > .tcl-paslauga-intro-decor-card-outline,
    .tcl-paslauga-intro-decor.tcl-has-image > .tcl-paslauga-intro-decor-pill,
    .tcl-paslauga-intro-decor.tcl-has-image > .tcl-paslauga-intro-decor-blob,
    .tcl-paslauga-intro-decor.tcl-has-image > .tcl-paslauga-intro-decor-dot { display: none; }
    .tcl-paslauga-intro-media { position: static; width: 100%; }
}
.tcl-paslauga-intro-eyebrow {
    color: var(--tcl-blue-text, #0073B2);
    font-family: var(--tcl-font-sans);
    font-weight: 500;
    font-size: 14px;
    /* Sentence-case — admin enters text as-displayed; no CSS transform. */
    letter-spacing: 0.08em;
    margin: 0;
}
.tcl-paslauga-intro-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0;
}
.tcl-paslauga-intro-lead, .tcl-paslauga-intro-body {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #727376;
    margin: 0;
}
.tcl-paslauga-intro-cta { margin-top: 8px; }
.tcl-paslauga-intro-cta .tcl-btn-primary { padding: 12px 32px; font-size: 18px; }
/* Right-side decorative composition — CSS-only blobs matching Figma 1151:29762 */
.tcl-paslauga-intro-decor {
    position: relative;
    min-height: 380px;
    width: 100%;
}
.tcl-paslauga-intro-decor-card-outline {
    position: absolute;
    border: 1.5px solid #E6F3FB;
    border-radius: 24px;
}
.tcl-paslauga-intro-decor-card-1 { top: 0; left: 0; width: 60%; height: 80%; }
.tcl-paslauga-intro-decor-card-2 { top: 12%; right: 0; width: 50%; height: 85%; background: rgba(230,243,251,0.5); }
.tcl-paslauga-intro-decor-pill {
    position: absolute;
    top: 8%; right: 8%;
    width: 65px; height: 110px;
    background: #0082C5;
    border-radius: 22px;
}
.tcl-paslauga-intro-decor-blob {
    position: absolute;
    bottom: 18%; left: 38%;
    width: 80px; height: 80px;
    background: #6BBAE5;
    border-radius: 50%;
    opacity: 0.85;
}
.tcl-paslauga-intro-decor-dot {
    position: absolute;
    bottom: 32%; left: 52%;
    width: 18px; height: 18px;
    background: #0082C5;
    border-radius: 50%;
}

/* --- Section #19 — Benefits carousel (Figma 1151:29780) --- */
/* --- Section #19 — Naudos (Figma 1151:29780/29785) ---
 * Section bg is WHITE (Figma 1151:29780 has transparent fill = inherits page bg).
 * Each card has TWO frames per Figma 1151:29806 → 29807:
 *   OUTER 420×460 white + radius 32 + drop-shadow glow (the .tcl-paslauga-benefit-card)
 *   INNER 396×436 blue gradient #090848 → #161BCB + radius 24 (.tcl-paslauga-benefit-card-inner)
 * Content lives in the inner frame, center-aligned with white text + white-stroked icons.
 * Heading is contained; the swiper row escapes the container so cards bleed off-right.
 */
.tcl-paslauga-benefits {
    padding: 56px 0;
    background: var(--tcl-white);
    color: var(--tcl-text, #231F20);
    overflow: hidden;
}
.tcl-paslauga-benefits-head { text-align: left; max-width: none; margin: 0 0 40px; }
.tcl-paslauga-benefits-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0 0 12px;
}
.tcl-paslauga-benefits-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    color: #727376;
    margin: 0;
}
.tcl-paslauga-benefits-swiper {
    overflow: visible;                                          /* let drop-shadows breathe */
    padding: 24px max(24px, calc((100vw - 1320px) / 2));        /* +24px vertical so glow shadow isn't clipped top/bot */
    margin: 0 0 24px;
}
.tcl-paslauga-benefit-card {
    background: var(--tcl-white);
    border-radius: 32px;
    padding: 12px;                              /* white outer shell padding around inner gradient (Figma 420→396 = 12 each side) */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);   /* the "glow" — soft black drop-shadow per Figma */
    min-height: 460px;
    height: auto;
    display: flex !important;
    flex-direction: column;
}
.tcl-paslauga-benefit-card-inner {
    flex: 1 1 auto;
    /* Figma gradient handles extend outside the frame (start y=-7%, end x=110%) so the
     * visible card shows the MIDDLE of the gradient — extend stops past 0/100% for
     * the same effect. */
    background:
        linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.30) 100%),  /* Frame 55 darkening overlay */
        linear-gradient(134deg, #090848 -5%, #161BCB 105%);                     /* base blue gradient */
    border-radius: 24px;
    padding: 32px 24px;
    color: var(--tcl-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;            /* vertical-center icon + text block, scales with content length (Figma `primary=MAX` glued short cards to bottom — center reads better across varying body lengths) */
    text-align: center;
    gap: 24px;
    min-height: 436px;
    position: relative;                 /* keep stacking context for the gradient layers */
}
.tcl-paslauga-benefit-text-block {
    display: flex;
    flex-direction: column;
    gap: 8px;                           /* Figma Frame 1984077986 gap=8 between title + body */
}
.tcl-paslauga-benefit-icon {
    width: 80px; height: 80px;
    flex: 0 0 auto;
    /* SVGs from Figma 1151:29785 are already white-stroked outlines on the blue gradient. */
}
.tcl-paslauga-benefit-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 28px;
    line-height: 33.6px;
    color: var(--tcl-white);
    margin: 0;
}
.tcl-paslauga-benefit-text {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 23.4px;
    color: rgba(255,255,255,0.92);
    margin: 0;
    /* Show at most 3 lines in the card; full text lives in the hover overlay. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
/* Hover overlay — reveals the full (un-clamped) body over the card (Tomas 2026-06-17). */
.tcl-paslauga-benefit-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 24px;
    padding: 28px 24px;
    background: linear-gradient(134deg, #0b0959 0%, #11148f 105%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.tcl-paslauga-benefit-overlay-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tcl-paslauga-benefit-otext {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}
.tcl-paslauga-benefit-card:hover .tcl-paslauga-benefit-overlay,
.tcl-paslauga-benefit-card:focus-within .tcl-paslauga-benefit-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease;
}
/* JS flags cards whose 3-line-clamped body isn't actually truncated — there is
 * nothing extra to reveal, so keep their overlay hidden even on hover/focus. */
.tcl-paslauga-benefit-card.tcl-benefit-no-overlay:hover .tcl-paslauga-benefit-overlay,
.tcl-paslauga-benefit-card.tcl-benefit-no-overlay:focus-within .tcl-paslauga-benefit-overlay {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
/* Touch / narrow screens have no hover → show the full body inline and drop the
 * (unreachable) overlay so no benefit text is hidden on mobile/tablet. */
@media (hover: none), (max-width: 991px) {
    .tcl-paslauga-benefit-text {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
        display: block;
    }
    .tcl-paslauga-benefit-overlay { display: none; }
}
/* Pagination removed per Tomas — Swiper still scrolls/drags; no dots ship. */

/* --- Section #20 — Offerings (Figma 1151:29889) --- */
.tcl-paslauga-offerings {
    padding: 56px 0;
    background: var(--tcl-white);
}
.tcl-paslauga-offerings-head { text-align: left; max-width: 980px; margin: 0 0 24px; }
/* Offerings now render as accordions (.tcl-paslauga-faq-list.tcl-kor-list) or, for
 * a flat title-less list, as a clean centered block. (Card grid below is legacy.) */
.tcl-paslauga-offerings-plain { max-width: 980px; margin: 0; }
.tcl-paslauga-offerings-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 44px);
    line-height: 1.2;
    color: var(--tcl-text, #231F20);
    margin: 0 0 12px;
    text-transform: lowercase;
}
.tcl-paslauga-offerings-title::first-letter { text-transform: uppercase; }
.tcl-paslauga-offerings-subtitle {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 16px;
    color: #727376;
    margin: 0;
}
.tcl-paslauga-offerings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 991px) { .tcl-paslauga-offerings-grid { grid-template-columns: 1fr; } }
.tcl-paslauga-offering {
    background: var(--tcl-white);
    border: 1px solid #0082C5;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tcl-paslauga-offering-icon {
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0073B2;                 /* in case any inline SVG inherits currentColor */
    margin-bottom: 8px;
}
.tcl-paslauga-offering-icon img {
    width: 48px; height: 48px;
    display: block;
}
.tcl-paslauga-offering-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--tcl-text, #231F20);
    margin: 0;
}
.tcl-paslauga-offering-text {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #727376;
    margin: 0;
}

/* --- Section #22 — FAQ accordion (Figma 1151:29979) ---
 * Per Figma: white cards with radius 24, padding 32, gap 16 between cards.
 * No border (chrome comes from minimal shadow on hover/focus only). Title
 * 24/700 — color #0082C5 when open, #231F20 when closed. Body 18/400 #727376.
 */
.tcl-paslauga-faq {
    padding: 56px 16px;
    background: var(--tcl-white);
}
.tcl-paslauga-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 980px;   /* accordions are left-aligned (flush, not centered) per client */
    margin: 0;
}
.tcl-paslauga-faq-item {
    background: var(--tcl-white);
    border-bottom: 1px solid rgba(9, 8, 72, 0.10);
    padding: 22px 0;                          /* airier rhythm, closer to the site's section spacing */
    transition: box-shadow 0.18s ease;
}
.tcl-paslauga-faq-item:last-child { border-bottom: 0; }
.tcl-paslauga-faq-item[open] {
    box-shadow: none;
}
.tcl-paslauga-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;           /* chevron pinned to the far right — reads as a real accordion */
    gap: 24px;
    cursor: pointer;
    list-style: none;
    font-family: var(--tcl-font-sans);
    font-weight: var(--tcl-fw-bold);
    font-size: 24px;
    line-height: 1.25;
    color: var(--tcl-text, #0E1B36);
    transition: color 0.15s ease;
}
.tcl-paslauga-faq-q-text { flex: 1 1 auto; }
.tcl-paslauga-faq-question::-webkit-details-marker { display: none; }
.tcl-paslauga-faq-question:hover { color: var(--tcl-blue-text, #0073B2); }
.tcl-paslauga-faq-item[open] .tcl-paslauga-faq-question { color: var(--tcl-blue-text, #0073B2); }
.tcl-paslauga-faq-chevron {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--tcl-blue, #0082C5);          /* muted-blue affordance when closed */
    transition: transform 0.2s ease, color 0.15s ease;
}
.tcl-paslauga-faq-question:hover .tcl-paslauga-faq-chevron,
.tcl-paslauga-faq-item[open] .tcl-paslauga-faq-chevron { color: currentColor; }
.tcl-paslauga-faq-item[open] .tcl-paslauga-faq-chevron { transform: rotate(180deg); }
.tcl-paslauga-faq-answer {
    padding-top: 12px;
    max-width: 900px;                         /* comfortable reading measure */
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #727376;
}
.tcl-paslauga-faq-answer p { margin: 0 0 12px; }
.tcl-paslauga-faq-answer p:last-child { margin-bottom: 0; }
.tcl-paslauga-faq-answer ul:not(.tbt-docs-linklist-items) {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tcl-paslauga-faq-answer ul:not(.tbt-docs-linklist-items) li { margin: 0; }
@media (max-width: 767px) {
    .tcl-paslauga-faq { padding: 48px 16px; }
    .tcl-paslauga-faq-item { padding: 18px 0; }
    .tcl-paslauga-faq-question { font-size: 18px; line-height: 1.3; gap: 16px; }
    .tcl-paslauga-faq-answer { font-size: 16px; }
}

/* (Accordion left-flush / chevron-by-title / tight styling now lives on the base
 * .tcl-paslauga-faq-* rules above — applies to ALL accordions site-wide.) */

/* Service-card link variant: full-card clickable, retains tcl-service-card chrome */
.tcl-service-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.tcl-service-card-link:hover { color: inherit; }
.tcl-service-card .tcl-service-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tcl-light-blue, #A4D3E2);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
}
.tcl-paslaugos-empty {
    text-align: center;
    color: #727376;
    padding: 40px 0;
}

/* === Paslaugos single — Figma node 1151:29716 === */
.tcl-paslauga-lead {
    padding: 56px 0 0;
    background: var(--tcl-white);
}
.tcl-paslauga-lead-inner {
    max-width: 950px;
    margin: 0 auto;
}
.tcl-paslauga-lead-text {
    font-family: var(--tcl-font-sans);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.5;
    color: #231F20;
    margin: 0;
}
.tcl-paslauga-body {
    padding: 40px 0 80px;
    background: var(--tcl-white);
}
.tcl-paslauga-figure {
    max-width: 1440px;
    margin: 0 auto 48px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 24px rgba(9, 8, 72, 0.08);
}
.tcl-paslauga-figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.tcl-paslauga-content {
    max-width: 950px;
    margin: 0 auto;
}
.tcl-paslauga-related {
    padding: 80px 0;
    background: var(--tcl-white);
    border-top: 1px solid rgba(9, 8, 72, 0.06);
}
.tcl-paslauga-related-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    color: #231F20;
    text-align: center;
    margin: 0 0 40px;
}

/* === Group 21 decorative band — Figma node 1151:28949 ===
 * Implemented as a single PNG export (1920x380, ~52KB optimized) for
 * pixel-exact reproduction. Responsive: img scales to viewport width
 * while preserving 1920:380 aspect ratio (≈5:1).
 *
 * Glued to footer per user 2026-05-05: zero margin-bottom + section
 * comes immediately before the footer, so the band butts into the
 * footer's rounded top edge with no white gap.
 */
.tcl-decor-band {
    width: 100%;
    padding: 0;
    margin: 0 0 -1px;               /* -1px nudges any sub-pixel gap closed against the footer */
    background: var(--tcl-white);
    overflow: hidden;
    line-height: 0;                 /* removes inline-image bottom gap */
}
.tcl-decor-band + .tcl-footer { margin-top: 0; }     /* belt + suspenders against gaps */
.tcl-decor-band-img {
    display: block;
    width: 100%;
    max-width: 1920px;
    height: auto;
    margin: 0 auto;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 600px) {
    .tcl-decor-band { padding: 0; }
}

/* ==============================================================
 * MOBILE PIXEL-PERFECT BLOCK — Figma node 1191:2809 (375 wide)
 * All sections: padding 40px 16px, panel radius 16, gap 32 between sections.
 * Title 32-34px wt700, subtitle 18px wt400 #727376.
 * ============================================================== */
@media (max-width: 767px) {

    /* --- Paslauga benefits (Figma 1151:29785) — narrower cards, less padding */
    .tcl-paslauga-benefits { padding: 56px 0 48px; }
    .tcl-paslauga-benefits-head { margin-bottom: 32px; padding: 0 16px; }
    .tcl-paslauga-benefits-swiper { padding: 16px; }
    .tcl-paslauga-benefit-card {
        min-height: 380px;
        padding: 8px;                       /* outer white shell tighter on mobile */
        border-radius: 24px;
    }
    .tcl-paslauga-benefit-card-inner {
        padding: 24px 20px;
        border-radius: 16px;
        gap: 20px;
        min-height: 364px;                  /* 380 - 2×8 */
    }
    .tcl-paslauga-benefit-icon { width: 56px; height: 56px; }
    .tcl-paslauga-benefit-title { font-size: 22px; line-height: 1.25; }
    .tcl-paslauga-benefit-text { font-size: 16px; line-height: 1.45; }

    /* --- Service cards: 2-COLUMN grid (was forced 1-col at 480) ----------- */
    .tcl-service-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .tcl-service-card { padding: 16px 8px; border-radius: 8px; background: #090C51; }
    .tcl-service-icon { margin-bottom: 8px; }
    .tcl-service-icon img { width: 32px; height: 32px; }
    .tcl-service-title { font-size: 14px; line-height: 1.25; margin: 0 0 6px; }
    .tcl-service-text { font-size: 11px; line-height: 1.4; margin: 0; }
    .tcl-service-link { font-size: 12px; margin-top: 8px; padding: 6px 12px; }
    .tcl-service-link .tcl-btn-arrow { width: 12px; height: 12px; }

    /* --- Section paddings — Figma standard 40/16 vertical+horizontal ----- */
    .tcl-service-grid,
    .tcl-cta-banner-section,
    .tcl-tvbokstas-section,
    .tcl-stats-section,
    .tcl-about-section,
    .tcl-certificates-section,
    .tcl-how-section,
    .tcl-reliability-section,
    .tcl-news-section,
    .tcl-projects-section,
    .tcl-testimonial-section,
    .tcl-contact-section {
        padding: 40px 0;
    }
    .tcl-service-grid > .container,
    .tcl-cta-banner-section > .container,
    .tcl-tvbokstas-section > .container,
    .tcl-stats-section > .container,
    .tcl-about-section > .container,
    .tcl-certificates-section > .container,
    .tcl-how-section > .container,
    .tcl-reliability-section > .container,
    .tcl-news-section > .container,
    .tcl-projects-section > .container,
    .tcl-testimonial-section > .container,
    .tcl-contact-section > .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* --- Section titles: Figma 32-34px wt700 (was desktop 44/56/64) ----- */
    .tcl-section-title { font-size: 34px !important; line-height: 1.1 !important; }
    .tcl-section-subtitle { font-size: 18px; line-height: 23.4px; }

    /* --- Header: Figma 1197:7226 — 375x64, padding 0/16/0/16. Logo 150x32, search + LT flag + burger right cluster. */
    .header-section { padding: 0 !important; min-height: 64px; }
    .tcl-hero { /* hero is parent of header on home — keep slight padding */ }
    .header-section .container { padding: 0 16px !important; max-width: 100% !important; }
    .header-logo .tcl-brand-logo,
    .header-logo img { width: 150px !important; height: 32px !important; max-width: 150px !important; max-height: 32px !important; }
    /* Show search icon on mobile (Bootstrap d-none d-lg-inline-flex was hiding it) */
    .tcl-header-search { display: inline-flex !important; }
    .tcl-header-search svg { width: 20px; height: 20px; }
    /* LT flag language stub */
    .tcl-header-lang { display: inline-flex; align-items: center; gap: 4px; color: var(--tcl-white); cursor: pointer; }
    .tcl-header-lang-flag { width: 20px; height: 20px; flex: 0 0 20px; }
    .tcl-header-lang-caret { width: 12px; height: 12px; opacity: 0.85; }
    /* Header meta row: 24px gap between icons (Figma Frame 7 gap 24) */
    .header-meta { display: inline-flex; align-items: center; gap: 24px; }

    /* --- Hero: Figma 1191:3875 compact — keep RIGHT silhouette only, hide LEFT.
     * object-position: right bottom on silhouettes SVG anchors decoration to
     * right edge. Background blobs stay subtle.
     * min-height + symmetric padding so the flex `justify-content:center` (base)
     * actually VERTICALLY CENTERS the text in the card (with min-height:auto the
     * card hugged its content and the text stuck to the top — flagged
     * 2026-06-20). Silhouettes stay absolutely anchored to the card bottom. */
    .tcl-hero { padding: 56px 16px !important; min-height: 78vh !important; border-radius: 16px; }
    /* 38px wrapped each long LT compound word onto its own line and read as
     * oversized on a 390px phone (flagged 2026-06-20) — 30px keeps the hero
     * title prominent but less dominant. */
    .tcl-hero-title { font-size: 30px !important; line-height: 1.15 !important; letter-spacing: -0.02em; }
    .tcl-hero-subtitle { font-size: 18px !important; line-height: 23.4px !important; font-weight: 500; margin-bottom: 32px; }
    .tcl-hero-content { padding-bottom: 0 !important; max-width: none !important; }
    .tcl-hero-silhouettes {
        top: auto !important;
        bottom: 0 !important;
        height: 280px !important;
        object-fit: cover !important;
        object-position: right bottom !important;     /* anchor decoration to RIGHT — left silhouette clipped */
        transform: translateX(15%) !important;          /* shift right so left half is off-canvas */
    }
    .tcl-hero-blobs { opacity: 0.5 !important; }      /* subtler glow on compact mobile */

    /* --- CTA banner: Figma 1191:4148 — 375x390 #ABE0F9 r=16 padding 40/32/48/32.
     * Title 32/35.2 wt700 #231F20 LEFT-aligned with explicit \n line break.
     * Subtitle 18/23.4 wt400 #231F20 LEFT-aligned.
     * Mobile keeps the 2 absolute confetti groups already in the partial. */
    .tcl-cta-banner { padding: 40px 32px 48px !important; border-radius: 16px !important; }
    .tcl-cta-banner-content { align-items: flex-start !important; text-align: left !important; }
    .tcl-cta-banner-text { text-align: left !important; align-items: flex-start !important; }
    .tcl-cta-banner-title {
        font-size: 32px !important;
        line-height: 35.2px !important;
        color: #231F20 !important;
        text-align: left !important;
        white-space: pre-line !important;       /* preserve Figma's \n between "gauti" and "Telecentras pasiūlymą?" */
    }
    .tcl-cta-banner-subtitle { font-size: 18px !important; line-height: 23.4px !important; color: #231F20 !important; text-align: left !important; }
    .tcl-cta-banner-btn { align-self: flex-start; }

    /* --- Stats block: 5 stats arranged 2+2+1. The lone 5th tile (A+) spans the
     * full row but stays LEFT-aligned under the first column so it lines up with
     * the grid above — centering it read as a misalignment (flagged 2026-06-20). */
    .tcl-stats-grid > :nth-child(5) {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        text-align: left !important;
    }
    .tcl-stat-static { gap: 2px !important; }
    .tcl-stat-label { font-size: 14px !important; line-height: 18.2px !important; }

    /* --- TV Bokštas: stacked vertical, image card r=16 padding 8 ------- */
    .tcl-tvbokstas-content { text-align: left; }
    .tcl-tvbokstas-title { font-size: 28px !important; line-height: 1.2; }
    .tcl-tvbokstas-image-card { padding: 8px; border-radius: 16px; }

    /* --- Stats counter: 2x2 grid, panel radius 16 padding 40/16 -------- */
    .tcl-stats-panel { padding: 40px 16px !important; border-radius: 16px !important; }
    .tcl-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
    .tcl-stat-number { font-size: 36px !important; }
    .tcl-stat-suffix { font-size: 28px !important; }

    /* --- About: Figma 1191:4317 — photo collage above text, center-aligned */
    .tcl-about-row { grid-template-columns: 1fr !important; gap: 32px; }
    .tcl-about-content { text-align: center !important; align-items: center !important; }
    .tcl-about-eyebrow { color: #0073B2 !important; font-size: 16px !important; font-weight: 700; line-height: 20.8px !important; text-align: center; }
    .tcl-about-title { font-size: 34px !important; line-height: 37.4px !important; text-align: center !important; color: #231F20; white-space: pre-line; }
    .tcl-about-body p { font-size: 18px !important; line-height: 23.4px !important; color: #727376; text-align: center !important; }
    .tcl-about-cta { flex-direction: column !important; gap: 32px !important; align-items: center !important; }
    .tcl-about-cta .btn,
    .tcl-about-cta .tcl-btn-primary { width: 224px !important; max-width: 224px; }

    /* --- Certificates: Figma 1191:4407 — title 32 CENTER + subtitle + 3+2 badge grid.
     * Desktop uses .tcl-iso-sprite (single PNG 688×112 perf).
     * Mobile hides sprite + shows 5 individual SVGs in 3+2 layout. */
    .tcl-certificates-row { grid-template-columns: 1fr !important; gap: 32px !important; }
    .tcl-certificates-head { text-align: center !important; align-items: center !important; }
    .tcl-certificates-title { font-size: 32px !important; line-height: 35.2px !important; text-align: center !important; color: #000 !important; }
    .tcl-certificates-subtitle { font-size: 18px !important; line-height: 23.4px !important; text-align: center !important; color: #727376; }
    .tcl-iso-sprite { display: none !important; }       /* hide sprite on mobile */
    .tcl-certificates-badges {
        display: grid !important;
        grid-template-columns: repeat(3, 103px) !important;
        gap: 16px !important;
        justify-content: center !important;
        flex-wrap: unset !important;
    }
    .tcl-iso-badge {
        width: 103px !important;
        height: 103px !important;
        display: block !important;
        object-fit: contain;
    }
    /* Row 2 (badges 4+5) centered as 2-col offset row */
    .tcl-iso-badge-4 { grid-column: 1 / 2; justify-self: end; }
    .tcl-iso-badge-5 { grid-column: 2 / 3; justify-self: center; }

    /* --- Kaip mes veikiame (Figma 1191:4454) — stacked vertical gap 24, r=16.
     * Photos re-exported clean (no baked title) so the default Figma-spec
     * gradient (0.92 max opacity) is sufficient — no solid-black rescue band. */
    .tcl-how-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding-top: 16px; }
    .tcl-how-card { border-radius: 16px; padding: 8px; }
    .tcl-how-card-inner { border-radius: 16px; }
    .tcl-how-card:hover { transform: none; }
    .tcl-how-overlay { padding-bottom: 16px !important; }
    /* Body is revealed on touch — see the (hover:none) block by .tcl-how-body. */

    /* --- Reliability dials: Figma 1191:4486 — center-aligned content + 2x2 dial grid below */
    .tcl-reliability-row { grid-template-columns: 1fr !important; gap: 40px !important; }
    .tcl-reliability-content { max-width: 100%; text-align: center !important; align-items: center !important; }
    .tcl-reliability-content .tcl-eyebrow,
    .tcl-reliability-eyebrow { color: #0073B2 !important; font-size: 16px !important; font-weight: 700; line-height: 20.8px !important; text-align: center !important; display: block; }
    .tcl-reliability-title { font-size: 34px !important; line-height: 37.4px !important; text-align: center !important; color: #231F20; }
    .tcl-reliability-desc,
    .tcl-reliability-desc p { font-size: 18px !important; line-height: 23.4px !important; color: #727376; text-align: center !important; }
    .tcl-reliability-cta { justify-content: center !important; }
    /* --- Dial grid: Figma 1191:4522 — 343x343 inner content area, 2x2 grid gap 24.
     * Each dial 159x159. Inner content frame 111x58 centered (24px each side).
     * Number "98%" — DM Sans 700, 24px / lh 28.8. Label "Televizijos ir Radijo
     * transliavimo tinklai" — DM Sans 700 11px / lh 13.2 (NOT 13). */
    .tcl-dials-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
    .tcl-dial { max-width: 159px !important; }
    .tcl-dial-content { padding: 15% !important; }      /* 24px on 159 = 15%, was 18% */
    .tcl-dial-value { font-size: 24px !important; line-height: 28.8px !important; }
    .tcl-dial-number { font-size: 24px !important; }
    .tcl-dial-percent { font-size: 24px !important; }   /* matches Figma — both in same span at same size */
    .tcl-dial-label { font-size: 11px !important; line-height: 13.2px !important; max-width: 111px !important; margin: 0 auto !important; }

    /* --- News: Figma 1191:4580 — dark panel 40/16, 2 cards stacked.
     * User: 'items padding is smaller than desktop, need more adjustments'.
     * Card padding bumped from 12 → 16/12/20/12 (Figma exact mobile) + content
     * area padded so title doesn't sit flush against image edge. */
    .tcl-news-section { padding: 40px 16px !important; border-radius: 16px !important; }
    /* Desktop panel padding (60/50/50) left the cards squeezed to ~226px inside
     * the navy panel on phones (flagged 2026-06-20) — trim the inner padding so
     * the posts fill the panel width. */
    .tcl-news-panel { padding: 32px 16px 24px !important; }
    .tcl-news-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .tcl-news-title { font-size: 34px !important; line-height: 37.4px !important; text-align: center !important; }
    .tcl-news-subtitle { text-align: center !important; }
    /* News card padding: Figma 1191:4586 — 12/12/16/12 (was 16/12/20). */
    .tcl-news-card { padding: 12px 12px 16px !important; }
    .tcl-news-card-content { padding: 0 !important; }
    .tcl-news-card-title { font-size: 24px !important; line-height: 28.8px !important; }
    .tcl-news-card-excerpt { font-size: 18px !important; line-height: 23.4px !important; }

    /* --- Projects: 1-col stacked cards, gap 32 ------------------------ */
    .tcl-projects-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .tcl-project-card { padding: 8px 8px 16px !important; }

    /* --- Newsletter: Figma 1201:18212 — outer 375x491 padding 80/16/40/16.
     * Inner panel 343x371 navy r=16 padding 40/16. Title 32px CENTER white.
     * Input + button STACKED vertically (Frame 73 311x110 gap 16 VERTICAL).
     * Group 36 confetti (3 shapes 121x80) sits at outer top-left (offset 16,27)
     * — visible BEHIND/ABOVE the navy panel as background decoration. */
    .tcl-newsletter-section { padding: 80px 16px 40px !important; }
    .tcl-newsletter-panel { padding: 40px 16px !important; border-radius: 16px !important; }
    .tcl-newsletter-content { max-width: 100% !important; }
    .tcl-newsletter-title { font-size: 32px !important; line-height: 35.2px !important; text-align: center !important; }
    .tcl-newsletter-subtitle { font-size: 18px !important; line-height: 23.4px !important; text-align: center !important; }
    .tcl-newsletter-form { gap: 16px !important; max-width: 311px; margin: 0 auto; }
    .tcl-newsletter-row {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    /* CRITICAL: override desktop `flex: 1 1 440px`. In COLUMN direction, that
     * grew the input vertically to fill all available height. Force flex: none. */
    .tcl-newsletter-input {
        width: 100% !important;
        max-width: 100% !important;
        height: 47px !important;
        min-height: 47px !important;
        max-height: 47px !important;
        flex: 0 0 47px !important;
    }
    .tcl-newsletter-submit { width: 100% !important; height: 47px !important; flex: 0 0 47px !important; }
    .tcl-newsletter-consent {
        font-size: 14px !important;
        line-height: 18.2px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        text-transform: none !important;  /* vendor capitalizes labels — reset */
    }
    .tcl-newsletter-consent,
    .tcl-newsletter-consent *,
    .tcl-newsletter-consent-label,
    .tcl-newsletter-consent-label * { text-transform: none !important; }
    /* Anchor decoration PNG to TOP-LEFT (Figma Group 36 at x=16, y=27 in outer frame).
     * The current .tcl-nl-decor was scaled to desktop card width; on mobile use a more
     * focused position that doesn't overpower the small viewport. */
    .tcl-nl-decor {
        width: 200px !important;
        height: 240px !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 0.85;
    }

    /* --- Testimonials: Figma 1191:4719 — one card at a time horizontal scroll.
     * User: 'should scroll as now, but show only one item at a time'.
     * Each card spans (100vw - 32px) — fills viewport between 16px section
     * paddings. scroll-snap-type: x mandatory + scroll-snap-align: center
     * locks scroll to one card per stop. */
    .tcl-testimonials-section .tcl-section-title { text-align: center !important; font-size: 34px !important; }
    .tcl-testimonials-scroll {
        scroll-snap-type: x mandatory !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .tcl-testimonials-track,
    .tcl-testimonial-track {
        gap: 16px !important;
        scroll-padding: 0 16px;
    }
    .tcl-testimonial-card {
        flex: 0 0 calc(100vw - 32px) !important;
        min-width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always;
        padding: 24px !important;
    }

    /* --- Contact: Figma 1191:4870 — 375x1321 padding 40/16/80/16.
     * Photo collage 342×394 with 3 SPECIFIC positions:
     *   Photo 2 (206×244): top-LEFT at (0,0)
     *   Photo 3 (102×120 small): top-RIGHT at (216,19)
     *   Photo 1 (206×244): bottom-RIGHT at (136,149)
     * All content text LEFT-aligned. Form fields FULL-WIDTH stacked.
     * Submit button FULL-WIDTH 343px (was 224px desktop). */
    .tcl-contact-row { grid-template-columns: 1fr !important; gap: 32px !important; }
    .tcl-contact-collage {
        max-width: 342px !important;
        margin: 0 auto !important;
        aspect-ratio: 342/394;
        position: relative;
    }
    .tcl-contact-photo { position: absolute !important; padding: 8px !important; background: #FFFFFF; border-radius: 16px !important; }
    .tcl-contact-photo img { border-radius: 8px !important; }
    .tcl-contact-photo-1 { left: 0 !important; top: 0 !important; width: 206px !important; height: 244px !important; right: auto !important; bottom: auto !important; transform: none !important; }
    .tcl-contact-photo-2 { left: auto !important; right: 0 !important; top: 19px !important; width: 102px !important; height: 120px !important; bottom: auto !important; transform: none !important; }
    .tcl-contact-photo-3 { left: 136px !important; top: 149px !important; width: 206px !important; height: 244px !important; right: auto !important; bottom: auto !important; transform: none !important; }
    .tcl-contact-content { text-align: left !important; align-items: flex-start !important; }
    .tcl-contact-content .tcl-eyebrow,
    .tcl-contact-eyebrow { color: #0073B2 !important; font-size: 16px !important; font-weight: 700; line-height: 20.8px !important; text-align: left !important; }
    .tcl-contact-title { font-size: 34px !important; line-height: 37.4px !important; text-align: left !important; color: #231F20; }
    .tcl-contact-description,
    .tcl-contact-description p { font-size: 18px !important; line-height: 23.4px !important; color: #727376; text-align: left !important; }
    .tcl-contact-form-wrap { padding: 0 !important; }
    /* CF7 fields: all stacked, full width. Override any flex/grid row layout
     * that puts Vardas + Phone side-by-side on mobile. Each label becomes a
     * full-width block so the 2 top fields stack vertically per Figma
     * Frame 1984077973 (343×126 gap 32 VERTICAL) — vardas above tel. */
    .tcl-contact-form-wrap .wpcf7-form { display: flex !important; flex-direction: column !important; gap: 16px !important; }
    .tcl-contact-form-wrap .wpcf7-form > p,
    .tcl-contact-form-wrap .wpcf7-form > .tcl-cf-label,
    .tcl-contact-form-wrap .wpcf7-form .tcl-cf-label { width: 100% !important; display: block !important; flex: 1 1 100% !important; }
    .tcl-contact-form-wrap .wpcf7-form input[type="text"],
    .tcl-contact-form-wrap .wpcf7-form input[type="email"],
    .tcl-contact-form-wrap .wpcf7-form input[type="tel"],
    .tcl-contact-form-wrap .wpcf7-form textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
    .tcl-contact-form-wrap .wpcf7-form .wpcf7-submit,
    .tcl-contact-form-wrap .wpcf7-form .tcl-btn-primary { width: 100% !important; min-width: 100% !important; }

    /* --- Footer: Figma 1197:7386 — 375x1275 #090848 padding 40/16/16/16, gap 32.
     * 3 stacked menu columns (Paslaugos / Apie mus / Naudinga inf) + Draugaukime
     * + copyright. Menu title 24/28.8 wt700, items 18/23.4 wt400. More compact
     * vertical spacing than my current generic mobile defaults. */
    .tcl-footer { padding: 40px 16px 16px !important; gap: 32px !important; }
    .tcl-footer-top { gap: 32px !important; }
    .tcl-footer-brand-col { gap: 16px !important; }
    .tcl-footer-brand-col .tcl-brand-logo { width: 188px !important; height: 40px !important; }
    .tcl-footer-contact a,
    .tcl-footer-contact span,
    .tcl-footer-contact { font-size: 18px !important; line-height: 23.4px !important; gap: 8px; }
    .tcl-footer-cols { gap: 32px !important; }
    .tcl-footer-col-title,
    .tcl-footer-cols h4,
    .tcl-footer-cols .h4 { font-size: 24px !important; line-height: 28.8px !important; font-weight: 700; margin: 0 0 24px !important; }
    .tcl-footer-cols ul { gap: 16px; }
    .tcl-footer-cols li,
    .tcl-footer-cols a { font-size: 18px !important; line-height: 23.4px !important; }
    .tcl-footer-social-row { gap: 16px !important; padding-top: 0 !important; }
    .tcl-footer-social-title { font-size: 24px !important; line-height: 28.8px !important; margin: 0 0 16px !important; }
    .tcl-footer-bottom { padding-top: 24px !important; gap: 16px !important; }
    .tcl-footer-copyright { font-size: 14px !important; line-height: 18.2px !important; }
    .tcl-footer-credit { font-size: 14px !important; line-height: 16.8px !important; font-weight: 300; }

    /* --- Footer: stacked columns, all left-aligned ------------------- */
    .tcl-footer { padding: 40px 16px 16px !important; }
    .tcl-footer-top { grid-template-columns: 1fr !important; gap: 32px; }
    .tcl-footer-cols { grid-template-columns: 1fr !important; gap: 24px; }
    .tcl-footer-bottom { flex-direction: column; gap: 16px; padding-top: 24px; }
    .tcl-footer-copyright { font-size: 14px; }

    /* --- Mobile menu (offcanvas): Figma 1252:11301 + 1252:11889 — full-page
     * white menu with dark navy text, NOT a slide-in dark drawer.
     * Overrides vendor `.offcanvas { background: #000c29; width: 320px }` */
    .offcanvas.offcanvas-start {
        background: #FFFFFF !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border: 0 !important;
    }
    .offcanvas-header { padding: 24px !important; }
    .offcanvas-logo .tcl-brand-logo,
    .offcanvas-logo img {
        width: 150px !important;
        height: 32px !important;
        filter: none !important;   /* override the brightness/invert applied in dark-bg version */
    }
    .offcanvas-header .close-btn { color: #090848 !important; font-size: 24px !important; padding: 4px !important; }
    .offcanvas-header .close-btn i { color: #090848 !important; }
    .offcanvas-body { padding: 0 24px 24px !important; }
    .offcanvas-menu { padding: 0 !important; }
    .offcanvas-menu .main-menu,
    .offcanvas-menu .main-menu .sub-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; }
    /* Top-level item row: title + chevron (chevron = .menu-expand span injected by techwix.js) */
    .offcanvas-menu .main-menu > li {
        position: relative;
        padding: 0 !important;
        border: 0 !important;
    }
    /* Level 1 root menu — Figma 1252:10771: 16px wt500 #231F20 (NOT 18 wt700) */
    .offcanvas-menu .main-menu > li > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0 !important;
        font-size: 16px !important;
        line-height: 20.8px !important;
        font-weight: 500 !important;
        color: #231F20 !important;
        text-transform: none !important;
    }
    .offcanvas-menu .main-menu > li > a:hover { color: var(--tcl-blue-text) !important; }
    /* Chevron .menu-expand injected by techwix.js. Techwix vendor draws "+"
     * via ::before 16×2 white + ::after 2×16 white. Override BOTH for chevron-down arrow. */
    .offcanvas-menu .main-menu li .menu-expand {
        position: absolute !important;
        right: 0 !important;
        top: 14px !important;
        width: 24px !important;
        height: 24px !important;
        cursor: pointer;
        background: transparent !important;
        border-radius: 0 !important;
    }
    /* Chevron-RIGHT ">" — Figma 1252:10771 shows drill-in arrow on items with
     * submenus. Square with border-right + border-top, rotated 45deg = ">". */
    .offcanvas-menu .main-menu li .menu-expand::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 8px !important;
        height: 8px !important;
        background: transparent !important;
        border-right: 2px solid #231F20 !important;
        border-top: 2px solid #231F20 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        transform: translate(-50%, -50%) rotate(45deg) !important;
        transition: transform 0.2s ease !important;
    }
    .offcanvas-menu .main-menu li .menu-expand::after {
        display: none !important;
    }
    /* When item active (submenu expanded as accordion temporarily — until 3-level
     * drill-down JS ships), rotate to chevron-down ⌄ */
    .offcanvas-menu .main-menu > li.active > .menu-expand::before {
        transform: translate(-50%, -75%) rotate(135deg) !important;
    }
    /* Submenu hidden by default; .active toggle from techwix.js */
    .offcanvas-menu .sub-menu {
        display: none;
        padding: 8px 0 16px !important;
    }
    .offcanvas-menu .main-menu > li.active > .sub-menu { display: block; }
    .offcanvas-menu .sub-menu li { padding: 0 !important; }
    .offcanvas-menu .sub-menu > li > a,
    .offcanvas-menu .main-menu .sub-menu li a {
        display: block !important;
        padding: 8px 0 !important;
        font-size: 16px !important;
        line-height: 20.8px !important;
        font-weight: 400 !important;
        color: #231F20 !important;
        text-transform: none !important;
    }
    .offcanvas-menu .sub-menu > li > a:hover,
    .offcanvas-menu .sub-menu li.current-menu-item > a { color: var(--tcl-blue-text) !important; }
    /* Hide mega-menu desktop structure inside offcanvas (was leaking visually) */
    .offcanvas-menu .main-menu li.mega-heading > a {
        font-weight: 700 !important;
        text-transform: none !important;
    }

    /* --- Mobile 3-LEVEL DRILL-DOWN navigation (Figma 1252:10771 / 11301 / 11889).
     * JS (telecentras-mobile-nav.js) parses .offcanvas-menu output + rebuilds
     * as stacked panels: L1 root → L2 categories with icons → L3 sub-items.
     * Panels stack absolutely positioned; only `.is-active` is visible. */
    .tcl-nav-stack {
        position: relative;
        width: 100%;
        min-height: 70vh;
    }
    .tcl-nav-panel {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tcl-nav-panel.is-active { display: block; }
    .tcl-nav-list { list-style: none; margin: 0; padding: 0; }
    .tcl-nav-list li { padding: 0; margin: 0; border: 0; }

    /* L1: root menu items 16/20.8 wt500, chevron-right ">" on drill items */
    .tcl-nav-l1 .tcl-nav-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 0;
        background: transparent;
        border: 0;
        font-family: var(--tcl-font-sans);
        font-size: 16px;
        line-height: 20.8px;
        font-weight: 500;
        color: #231F20;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    .tcl-nav-l1 .tcl-nav-item:hover { color: var(--tcl-blue-text); }

    /* L2 + L3: Atgal back link 14/18.2 wt500 #0082C5 blue */
    .tcl-nav-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: 0;
        padding: 8px 0;
        margin: 0 0 16px;
        font-family: var(--tcl-font-sans);
        font-size: 14px;
        line-height: 18.2px;
        font-weight: 500;
        color: #0073B2;
        cursor: pointer;
    }
    .tcl-nav-back:hover { color: var(--tcl-navy); }
    .tcl-nav-back-chevron {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-right: 4px;
    }

    /* L2: service categories with 24×24 icon + title + chevron-right */
    .tcl-nav-l2 .tcl-nav-item {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        padding: 12px 0;
        background: transparent;
        border: 0;
        font-family: var(--tcl-font-sans);
        font-size: 18px;
        line-height: 23.4px;
        font-weight: 700;
        color: #231F20;
        text-align: left;
        cursor: pointer;
    }
    .tcl-nav-l2 .tcl-nav-item:hover { color: var(--tcl-blue-text); }
    .tcl-nav-icon {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        object-fit: contain;
        /* Source icons are WHITE SVGs (designed for dark desktop service cards).
         * On the white mobile menu they're invisible — invert + saturate to
         * render them as dark navy. */
        filter: brightness(0) saturate(100%);
    }
    .tcl-nav-l2 .tcl-nav-label { flex: 1 1 auto; }

    /* Chevron-right ">" indicator (shared L1 drill + L2 drill) */
    .tcl-nav-chevron {
        display: inline-block;
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        position: relative;
    }
    .tcl-nav-chevron::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #231F20;
        border-top: 2px solid #231F20;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    /* L3: category title at top + sub-items 16/20.8 wt400 #231F20 */
    .tcl-nav-l3-title {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 0 0 16px;
        font-family: var(--tcl-font-sans);
        font-size: 18px;
        line-height: 23.4px;
        font-weight: 700;
        color: #231F20;
    }
    /* Tappable category title (links to the category's own landing page) — keep
       the heading look, just make it clearly interactive. */
    .tcl-nav-l3-title-link { color: inherit; text-decoration: none; }
    .tcl-nav-l3-title-link:hover { color: var(--tcl-blue-text); }
    .tcl-nav-item-sub {
        display: block;
        padding: 10px 0;
        font-family: var(--tcl-font-sans);
        font-size: 16px;
        line-height: 20.8px;
        font-weight: 400;
        color: #231F20;
        text-decoration: none;
    }
    .tcl-nav-item-sub:hover,
    .tcl-nav-item-sub.is-current { color: var(--tcl-blue-text); }
    .tcl-nav-item-category { font-weight: 500; color: var(--tcl-blue-text); }

    /* Hide the original wp_nav_menu output once JS has rebuilt panels.
     * (JS replaces the .offcanvas-menu contents — this rule covers cases where
     * JS didn't run yet to avoid flashing the old menu.) */
    .offcanvas-menu .main-menu:not(.tcl-nav-stack-replaced) { /* no-op */ }

    /* --- Container width on mobile: full-bleed minus 16px each side --- */
    .tcl-hero .container,
    .tcl-newsletter-section .container,
    .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
}

/* === History timeline (page-istorija.php — Direction C) ====================== */
.tcl-history-section { background: var(--tcl-white, #fff); padding: 64px 0 90px; }
.tcl-history-eyebrow { text-align: center; color: var(--tcl-blue-text, #0073B2); font-weight: 700; font-size: 16px; line-height: 20.8px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.tcl-history-title { text-align: center; font-family: var(--tcl-font-sans); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.2; color: #231F20; margin: 0 0 44px; }
.tcl-history-grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; max-width: 1100px; margin: 0 auto; }
/* Sticky era rail */
.tcl-history-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 6px; }
.tcl-history-rail-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 18px; border-radius: 14px; border: 1px solid transparent; color: #727376; transition: background .2s ease, color .2s ease; }
.tcl-history-rail-range { font-weight: 700; font-size: 17px; line-height: 1.2; }
.tcl-history-rail-label { font-weight: 600; font-size: 12px; line-height: 1.3; color: #727376; letter-spacing: .03em; text-transform: uppercase; }
.tcl-history-rail-btn:hover { background: rgba(0,130,197,.06); color: #231F20; }
.tcl-history-rail-btn.is-active { background: var(--tcl-navy, #090848); color: #fff; }
.tcl-history-rail-btn.is-active .tcl-history-rail-label { color: var(--tcl-light-blue, #abe0f9); }
.tcl-history-rail-btn:focus-visible { outline: 2px solid var(--tcl-blue, #0082C5); outline-offset: 2px; }
/* Era blocks + event cards */
.tcl-history-era { margin-bottom: 54px; scroll-margin-top: 100px; }
.tcl-history-era:last-child { margin-bottom: 0; }
.tcl-history-era-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.tcl-history-era-range { font-family: var(--tcl-font-sans); font-weight: 700; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; color: #231F20; }
.tcl-history-era-chip { background: var(--tcl-light-blue-2, #def2fd); color: #0A2A57; font-weight: 700; font-size: 13px; line-height: 1.2; padding: 6px 13px; border-radius: 999px; }
.tcl-history-events { list-style: none; margin: 0; padding: 0; }
.tcl-history-event { position: relative; background: var(--tcl-navy, #090848); color: #fff; border-radius: 18px; padding: 22px 24px; margin: 0 0 14px 26px; transition: transform .25s ease; }
.tcl-history-event::before { content: ""; position: absolute; left: -26px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--tcl-blue, #0082C5); box-shadow: 0 0 0 4px rgba(0,130,197,.18); }
.tcl-history-event::after { content: ""; position: absolute; left: -20px; top: 40px; bottom: -28px; width: 2px; background: rgba(9,8,72,.08); }
.tcl-history-event:last-child::after { display: none; }
.tcl-history-event-year { display: block; color: var(--tcl-light-blue, #abe0f9); font-weight: 700; font-size: 22px; line-height: 1.2; margin-bottom: 6px; }
.tcl-history-event-text { margin: 0; color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.55; }
.tcl-history-event-more { margin-top: 12px; }
.tcl-history-event-more-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; color: var(--tcl-light-blue, #abe0f9); font-weight: 700; font-size: 14px; line-height: 1.2; user-select: none; }
.tcl-history-event-more-toggle::-webkit-details-marker { display: none; }
.tcl-history-event-more-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin-bottom: 2px; }
.tcl-history-event-more[open] .tcl-history-event-more-toggle::after { transform: rotate(-135deg); margin-bottom: -2px; }
.tcl-history-event-more-toggle:hover { color: #fff; }
.tcl-history-event-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.6; }
.tcl-history-event-detail p { margin: 0 0 10px; }
.tcl-history-event-detail p:last-child { margin-bottom: 0; }
.tcl-history-event:hover { transform: translateX(4px); }
@media (max-width: 767px) {
    .tcl-history-section { padding: 40px 0 60px; }
    .tcl-history-title { margin-bottom: 28px; }
    .tcl-history-grid { grid-template-columns: 1fr; gap: 20px; }
    .tcl-history-rail { position: static; flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
    .tcl-history-rail-btn { min-width: 158px; }
    .tcl-history-event { margin-left: 24px; padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .tcl-history-event, .tcl-history-rail-btn { transition: none; }
    html { scroll-behavior: auto; }
}

/* === Kontaktai (page-kontaktai.php — Variant A) — Figma palette + DM Sans only === */
.tcl-kontaktai-section { background: var(--tcl-white, #fff); padding: 60px 0 90px; }
.tcl-kontaktai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.tcl-kontaktai-eyebrow { color: var(--tcl-blue-text, #0073B2); font-family: var(--tcl-font-sans); font-weight: 700; font-size: 16px; line-height: 20.8px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.tcl-kontaktai-form-title { font-family: var(--tcl-font-sans); font-weight: 700; font-size: clamp(26px, 3.5vw, 40px); line-height: 1.2; color: #231F20; margin: 0 0 14px; }
.tcl-kontaktai-form-lead { font-family: var(--tcl-font-sans); font-size: 18px; line-height: 23.4px; color: #727376; margin: 0 0 22px; }
/* Contact cards */
.tcl-kontaktai-cards { display: flex; flex-direction: column; gap: 14px; }
.tcl-kontaktai-card { background: #fff; border: 1px solid rgba(9, 8, 72, .08); border-radius: 18px; padding: 22px 24px; }
.tcl-kontaktai-card.is-featured { background: var(--tcl-navy, #090848); border-color: transparent; }
.tcl-kontaktai-badge { display: inline-block; background: var(--tcl-light-blue, #abe0f9); color: var(--tcl-navy, #090848); font-family: var(--tcl-font-sans); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.tcl-kontaktai-card-title { font-family: var(--tcl-font-sans); font-weight: 700; font-size: 18px; line-height: 1.25; color: #231F20; margin: 0 0 14px; }
.tcl-kontaktai-card.is-featured .tcl-kontaktai-card-title { color: #fff; font-size: 20px; }
.tcl-kontaktai-lines { list-style: none; margin: 0; padding: 0; }
.tcl-kontaktai-line { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-family: var(--tcl-font-sans); font-size: 16px; line-height: 1.45; color: #727376; }
.tcl-kontaktai-line-icon { flex: 0 0 18px; color: var(--tcl-blue-text, #0073B2); display: inline-flex; margin-top: 1px; }
.tcl-kontaktai-line-text a { color: #231F20; text-decoration: none; font-weight: 600; }
.tcl-kontaktai-line-text a:hover { color: var(--tcl-blue-text, #0073B2); }
.tcl-kontaktai-line.is-note { padding-left: 28px; color: #727376; }
.tcl-kontaktai-card.is-featured .tcl-kontaktai-line,
.tcl-kontaktai-card.is-featured .tcl-kontaktai-line.is-note { color: rgba(255,255,255,.85); }
.tcl-kontaktai-card.is-featured .tcl-kontaktai-line-icon { color: var(--tcl-light-blue, #abe0f9); }
.tcl-kontaktai-card.is-featured .tcl-kontaktai-line-text a { color: #fff; }
.tcl-kontaktai-card.is-featured .tcl-kontaktai-line-text a:hover { color: var(--tcl-light-blue, #abe0f9); }
/* Map + requisites */
.tcl-kontaktai-map { margin-top: 44px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(9, 8, 72, .08); }
.tcl-kontaktai-map iframe { display: block; width: 100%; height: 400px; border: 0; }
.tcl-kontaktai-requisites { margin-top: 18px; padding: 18px 22px; background: var(--tcl-light-blue-2, #def2fd); border-radius: 18px; font-family: var(--tcl-font-sans); font-size: 14px; line-height: 1.7; color: #44505E; }
.tcl-kontaktai-requisites strong { color: #231F20; }
@media (max-width: 820px) {
    .tcl-kontaktai-section { padding: 40px 0 60px; }
    .tcl-kontaktai-grid { grid-template-columns: 1fr; gap: 32px; }
    .tcl-kontaktai-map iframe { height: 300px; }
}

/* Honeypot anti-spam field — visually + AT hidden, bots still fill it. */
.tcl-contact-form-wrap .tcl-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* CF7 auto-wraps the honeypot in its own <p>; as a grid item that empty <p>
 * reserves a full row + gaps, leaving a phantom void above the submit button.
 * Pull it out of grid flow (it still posts) so the button sits tight.
 * 🪤 position:absolute ALONE left this <p> full-width at the form's left edge,
 * jutting ~16px past the viewport → intermittent horizontal page scroll on
 * :has()-capable browsers (Safari 15.4+/modern Edge), flagged 2026-06-20.
 * Collapse it to a 0×0 clipped box so it can't contribute any overflow. */
.tcl-contact-form-wrap .wpcf7-form p:has(.tcl-hp) {
    position: absolute;
    left: -9999px;          /* off-screen like the .tcl-hp span — its right edge
                               can't overflow regardless of any forced width */
    top: auto;
    width: 1px;
    height: 0;
    overflow: hidden;
}

/* === Projektai single-page rebuilt content (source-true tables/lists, 2026-06-18) ===
 * The migrated `projektai` bodies had their WPBakery spec tables/accordions/timelines
 * flattened to run-on text. Rebuilt as real <table>/<ul>/<ol>; these rules style the
 * supporting blocks (stat infoboxes, work-site gallery, news list) on-brand. */
.tcl-projekt-content h3 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--tcl-navy, #090848);
    margin: 48px 0 16px;
}
.tcl-projekt-content h4 {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--tcl-navy, #090848);
    margin: 28px 0 12px;
}
.tcl-projekt-content hr {
    border: 0;
    border-top: 1px solid rgba(9, 8, 72, 0.1);
    margin: 48px 0;
}
.tcl-projekt-content > p img.alignright,
.tcl-projekt-content p > img.alignright,
.tcl-projekt-content img.alignright {
    float: right;
    max-width: 46%;
    height: auto;
    margin: 6px 0 20px 32px;
    border-radius: var(--tcl-radius-card, 16px);
}
/* Stat / fact callout boxes (migrated `tcl-old-infobox`) */
.tcl-projekt-content .tcl-old-infobox {
    background: var(--tcl-pale-blue, #DEF2FD);
    border-left: 4px solid var(--tcl-blue, #0082C5);
    border-radius: var(--tcl-radius-card, 16px);
    padding: 24px 28px;
    margin: 16px 0;
}
.tcl-projekt-content .tcl-old-infobox h4 {
    margin: 0 0 8px;
    font-size: 18px;
    letter-spacing: .01em;
    color: var(--tcl-navy, #090848);
}
.tcl-projekt-content .tcl-old-infobox p {
    margin: 0;
    color: #3A3D40;
    font-size: 16px;
    line-height: 1.55;
}
/* Work-site image gallery (replaces the migrated carousel) */
.tcl-projekt-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.tcl-projekt-gallery-item { margin: 0; }
.tcl-projekt-gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0;
    display: block;
}
/* Project news links */
.tcl-projekt-content .tcl-projekt-news { margin: 8px 0 0; }
.tcl-projekt-content .tcl-projekt-news > li { margin-bottom: 10px; line-height: 1.5; }
.tcl-projekt-content .tcl-projekt-news a { color: var(--tcl-blue-text, #0073B2); font-weight: 500; }
.tcl-projekt-content .tcl-projekt-news a:hover { color: var(--tcl-blue-hover, #006BA3); }
/* Timeline table: keep the date column compact */
.tcl-projekt-content table th:first-child,
.tcl-projekt-content table td:first-child { white-space: normal; }
@media (max-width: 767px) {
    .tcl-projekt-content img.alignright { float: none; max-width: 100%; margin: 16px 0; }
    .tcl-projekt-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .tcl-projekt-gallery-item img { height: 150px; }
}

/* === Projektai spec ACCORDIONS (source-true: VDC3/VDC4) === */
.tcl-projekt-acc-group { margin: 16px 0 8px; }
.tcl-projekt-acc {
    border: 1px solid rgba(9, 8, 72, 0.1);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
}
.tcl-projekt-acc > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 17px;
    color: var(--tcl-navy, #090848);
    transition: background 0.15s ease;
}
.tcl-projekt-acc > summary::-webkit-details-marker { display: none; }
.tcl-projekt-acc > summary:hover { background: var(--tcl-bg-soft, #F1F5F6); }
.tcl-projekt-acc > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--tcl-blue, #0082C5);
    border-bottom: 2px solid var(--tcl-blue, #0082C5);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
}
.tcl-projekt-acc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.tcl-projekt-acc[open] > summary { border-bottom: 1px solid rgba(9, 8, 72, 0.08); }
.tcl-projekt-acc-body { padding: 6px 22px 18px; }
.tcl-projekt-acc-body table { margin: 10px 0 0; }
.tcl-projekt-acc-body > ul:first-child,
.tcl-projekt-acc-body > table:first-child { margin-top: 10px; }

/* === Projektai TIMELINE (source-true: LAIKO JUOSTA / etapai) === */
.tcl-projekt-timeline {
    position: relative;
    margin: 24px 0 8px;
    padding-left: 34px;
}
.tcl-projekt-timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(0, 130, 197, 0.25);
}
.tcl-tl-item { position: relative; padding-bottom: 28px; }
.tcl-tl-item:last-child { padding-bottom: 0; }
.tcl-tl-item::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tcl-blue, #0082C5);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(0, 130, 197, 0.25);
}
.tcl-tl-date {
    font-family: var(--tcl-font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--tcl-blue-text, #0073B2);
    margin-bottom: 4px;
}
.tcl-tl-title {
    font-family: var(--tcl-font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--tcl-navy, #090848);
    margin: 0 0 6px;
}
.tcl-tl-card p { margin: 0 0 8px; color: #3A3D40; font-size: 16px; line-height: 1.55; }
.tcl-tl-card p:last-child { margin-bottom: 0; }
.tcl-tl-card ol,
.tcl-tl-card ul { margin: 6px 0 0; }
@media (max-width: 767px) {
    .tcl-projekt-acc > summary { padding: 14px 16px; font-size: 16px; }
    .tcl-projekt-acc-body { padding: 6px 16px 16px; }
}

/* === Projektai TABBED layout (source-true WPBakery tabs) === */
.tcl-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 32px;
    border-bottom: 1px solid rgba(9, 8, 72, 0.1);
}
.tcl-tab-btn {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
    margin-bottom: -1px;
    font-family: var(--tcl-font-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: #727376;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.tcl-tab-btn:hover { color: var(--tcl-navy, #090848); }
.tcl-tab-btn.is-active { color: var(--tcl-blue-text, #0073B2); border-bottom-color: var(--tcl-blue-text, #0073B2); }
.tcl-tab.is-tab-panel { animation: tcl-tab-fade 0.25s ease; }
@keyframes tcl-tab-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tcl-tab > h3:first-child { margin-top: 0; }
@media (max-width: 767px) {
    .tcl-tabs-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tcl-tab-btn { white-space: nowrap; padding: 10px 14px; font-size: 15px; }
}

/* === Projektai text styling — align with the /apie-mus/ editorial scale
 * (airier line-height + paragraph rhythm than the tight .tcl-page-content default). === */
.tcl-projekt-content { font-size: 16px; line-height: 1.65; }
.tcl-projekt-content p { line-height: 1.65; margin: 0 0 14px; }
.tcl-projekt-content > p:last-child { margin-bottom: 0; }
.tcl-projekt-content li { line-height: 1.6; }
.tcl-projekt-content h3 { margin-top: 8px; }

/* Project intro — featured photo always floated LEFT, intro text wraps it. */
.tcl-projekt-intro { margin-bottom: 40px; }
.tcl-projekt-intro::after { content: ""; display: block; clear: both; }
.tcl-projekt-intro > p:first-of-type,
.tcl-projekt-intro > :first-child { margin-top: 0; }
/* `.tcl-projekt-content img` (0,2,1) beats the generic `.tcl-page-content img`
 * margin (0,1,1) so the right text-gap + top alignment actually apply. */
.tcl-projekt-content img.tcl-projekt-featured {
    float: left;
    width: 36%;
    max-width: 400px;
    max-height: 460px;
    height: auto;
    object-fit: cover;
    margin: 6px 32px 14px 0;
    border-radius: var(--tcl-radius-card, 16px);
    display: block;
}
@media (max-width: 700px) {
    .tcl-projekt-content img.tcl-projekt-featured { float: none; width: 100%; max-width: 100%; max-height: 360px; margin: 0 0 16px; }
}

/* === Gallery lightbox === */
.tcl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(9, 8, 72, 0.92);
}
.tcl-lightbox.is-open { display: flex; }
.tcl-lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; }
.tcl-lb-img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.tcl-lb-cap { color: rgba(255, 255, 255, 0.75); font-family: var(--tcl-font-sans); font-size: 14px; text-align: center; }
.tcl-lb-close, .tcl-lb-prev, .tcl-lb-next {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease;
}
.tcl-lb-close:hover, .tcl-lb-prev:hover, .tcl-lb-next:hover { background: rgba(255, 255, 255, 0.28); }
.tcl-lb-close { top: 20px; right: 24px; width: 46px; height: 46px; font-size: 28px; }
.tcl-lb-prev, .tcl-lb-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 38px; }
.tcl-lb-prev { left: 24px; }
.tcl-lb-next { right: 24px; }
@media (max-width: 600px) {
    .tcl-lightbox { padding: 16px; }
    .tcl-lb-prev, .tcl-lb-next { width: 44px; height: 44px; font-size: 30px; }
    .tcl-lb-prev { left: 8px; }
    .tcl-lb-next { right: 8px; }
}

/* === Process steps (Atrankos procesas) — /pretendento-anketa/ ============= */
.tcl-process { padding: 64px 0; }
.tcl-process-head { max-width: 840px; margin: 0 auto 48px; text-align: center; }
.tcl-process-head .tcl-section-title { margin: 0 0 16px; }
.tcl-process-lead { color: #4b4f56; font-size: 17px; line-height: 1.65; }
.tcl-process-lead p { margin: 0 0 12px; }
.tcl-process-lead p:last-child { margin-bottom: 0; }
.tcl-process-steps {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid;
    grid-template-columns: repeat(var(--tcl-process-count, 5), 1fr);
    gap: 16px;
}
.tcl-process-steps::before {           /* connector line behind the number circles */
    content: ""; position: absolute; top: 28px; height: 2px; background: #ABE0F9; z-index: 0;
    left: calc((100% / var(--tcl-process-count, 5)) / 2);
    right: calc((100% / var(--tcl-process-count, 5)) / 2);
}
.tcl-process-step {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px;
}
.tcl-process-num {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    background: #0073B2; color: #fff; font-weight: 700; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; box-shadow: 0 0 0 6px #fff;  /* white ring masks the line under the circle */
}
.tcl-process-step-title { display: block; color: #231F20; font-weight: 600; font-size: 16px; line-height: 1.3; }
.tcl-process-step-note  { display: block; color: #727376; font-size: 13px; font-style: italic; margin-top: 4px; }
@media (max-width: 767px) {
    .tcl-process-steps { grid-template-columns: 1fr; gap: 0; }
    .tcl-process-steps::before { top: 28px; bottom: 28px; left: 28px; right: auto; width: 2px; height: auto; }
    .tcl-process-step { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 12px 0; }
    .tcl-process-num { margin-bottom: 0; }
    .tcl-process-step-body { display: flex; flex-direction: column; }
}

/* === CF7 file upload — Lithuanian custom control (replaces native EN button) === */
.tcl-file-native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.tcl-file-ui { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tcl-file-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: #0073B2; color: #fff; border: 0; border-radius: 8px;
    font-family: var(--tcl-font-sans); font-weight: 600; font-size: 15px;
    padding: 11px 20px; transition: background .2s ease;
}
.tcl-file-btn:hover { background: #006ba3; }
.tcl-file-name { color: #727376; font-size: 14px; }
.tcl-process-cta { text-align: center; margin-top: 44px; }
.tcl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Real-time form validation (telecentras-forms.js) — inline field errors. */
.tcl-field-error {
    display: block;
    color: #D32F2F;
    font-family: var(--tcl-font-sans);
    font-size: 13px;
    line-height: 1.4;
    margin-top: 4px;
    text-transform: none;   /* beat techwix's `label { text-transform: capitalize }` inherited into the error span */
}
.tcl-field-error:empty { display: none; }
/* Same inherited-capitalize reset for CF7's own validation tips, site-wide. */
.wpcf7-form .wpcf7-not-valid-tip { text-transform: none; }
input.tcl-invalid,
textarea.tcl-invalid {
    border-color: #D32F2F !important;
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.12);
}

/* === Language switcher (Task 1.4) === */
/* Brand primary: --tcl-blue-text (#0073B2, AA-safe; no --tcl-primary defined). */
/* Language switcher — flag images only (no text), beside the search icon. */
.tcl-lang-switch {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-left: 14px;
}
.tcl-lang-switch__item {
    display: inline-flex;
    line-height: 0;
    border-radius: 3px;
    opacity: .45;                 /* the non-current language is dimmed */
    transition: opacity .15s ease, box-shadow .15s ease;
}
.tcl-lang-switch__item:hover { opacity: 1; }
.tcl-lang-switch__item.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--tcl-blue-text, #0073B2);  /* ring marks the current language */
}
.tcl-lang-flag {
    display: block;
    width: 24px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
}
/* The desktop switcher uses Bootstrap `d-none d-lg-flex`, but in this theme's
 * CSS source order `d-none` (display:none !important) wins even at lg, leaving
 * the header switcher hidden on desktop. Force it visible at >=992px from our
 * stylesheet (loaded last) so the flags show beside the search icon. */
@media (min-width: 992px) {
    .header-meta .tcl-lang-switch.d-lg-flex { display: inline-flex !important; }
}
/* Offcanvas variant — left-aligned, more breathing room */
.tcl-lang-switch--offcanvas {
    margin-left: 0;
    margin-top: 16px;
}