/* ==========================================================================
   PLASTO INNER PAGES STYLESHEET
   Styles for all non-homepage inner pages
   Window & Door Manufacturer - Modern, Clean, Professional
   ========================================================================== */


/* ==========================================================================
   1. NAV OVERRIDE - INNER PAGES
   On inner pages the nav is solid (not transparent like the homepage).
   ========================================================================== */

/* On inner pages, nav gets solid dark background (not transparent like homepage) */
body:not(.home) .nav {
    background-color: var(--color-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-dark-border);
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
}

body:not(.home) .nav .logo svg text {
    fill: var(--color-white);
}

body:not(.home) .nav .nav-link,
body:not(.home) .nav .nav-dropdown-trigger {
    color: rgba(255, 255, 255, 0.8);
}

body:not(.home) .nav .nav-link:hover,
body:not(.home) .nav .nav-dropdown-trigger:hover {
    color: var(--color-primary);
}

body:not(.home) .nav .nav-cta {
    background-color: var(--color-primary);
    color: var(--color-white);
}

body:not(.home) .nav .nav-cta:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-glow);
}

/* When nav is scrolled it keeps the solid background */
body:not(.home) .nav.is-scrolled {
    background-color: var(--color-dark);
    border-bottom-color: var(--color-dark-border);
}


/* ==========================================================================
   2. PAGE HERO
   Dark hero banner used at the top of every inner page.
   ========================================================================== */

.page-hero {
    position: relative;
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-3xl) 0 var(--space-xl);
    overflow: hidden;
    text-align: left;
}

.page-hero::before {
    display: none;
}

/* Subtle dot-grid pattern */
.page-hero::after {
    display: none;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.page-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
    color: var(--color-white);
}

.page-hero__title span,
.page-hero__title .highlight {
    color: var(--color-primary);
}

.page-hero__desc {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 640px;
    margin: 0 auto var(--space-lg);
}

/* Hero with background image */
.page-hero--image {
    padding: clamp(60px, 8vw, 100px) 0 clamp(50px, 7vw, 90px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-hero--image > .container {
    position: relative;
    z-index: 1;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(16, 44, 62, 0.65) 0%, rgba(16, 44, 62, 0.3) 100%),
        linear-gradient(to bottom, rgba(16, 44, 62, 0.1) 0%, rgba(16, 44, 62, 0.6) 60%, rgb(24, 62, 86) 100%);
}

.page-hero--image::after {
    display: none;
}

/* Hero with stats strip at the bottom */
.page-hero--has-stats {
    padding-bottom: 0;
}

.page-hero-stats {
    display: flex;
    margin-top: clamp(28px, 4vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.page-hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(16px, 2.5vw, 24px) 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    gap: 2px;
}

.page-hero-stat:last-child {
    border-right: none;
}

.page-hero-stat-value {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.page-hero-stat-unit {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    color: var(--color-primary);
    font-weight: 500;
    opacity: 0.85;
}

.page-hero-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    /* Tagasiside (Kermo): labels alati alaservas ühel joonel sõltumata sellest, kas unit on määratud */
    margin-top: auto;
    padding-top: 8px;
    letter-spacing: 0.03em;
}

/* Small hero variant (for archive, search, etc.) */
.page-hero--sm {
    padding: var(--space-4xl) 0 var(--space-3xl);
}

.page-hero--sm .page-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}


/* ==========================================================================
   3. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.breadcrumbs a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
    color: var(--color-primary);
}

.breadcrumbs__sep {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.75rem;
    user-select: none;
}

.breadcrumbs__current {
    color: var(--color-primary);
    font-weight: 500;
}

/* Left-aligned breadcrumbs (used in some templates) */
.breadcrumbs--left {
    justify-content: flex-start;
}


/* ==========================================================================
   4. PROSE / RICH TEXT CONTENT
   Styles for the_content() output and WYSIWYG blocks.
   ========================================================================== */

.prose {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text);
    max-width: 768px;
    margin: 0 auto;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-dark);
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.prose h1 { font-size: 2.25rem; }
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.375rem; }
.prose h4 { font-size: 1.125rem; }

.prose p {
    margin-bottom: 1.5em;
}

.prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-primary-light);
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.prose a:hover {
    color: var(--color-primary-dark);
    text-decoration-color: var(--color-primary);
}

.prose strong {
    font-weight: 600;
    color: var(--color-dark);
}

.prose ul,
.prose ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.prose ul {
    list-style: none;
    padding-left: 0;
}

.prose ul li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}

.prose ol li {
    margin-bottom: 0.5em;
}

.prose ol li::marker {
    color: var(--color-primary);
    font-weight: 600;
}

.prose blockquote {
    border-left: 3px solid var(--color-primary);
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-2xl) 0;
    background-color: var(--color-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: var(--space-2xl) 0;
}

.prose figure {
    margin: var(--space-2xl) 0;
}

.prose figcaption {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-sm);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-2xl) 0;
    font-size: 0.9375rem;
}

.prose table th,
.prose table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.prose table th {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-dark);
    background-color: var(--color-light);
}

.prose table tr:hover td {
    background-color: rgba(7, 181, 218, 0.03);
}

.prose hr {
    border: none;
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-3xl) 0;
}

.prose code {
    font-size: 0.875em;
    background-color: var(--color-light);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--color-primary-dark);
}

.prose pre {
    background-color: var(--color-dark);
    color: rgba(255, 255, 255, 0.9);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    margin: var(--space-2xl) 0;
}

.prose pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Wide prose variant */
.prose--wide {
    max-width: 960px;
}

.prose--full {
    max-width: none;
}


/* ==========================================================================
   5. FEATURES GRID
   3-column grid for feature cards / icon boxes.
   ========================================================================== */

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.feature-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: var(--space-lg);
}

.feature-card__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.feature-card__text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Dark variant (on dark backgrounds) */
.features-grid--dark .feature-card {
    background-color: var(--color-dark-card);
    border-color: var(--color-dark-border);
    color: var(--color-white);
}

.features-grid--dark .feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.features-grid--dark .feature-card__title {
    color: var(--color-white);
}

.features-grid--dark .feature-card__text {
    color: var(--color-text-muted);
}

/* 2-column variant */
.features-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* 4-column variant */
.features-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}


/* ==========================================================================
   6. PROCESS / STEPS
   Numbered horizontal steps (timeline-like).
   ========================================================================== */

.process-steps {
    display: flex;
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    counter-reset: step-counter;
}

.process-step {
    flex: 1;
    position: relative;
    text-align: center;
    counter-increment: step-counter;
}

/* Connector line between steps */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    right: calc(-1 * var(--space-xl) / 2 - 24px);
    width: calc(var(--space-xl) + 48px);
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-border) 100%
    );
    z-index: 0;
}

.process-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--color-white), var(--shadow-md);
}

/* Auto-numbered variant */
.process-step--auto .process-step__number::before {
    content: counter(step-counter);
}

.process-step__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.process-step__text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    max-width: 260px;
    margin: 0 auto;
}

/* Dark variant */
.process-steps--dark .process-step__number {
    box-shadow: 0 0 0 6px var(--color-dark), var(--shadow-glow);
}

.process-steps--dark .process-step__title {
    color: var(--color-white);
}

.process-steps--dark .process-step__text {
    color: var(--color-text-muted);
}


/* ==========================================================================
   7. CTA BANNER
   Full-width call-to-action section for inner pages.
   ========================================================================== */

.cta-banner {
    position: relative;
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-4xl) 0;
    overflow: hidden;
    text-align: center;
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 50%, var(--color-primary-light) 0%, transparent 60%),
        radial-gradient(circle at 70% 50%, rgba(7, 181, 218, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.cta-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.cta-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.cta-banner__title .highlight {
    color: var(--color-primary);
}

.cta-banner__text {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

.cta-banner__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.cta-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
}

.cta-banner__btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.cta-banner__btn--primary:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.cta-banner__btn--outline {
    background-color: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-dark-border);
}

.cta-banner__btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(7, 181, 218, 0.05);
}


/* ==========================================================================
   8. RELATED PAGES GRID
   Grid of related pages / "you might also like" cards.
   ========================================================================== */

.related-pages {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.related-pages__heading {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.related-pages__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.related-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.related-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.related-card__body {
    padding: var(--space-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.related-card__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.related-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.35;
    margin-bottom: var(--space-sm);
}

.related-card__excerpt {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    flex: 1;
}

.related-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap var(--transition-fast);
}

.related-card:hover .related-card__link {
    gap: var(--space-sm);
}

.related-card__link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.related-card:hover .related-card__link svg {
    transform: translateX(2px);
}


/* ==========================================================================
   9. INNER PAGE COMPONENTS
   ========================================================================== */


/* --------------------------------------------------------------------------
   9a. Service Cards
   -------------------------------------------------------------------------- */

/* Old service-card styles removed — replaced by 9i-2 premium cards */


/* --------------------------------------------------------------------------
   9b. Team Grid
   -------------------------------------------------------------------------- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.team-member {
    text-align: center;
}

.team-member__photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.team-member__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.team-member:hover .team-member__photo {
    transform: scale(1.05);
}

.team-member__social {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: linear-gradient(to top, rgba(10, 10, 26, 0.8) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.team-member:hover .team-member__social {
    opacity: 1;
    transform: translateY(0);
}

.team-member__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.team-member__social a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.team-member__name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.team-member__role {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   9c. Timeline
   -------------------------------------------------------------------------- */

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Vertical line */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-border);
    transform: translateX(-50%);
}

.timeline__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-3xl);
}

.timeline__item:last-child {
    margin-bottom: 0;
}

/* Alternate left / right */
.timeline__item:nth-child(odd) {
    flex-direction: row;
    padding-right: calc(50% + var(--space-2xl));
    text-align: right;
}

.timeline__item:nth-child(even) {
    flex-direction: row-reverse;
    padding-left: calc(50% + var(--space-2xl));
    text-align: left;
}

/* Center dot */
.timeline__dot {
    position: absolute;
    left: 50%;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    border: 3px solid var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateX(-50%);
    z-index: 1;
}

.timeline__year {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-xs);
}

.timeline__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.timeline__text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   9d. Locations Grid
   -------------------------------------------------------------------------- */

.locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.location-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.location-card__map {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background-color: var(--color-light);
}

.location-card__body {
    padding: var(--space-xl);
}

.location-card__name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.location-card__address {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.location-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.location-card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.location-card__meta-item svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.location-card__actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.location-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.location-card__btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.location-card__btn--primary:hover {
    background-color: var(--color-primary-dark);
}

.location-card__btn--outline {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.location-card__btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   9e. Gallery Grid
   -------------------------------------------------------------------------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.gallery-grid--masonry {
    grid-template-rows: masonry;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
}

.gallery-item__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

/* Tall gallery item */
.gallery-item--tall .gallery-item__image {
    aspect-ratio: 3 / 4;
}

/* Wide gallery item spanning two columns */
.gallery-item--wide {
    grid-column: span 2;
}

.gallery-item--wide .gallery-item__image {
    aspect-ratio: 16 / 9;
}

.gallery-item:hover .gallery-item__image {
    transform: scale(1.06);
}

.gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 26, 0.7) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-base);
    display: flex;
    align-items: flex-end;
    padding: var(--space-lg);
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__caption {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-white);
}

/* Gallery with 4 columns */
.gallery-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Gallery with 2 columns */
.gallery-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}


/* --------------------------------------------------------------------------
   9f. Blog Cards
   -------------------------------------------------------------------------- */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.blog-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.blog-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.blog-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__image {
    transform: scale(1.04);
}

.blog-card__category {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-pill);
}

.blog-card__body {
    padding: var(--space-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.blog-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.blog-card__meta-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.blog-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.35;
    margin-bottom: var(--space-sm);
    transition: color var(--transition-fast);
}

.blog-card:hover .blog-card__title {
    color: var(--color-primary);
}

.blog-card__excerpt {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
}

.blog-card__read-more svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.blog-card:hover .blog-card__read-more svg {
    transform: translateX(3px);
}

/* Featured blog card (larger, spanning 2 columns) */
.blog-card--featured {
    grid-column: span 2;
    flex-direction: row;
}

.blog-card--featured .blog-card__image-wrap {
    flex: 0 0 50%;
}

.blog-card--featured .blog-card__image {
    aspect-ratio: auto;
    height: 100%;
}

.blog-card--featured .blog-card__body {
    padding: var(--space-2xl);
    justify-content: center;
}

.blog-card--featured .blog-card__title {
    font-size: 1.5rem;
}

.blog-card--featured .blog-card__excerpt {
    -webkit-line-clamp: 4;
}

/* Blog sidebar */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-3xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.sidebar-widget {
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.sidebar-widget__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-primary);
}


/* --------------------------------------------------------------------------
   9f1. Single Post
   -------------------------------------------------------------------------- */

/* Hero */
.post-hero {
    position: relative;
    background-color: var(--color-dark);
    padding: 80px 0 64px;
}

.post-hero--image {
    background-size: cover;
    background-position: center;
}

.post-hero--image .page-hero-overlay {
    background: linear-gradient(to bottom, rgba(10,25,40,0.78) 0%, rgba(10,25,40,0.92) 100%);
}

.post-hero .container {
    position: relative;
    z-index: 1;
}

.post-hero__category {
    position: static !important;
    display: inline-block;
    margin-bottom: var(--space-lg);
}

.post-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.25;
    margin-bottom: var(--space-xl);
}

.post-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.post-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
}

.post-hero__meta-item svg {
    opacity: 0.7;
}

/* Layout */
.post-section {
    padding-top: var(--space-3xl);
}

.post-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-3xl);
    align-items: start;
}

/* Article body */
.post-body {
    min-width: 0;
}

.post-body__placeholder-img {
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0d2535 0%, #0a3d55 50%, rgba(7,181,218,0.12) 100%);
    margin-bottom: var(--space-2xl);
}

/* Post content typography */
.post-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text);
}

.post-content h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-lg);
}

.post-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.post-content p {
    margin-bottom: var(--space-lg);
}

.post-content ul,
.post-content ol {
    padding-left: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.post-content li {
    margin-bottom: var(--space-sm);
}

.post-content ul li::marker {
    color: var(--color-primary);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-content a:hover {
    text-decoration: none;
}

.post-content blockquote {
    border-left: 3px solid var(--color-primary);
    padding: var(--space-md) var(--space-xl);
    margin: var(--space-xl) 0;
    background: rgba(7,181,218,0.04);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

.post-content img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}

.post-content code {
    background: var(--color-light);
    padding: 2px 6px;
    border-radius: 0;
    font-size: 0.875em;
}

/* Tags */
.post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.post-tags__label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: var(--space-xs);
}

.post-tag {
    display: inline-block;
    padding: 5px var(--space-md);
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.post-tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Author card */
.post-author-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.post-author-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
}

.post-author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-author-name {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-dark);
}

.post-author-role {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.post-author-share {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.post-author-share-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.post-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.post-share-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Post prev/next pagination */
.post-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.post-pagination__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
}

.post-pagination__link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.post-pagination__link--next {
    text-align: right;
}

.post-pagination__dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.post-pagination__title {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sidebar */
.post-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.post-sidebar__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: var(--space-md) var(--space-lg);
    border: 1.5px solid rgba(7,181,218,0.3);
    border-radius: var(--radius-pill);
    transition: all var(--transition-fast);
}

.post-sidebar__back:hover {
    background: rgba(7,181,218,0.06);
    border-color: var(--color-primary);
}

.post-sidebar__widget {
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.post-sidebar__widget-title {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.post-sidebar__cat-link {
    display: inline-flex;
    padding: 6px var(--space-lg);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.post-sidebar__meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.post-sidebar__meta-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.post-sidebar__meta-list li svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.post-sidebar__cta {
    background: linear-gradient(135deg, var(--color-dark) 0%, #0a3d55 100%);
    border: 1px solid rgba(7,181,218,0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
}

.post-sidebar__cta p {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    line-height: 1.4;
}

.btn-sm {
    padding: 10px var(--space-lg);
    font-size: 0.875rem;
}

/* Related posts grid — 3 col, no featured card */
.related-posts-grid .blog-card--featured {
    grid-column: span 1;
    flex-direction: column;
}

.related-posts-grid .blog-card--featured .blog-card__image-wrap {
    flex: none;
}

.related-posts-grid .blog-card--featured .blog-card__image {
    aspect-ratio: 16 / 10;
    height: auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .post-layout {
        grid-template-columns: 1fr 260px;
    }
}

@media (max-width: 768px) {
    .post-layout {
        grid-template-columns: 1fr;
    }

    .post-sidebar {
        position: static;
        order: -1;
    }

    .post-pagination {
        grid-template-columns: 1fr;
    }

    .post-author-card {
        flex-wrap: wrap;
    }

    .post-author-share {
        width: 100%;
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   9f2. Blog Filter Bar + Pagination
   -------------------------------------------------------------------------- */

/* Filter bar — sticky strip below hero */
.blog-filter-bar {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.blog-filter-inner {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.blog-filter-inner::-webkit-scrollbar {
    display: none;
}

.blog-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--space-lg);
    background: transparent;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.blog-filter-btn svg {
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.blog-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.blog-filter-btn:hover svg {
    opacity: 1;
}

.blog-filter-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.blog-filter-btn.active svg {
    opacity: 1;
}

/* Image placeholder for cards without real images */
.blog-card__image--placeholder {
    aspect-ratio: 16 / 10;
    width: 100%;
    display: block;
    background: linear-gradient(135deg, #0d2535 0%, #0a3d55 50%, #07b5da22 100%);
    position: relative;
    overflow: hidden;
}

.blog-card__image--placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 60%, rgba(7,181,218,0.15) 0%, transparent 60%);
}

.blog-card--featured .blog-card__image--placeholder {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
}

/* No results message */
.blog-no-results {
    text-align: center;
    padding: var(--space-3xl) 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

/* Pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
}

.blog-pagination__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.blog-pagination__item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.blog-pagination__item.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.blog-pagination__item--next {
    padding: 0 var(--space-lg);
    min-width: auto;
}

/* --------------------------------------------------------------------------
   9f3. Testimonials Slider (kliendid-meist)
   -------------------------------------------------------------------------- */

/* Stats bar */
.reviews-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xl);
    padding: var(--space-2xl) 0;
    flex-wrap: wrap;
}

.reviews-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
}

.reviews-stat__value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1;
}

.reviews-stat__unit {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

.reviews-stat__label {
    font-size: 0.8125rem;
    color: rgba(10,30,42,0.5);
    font-weight: 500;
}

.reviews-stat__stars {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

.reviews-stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(10,30,42,0.12);
    flex-shrink: 0;
}

/* Slider section */
.testimonials-section {
    overflow: hidden;
}

.testimonials-slider-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
}

.testimonials-slider-viewport {
    flex: 1;
    overflow: hidden;
}

.testimonials-slider-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.testimonial-slide {
    flex: 0 0 calc(100% / 3);
    padding: 0 var(--space-md);
    box-sizing: border-box;
}

/* Individual card */
.tcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border: 1px solid rgba(10,30,42,0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 2px 16px rgba(10,30,42,0.06);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.tcard:hover {
    transform: translateY(-4px);
    border-color: rgba(7,181,218,0.35);
    box-shadow: 0 8px 32px rgba(7,181,218,0.12);
}

.tcard__stars {
    display: flex;
    gap: 3px;
    margin-bottom: var(--space-lg);
}

.tcard__text {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(10,30,42,0.75);
    flex: 1;
    margin-bottom: var(--space-2xl);
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tcard__author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(10,30,42,0.08);
}

.tcard__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-white);
    flex-shrink: 0;
}

.tcard__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tcard__author-info strong {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-dark);
}

.tcard__author-info span {
    font-size: 0.8125rem;
    color: rgba(10,30,42,0.45);
}

/* Nav arrows */
.testimonials-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(10,30,42,0.15);
    background: var(--color-white);
    color: rgba(10,30,42,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.testimonials-nav:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(7,181,218,0.06);
}

.testimonials-nav:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* Dots */
.testimonials-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-2xl);
}

.testimonials-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(10,30,42,0.15);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.testimonials-dot.active {
    background: var(--color-primary);
    width: 24px;
    border-radius: 0;
}

/* Responsive */
@media (max-width: 960px) {
    .testimonial-slide { flex: 0 0 50%; }
    .reviews-stat-divider { display: none; }
}

@media (max-width: 600px) {
    .testimonial-slide { flex: 0 0 100%; }
    .testimonials-nav { display: none; }
    .reviews-stats { gap: var(--space-2xl); }
}

/* --------------------------------------------------------------------------
   9g. FAQ Inner Page Overrides (light background)
   -------------------------------------------------------------------------- */

.inner-page .faq-item {
    border-bottom-color: var(--color-border);
}

.inner-page .faq-item:first-child {
    border-top-color: var(--color-border);
}

.inner-page .faq-item summary {
    color: var(--color-dark);
}

.inner-page .faq-item summary::after {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.inner-page .faq-item[open] summary {
    color: var(--color-primary);
}

.inner-page .faq-item[open] summary::after {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.inner-page .faq-answer p {
    color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   9h. Tab System
   -------------------------------------------------------------------------- */

.tabs {
    max-width: var(--container-max);
    margin: 0 auto;
}

.tabs-nav {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-btn {
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab-btn:hover {
    color: var(--color-primary);
}

.tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.tab-panel-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tab-panel-content {
    padding: var(--space-lg) 0;
}

.tab-panel-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.tab-panel-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}

.tab-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.tab-specs li {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.tab-specs li strong {
    color: var(--color-dark);
    margin-right: var(--space-sm);
}


/* --------------------------------------------------------------------------
   9i. Product Type Cards Grid
   -------------------------------------------------------------------------- */

.product-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.product-type-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.product-type-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.product-type-image {
    overflow: hidden;
}

.product-type-content {
    padding: var(--space-xl);
}

.product-type-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.product-type-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.product-type-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap var(--transition-fast);
}

.product-type-link:hover {
    gap: var(--space-sm);
}

.product-type-link svg {
    transition: transform var(--transition-fast);
}

.product-type-card:hover .product-type-link svg {
    transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   9i-2. Service Cards (Teenused page premium cards)
   -------------------------------------------------------------------------- */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

/* Full-image card with overlay */
.service-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(7, 181, 218, 0.12);
}

/* Background image */
.service-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover .service-card__img {
    transform: scale(1.06);
}

/* Dark gradient overlay */
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(10, 37, 64, 0.92) 0%,
        rgba(10, 37, 64, 0.6) 40%,
        rgba(10, 37, 64, 0.15) 70%,
        transparent 100%
    );
    transition: background 0.4s ease;
}

.service-card:hover::before {
    background: linear-gradient(
        to top,
        rgba(7, 181, 218, 0.85) 0%,
        rgba(10, 37, 64, 0.55) 45%,
        rgba(10, 37, 64, 0.1) 75%,
        transparent 100%
    );
}

/* Badge */
.service-card__badge {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    z-index: 3;
    background: var(--color-primary);
    border-radius: 0;
    padding: 5px 14px;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Number indicator */
.service-card__number {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 3;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
}

/* Content overlay at bottom */
.service-card__body {
    position: relative;
    z-index: 2;
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
}

.service-card__icon {
    width: 40px;
    height: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
    transition: color 0.4s ease;
}

.service-card:hover .service-card__icon {
    color: #fff;
}

.service-card__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.service-card__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-md);
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: gap 0.3s ease, color 0.4s ease;
}

.service-card:hover .service-card__link {
    gap: var(--space-sm);
    color: #fff;
}

.service-card__link svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.service-card:hover .service-card__link svg {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .service-card {
        min-height: 320px;
    }
}


/* --------------------------------------------------------------------------
   9j. Team Cards (matching template classes)
   -------------------------------------------------------------------------- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.team-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.team-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.team-info {
    padding: var(--space-xl);
}

.team-name {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.team-role {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.team-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   9k. Timeline (matching template classes)
   -------------------------------------------------------------------------- */

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-xl) 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-border);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    display: flex;
    margin-bottom: var(--space-3xl);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-left {
    justify-content: flex-start;
    padding-right: calc(50% + var(--space-2xl));
}

.timeline-right {
    justify-content: flex-end;
    padding-left: calc(50% + var(--space-2xl));
}

.timeline-dot {
    position: absolute;
    left: 50%;
    top: var(--space-md);
    width: 16px;
    height: 16px;
    background-color: var(--color-primary);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 3px var(--color-primary);
    z-index: 1;
}

.timeline-content {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.timeline-item:hover .timeline-content {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.timeline-year {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
}

.timeline-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.timeline-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   9l. Job Cards / Careers
   -------------------------------------------------------------------------- */

.jobs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.job-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--color-white);
    border: 1px solid rgba(10,30,42,0.09);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 16px rgba(10,30,42,0.06);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    text-decoration: none;
}

.job-card:hover {
    box-shadow: 0 8px 32px rgba(10,30,42,0.10);
    border-color: rgba(7,181,218,0.35);
    transform: translateY(-2px);
}

.job-card__num {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-primary);
    opacity: 0.25;
    line-height: 1;
}

/* Tagasiside #234: pildi-tugi töökuulutuste juures (admin saab pilti lisada CPT featured image kaudu) */
.job-card--has-image {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 0;
    overflow: hidden;
}

.job-card__image {
    flex-shrink: 0;
    width: 200px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f7fa;
}

.job-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.job-card--has-image:hover .job-card__image img {
    transform: scale(1.05);
}

.job-card--has-image .job-info {
    padding: 22px 0;
}

.job-card--has-image .job-apply-btn {
    margin-right: 24px;
}

@media (max-width: 720px) {
    .job-card--has-image {
        flex-direction: column;
        align-items: stretch;
    }
    .job-card--has-image .job-card__image {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .job-card--has-image .job-info {
        padding: 0 24px;
    }
    .job-card--has-image .job-apply-btn {
        margin: 0 24px 24px;
    }
}

.job-info {
    flex: 1;
}

.job-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.job-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}

.job-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.job-type {
    display: inline-flex;
    align-items: center;
    background: rgba(10,30,42,0.06);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.job-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(10,30,42,0.07);
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.job-apply-btn:hover {
    gap: 8px;
    color: var(--color-primary-dark, #0599b8);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-ghost:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}


/* --------------------------------------------------------------------------
   9m. Stats Grid
   -------------------------------------------------------------------------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: 0 auto;
}

.stat-card {
    text-align: center;
    padding: var(--space-2xl);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.stat-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}


/* ==========================================================================
   10. UTILITY SECTIONS FOR INNER PAGES
   ========================================================================== */

/* Section spacing */
.inner-section {
    padding: var(--space-4xl) 0;
}

.inner-section--sm {
    padding: var(--space-3xl) 0;
}

.inner-section--lg {
    padding: var(--space-5xl) 0;
}

.inner-section--dark {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.inner-section--light {
    background-color: var(--color-light);
}

/* Section header */
.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-3xl);
    padding: 0 var(--container-padding);
}

.section-header__label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.section-header__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.inner-section--dark .section-header__title {
    color: var(--color-white);
}

.section-header__title .highlight {
    color: var(--color-primary);
}

.section-header__text {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.inner-section--dark .section-header__text {
    color: var(--color-text-muted);
}

/* Container utility */
.inner-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-3xl);
    font-family: var(--font-heading);
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.pagination__item:hover {
    background-color: var(--color-light);
    color: var(--color-primary);
}

.pagination__item.is-active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.pagination__item--prev,
.pagination__item--next {
    font-weight: 600;
    gap: var(--space-xs);
}

/* Divider */
.inner-divider {
    border: none;
    height: 1px;
    background-color: var(--color-border);
    max-width: var(--container-max);
    margin: 0 auto;
}

.inner-section--dark .inner-divider {
    background-color: var(--color-dark-border);
}


/* ==========================================================================
   10b. TEMPLATE CLASS ALIASES
   Maps template-part class names (hyphenated) to existing BEM CSS.
   ========================================================================== */

/* --- Page Hero aliases --- */
.page-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-lg);
    color: var(--color-white);
}

.page-hero-title span,
.page-hero-title .accent,
.page-hero-title .highlight {
    color: var(--color-primary);
}

.page-hero-desc {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    max-width: 100%;
    margin: 0 0 var(--space-lg);
}

.section-tag {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

/* --- Features Grid aliases --- */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: var(--space-lg);
}

.feature-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.feature-desc {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Grid column variants (template uses features-grid-3 not features-grid--3col) */
.features-grid-2 { grid-template-columns: repeat(2, 1fr); }
.features-grid-3 { grid-template-columns: repeat(3, 1fr); }
.features-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Dark section overrides */
.section-dark .feature-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(7,181,218,0.15);
}
.section-dark .feature-card:hover {
    border-color: rgba(7,181,218,0.4);
    box-shadow: 0 4px 24px rgba(7,181,218,0.12);
}
.section-dark .feature-icon {
    background-color: rgba(7,181,218,0.12);
    color: var(--color-primary);
}
.section-dark .feature-title {
    color: var(--color-white);
}
.section-dark .feature-desc {
    color: rgba(255,255,255,0.65);
}

/* Klikitav feature-card — viib tabi peale */
a.feature-card,
a.feature-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* Tagasiside (Kermo, 01.06.2026): link-/ülevaatekaartidel ikoon vertikaalselt peal — anna ikoonile alla ruumi (muidu vastu pealkirja) */
a.feature-card--link .feature-icon {
    margin-bottom: var(--space-md, 16px) !important;
}
a.feature-card:hover,
a.feature-card--link:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
}
.section-dark a.feature-card:hover,
.section-dark a.feature-card--link:hover {
    border-color: rgba(7,181,218,0.6);
    background: rgba(7,181,218,0.08);
}
.feature-card-cta {
    display: inline-block;
    margin-top: var(--space-md, 12px);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #07B5DA);
    letter-spacing: 0.02em;
    transition: transform var(--transition-base, .18s ease);
}
a.feature-card:hover .feature-card-cta,
a.feature-card--link:hover .feature-card-cta {
    transform: translateX(4px);
}
a.feature-card:focus-visible,
a.feature-card--link:focus-visible {
    outline: 2px solid var(--color-primary, #07B5DA);
    outline-offset: 3px;
}

/* --- Process Steps aliases --- */
.process-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--color-white), var(--shadow-md);
}

.process-step-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.process-step-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
}

/* --- Process Steps Dark / Snake Flow variant --- */
/* Tagasiside #316 (Helve, 28.05.2026): kohaneb kaartide arvuga (3 või 4) —
   auto-fit collapse'ib tühjad veerud ja venitab kaardid täislaiusele.
   minmax(240px) lubab 4 kaarti ühel real (4×240<1100) ning 3 kaarti venivad. */
.process-steps--dark {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.process-steps--dark .process-step {
    background: linear-gradient(145deg, rgba(0, 188, 212, 0.07) 0%, rgba(255, 255, 255, 0.015) 55%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(0, 188, 212, 0.3);
    border-radius: 0;
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.process-steps--dark .process-step:hover {
    border-color: rgba(0, 188, 212, 0.35);
    border-top-color: rgba(0, 188, 212, 0.7);
    background: linear-gradient(145deg, rgba(0, 188, 212, 0.12) 0%, rgba(255, 255, 255, 0.025) 55%);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 188, 212, 0.15);
}

/* Large outlined step number at top — editorial style */
.process-steps--dark .process-step::before {
    content: attr(data-step);
    display: block;
    position: static;
    font-size: 4.5rem;
    font-weight: 900;
    font-family: var(--font-heading);
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 188, 212, 0.55);
    line-height: 1;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    letter-spacing: -3px;
    pointer-events: none;
    user-select: none;
    transition: -webkit-text-stroke 0.35s ease;
}

.process-steps--dark .process-step:hover::before {
    -webkit-text-stroke: 1.5px rgba(0, 188, 212, 0.85);
}

/* Hide the small circle number — replaced by editorial number above */
.process-steps--dark .process-step-number {
    display: none;
}

/* Connectors: all pointing right */
.process-steps--dark .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 3.5rem;
    right: -1.5rem;
    width: 1.5rem;
    height: 2px;
    background: linear-gradient(to right, rgba(0, 188, 212, 0.5), rgba(0, 188, 212, 0.1));
    z-index: 2;
}

.process-steps--dark .process-step:last-child::after {
    display: none;
}

.process-steps--dark .process-step-title {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.process-steps--dark .process-step-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .process-steps--dark {
        grid-template-columns: repeat(2, 1fr);
    }
    .process-steps--dark .process-step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 540px) {
    .process-steps--dark {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .process-steps--dark .process-step::before {
        font-size: 3.5rem;
    }
}

/* --- CTA Banner --- */
.inner-cta {
    background-color: var(--color-light);
    padding: var(--space-4xl) 0;
    position: relative;
}

.inner-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    background-color: rgb(20, 55, 75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: var(--space-3xl) var(--space-4xl);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}

.inner-cta-card:hover {
    border-color: rgba(7, 181, 218, 0.25);
}

.inner-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 140% at 100% 50%, rgba(7, 181, 218, 0.10) 0%, transparent 65%);
    pointer-events: none;
}

.inner-cta-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    pointer-events: none;
}

.inner-cta-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(7, 181, 218, 0.12), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.inner-cta-card:hover .inner-cta-glow {
    opacity: 1;
}

.inner-cta-text {
    position: relative;
    z-index: 1;
}

.inner-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-sm);
}

.inner-cta-desc {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    max-width: 540px;
}

.inner-cta-card .btn-hero {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* --- Related Pages aliases --- */
.related-pages {
    padding: var(--space-4xl) 0;
}

.related-pages .section-title {
    margin-bottom: var(--space-2xl);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.related-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-3xl) var(--space-2xl);
    background: linear-gradient(145deg, #0d2538 0%, #132f46 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.related-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(0,210,235,0.08), transparent 60%);
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0;
}

.related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.25);
}
.related-card:hover::before {
    opacity: 1;
}

.related-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0,210,235,0.1);
    border: 1px solid rgba(0,210,235,0.2);
    color: var(--color-primary);
    margin-bottom: var(--space-xl);
    transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.related-card:hover .related-card-icon {
    background: rgba(0,210,235,0.18);
    border-color: rgba(0,210,235,0.4);
    transform: scale(1.1);
}

.related-card-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.related-card-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.5);
    margin-bottom: var(--space-xl);
    flex: 1;
}

.related-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 0;
    border: 1px solid rgba(0,210,235,0.3);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.related-card-arrow::before {
    content: 'Loe lähemalt';
}

.related-card:hover .related-card-arrow {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: none;
    gap: 10px;
}

/* --- Testimonial Card for inner pages --- */
.testimonial-card {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-3xl) var(--space-3xl) var(--space-2xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    position: relative;
}

.testimonial-card-icon {
    color: var(--color-primary);
    opacity: 0.2;
    margin-bottom: var(--space-lg);
}

.testimonial-card-text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.8;
    color: var(--color-dark);
    margin: 0 0 var(--space-xl);
    padding: 0;
    border: none;
    background: none;
}

.testimonial-card-stars {
    display: flex;
    justify-content: center;
    gap: 2px;
    color: #f59e0b;
    margin-bottom: var(--space-xl);
}

.testimonial-card-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.testimonial-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testimonial-card-info {
    text-align: left;
}

.testimonial-card-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
}

.testimonial-card-role {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Keep generic blockquote styling for other inner pages */
.inner-page blockquote:not(.testimonial-card-text):not(.tcard__text) {
    position: relative;
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.8;
    color: var(--color-dark);
    padding: var(--space-2xl) var(--space-3xl);
    margin: 0;
    border-left: 3px solid var(--color-primary);
    background-color: var(--color-light);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.inner-page blockquote:not(.testimonial-card-text):not(.tcard__text) cite,
.inner-page blockquote:not(.testimonial-card-text):not(.tcard__text) strong {
    font-style: normal;
    font-weight: 700;
    color: var(--color-dark);
}

/* --- section-subtitle alias --- */
.section-subtitle {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 640px;
    margin: calc(-1 * var(--space-lg)) auto var(--space-2xl);
}

/* --- accent color class for titles --- */
.accent {
    color: var(--color-primary);
}


/* ==========================================================================
   10b. STICKY TABS
   Horizontal tab nav that sticks below the nav on scroll.
   ========================================================================== */

.sticky-tabs {
    position: relative;
    z-index: 90;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    overflow: visible;
}

.sticky-tabs .container {
    overflow: visible;
}

.sticky-tabs-nav {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-md) 0;
}

.sticky-tabs-nav::after {
    content: '';
    flex-shrink: 0;
    width: var(--space-xl);
}

.sticky-tabs-nav::-webkit-scrollbar {
    display: none;
}

/* sticky-tabs-inner: flex row housing product-switcher + divider + nav */
.sticky-tabs-inner {
    display: flex;
    align-items: center;
    overflow: visible;
}

.sticky-tabs-inner .sticky-tabs-nav-wrap {
    flex: 1;
    min-width: 0;
}

.sticky-tabs-inner .sticky-tabs-nav {
    padding: var(--space-md) 0;
    margin: 0;
}

/* ---- Sticky tabs scroll indicators ---- */
.sticky-tabs-nav-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Fade edge overlays — Kermo 01.06.2026: EEMALDATUD. Valge gradient kattis
   aktiivse tab-i serva (häiriv valge udu). Keritavust näitavad juba ‹ › nooled. */
.sticky-tabs-nav-wrap::before,
.sticky-tabs-nav-wrap::after {
    display: none;
}

/* Arrow buttons */
.sticky-tabs-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    transition: opacity 0.15s, box-shadow 0.15s;
    color: var(--color-text);
    line-height: 1;
}
.sticky-tabs-scroll-btn:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}
.sticky-tabs-scroll-btn--left  { left:  -13px; }
.sticky-tabs-scroll-btn--right { right: -13px; }
.sticky-tabs-scroll-btn.st-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Product switcher */
.product-switcher {
    position: relative;
    flex-shrink: 0;
}

.product-switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: rgba(7, 181, 218, 0.07);
    border: 1.5px solid rgba(7, 181, 218, 0.22);
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
    margin: var(--space-md) 0;
}

.product-switcher-trigger:hover,
.product-switcher.open .product-switcher-trigger {
    background: rgba(7, 181, 218, 0.13);
    border-color: rgba(7, 181, 218, 0.4);
}

.product-switcher-chevron {
    transition: transform 0.2s ease;
    opacity: 0.65;
}

.product-switcher.open .product-switcher-chevron {
    transform: rotate(180deg);
}

.product-switcher-menu {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 6px;
    z-index: 200;
    min-width: 210px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}

.product-switcher.open .product-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.product-switcher-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.product-switcher-item:hover {
    background: rgba(7, 181, 218, 0.06);
    color: var(--color-primary);
}

.product-switcher-item.active {
    color: var(--color-primary);
    font-weight: 600;
}

.product-switcher-item.active::after {
    content: '';
    margin-left: auto;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Vertical divider between switcher and tabs */
.product-switcher-divider {
    display: block;
    width: 1px;
    height: 22px;
    background: var(--color-border);
    margin: 0 16px;
    flex-shrink: 0;
    align-self: center;
}

.sticky-tab,
.sticky-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.sticky-tab svg,
.sticky-tab-link svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.sticky-tab:hover,
.sticky-tab-link:hover {
    color: var(--color-primary);
    background-color: rgba(7, 181, 218, 0.06);
}

.sticky-tab:hover svg,
.sticky-tab-link:hover svg {
    opacity: 1;
}

.sticky-tab.active,
.sticky-tab-link.active {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.sticky-tab.active svg,
.sticky-tab-link.active svg {
    opacity: 1;
}

/* Tab panels */
.sticky-tab-panel {
    display: none;
}

.sticky-tab-panel.active {
    display: block;
}


/* ==========================================================================
   10c. OVERVIEW CARDS (2-col grid, icon + title + desc + link)
   ========================================================================== */

.tab-intro {
    max-width: 900px;
    margin-bottom: var(--space-3xl);
}

/* --wide modifier — täislaius (kasutusel tootetelehtedel intro plokk paberi visandi järgi).
   !important sest .tab-intro on duplikaadina defineeritud rea ~4476 (max-width: 720px),
   mis CSS cascade'is hiljem override'ib. */
.tab-intro--wide {
    max-width: none !important;
    width: 100% !important;
}

.tab-intro p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.tab-intro p strong {
    color: var(--color-dark);
}

/* Tagasiside #282 (Maili, 27.05.2026): "Tutvu toote dokumentidega" nupp
   tab-intro lõpus. Update (Maili, 28.05.2026): joondatud vasakule
   (sektsiooni alguse suhtes), mitte paremale. */
.tab-intro-cta {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--space-xl);
}

.btn-docs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--color-dark, #0F2238);
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    border: 1px solid var(--color-dark, #0F2238);
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    box-shadow: 0 1px 2px rgba(15, 34, 56, 0.06);
}

.btn-docs:hover {
    background: var(--color-accent, #07B5DA);
    border-color: var(--color-accent, #07B5DA);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(7, 181, 218, 0.25);
    color: #fff;
}

.btn-docs:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(15, 34, 56, 0.10);
}

.btn-docs svg {
    flex-shrink: 0;
}

.btn-docs svg:last-child {
    transition: transform 180ms ease;
}

.btn-docs:hover svg:last-child {
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .tab-intro-cta {
        justify-content: stretch;
    }
    .btn-docs {
        width: 100%;
        justify-content: center;
    }
}

.overview-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    max-width: 100%;
}

.overview-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.overview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: rgba(7, 181, 218, 0.3);
}

.overview-card-icon {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-primary);
    padding: 10px;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.overview-card-content {
    padding: var(--space-xl);
}

.overview-card-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.overview-card-content p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.overview-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap var(--transition-fast);
}

.overview-card-link:hover {
    gap: 10px;
}

/* Overview card images */
.overview-card-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    margin: 0;
}
.overview-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.overview-card:hover .overview-card-image img {
    transform: scale(1.05);
}

.overview-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.06) 100%);
    pointer-events: none;
}


/* ==========================================================================
   10c-2. FEATURE CARDS (vertical: icon top → title → description)
   Used inside tab panels for product features.
   ========================================================================== */

.section-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    background: rgba(7, 181, 218, 0.08);
    border: 1px solid rgba(7, 181, 218, 0.2);
    border-radius: 0;
    padding: 6px 16px;
    margin-bottom: var(--space-md);
}

.tab-section-header {
    margin-bottom: var(--space-2xl);
    text-align: left;
}

.tab-section-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
    text-align: left;
}

.tab-section-header h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    margin-top: var(--space-md);
}

.tab-section-header--center {
    text-align: center;
}

.tab-section-header--center h2 {
    text-align: center;
}

.tab-section-header--center h2::after {
    margin-left: auto;
    margin-right: auto;
}

.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

/* Zero out bottom margins on last grid in a section to avoid double spacing */
.section-premium-light .feature-cards-grid:last-child,
.section-premium-light .video-cards-grid:last-child,
.section-premium-light .overview-cards-grid:last-child {
    margin-bottom: 0;
}

/* Tighter section padding inside tab panels */
.sticky-tab-panel .section-premium-light {
    padding: var(--space-3xl) 0;
}

/* Tighten spacing between tab content and CTA */
.sticky-tab-panel .section-premium-light:last-child {
    padding-bottom: var(--space-xl);
}

/* Feature items — medium informative cards */
.feature-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(7, 181, 218, 0.3);
}

.feature-card .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(7, 181, 218, 0.08);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.feature-card .feature-icon svg {
    width: 22px;
    height: 22px;
}

.feature-card h4 {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-sm);
    line-height: 1.3;
}

.feature-card h4::before {
    display: none;
}

/* Description — follows title */
.feature-card p {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* --- Feature cards horizontal dark variant --- */
.feature-cards-grid--dark {
    gap: var(--space-md);
}

.feature-cards-grid--dark .feature-card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 2px solid rgba(0, 188, 212, 0.4);
    border-radius: 0;
    padding: var(--space-xl);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.feature-cards-grid--dark .feature-card:hover {
    background: rgba(0, 188, 212, 0.05);
    border-color: rgba(255, 255, 255, 0.07);
    border-left-color: var(--color-primary);
    transform: translateX(4px);
    box-shadow: none;
}

.feature-cards-grid--dark .feature-card .feature-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    margin-bottom: 0;
    background: rgba(0, 188, 212, 0.1);
    border: 1px solid rgba(0, 188, 212, 0.2);
    box-shadow: 0 0 14px rgba(0, 188, 212, 0.15);
}

.feature-cards-grid--dark .feature-card .feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-cards-grid--dark .feature-card h4 {
    color: var(--color-white);
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.feature-cards-grid--dark .feature-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    line-height: 1.65;
}

.feature-cards-grid--dark .feature-card-body {
    flex: 1;
    min-width: 0;
}

/* Inline-variant — ikoon + pealkiri samal real, kompaktsem (Tagasiside #212)
   Kasutab kahe-klassi specifity'i (.foo.bar) et override'da --dark väärtused */
.feature-cards-grid--dark.feature-cards-grid--inline .feature-card {
    align-items: center;
    padding: 22px 26px;
    gap: 18px;
}

.feature-cards-grid--dark.feature-cards-grid--inline .feature-card .feature-icon {
    width: 44px;
    height: 44px;
}

.feature-cards-grid--dark.feature-cards-grid--inline .feature-card .feature-icon svg {
    width: 20px;
    height: 20px;
}

.feature-cards-grid--dark.feature-cards-grid--inline .feature-card h4 {
    margin: 0;
    line-height: 1.3;
}

/* Hide old card pseudo-element */
.feature-card::before {
    display: none;
}


/* --------------------------------------------------------------------------
   10c-3. PRODUCT SHOWCASE (image + content side-by-side within tabs)
   -------------------------------------------------------------------------- */

.product-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: stretch; /* Tagasiside #225-järgne: pilt sama pikk kui tekst */
    margin-bottom: var(--space-2xl);
}

.product-showcase--reverse {
    direction: rtl;
}

.product-showcase--reverse > * {
    direction: ltr;
}

.product-showcase-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-light);
    min-height: 320px; /* miinimum kõrgus lühikese teksti jaoks; üle selle stretch'ib */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.product-showcase-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px rgba(7, 181, 218, 0.1);
    pointer-events: none;
}

.product-showcase-image img {
    /* Tagasiside #409 (Kermo, 01.06.2026): absoluutne, et pilt ei dikteeriks rea
       kõrgust (ruut-pilt sundis lühema teksti kõrval rea liiga kõrgeks). Nüüd
       pildi-kast venib teksti kõrgusele (align-items:stretch) ja pilt täidab selle. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base);
}

.product-showcase:hover .product-showcase-image img {
    transform: scale(1.03);
}

.product-showcase-content {
    padding: var(--space-lg) 0;
}

.product-showcase-content h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

/* Tagasiside #261 (Maili, 26.05.2026): sama suurus kui tab-intro p — ühtne 17px üle terve lehe */
.product-showcase-content p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.product-showcase-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.product-showcase-content ul li {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text);
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.product-showcase-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* Spec highlight strip — key numbers above the list */
.spec-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.spec-highlight {
    text-align: center;
    flex: 1;
    background: rgba(7, 181, 218, 0.04);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}

.spec-highlight-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.spec-highlight-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   10c-4. PRODUCT IMAGE GRID (gallery of product photos within tabs)
   -------------------------------------------------------------------------- */

.product-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.product-image-card {
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.product-image-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.product-image-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-image-card figcaption {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   10c-5. TAB INTRO (descriptive paragraph at top of tab)
   -------------------------------------------------------------------------- */

.tab-intro {
    max-width: 720px;
    margin-bottom: var(--space-3xl);
}

/* Tagasiside #261 (Maili, 26.05.2026): kõik tab-intro paragrahvid sama suurus
   (oli: esimene p 1.0625rem, järgnevad 1rem — nüüd kõik 1.0625rem) */
.tab-intro p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.tab-intro strong {
    color: var(--color-text);
    font-weight: 600;
}

.tab-intro p strong {
    color: var(--color-dark);
}


/* ==========================================================================
   10d. TAB DETAIL LAYOUT (image + content side by side)
   ========================================================================== */

.tab-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.tab-detail-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tab-detail-content h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-lg);
}

.tab-detail-content p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}

.tab-detail-specs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab-detail-specs li {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.tab-detail-specs li strong {
    color: var(--color-dark);
    margin-right: var(--space-sm);
}


/* ==========================================================================
   10e. STATS BAR
   Dark bar with large cyan stat numbers.
   ========================================================================== */

.stats-bar {
    background-color: var(--color-dark);
    padding: var(--space-lg) 0;
    text-align: center;
}

.stats-bar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.stats-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-bar-value {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.stats-bar-unit {
    font-family: var(--font-heading);
    font-size: clamp(0.8125rem, 1.2vw, 1rem);
    font-weight: 500;
    color: var(--color-primary);
    margin-top: 2px;
}

.stats-bar-label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--space-xs);
}


/* --- Meist page: dark pillars strip --- */
.meist-pillars {
    background: var(--color-dark, #183e56);
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden;
}
.meist-pillars::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,210,235,0.06) 0%, transparent 50%);
    pointer-events: none;
}
.meist-pillars__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    position: relative;
}
.meist-pillar {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    position: relative;
}
.meist-pillar:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(var(--space-xl) / -2);
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(255,255,255,0.1);
}
.meist-pillar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: rgba(0,210,235,0.1);
    color: var(--color-primary);
    transition: transform 0.3s ease, background 0.3s ease;
}
.meist-pillar:hover .meist-pillar__icon {
    transform: scale(1.08);
    background: rgba(0,210,235,0.18);
}
.meist-pillar__icon svg {
    width: 36px;
    height: 36px;
}
.meist-pillar__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}
.meist-pillar__desc {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 768px) {
    .meist-pillars__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .meist-pillar:nth-child(2)::after { display: none; }
}
@media (max-width: 480px) {
    .meist-pillars__grid { grid-template-columns: 1fr; }
    .meist-pillar::after { display: none !important; }
}


/* ==========================================================================
   10f. PREMIUM DARK THEME — Glass Morphism & Effects
   Product pages dark-theme conversion with glass cards, glow effects,
   cursor tracking, and scroll reveal animations.
   ========================================================================== */

/* --- Dark Section Background --- */
.section-dark-inner {
    background-color: rgb(24, 62, 86);
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
}

.section-dark-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

.section-dark-inner > .container {
    position: relative;
    z-index: 1;
}

.section-dark-inner.section-dark-inner--alt {
    background-color: rgb(8, 24, 34);
}

/* --- Glass Morphism Feature Cards --- */
.section-dark-inner .feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.section-dark-inner .feature-card:hover {
    border-color: rgba(7, 181, 218, 0.4);
    box-shadow: 0 0 30px rgba(7, 181, 218, 0.15), 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
}

.section-dark-inner .feature-card .feature-icon {
    display: flex;
    background: rgba(7, 181, 218, 0.1);
    border: 1px solid rgba(7, 181, 218, 0.2);
}

.section-dark-inner .feature-card .feature-icon svg {
    color: var(--color-primary);
}

.section-dark-inner .feature-card h4 {
    color: var(--color-white);
}

.section-dark-inner .feature-card p {
    display: block;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Card Glow Layer (cursor-following) --- */
.card-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease;
    border-radius: inherit;
    z-index: 0;
}

.feature-card:hover .card-glow,
.overview-card:hover .card-glow {
    opacity: 1;
}

/* --- Glass Morphism Overview Cards --- */
.section-dark-inner .overview-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.section-dark-inner .overview-card:hover {
    border-color: rgba(7, 181, 218, 0.4);
    box-shadow: 0 0 30px rgba(7, 181, 218, 0.15);
    transform: translateY(-4px);
}

.section-dark-inner .overview-card-icon {
    background: rgba(7, 181, 218, 0.1);
    border: 1px solid rgba(7, 181, 218, 0.2);
}

.section-dark-inner .overview-card-content h3 {
    color: var(--color-white);
}

.section-dark-inner .overview-card-content p {
    color: rgba(255, 255, 255, 0.6);
}

.section-dark-inner .overview-card-link {
    color: var(--color-primary);
}

/* --- Product Showcase on Dark --- */
.section-dark-inner .product-showcase-image {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
}

.section-dark-inner .product-showcase-content h3 {
    color: var(--color-white);
}

.section-dark-inner .product-showcase-content p {
    color: rgba(255, 255, 255, 0.65);
}

.section-dark-inner .product-showcase-content ul li {
    color: rgba(255, 255, 255, 0.65);
}

.section-dark-inner .product-showcase-content ul li::before {
    background: var(--color-primary);
    box-shadow: 0 0 8px rgba(7, 181, 218, 0.4);
}

/* --- Product Image Cards on Dark --- */
.section-dark-inner .product-image-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.section-dark-inner .product-image-card:hover {
    border-color: rgba(7, 181, 218, 0.3);
    box-shadow: 0 0 20px rgba(7, 181, 218, 0.1);
}

.section-dark-inner .product-image-card span {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Section Headers & Text on Dark --- */
.section-dark-inner .tab-section-header h2 {
    color: var(--color-white);
}

.section-dark-inner .section-badge {
    background: rgba(7, 181, 218, 0.1);
    border-color: rgba(7, 181, 218, 0.3);
    color: var(--color-primary);
}

.section-dark-inner .tab-intro p {
    color: rgba(255, 255, 255, 0.6);
}

.section-dark-inner .tab-intro p strong {
    color: var(--color-white);
}

/* --- Stats Bar Enhancements --- */
.stats-bar {
    border-top: none;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.stats-bar::before {
    display: none;
}

.stats-bar-value {
    text-shadow: 0 0 20px rgba(7, 181, 218, 0.4);
}

.stats-bar-item {
    position: relative;
}

.stats-bar-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--space-xl));
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* --- CTA Banner Premium (product pages only) --- */
.inner-page[data-accent] .inner-cta {
    background-color: rgb(8, 24, 34);
}

.inner-page[data-accent] .inner-cta-card {
    border: 1px solid rgba(7, 181, 218, 0.15);
    background: linear-gradient(135deg, rgba(7, 181, 218, 0.06) 0%, rgba(16, 44, 62, 1) 50%, rgba(7, 181, 218, 0.03) 100%);
}

/* --- Sticky Tabs Enhancement --- */
.sticky-tabs {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sticky-tab.active,
.sticky-tab-link.active {
    box-shadow: 0 0 12px rgba(7, 181, 218, 0.2);
}

/* --- Scroll Reveal Animation --- */
.reveal-inner {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-inner.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Active tab panels: reveal elements immediately */
.sticky-tab-panel.active .reveal-inner {
    opacity: 1;
    transform: translateY(0);
}

.reveal-inner:nth-child(2) { transition-delay: 0.1s; }
.reveal-inner:nth-child(3) { transition-delay: 0.1s; }
.reveal-inner:nth-child(4) { transition-delay: 0.15s; }
.reveal-inner:nth-child(5) { transition-delay: 0.15s; }
.reveal-inner:nth-child(6) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
    .reveal-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Ambient Glow Behind Section Headers --- */
.section-dark-inner .tab-section-header {
    position: relative;
}

.section-dark-inner .tab-section-header::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(7, 181, 218, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}


/* ==========================================================================
   10g. PREMIUM LIGHT THEME
   Elevated light design for product pages — refined shadows, accent borders,
   alternating section backgrounds, and enhanced typography.
   ========================================================================== */

/* --- Section Backgrounds --- */
.section-premium-light {
    background-color: var(--color-white);
    padding: var(--space-4xl) 0;
    position: relative;
}

/* Scroll offset for fixed nav on anchor links */
[id].section-premium-light,
[id].section-premium-light--alt,
.feature-card[id],
section[id] {
    scroll-margin-top: 100px;
}

.section-premium-light.section-premium-light--alt {
    background-color: var(--color-light);
}

.section-premium-light + .section-premium-light--alt {
    border-top: 1px solid var(--color-border);
}

/* Subtle top divider with centered cyan glow */
.section-premium-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 1200px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-border) 20%,
        rgba(7, 181, 218, 0.35) 50%,
        var(--color-border) 80%,
        transparent 100%
    );
}

.sticky-tab-panel > .section-premium-light:first-child::before {
    display: none;
}

/* --- Premium Feature Cards --- */
/* Feature cards in premium sections — clean cards with subtle styling */
.section-premium-light .feature-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.section-premium-light .feature-card::before,
.section-premium-light .feature-card::after {
    display: none;
}

.section-premium-light .feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(7, 181, 218, 0.3);
}

.section-premium-light .feature-card .feature-icon {
    display: flex;
}

.section-premium-light .feature-card p {
    display: block;
    color: var(--color-text);
}

.section-premium-light .feature-card h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.section-premium-light--alt .feature-card {
    background-color: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* --- Premium Overview Cards --- */
.section-premium-light .overview-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.3s ease;
}

.section-premium-light .overview-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.section-premium-light .overview-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 25px -5px rgba(0, 0, 0, 0.08);
    border-color: rgba(7, 181, 218, 0.2);
}

.section-premium-light .overview-card:hover::after {
    opacity: 1;
}

.section-premium-light .overview-card-icon {
    background: linear-gradient(135deg, rgba(7, 181, 218, 0.1), rgba(7, 181, 218, 0.04));
    border: 1px solid rgba(7, 181, 218, 0.12);
    border-radius: var(--radius-md);
}

/* --- Premium Product Showcase --- */
.section-premium-light .product-showcase-image {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.section-premium-light .product-showcase-content ul li::before {
    background-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(7, 181, 218, 0.12);
}

/* --- Premium Product Image Cards --- */
.section-premium-light .product-image-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.section-premium-light .product-image-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(7, 181, 218, 0.2);
}

.section-premium-light--alt .product-image-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* --- Premium Section Headers --- */
.section-premium-light .tab-section-header h2 {
    color: var(--color-dark);
}

.section-premium-light .tab-section-header h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), rgba(7, 181, 218, 0.3));
    border-radius: 2px;
    margin-top: var(--space-md);
}

.section-premium-light .section-badge {
    background: rgba(7, 181, 218, 0.06);
    border: 1px solid rgba(7, 181, 218, 0.15);
    color: var(--color-primary);
}

/* Tagasiside #338/#345 (Maili, 28.05.2026): heledal taustal kõik tekst tumedam (--color-text, mitte -secondary) */
.section-premium-light .tab-intro p,
.section-premium-light .product-showcase-content p,
.section-premium-light .kp-feature p,
.inner-section .product-showcase-content p,
.inner-section .kp-feature p {
    color: var(--color-text);
}

.section-premium-light .tab-intro p strong {
    color: var(--color-dark);
}

/* --- Sticky Tabs (light context, no data-accent) --- */
.inner-page:not([data-accent]) .sticky-tabs {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.inner-page:not([data-accent]) .sticky-tab.active,
.inner-page:not([data-accent]) .sticky-tab-link.active {
    box-shadow: 0 1px 6px rgba(7, 181, 218, 0.15);
}

/* --- Video Cards Grid --- */
.video-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.video-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(15, 34, 56, 0.08);
    box-shadow:
        0 1px 2px rgba(15, 34, 56, 0.04),
        0 8px 20px rgba(15, 34, 56, 0.05);
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(15, 34, 56, 0.06),
        0 12px 28px rgba(15, 34, 56, 0.10);
    border-color: rgba(15, 34, 56, 0.14);
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #ffffff;
}

.video-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(7, 181, 218, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(7, 181, 218, 0.28);
}

.video-card-play svg {
    width: 22px;
    height: 22px;
    fill: var(--color-white);
    margin-left: 2px;
}

.video-card:hover .video-card-play {
    background: var(--color-primary);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-card.playing .video-card-play {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card-caption {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-sm);
    line-height: 1.4;
    font-weight: 500;
}

@media (max-width: 768px) {
    .video-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .video-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}


/* --------------------------------------------------------------------------
   10h. REFERENTSID GRID (Fenestra-style portfolio cards)
   -------------------------------------------------------------------------- */

/* Category filter bar — lihtne segmented control */
.ref-filter {
    display: inline-flex;
    justify-content: center;
    gap: 2px;
    margin: 0 auto var(--space-xl);
    padding: 5px;
    background: #fff;
    border: 1px solid rgba(15, 34, 56, 0.08);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(10, 37, 64, 0.04);
    width: auto;
}

/* Center the inline-flex filter within its container */
.leiunurk-section .container,
.ref-grid + .ref-filter,
.section-premium-light .ref-filter {
    text-align: center;
}
.leiunurk-section .container > *:not(.ref-filter):not(.leiunurk-filter) {
    text-align: left;
}

.ref-filter__btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--color-ink, #0F2238);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ref-filter__btn:hover:not(.is-active) {
    background: rgba(15, 34, 56, 0.04);
}

.ref-filter__btn.is-active {
    background: #173E58;
    color: #fff;
}

.ref-filter__btn:focus-visible {
    outline: 2px solid #07B5DA;
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .ref-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: calc(100% - 32px);
        scrollbar-width: none;
    }
    .ref-filter::-webkit-scrollbar { display: none; }
    .ref-filter__btn {
        padding: 9px 14px;
        font-size: 0.8125rem;
    }
}

/* Filter animation */
.ref-card.is-hidden {
    display: none;
}

.ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* Base card */
.ref-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Lightbox */
.ref-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(8, 20, 30, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.ref-lightbox.is-open {
    display: flex;
}

.ref-lightbox__stage {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ref-lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ref-lightbox__caption {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    display: flex;
    gap: 14px;
    align-items: center;
}

.ref-lightbox__counter {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

.ref-lightbox__close,
.ref-lightbox__prev,
.ref-lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

.ref-lightbox__close:hover,
.ref-lightbox__prev:hover,
.ref-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ref-lightbox__close {
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
}

.ref-lightbox__prev,
.ref-lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
}

.ref-lightbox__prev { left: 24px; }
.ref-lightbox__next { right: 24px; }

@media (max-width: 768px) {
    .ref-lightbox { padding: 12px; }
    .ref-lightbox__close { top: 8px; right: 8px; width: 40px; height: 40px; }
    .ref-lightbox__prev,
    .ref-lightbox__next { width: 40px; height: 40px; }
    .ref-lightbox__prev { left: 4px; }
    .ref-lightbox__next { right: 4px; }
}

/* Wide card modifier (kept for markup compat, no difference) */
.ref-card.ref-card--wide {
}

.ref-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(7, 181, 218, 0.1);
}

/* Background image */
.ref-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ref-card:hover .ref-card__img {
    transform: scale(1.06);
}

/* Dark gradient overlay */
.ref-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(10, 37, 64, 0.8) 0%,
        rgba(10, 37, 64, 0.3) 40%,
        transparent 65%
    );
    transition: background 0.4s ease;
}

.ref-card:hover::before {
    background: linear-gradient(
        to top,
        rgba(10, 37, 64, 0.85) 0%,
        rgba(10, 37, 64, 0.5) 50%,
        rgba(10, 37, 64, 0.2) 80%
    );
}

/* Overlay content area */
.ref-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
}

/* Title — always visible */
.ref-card__name {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Meta block (klient + gallery button) — hidden, reveal on hover */
.ref-card__meta {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.3s ease;
    margin-top: 0;
}

.ref-card:hover .ref-card__meta {
    max-height: 120px;
    opacity: 1;
    margin-top: 12px;
}

.ref-card__detail {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 12px;
    line-height: 1.5;
}

/* "Vaata galeriid" button */
.ref-card__gallery {
    display: inline-block;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    transition: all 0.25s ease;
}

.ref-card:hover .ref-card__gallery:hover {
    background: #fff;
    color: var(--color-heading);
    border-color: #fff;
}

/* Product type link at bottom — hidden, reveal on hover */
.ref-card__product {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}

.ref-card:hover .ref-card__product {
    max-height: 50px;
    opacity: 1;
    margin-top: 14px;
    padding-top: 14px;
    border-top-color: rgba(255, 255, 255, 0.2);
}

.ref-card__product svg {
    flex-shrink: 0;
}

/* Touch / kitsad ekraanid (Kermo, 01.06.2026): hover-sisu (klient, "Vaata galeriid",
   toode + tumedam overlay) nähtavale ALATI — telefonis ei saa hover'ida, seega
   sama mis arvutis hover'iga peab kohe näha olema. */
@media (hover: none), (max-width: 768px) {
    .ref-card::before {
        background: linear-gradient(
            to top,
            rgba(10, 37, 64, 0.85) 0%,
            rgba(10, 37, 64, 0.5) 50%,
            rgba(10, 37, 64, 0.2) 80%
        );
    }
    .ref-card__meta {
        max-height: 120px;
        opacity: 1;
        margin-top: 12px;
    }
    .ref-card__product {
        max-height: 50px;
        opacity: 1;
        margin-top: 14px;
        padding-top: 14px;
        border-top-color: rgba(255, 255, 255, 0.2);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .ref-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
    .ref-grid { grid-template-columns: 1fr; }
    .ref-card { aspect-ratio: 16 / 10; }
    .ref-filter { flex-wrap: wrap; border-radius: var(--radius-lg); }
    .ref-filter__btn { padding: 10px 18px; font-size: 0.8125rem; }
}


/* ==========================================================================
   LEIUNURK (Bargain Corner)
   ========================================================================== */

/* Leiunurk filter override — compact tabs for many categories */
/* Compact hero variant */
.page-hero--compact {
    padding: var(--space-3xl) 0 var(--space-2xl);
}

.leiunurk-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-4xl);
}

.leiunurk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

/* Card */
.leiunurk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.leiunurk-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.leiunurk-card.is-hidden {
    display: none;
}

/* Discount badge */
.leiunurk-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #ef4444;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 0;
    letter-spacing: 0.02em;
}

/* Condition badge */
.leiunurk-card__condition {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 0;
}

/* Image */
.leiunurk-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f7f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-border);
}

.leiunurk-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-md);
    transition: transform 0.5s ease;
}

.leiunurk-card:hover .leiunurk-card__image img {
    transform: scale(1.04);
}

.leiunurk-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    opacity: 0.15;
}

/* Body */
.leiunurk-card__body {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.leiunurk-card__cat {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.leiunurk-card__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
    margin: 0;
}

/* Specs — label: value list */
.leiunurk-card__specs {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.leiunurk-card__spec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.leiunurk-card__spec::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-top: 0.35em;
}

.leiunurk-card__spec-label {
    font-weight: 600;
    color: var(--color-dark);
    white-space: nowrap;
}

.leiunurk-card__spec-label::after {
    content: ':';
}

.leiunurk-card__spec-value {
    color: var(--color-text-secondary);
}

/* Footer: price + button */
.leiunurk-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.leiunurk-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.leiunurk-card__old-price {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
    line-height: 1;
}

.leiunurk-card__price {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
}

.leiunurk-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-base);
    white-space: nowrap;
}

.leiunurk-card__btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.leiunurk-card__btn svg {
    flex-shrink: 0;
}

/* Empty state */
.leiunurk-empty {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
    color: var(--color-text-muted);
}

.leiunurk-empty svg {
    margin-bottom: var(--space-lg);
    opacity: 0.2;
}

.leiunurk-empty h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.leiunurk-empty p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

/* ── Inquiry Modal ── */
.leiunurk-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.leiunurk-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.leiunurk-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 44, 62, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.leiunurk-modal__box {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    padding-top: 40px;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(24px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
    box-shadow: 0 32px 80px rgba(16, 44, 62, 0.28);
    border-top: 3px solid var(--color-primary);
}

.leiunurk-modal.is-open .leiunurk-modal__box {
    transform: translateY(0) scale(1);
}

.leiunurk-modal__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.leiunurk-modal__close:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white);
}

.leiunurk-modal__header {
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.leiunurk-modal__title {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: var(--space-sm) 0 0;
    line-height: 1.2;
}

.leiunurk-modal__product-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-sm);
    padding: 5px 12px;
    background: rgba(7, 181, 218, 0.08);
    border: 1px solid rgba(7, 181, 218, 0.25);
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    font-family: var(--font-heading);
}
.leiunurk-modal__product-name:empty {
    display: none;
}

.leiunurk-modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* CF7 leiunurk (Kermo, 01.06.2026): peida toote-kontekst väljad (product / product_id
   — seatakse JS-iga openModal'is) + wpautop poolt tekitatud nende ümbris-<p>. */
.leiunurk-modal__form .wpcf7-form-control-wrap[data-name="product"],
.leiunurk-modal__form .wpcf7-form-control-wrap[data-name="product_id"] {
    display: none;
}
.leiunurk-modal__form > p:has(.wpcf7-form-control-wrap[data-name="product"]),
.leiunurk-modal__form > p:has(.wpcf7-form-control-wrap[data-name="product_id"]),
.leiunurk-modal__form > p:empty {
    display: none;
}

.leiunurk-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.leiunurk-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.leiunurk-modal__field label {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.leiunurk-modal__field input,
.leiunurk-modal__field textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #f7f9fb;
    color: var(--color-dark);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.leiunurk-modal__field input:focus,
.leiunurk-modal__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(7, 181, 218, 0.14);
    background: var(--color-white);
}

.leiunurk-modal__field input::placeholder,
.leiunurk-modal__field textarea::placeholder {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.leiunurk-modal__field textarea {
    resize: vertical;
    min-height: 100px;
}

.leiunurk-modal__submit {
    margin-top: var(--space-xs);
    width: 100%;
    justify-content: center;
    padding: 15px 28px;
    font-size: 1rem;
    border-radius: var(--radius-md);
    letter-spacing: 0.01em;
}

.leiunurk-modal__status {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 1.5em;
}

.leiunurk-modal__status.is-success {
    color: #16a34a;
}

.leiunurk-modal__status.is-error {
    color: #ef4444;
}

/* ── Leiunurk responsive ── */
@media (max-width: 1024px) {
    .leiunurk-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .leiunurk-grid { grid-template-columns: 1fr; }
    .leiunurk-modal__row { grid-template-columns: 1fr; }
    .leiunurk-modal__box { padding: var(--space-xl); }
}


/* ==========================================================================
   11. RESPONSIVE BREAKPOINTS
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1024px  (Tablet landscape / small desktop)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .features-grid-4 { grid-template-columns: repeat(2, 1fr); }

    .tab-panel-inner { grid-template-columns: 1fr; }

    .related-grid { grid-template-columns: repeat(2, 1fr); }

    /* Sticky tabs — Kermo 01.06.2026: top:0 (riba on position:relative, mitte sticky;
       top:64px nihutas riba allapoole ja kattis sisu esimese rea → tekst polnud täielikult näha) */
    .sticky-tabs { top: 0; }

    /* Overview cards: 3 -> 2 cols */
    .overview-cards-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }

    /* Tab detail: stack */
    .tab-detail-layout { grid-template-columns: 1fr; gap: var(--space-2xl); }

    /* Stats bar: 2x2 */
    .stats-bar-grid { grid-template-columns: repeat(2, 1fr); }

    /* Feature cards: 4 -> 2 cols */
    .feature-cards-grid { grid-template-columns: repeat(2, 1fr); }

    /* Page hero */
    .page-hero {
        padding: var(--space-4xl) 0 var(--space-3xl);
    }

    .page-hero--sm {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }

    /* Features grid: 3 -> 2 cols */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Process steps: wrap */
    .process-steps {
        flex-wrap: wrap;
    }

    .process-step {
        flex: 0 0 calc(50% - var(--space-xl) / 2);
    }

    .process-step:not(:last-child)::after {
        display: none;
    }

    /* Related pages: 3 -> 2 cols */
    .related-pages__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Service cards: 3 -> 2 cols */
    .service-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tab panel: stack vertically */
    .tab-panel-inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Stats grid: 4 -> 2 cols */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Team grid: 4 -> 3 cols */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Timeline: linearize to left side */
    .timeline::before {
        left: 24px;
    }

    .timeline-left,
    .timeline-right {
        padding-left: calc(24px + var(--space-2xl));
        padding-right: 0;
    }

    .timeline-dot {
        left: 24px;
        transform: translateX(-50%);
    }

    /* Also support old BEM names */
    .timeline__item:nth-child(odd),
    .timeline__item:nth-child(even) {
        flex-direction: row;
        padding-right: 0;
        padding-left: calc(24px + var(--space-2xl));
        text-align: left;
    }

    .timeline__dot {
        left: 24px;
    }

    /* Locations grid: 3 -> 2 cols */
    .locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Gallery grid */
    .gallery-grid--4col {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Blog grid: 3 -> 2 cols */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-card--featured {
        grid-column: span 2;
    }

    /* Blog layout: remove sidebar stacking */
    .blog-layout {
        grid-template-columns: 1fr 280px;
        gap: var(--space-2xl);
    }
}


/* --------------------------------------------------------------------------
   <= 768px  (Tablet portrait)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Premium light sections */
    .section-premium-light { padding: var(--space-3xl) 0; }

    /* Template alias responsive */
    .page-hero-title { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .page-hero-desc { font-size: 1rem; }
    .features-grid-3 { grid-template-columns: 1fr; }
    .features-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .related-grid { grid-template-columns: 1fr; }
    .inner-cta { padding: var(--space-3xl) 0; }
    .inner-cta-card { flex-direction: column; text-align: center; padding: var(--space-2xl); }
    .inner-cta-title { font-size: 1.5rem; }

    /* Overview cards: 1 col */
    .overview-cards-grid { grid-template-columns: 1fr; }

    /* Feature cards: 1 col */
    .feature-cards-grid { grid-template-columns: 1fr; }

    /* Product showcase: stack vertically */
    .product-showcase { grid-template-columns: 1fr; gap: var(--space-xl); }
    .product-showcase--reverse { direction: ltr; }

    /* Product nav: smaller padding */
    .product-nav-link { padding: 8px 16px; font-size: 0.75rem; }

    /* Product images grid: 2 cols */
    .product-images-grid { grid-template-columns: repeat(2, 1fr); }

    /* Stats bar: 2x2 */
    .stats-bar { padding: var(--space-xl) 0; }
    .stats-bar-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    .stats-bar-item:not(:last-child)::after { display: none; }

    /* Sticky tabs — Kermo 01.06.2026: top:0 (vt selgitus ülal) — vältib sisu kattumist */
    .sticky-tabs { top: 0; }

    /* Mobiilis mugavam: suuremad puutealad (44px), scroll-snap + sujuv kerimine,
       et tab-ide vahel libistamine oleks meeldiv ega jätaks tab-i poolikuks. */
    .sticky-tabs-nav {
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scroll-padding-left: 12px;
        gap: 8px;
    }
    .sticky-tab {
        padding: 11px 16px;
        font-size: 0.875rem;
        min-height: 44px;
        scroll-snap-align: start;
    }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    .timeline::before { left: 24px; }
    .timeline-left, .timeline-right { padding-left: calc(24px + var(--space-2xl)); padding-right: 0; }
    .timeline-dot { left: 24px; }
    .jobs-list { grid-template-columns: 1fr 1fr; }

    /* Page hero */
    .page-hero {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }

    .page-hero__title {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }

    .page-hero__desc {
        font-size: 1rem;
    }

    /* Breadcrumbs */
    .breadcrumbs {
        font-size: 0.8125rem;
    }

    /* Features grid: 2 -> 1 col */
    .features-grid {
        grid-template-columns: 1fr;
    }

    .features-grid--2col {
        grid-template-columns: 1fr;
    }

    .features-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Process steps: 1 col vertical */
    .process-steps {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .process-step {
        flex: none;
        text-align: center;
    }

    /* CTA banner */
    .cta-banner {
        padding: var(--space-3xl) 0;
    }

    .cta-banner__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-banner__btn {
        justify-content: center;
    }

    /* Related pages: 2 -> 1 col */
    .related-pages__grid {
        grid-template-columns: 1fr;
    }

    /* Service cards: 2 -> 1 col */
    .service-cards {
        grid-template-columns: 1fr;
    }

    /* Stats grid: 2 cols stays */
    .stats-grid {
        gap: var(--space-lg);
    }

    /* Job cards: 1 col on mobile */
    .jobs-list { grid-template-columns: 1fr; }

    .job-meta {
        flex-wrap: wrap;
    }

    /* Team grid: 3 -> 2 cols */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    /* Locations grid: 2 -> 1 col */
    .locations-grid {
        grid-template-columns: 1fr;
    }

    /* Gallery grid: 3 -> 2 cols */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item--wide {
        grid-column: span 2;
    }

    /* Blog grid: 2 -> 1 col */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-card--featured {
        grid-column: span 1;
        flex-direction: column;
    }

    .blog-card--featured .blog-card__image-wrap {
        flex: none;
    }

    .blog-card--featured .blog-card__image {
        aspect-ratio: 16 / 10;
        height: auto;
    }

    .blog-card--featured .blog-card__body {
        padding: var(--space-xl);
    }

    .blog-card--featured .blog-card__title {
        font-size: 1.25rem;
    }

    /* Blog layout: single column, sidebar below */
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        order: 2;
    }

    /* Section spacing tighten */
    .inner-section {
        padding: var(--space-3xl) 0;
    }

    .inner-section--lg {
        padding: var(--space-4xl) 0;
    }

    /* Prose */
    .prose {
        font-size: 1rem;
    }

    .prose h1 { font-size: 1.75rem; }
    .prose h2 { font-size: 1.5rem; }
    .prose h3 { font-size: 1.25rem; }

    /* Section header */
    .section-header {
        margin-bottom: var(--space-2xl);
    }
}


/* --------------------------------------------------------------------------
   <= 480px  (Mobile)
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

    /* Premium light sections */
    .section-premium-light { padding: var(--space-2xl) 0; }

    /* Template alias responsive */
    .page-hero-title { font-size: 1.5rem; }
    .page-hero-desc { font-size: 0.9375rem; }
    .features-grid-2, .features-grid-3, .features-grid-4 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .stat-number { font-size: 2rem; }
    .inner-cta { padding: var(--space-2xl) 0; }

    /* Page hero */
    .page-hero {
        padding: var(--space-2xl) 0 var(--space-xl);
    }

    .page-hero__title {
        font-size: 1.5rem;
    }

    .page-hero__desc {
        font-size: 0.9375rem;
    }

    .page-hero--sm {
        padding: var(--space-2xl) 0 var(--space-xl);
    }

    /* Breadcrumbs: allow wrapping */
    .breadcrumbs {
        font-size: 0.75rem;
        gap: var(--space-xs);
    }

    /* Feature cards: less padding */
    .feature-card {
        padding: var(--space-lg);
    }

    .feature-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    /* Overview card: smaller image */
    .overview-card-image {
        height: 180px;
    }

    .overview-card-content {
        padding: var(--space-lg);
    }

    /* Product nav: compact */
    .product-nav-link { padding: 8px 14px; font-size: 0.75rem; gap: 6px; }

    /* Process step number smaller */
    .process-step__number {
        width: 48px;
        height: 48px;
        font-size: 1.125rem;
    }

    /* CTA banner */
    .cta-banner {
        padding: var(--space-2xl) 0;
    }

    .cta-banner__title {
        font-size: 1.5rem;
    }

    /* Team grid: 2 -> 1 col */
    .team-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Timeline */
    .timeline::before {
        left: 16px;
    }

    .timeline__item:nth-child(odd),
    .timeline__item:nth-child(even) {
        padding-left: calc(16px + var(--space-xl));
    }

    .timeline__dot {
        left: 16px;
        width: 12px;
        height: 12px;
    }

    /* Gallery grid: 2 -> 1 col */
    .gallery-grid,
    .gallery-grid--2col,
    .gallery-grid--4col {
        grid-template-columns: 1fr;
    }

    .gallery-item--wide {
        grid-column: span 1;
    }

    .gallery-item--wide .gallery-item__image {
        aspect-ratio: 4 / 3;
    }

    /* Location cards */
    .location-card__actions {
        flex-direction: column;
    }

    /* Pagination */
    .pagination {
        gap: var(--space-xs);
    }

    .pagination__item {
        min-width: 36px;
        height: 36px;
        font-size: 0.8125rem;
    }

    /* Section spacing */
    .inner-section {
        padding: var(--space-2xl) 0;
    }

    .inner-section--lg {
        padding: var(--space-3xl) 0;
    }

    .inner-section--sm {
        padding: var(--space-xl) 0;
    }

    /* Section header */
    .section-header__title {
        font-size: 1.5rem;
    }

    .section-header__text {
        font-size: 0.9375rem;
    }

    /* Prose tighten */
    .prose {
        font-size: 0.9375rem;
    }

    .prose h1 { font-size: 1.5rem; }
    .prose h2 { font-size: 1.375rem; }
    .prose h3 { font-size: 1.125rem; }

    .prose blockquote {
        padding: var(--space-md) var(--space-lg);
        margin: var(--space-xl) 0;
    }

    .prose table th,
    .prose table td {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.875rem;
    }

    /* Blog featured card reset */
    .blog-card--featured .blog-card__title {
        font-size: 1.125rem;
    }

    /* Sidebar widget tighten */
    .sidebar-widget {
        padding: var(--space-lg);
    }
}


/* ==========================================================================
   12. PRINT STYLES
   ========================================================================== */

@media print {

    .site-nav,
    .cta-banner,
    .breadcrumbs,
    .pagination {
        display: none !important;
    }

    .page-hero {
        background: none !important;
        color: #000 !important;
        padding: 0 0 1em !important;
    }

    .page-hero::before,
    .page-hero::after {
        display: none !important;
    }

    .page-hero__title {
        color: #000 !important;
        font-size: 1.5rem !important;
    }

    .page-hero__desc {
        color: #333 !important;
    }

    .prose {
        max-width: none;
        font-size: 11pt;
    }

    .prose a {
        color: #000;
        text-decoration: underline;
    }

    .inner-section {
        padding: 1em 0 !important;
    }
}

/* ==========================================================================
   TESTIMONIALS (Kliendid meist)
   ========================================================================== */

.testimonial-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.testimonial-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.testimonial-card__stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-md);
}

.testimonial-card__text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0 0 var(--space-lg);
    font-style: italic;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.testimonial-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.testimonial-card__name {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.testimonial-card__role {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   TIMELINE (Meie lugu)
   ========================================================================== */

/* ==========================================================================
   VERTICAL TIMELINE (Meie lugu — verstapostid)
   ========================================================================== */

.vt {
    position: relative;
    margin-top: var(--space-3xl);
    padding-bottom: var(--space-lg);
}

/* Center vertical line */
.vt::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), rgba(7,181,218,0.15));
}

/* Each row: 3-col grid — guarantees dot stays on the line */
.vt__item {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: stretch;
    margin-bottom: var(--space-2xl);
}

.vt__item:last-child {
    margin-bottom: 0;
}

/* Left: content col1 | node col2 | spacer col3 */
.vt__item--left .vt__content { grid-column: 1; grid-row: 1; padding-right: var(--space-xl); }
.vt__item--left .vt__node    { grid-column: 2; grid-row: 1; }
.vt__item--left .vt__spacer  { grid-column: 3; grid-row: 1; }

/* Right: spacer col1 | node col2 | content col3 */
.vt__item--right .vt__content { grid-column: 3; grid-row: 1; padding-left: var(--space-xl); }
.vt__item--right .vt__node    { grid-column: 2; grid-row: 1; }
.vt__item--right .vt__spacer  { grid-column: 1; grid-row: 1; }

.vt__content {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(7,181,218,0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-2xl);
    transition: border-color var(--transition-base), background var(--transition-base);
}

.vt__content:hover {
    border-color: rgba(7,181,218,0.38);
    background: rgba(255,255,255,0.08);
}

.vt__spacer { /* empty placeholder */ }

/* Center node: just the dot — stretches to card height, dot centered inside */
.vt__node {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    position: relative;
    z-index: 1;
}

.vt__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid #183e56;
    box-shadow: 0 0 0 3px rgba(7,181,218,0.35);
    flex-shrink: 0;
}

/* Year inside the card */
.vt__year {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.vt__title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 var(--space-xs);
}

.vt__desc {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* Mobile: single column */
@media (max-width: 700px) {
    .vt::before { left: 20px; transform: none; }
    .vt__item--left,
    .vt__item--right {
        grid-template-columns: 40px 1fr;
    }
    .vt__item--left .vt__content,
    .vt__item--right .vt__content  { grid-column: 2; grid-row: 1; padding-left: var(--space-md); padding-right: 0; }
    .vt__item--left .vt__node,
    .vt__item--right .vt__node     { grid-column: 1; grid-row: 1; }
    .vt__item--left .vt__spacer,
    .vt__item--right .vt__spacer   { display: none; }
    .vt__year { font-size: 1.5rem; }
}

/* old timeline — kept for other usages */
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), rgba(7, 181, 218, 0.2));
}

.timeline__item {
    position: relative;
    margin-bottom: var(--space-xl);
    padding-left: var(--space-lg);
}

.timeline__item::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    border: 3px solid var(--color-light);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.timeline__year {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.timeline__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
}

.timeline__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ==========================================================================
   CAMPAIGN CARDS (Kampaania)
   ========================================================================== */

.campaign-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
    transition: box-shadow var(--transition-base);
}

.campaign-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.campaign-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.campaign-card__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.campaign-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.campaign-card__period {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
}

.campaign-card__desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 var(--space-lg);
}

.campaign-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
}

.campaign-card__features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
}

/* ==========================================================================
   DOCUMENT LIST (Dokumendid)
   ========================================================================== */

.doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.doc-category {
    background: var(--color-white);
    border: 1px solid rgba(10,30,42,0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(10,30,42,0.06);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.doc-category:hover {
    border-color: rgba(7,181,218,0.35);
    box-shadow: 0 6px 28px rgba(7,181,218,0.1);
}

.doc-category__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    border-bottom: 1px solid rgba(10,30,42,0.07);
    background: rgba(7,181,218,0.04);
}

.doc-category__icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.doc-category__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}

.doc-list {
    padding: var(--space-sm) 0;
}

.doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid rgba(10,30,42,0.06);
    transition: background var(--transition-fast);
}

.doc-item:last-child {
    border-bottom: none;
}

.doc-item:hover {
    background: rgba(7,181,218,0.04);
}

.doc-item__info {
    flex: 1;
    min-width: 0;
}

.doc-item__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-dark);
    display: block;
    line-height: 1.4;
    /* Tagasiside #380: pikk sõna murdub, ei kattu nuppudega */
    overflow-wrap: anywhere;
}

.doc-item__meta {
    font-size: 0.75rem;
    color: rgba(10,30,42,0.45);
    display: block;
    margin-top: 2px;
}

.doc-item__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: var(--color-dark);
    border: 1px solid var(--color-dark);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.doc-item__btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.doc-item__btn:disabled {
    background: rgba(10,30,42,0.12);
    border-color: rgba(10,30,42,0.12);
    color: rgba(10,30,42,0.4);
    cursor: not-allowed;
}

/* Tagasiside #380: Vaata + Lae alla kõrvuti, "Vaata" outline-stiilis */
.doc-item__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.doc-item__btn--view {
    background: transparent;
    border-color: var(--color-dark);
    color: var(--color-dark);
}
.doc-item__btn--view:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

@media (max-width: 960px) {
    .doc-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   COLOR SWATCHES (Testi värve)
   ========================================================================== */

.color-group {
    margin-bottom: var(--space-2xl);
}

.color-group__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-lg);
}

.color-swatch {
    text-align: center;
}

.color-swatch__preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.color-swatch:hover .color-swatch__preview {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.color-swatch__name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}

.color-swatch__hex {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: var(--font-heading);
}

.color-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
    margin-top: var(--space-xl);
}

.color-notice svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.color-notice p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

.color-notice a {
    color: var(--color-primary);
    font-weight: 600;
}


/* ==========================================================================
   PRODUCT NAVIGATION BAR
   Cross-linking navigation between product pages
   ========================================================================== */

.product-nav {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) 0;
}

.product-nav-inner {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.product-nav-inner::-webkit-scrollbar {
    display: none;
}

.product-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.product-nav-link:hover {
    color: var(--color-primary);
    border-color: rgba(7, 181, 218, 0.3);
    background: rgba(7, 181, 218, 0.04);
}

.product-nav-link.active {
    color: var(--color-primary);
    background: rgba(7, 181, 218, 0.08);
    border-color: rgba(7, 181, 218, 0.3);
}

/* Tighter hero when followed by stats + nav (service/company pages) */
.page-hero + .stats-bar {
    border-top: none;
    margin-top: -1px;
}

.page-hero + .stats-bar + .product-nav--dark {
    border-top: none;
}

/* Dark nav variant — blends with dark hero and stats bar */
.product-nav--dark {
    background: var(--color-dark);
    border-bottom: none;
    border-top: none;
    padding: var(--space-sm) 0 var(--space-lg);
}

.product-nav--dark .product-nav-link {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.product-nav--dark .product-nav-link:hover {
    color: var(--color-primary);
    border-color: rgba(7, 181, 218, 0.3);
    background: rgba(7, 181, 218, 0.08);
}

.product-nav--dark .product-nav-link.active {
    color: var(--color-primary);
    background: rgba(7, 181, 218, 0.12);
    border-color: rgba(7, 181, 218, 0.3);
}

.product-nav-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}


/* Responsive adjustments for new components */
@media (max-width: 768px) {
    .campaign-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .campaign-card__features {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .doc-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .color-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .timeline {
        padding-left: 30px;
    }

    .timeline__item {
        padding-left: var(--space-md);
    }

    .timeline__item::before {
        left: -19px;
    }
}


/* ==========================================================================
   SECTION-DARK Utility
   Dark background section for premium feel, reusable across pages.
   ========================================================================== */

.section-dark {
    background-color: var(--color-dark);
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
}

.section-dark .tab-section-header h2,
.section-dark h2 {
    color: var(--color-white);
}

.section-dark .tab-section-header h2::after {
    background: var(--color-primary);
}

.section-dark p,
.section-dark .tab-intro p {
    color: rgba(255, 255, 255, 0.7);
}

.section-dark .section-badge {
    color: var(--color-primary);
    background: rgba(7, 181, 218, 0.12);
    border-color: rgba(7, 181, 218, 0.25);
}

/* Glass Card — semi-transparent card on dark background */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: border-color 250ms, transform 250ms, box-shadow 250ms;
    position: relative;
    overflow: hidden;
}

.glass-card:hover {
    border-color: rgba(7, 181, 218, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.glass-card h3,
.glass-card h4 {
    color: var(--color-white);
}

.glass-card p {
    color: rgba(255, 255, 255, 0.65);
}

.glass-card .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background-color: rgba(7, 181, 218, 0.15);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

/* Feature cards inside dark sections */
.section-dark .feature-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.section-dark .feature-card:hover {
    border-color: rgba(7, 181, 218, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.section-dark .feature-card h4 {
    color: var(--color-white);
}

.section-dark .feature-card p {
    color: rgba(255, 255, 255, 0.65);
}

.section-dark .feature-card .feature-icon {
    background-color: rgba(7, 181, 218, 0.15);
    color: var(--color-primary);
}


/* ==========================================================================
   LOCATION TABS (esindused page)
   ========================================================================== */

.location-tabs {
    margin-top: var(--space-2xl);
    margin-bottom: 0;
    border-bottom: 1px solid rgba(15, 34, 56, 0.08);
}

.location-tabs__wrap {
    position: relative;
}

.location-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    overflow-x: visible;
    padding-bottom: 0;
    margin-bottom: -1px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.location-tabs__nav::-webkit-scrollbar { display: none; }

.location-tabs__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 4px));
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(10,30,42,0.15);
    background: var(--color-white);
    box-shadow: 0 2px 8px rgba(10,30,42,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-dark);
    z-index: 2;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.location-tabs__arrow:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.location-tabs__arrow--left  { left: 0; }
.location-tabs__arrow--right { right: 0; }
.location-tabs__arrow.is-hidden { opacity: 0; pointer-events: none; }
.location-tabs__arrow { display: none !important; }

.location-tab {
    position: relative;
    flex-shrink: 0;
    padding: 16px 22px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #6b7c8e;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease, font-weight 200ms ease;
    white-space: nowrap;
    line-height: 1;
}

.location-tab::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    height: 2px;
    background: #07B5DA;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.location-tab:hover {
    color: #0F2238;
}

.location-tab:hover::after {
    transform: scaleX(0.4);
    background: rgba(7, 181, 218, 0.45);
}

.location-tab.active {
    color: #0F2238;
    font-weight: 700;
}

.location-tab.active::after {
    transform: scaleX(1);
    background: #07B5DA;
    height: 2.5px;
}

/* Panels */
.location-panels {
    margin-top: var(--space-xl);
}

.location-panel {
    display: none;
}

.location-panel.active {
    display: block;
    animation: panelFadeIn 0.25s ease;
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.location-panel__inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3xl);
    /* Helve #2: kutsuv taust kaardipildi asemel — cyan gradient + map-grid muster */
    background:
        radial-gradient(1200px 400px at 100% 0%, rgba(7,181,217,0.10), transparent 60%),
        linear-gradient(135deg, rgba(7,181,217,0.05) 0%, rgba(255,255,255,1) 50%);
    border: 1px solid rgba(10,30,42,0.09);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
    box-shadow: 0 2px 16px rgba(10,30,42,0.06);
    cursor: pointer; /* kogu kast klikitav (JS) */
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.location-panel__inner::after {
    /* Stiliseeritud kaardi-grid muster paremale ülemisse nurka */
    content: "";
    position: absolute;
    top: -20px;
    right: -40px;
    width: 280px;
    height: 280px;
    background-image:
        linear-gradient(rgba(7,181,217,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7,181,217,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.7;
}
.location-panel__inner::before {
    /* Suur dekoratiivne pin paremale */
    content: "";
    position: absolute;
    top: 24px;
    right: 36px;
    width: 96px;
    height: 96px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307B5D9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}
.location-panel__inner > * {
    position: relative;
    z-index: 1;
}
.location-panel__inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(10,30,42,0.12);
}
.location-panel__hint {
    position: absolute;
    bottom: 16px;
    right: 24px;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 600;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.location-panel__inner:hover .location-panel__hint {
    opacity: 1;
}

.location-panel__head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 220px;
}

.location-panel__pin {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: rgba(7,181,218,0.10);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-panel__pin svg {
    width: 26px;
    height: 26px;
}

.location-panel__name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 4px;
    line-height: 1.2;
}

.location-panel__city {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.location-panel__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-2xl);
    flex: 1;
}

.location-panel__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.05rem;
    color: var(--color-dark);
    line-height: 1.55;
}

.location-panel__meta-item svg {
    flex-shrink: 0;
    margin-top: 3px;
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    opacity: 0.85;
}

.location-panel__meta-item a {
    color: inherit;
    text-decoration: none;
}

.location-panel__meta-item a:hover {
    color: var(--color-primary);
}

.location-panel__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.location-panel__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.location-panel__btn svg {
    width: 16px;
    height: 16px;
}

.location-panel__btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border: 1.5px solid var(--color-primary);
}

.location-panel__btn--primary:hover {
    background: var(--color-primary-dark, #0599b8);
    border-color: var(--color-primary-dark, #0599b8);
}

.location-panel__btn--outline {
    background: transparent;
    color: var(--color-dark);
    border: 1.5px solid rgba(10,30,42,0.15);
}

.location-panel__btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Team grid */
.location-panel__team {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(10,30,42,0.08);
}

.location-panel__team-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-muted, #6b7a8d);
    margin: 0 0 var(--space-xl);
}

.location-panel__team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg) var(--space-xl);
    background: var(--color-white, #fff);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(10,30,42,0.07);
    box-shadow: 0 2px 16px rgba(10,30,42,0.05);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.team-member::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.team-member:hover {
    box-shadow: 0 8px 32px rgba(10,30,42,0.1);
    transform: translateY(-3px);
    border-color: rgba(10,30,42,0.12);
}

.team-member:hover::before {
    opacity: 1;
}

.team-member__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    box-shadow: 0 4px 14px rgba(6,182,212,0.28);
}

.team-member__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
}

.team-member__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.team-member__role {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: rgba(6,182,212,0.09);
    padding: 4px 12px;
    border-radius: 0;
    margin-bottom: var(--space-lg);
}

.team-member__contacts {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(10,30,42,0.06);
    margin-top: auto;
}

.team-member__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--color-muted, #6b7a8d);
    text-decoration: none;
    padding: 3px 0;
    transition: color var(--transition-fast);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.team-member__link svg {
    flex-shrink: 0;
}

.team-member__link:hover {
    color: var(--color-primary);
}

@media (max-width: 900px) {
    .location-panel__inner {
        flex-direction: column;
        gap: var(--space-xl);
    }
    .location-panel__meta {
        grid-template-columns: 1fr;
    }
    .location-panel__actions {
        flex-direction: row;
    }
    .location-panel__team-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .location-panel__team-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .location-panel__team-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LOCATIONS MAP
   Interactive Leaflet map for esindused page.
   ========================================================================== */

.locations-map {
    background-color: var(--color-bg, #f5f7fa);
    padding: var(--space-3xl) 0;
    border-top: 1px solid rgba(10,30,42,0.07);
}

.locations-map__wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(10,30,42,0.10);
    box-shadow: 0 4px 24px rgba(10,30,42,0.08);
}

#plasto-map {
    width: 100%;
    height: 500px;
}

/* Custom Leaflet marker — Tagasiside #133 (Maili, r3):
   "Mummude" asemel kasutame Plasto akna pilti (mummu.png). */
.plasto-marker {
    filter: drop-shadow(0 2px 4px rgba(10,30,42,0.35));
    transition: transform .18s ease;
}
.plasto-marker:hover {
    transform: scale(1.18);
    z-index: 1000 !important;
}

.plasto-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-family: var(--font-heading) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--color-dark) !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.9), 0 -1px 3px rgba(255,255,255,0.9),
                 1px 0 3px rgba(255,255,255,0.9), -1px 0 3px rgba(255,255,255,0.9);
}

.plasto-label::before {
    display: none !important;
}

/* Kermo, 01.06.2026: Leaflet kontrollid (suum +/−, attribution) ei tohi sticky-päise
   peale joosta. Nav on z-index 1000, Leaflet vaikimisi ka ~1000. Anname kaardi-
   konteinerile oma stacking-konteksti madala z-indexiga → kogu kaart (sh kontrollid)
   jääb päise alla. */
.leaflet-container {
    position: relative;
    z-index: 0;
}
.leaflet-top,
.leaflet-bottom {
    z-index: 400 !important;
}

/* Leaflet popup styling override */
.leaflet-popup-content-wrapper {
    border-radius: 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 240px !important;
}

.pp-img {
    display: block;
    width: calc(100% - 20px);
    height: 130px;
    object-fit: cover;
    border-radius: 0;
    margin: 10px 10px 0 10px;
}

.leaflet-popup-content {
    margin: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
}

.pp-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px 12px;
}

.pp-name {
    font-family: var(--font-heading) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    display: block !important;
    margin: 0 !important;
}

.pp-addr {
    color: #777;
    font-size: 0.8rem;
    line-height: 1.35;
    display: block;
}

.pp-maps {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-top: 2px;
    display: inline-block;
}

.pp-maps:hover {
    text-decoration: underline !important;
}

.leaflet-popup-close-button { display: none !important; }

.leaflet-popup-content-wrapper { position: relative !important; }

.pp-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    color: rgba(10,30,42,0.65);
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    z-index: 10;
}

.pp-close:hover {
    background: #fff;
    color: var(--color-dark);
}

.leaflet-popup-tip {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Location card active/highlighted state */
.location-card.highlighted {
    border-color: var(--color-primary);
    box-shadow: 0 8px 30px rgba(7, 181, 218, 0.15);
}

@media (max-width: 768px) {
    #plasto-map {
        height: 300px;
    }

    .locations-map {
        padding: var(--space-2xl) 0;
    }
}


/* ==========================================================================
   TESTIMONIALS GRID (2-column layout for kliendid-meist page)
   ========================================================================== */

.testimonials-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.testimonials-page-grid .testimonial-card--featured {
    grid-column: span 2;
    border-left: 3px solid var(--color-primary);
}

.testimonials-page-grid .testimonial-card--featured .t-quote {
    font-size: 1.0625rem;
}

@media (max-width: 768px) {
    .testimonials-page-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-page-grid .testimonial-card--featured {
        grid-column: span 1;
    }
}


/* ==========================================================================
   CAMPAIGN CARDS — dark variant
   ========================================================================== */

.section-dark .campaign-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.section-dark .campaign-card:hover {
    border-color: rgba(7, 181, 218, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.section-dark .campaign-card__title {
    color: var(--color-white);
}

.section-dark .campaign-card__desc {
    color: rgba(255, 255, 255, 0.65);
}

.section-dark .campaign-card__badge {
    background: rgba(7, 181, 218, 0.15);
    color: var(--color-primary);
    border-color: rgba(7, 181, 218, 0.3);
}


/* ==========================================================================
   COLOR VISUALIZER — Testi värve page
   ========================================================================== */

.cv-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

/* --- Controls panel --- */
.cv-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.cv-group {
    background: var(--color-white, #fff);
    border: 1px solid rgba(16, 44, 62, 0.07);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 12px rgba(16, 44, 62, 0.04);
}

.cv-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-md);
    color: var(--color-text-muted, #6b7280);
}

.cv-group__title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-heading, #183e56);
    flex: 1;
}

.cv-selected-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
    background: rgba(6, 182, 212, 0.09);
    padding: 2px 9px;
    border-radius: 0;
    white-space: nowrap;
}

.cv-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cv-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    outline: none;
    position: relative;
}

.cv-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.cv-swatch.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);
    transform: scale(1.12);
}

/* White swatch needs a visible border so it doesn't disappear on white background */
.cv-swatch[data-color="#FFFFFF"],
.cv-swatch[data-color="#F8F7F4"] {
    border-color: rgba(16, 44, 62, 0.15);
}

.cv-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.5;
    margin-top: var(--space-sm);
}

.cv-disclaimer svg {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.6;
}

.cv-disclaimer a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- SVG Preview --- */
.cv-preview {
    position: sticky;
    top: 100px;
}

.cv-house {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(16, 44, 62, 0.12);
    display: block;
}

/* --- Eyedropper button --- */
.cv-eyedropper {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-radius: 0;
    border: 1px solid rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.06);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.cv-eyedropper:hover {
    background: rgba(6, 182, 212, 0.14);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12);
}

/* --- Image color picker modal --- */
.cv-picker-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 44, 62, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.cv-picker-backdrop[hidden] {
    display: none;
}

.cv-picker-modal {
    background: var(--color-white, #fff);
    border-radius: var(--radius-xl, 16px);
    box-shadow: 0 24px 60px rgba(16, 44, 62, 0.22);
    width: 100%;
    max-width: 540px;
    overflow: hidden;
}

.cv-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(16, 44, 62, 0.07);
}

.cv-picker-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-picker-head strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-heading, #183e56);
    line-height: 1.2;
}

.cv-picker-head-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
    font-weight: 400;
}

.cv-picker-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(16, 44, 62, 0.1);
    background: transparent;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    transition: background 0.15s, color 0.15s;
}

.cv-picker-close:hover {
    background: rgba(16, 44, 62, 0.06);
    color: var(--color-heading, #183e56);
}

.cv-picker-body {
    padding: var(--space-lg);
}

.cv-picker-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border: 2px dashed rgba(6, 182, 212, 0.35);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.875rem;
}

.cv-picker-upload-area:hover {
    border-color: var(--color-primary);
    background: rgba(6, 182, 212, 0.04);
    color: var(--color-heading, #183e56);
}

.cv-picker-upload-area svg {
    color: var(--color-primary);
    opacity: 0.7;
}

.cv-picker-upload-area span {
    font-weight: 500;
}

.cv-picker-upload-area small {
    opacity: 0.65;
    font-size: 0.75rem;
}

.cv-picker-canvas-wrap {
    position: relative;
}

.cv-picker-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    cursor: crosshair;
    max-height: 340px;
    object-fit: contain;
}

.cv-picker-hint {
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cv-picker-hint svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.cv-picker-new {
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-primary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.cv-picker-new:hover {
    text-decoration: underline;
}

/* Custom color indicator */
.cv-custom-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.cv-custom-swatch::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
}

.cv-custom-label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 2px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .cv-layout {
        grid-template-columns: 280px 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 768px) {
    .cv-layout {
        grid-template-columns: 1fr;
    }

    .cv-preview {
        position: static;
        order: -1;
    }

    .cv-house {
        width: 100%;
    }

    .cv-controls {
        gap: var(--space-lg);
    }
}

/* ============================================================
 * P2 SISULEHTEDE komponendid (Tootelisad, Klaaspaketid, Sulused jne)
 * ============================================================ */

/* Section lead text */
.section-lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(11, 18, 32, 0.72);
    max-width: 720px;
    margin: 1rem auto 0;
}
.section-dark .section-lead {
    color: rgba(255, 255, 255, 0.78);
}

/* 2-column content layout (text + images) */
.content-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 40px;
}
@media (max-width: 900px) {
    .content-cols-2 {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.content-col-text {
    font-size: 1rem;
    line-height: 1.65;
}
.content-col-text > p { margin: 0 0 1rem; }
.content-col-text h3 { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; font-weight: 700; }
.section-dark .content-col-text { color: rgba(255, 255, 255, 0.85); }
.section-dark .content-col-text h3 { color: #fff; }

.content-col-images {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}
.content-col-images--stack {
    grid-template-columns: 1fr;
}
@media (max-width: 600px) {
    .content-col-images {
        grid-template-columns: 1fr;
    }
}

/* Image cards */
.image-card {
    margin: 0;
    background: #fff;
    border: 1px solid rgba(11, 18, 32, 0.08);
    border-radius: 3px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 18, 32, 0.08);
}
.image-card img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.image-card figcaption {
    padding: 12px 16px;
    font-size: 0.875rem;
    color: rgba(11, 18, 32, 0.7);
    text-align: center;
    border-top: 1px solid rgba(11, 18, 32, 0.06);
}

.image-card--dark {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
.image-card--dark figcaption {
    color: rgba(255, 255, 255, 0.7);
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Image grid layouts */
.image-grid {
    display: grid;
    gap: 16px;
    margin-top: 32px;
}
.image-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}
.image-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
    .image-grid--3col { grid-template-columns: repeat(2, 1fr); }
    .image-grid--4col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .image-grid--3col,
    .image-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Check list */
.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.check-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 0.75rem;
    line-height: 1.55;
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background: #07B5D9;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M5 9l3 3 5-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
}
.check-list--dark li {
    color: rgba(255, 255, 255, 0.85);
}

/* Generic content block */
.content-block {
    max-width: 800px;
    margin: 32px auto 0;
    line-height: 1.65;
}
.content-block > p { margin: 0 0 1rem; }
.content-block--center { text-align: center; }
.section-dark .content-block { color: rgba(255, 255, 255, 0.85); }

/* Handle card (käepidemete grupp) — varasem stiil (jäägi-stiil, mu uus .handle-card override'b allpool) */
.handle-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 28px;
    margin-top: 32px;
}
.handle-card-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.handle-card-header h4 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.handle-card-meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
}

/* Spacing utility */
.mt-large { margin-top: 56px; }
.text-center { text-align: center; }
.section-dark .text-center { color: #fff; }


/* ============================================================
 * Lisakomponendid Tootelisad TAB-panel disainile
 * ============================================================ */

/* 6-veeruline mini grid (käepidemete galerii) */
.image-grid--6col {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px) {
    .image-grid--6col { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
    .image-grid--6col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .image-grid--6col { grid-template-columns: repeat(2, 1fr); }
}

/* Väikesem image-card (galerii vaates) */
.image-card--small img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fafafa;
    padding: 8px;
}

/* Color chips (sääsevõrgu värvivalik) */
.color-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0.75rem 0 1.25rem;
}
.color-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.875rem;
    border: 1px solid rgba(11, 18, 32, 0.1);
}
.color-chip-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

/* Size pills (mõõdu-valikud) */
.size-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0.75rem 0;
}
.size-pill {
    padding: 8px 18px;
    background: #07B5D9;
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Feature stats (3 verstaposti) */
.feature-stats {
    list-style: none;
    padding: 0;
    margin: 24px auto 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
}
.feature-stats li {
    text-align: center;
    padding: 24px 16px;
    background: rgba(7, 181, 217, 0.06);
    border-radius: 3px;
    border: 1px solid rgba(7, 181, 217, 0.15);
}
.feature-stats li strong {
    display: block;
    font-size: 1.5rem;
    color: #07B5D9;
    margin-bottom: 4px;
}
.feature-stats li span {
    font-size: 0.875rem;
    color: rgba(11, 18, 32, 0.7);
}
@media (max-width: 700px) {
    .feature-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Muted text */
.text-muted {
    color: rgba(11, 18, 32, 0.6);
    font-size: 0.9rem;
}


/* RAL-värvivaliku info-callout (Plasto 76 disainivariandid sektsiooni lõpus) */
.info-callout {
    margin-top: 32px;
    padding: 18px 24px;
    border-radius: 3px;
    background: rgba(7, 181, 217, 0.08);
    border-left: 4px solid #07B5D9;
    color: rgba(11, 18, 32, 0.85);
    font-size: 0.95rem;
    line-height: 1.5;
}
.info-callout strong {
    color: #07B5D9;
    margin-right: 4px;
}


/* YouTube / video iframe embed (responsive 16:9) */
.video-embed {
    position: relative;
    width: 100%;
    margin: 24px 0 0;
    aspect-ratio: 16 / 9;
    border-radius: 3px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 24px rgba(11, 18, 32, 0.12);
}

/* Showcase-i alla — kompaktne tsentreeritud video, mitte ülisuur */
.video-embed--wide {
    max-width: 680px;
    margin: var(--space-2xl) auto 0;
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   LOCATION CATEGORIES — Tagasiside #134 (Maili)
   Esindused / Edasimüüjad lüliti esinduste lehel
   ========================================================================== */
.location-categories {
    display: inline-flex;
    justify-content: center;
    gap: 4px;
    margin: var(--space-2xl) auto 0;
    padding: 4px;
    background: rgba(15, 34, 56, 0.05);
    border-radius: 3px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}
.location-category {
    appearance: none;
    border: 0;
    background: transparent;
    color: #5a6b7e;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.005em;
    padding: 10px 22px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.location-category__icon {
    flex-shrink: 0;
    color: rgba(15, 34, 56, 0.40);
    transition: color 200ms ease;
}
.location-category:hover {
    color: #0F2238;
}
.location-category:hover .location-category__icon {
    color: var(--color-primary, #07B5DA);
}
.location-category.active {
    background: #0F2238;
    color: #ffffff;
    box-shadow:
        0 4px 12px rgba(15, 34, 56, 0.18),
        0 1px 3px rgba(15, 34, 56, 0.10);
}
.location-category.active .location-category__icon {
    color: #07B5DA;
}
.location-tab.is-hidden-cat {
    display: none !important;
}



/* ==========================================================================
   KARJÄÄR — Kandideerimisvorm (page-karjaar.php)
   ========================================================================== */
.karjaar-vorm {
    background: var(--color-light, #f7f8fa);
    padding: var(--space-4xl) 0;
}

.karjaar-vorm__wrap {
    max-width: 880px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(16,44,62,0.08);
    padding: var(--space-3xl);
    box-shadow: 0 8px 32px rgba(16,44,62,0.06);
}

.karjaar-vorm__head {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.karjaar-vorm__head h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--color-dark);
    margin: 0 0 var(--space-md);
    line-height: 1.15;
}

.karjaar-vorm__lead {
    max-width: 620px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.karjaar-vorm__form {
    margin-top: var(--space-xl);
}

.kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.kv-field {
    display: flex;
    flex-direction: column;
}

.kv-field--full {
    grid-column: 1 / -1;
}

.kv-field label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.kv-req {
    color: var(--color-primary);
}

.kv-field input[type="text"],
.kv-field input[type="email"],
.kv-field input[type="tel"],
.kv-field select,
.kv-field textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-dark);
    background: #fff;
    border: 1.5px solid rgba(16,44,62,0.15);
    border-radius: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kv-field input:focus,
.kv-field select:focus,
.kv-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(7,181,218,0.15);
}

.kv-field textarea {
    resize: vertical;
    min-height: 120px;
    font-family: var(--font-body);
}

/* File upload */
.kv-file-label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(7,181,218,0.04);
    border: 1.5px dashed rgba(7,181,218,0.35);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-wrap: wrap;
}

.kv-file-label:hover {
    background: rgba(7,181,218,0.08);
    border-color: var(--color-primary);
}

.kv-file-label.has-file {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.4);
    border-style: solid;
}

.kv-file-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(7,181,218,0.12);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kv-file-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.kv-file-text strong {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.9375rem;
}

.kv-file-text span {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.kv-file-name {
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px;
    background: #fff;
    font-size: 0.875rem;
    color: var(--color-dark);
    word-break: break-all;
}

.kv-file-name:empty {
    display: none;
}

/* GDPR consent */
.kv-consent {
    margin-top: var(--space-sm);
}

.kv-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    font-weight: 400 !important;
}

.kv-checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.kv-checkbox a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ── CF7 karjäärivorm (Kermo, 01.06.2026): kohanda CF7 markup .kv- disainiga ── */
/* Faili-input: peida CF7 native input, .kv-file-label jääb klikitavaks drop-zone'iks */
.kv-file-label .wpcf7-form-control-wrap {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    opacity: 0;
}
/* GDPR acceptance — CF7 markup → .kv-checkbox välimus */
.kv-consent .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}
.kv-consent .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    font-weight: 400;
}
.kv-consent .wpcf7-acceptance input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}
.kv-consent .wpcf7-acceptance a {
    color: var(--color-primary);
    text-decoration: underline;
}
.karjaar-vorm__form .wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 4px;
    display: block;
}

/* Actions */
.kv-actions {
    margin-top: var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.kv-submit {
    padding: 16px 36px;
    font-size: 1.0625rem;
    min-width: 240px;
    justify-content: center;
}

.kv-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.kv-feedback {
    width: 100%;
    padding: 14px 18px;
    font-size: 0.9375rem;
    text-align: center;
    border: 1px solid;
}

.kv-feedback--success {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.4);
    color: #047857;
}

.kv-feedback--error {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.4);
    color: #b91c1c;
}

@media (max-width: 720px) {
    .karjaar-vorm__wrap {
        padding: var(--space-xl);
    }
    .kv-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}


/* ==========================================================================
   ESINDUS — solo team member (1-meeskonnaliikme paneel, Tagasiside #141)
   Avaram, kaardistiilis paigutus: ülal pealkiri, all 2-veerg
   (vasakul aadress + kellaajad, paremal isiku kontaktkaart), kõige all nupud.
   ========================================================================== */
.location-panel--solo .location-panel__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "head head"
        "info person"
        "actions actions";
    gap: var(--space-xl) var(--space-3xl);
    align-items: stretch;
}

.location-panel--solo .location-panel__head {
    grid-area: head;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(10, 30, 42, 0.08);
}

.location-panel--solo .location-panel__solo-grid {
    display: contents; /* grid sees, jagame veergude vahele eraldi */
}

.location-panel--solo .location-panel__solo-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.location-panel--solo .location-panel__solo-col:first-child {
    grid-area: info;
}

.location-panel--solo .location-panel__solo-col--person {
    grid-area: person;
    background: linear-gradient(180deg, rgba(7, 181, 218, 0.06), rgba(7, 181, 218, 0.02));
    border: 1px solid rgba(7, 181, 218, 0.22);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    position: relative;
}

.location-panel--solo .location-panel__solo-col--person::before {
    content: "Kontaktisik";
    position: absolute;
    top: -10px;
    left: 16px;
    background: #fff;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 8px;
}

.location-panel--solo .location-panel__solo-person {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(7, 181, 218, 0.15);
}

.location-panel--solo .location-panel__solo-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
}

.location-panel--solo .location-panel__solo-role {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.location-panel--solo .location-panel__actions {
    grid-area: actions;
    flex-direction: row;
    justify-content: flex-start;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(10, 30, 42, 0.08);
}

@media (max-width: 720px) {
    .location-panel--solo .location-panel__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "info"
            "person"
            "actions";
    }
}


/* ==========================================================================
   LÜKANDUKSED — premium-stiilis toote paigutus (Plasto Drive jne)
   ========================================================================== */
.ld-section {
    padding: var(--space-4xl) 0;
}

.ld-section + .ld-section {
    padding-top: 0;
}

.ld-section--intro {
    padding-bottom: var(--space-2xl);
}

.ld-section--hero {
    padding-top: 0;
}

.ld-section--description {
    padding-bottom: var(--space-3xl);
}

/* Intro (badge + title + tagline) */
.ld-intro {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.ld-product-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--color-dark);
    margin: var(--space-md) 0 var(--space-sm);
    letter-spacing: -0.02em;
}

.ld-product-tagline {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Hero image — full width within container, aspect ratio */
.ld-hero-img {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(16, 44, 62, 0.18);
}

.ld-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Description — centered, max-width readable */
.ld-description {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.ld-description h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-lg);
    line-height: 1.2;
}

.ld-description p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Features section */
.ld-section--features {
    background: linear-gradient(180deg, #fff 0%, #f4f6f8 100%);
}

.ld-features-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-3xl);
}

.ld-features-head h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--color-dark);
    margin: var(--space-md) 0 0;
    line-height: 1.2;
}

.ld-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.ld-feature {
    background: #fff;
    border: 1px solid rgba(16, 44, 62, 0.06);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ld-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(16, 44, 62, 0.08);
    border-color: rgba(7, 181, 218, 0.25);
}

.ld-feature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(7, 181, 218, 0.10);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.ld-feature h4 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-sm);
    line-height: 1.3;
}

.ld-feature p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Video section */
.ld-section--video {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}

.ld-video-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-2xl);
}

.ld-video-head h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--color-dark);
    margin: var(--space-md) 0 0;
    line-height: 1.2;
}

.ld-video {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 60px rgba(16, 44, 62, 0.18);
}

.ld-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 960px) {
    .ld-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    .ld-hero-img {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 600px) {
    .ld-features-grid {
        grid-template-columns: 1fr;
    }
    .ld-section {
        padding: var(--space-3xl) 0;
    }
    .ld-hero-img {
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================================
   LÜKANDUKSED — eraldi video-sektsioon (tekst + video kõrvuti)
   ========================================================================== */
.ld-video-section {
    padding: var(--space-4xl) 0;
}

.ld-video-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-3xl);
    align-items: center;
}

.ld-video-text h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: #fff;
    margin: var(--space-md) 0 var(--space-md);
    line-height: 1.2;
}

.ld-video-text p {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.ld-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.ld-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Tagasiside #298 (Maili, 27.05.2026): click-to-play lite YouTube pattern,
   custom poster (esimene kaader, kus uks tervenisti näha) */
.ld-video-frame--lite .ld-video-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    display: block;
    -webkit-tap-highlight-color: transparent;
}

.ld-video-frame--lite .ld-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* YouTube auto-frame 1.jpg on 4:3 (uks tervenisti näha) — contain hoiab
       sisu täielikult nähtava ja paneb tumeda fooni 16:9 raamis */
    object-fit: contain;
    object-position: center;
    background: #000;
    transition: transform 320ms ease, filter 320ms ease;
    will-change: transform;
}

.ld-video-frame--lite:hover .ld-video-poster {
    transform: scale(1.03);
    filter: brightness(0.85);
}

.ld-video-frame--lite .ld-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
    transition: transform 220ms ease, opacity 220ms ease;
    opacity: 0.92;
}

.ld-video-frame--lite:hover .ld-video-play-icon {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
}

.ld-video-frame--lite .ld-video-play:focus-visible {
    outline: 3px solid var(--color-accent, #07B5DA);
    outline-offset: -3px;
}

@media (max-width: 900px) {
    .ld-video-wrap {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}


/* Kaks videot kõrvuti (välisuksed) */
.ld-video-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .ld-video-pair {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   KLAASPAKETID — alamlehe paigutused (Energiasäästu, Päikesekaitse jne)
   ========================================================================== */
.kp-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
}

/* Tagasiside #409 (Kermo, 01.06.2026): üksik kaart (nt "Alarmiga karastatud klaas")
   täislaiuses, tsentreeritud — et ei jääks poole laiusega rippuma. */
.kp-features-grid--solo {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.kp-feature {
    background: #fff;
    border: 1px solid rgba(16, 44, 62, 0.06);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 4px 16px rgba(16, 44, 62, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.kp-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(16, 44, 62, 0.08);
    border-color: rgba(7, 181, 218, 0.25);
}

.kp-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(7, 181, 218, 0.10);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.kp-feature h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-md);
    line-height: 1.2;
}

.kp-feature p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
}

.kp-feature p:last-child {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .kp-features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}


/* Klaaspaketid — 3-veeruline kaartide grid (Päikesekaitse) */
.kp-three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 900px) {
    .kp-three-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}


/* Klaaspaketi alamlehe hero pilt */
.kp-hero-img-section {
    padding-top: 0;
    padding-bottom: var(--space-3xl);
}

.kp-hero-img {
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(16, 44, 62, 0.15);
}

.kp-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 760px) {
    .kp-hero-img {
        aspect-ratio: 16 / 10;
    }
}


/* ==========================================================================
   KLAASPAKETI TEHNILISED PARAMEETRID — 2- ja 3-kordne klaaspakett
   ========================================================================== */

/* Sissejuhatus enne 2-/3-kordseid klaaspaketi kaarte — sama stiil mis .tab-intro,
   vasakule joondatud, samade tüpograafia-parameetritega, et leht jookseks ühtselt. */
/* Tagasiside #328 (Maili, 28.05.2026): täislaius — max-width eemaldatud */
.klaaspakett-intro {
    max-width: none;
    margin: var(--space-3xl) 0 0;
}

.klaaspakett-intro h3 {
    margin: 0 0 var(--space-md);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    color: var(--color-ink, var(--color-dark, #0F2238));
    letter-spacing: -0.01em;
}

.klaaspakett-intro p {
    margin: 0 0 var(--space-lg);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.klaaspakett-intro p:last-child {
    margin-bottom: 0;
}

.klaaspakett-intro p strong {
    color: var(--color-dark);
}

/* Grid'i ja sissejuhatuse vahel ühtne tühik */
.klaaspakett-intro + .klaaspakett-spec-grid {
    margin-top: var(--space-2xl);
}

/* Tagasiside #327: kaldkirjas märkus pärast spec-grid'i */
.klaaspakett-note {
    margin-top: var(--space-xl);
    font-size: 0.95rem;
    color: var(--color-body);
    opacity: 0.85;
}

.klaaspakett-spec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    margin-top: var(--space-3xl);
}

@media (min-width: 980px) {
    .klaaspakett-spec-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
}

.klaaspakett-spec {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 4px 12px rgba(16, 44, 62, 0.04);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    /* Flex column, et kahe kõrvuti kaardi pildi-blokk ja tabel oleksid samal joonel */
    display: flex;
    flex-direction: column;
    /* Kermo, 01.06.2026: lubab gridi-veerul kahaneda, et lai spec-tabel ei venitaks
       kaarti ekraanilt välja (telefonis horisontaalne ülevool). */
    min-width: 0;
}

.klaaspakett-spec:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(16, 44, 62, 0.08);
}

.klaaspakett-spec__header {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.klaaspakett-spec__header h3 {
    margin: 0;
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    color: var(--color-ink, #0F2238);
    letter-spacing: -0.01em;
}

/* Pildi-konteiner — fikseeritud kõrgus, et mõlemal kaardil oleks
   pildi-blokk sama kõrge ja tabelid algaksid samal joonel. */
.klaaspakett-spec__image {
    margin: 0 auto var(--space-xl);
    width: 100%;
    max-width: 320px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.klaaspakett-spec__image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.klaaspakett-spec__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: auto;
    /* min-width:0 + max-width:100% → tabel kerib SELLE sees, mitte ei venita kaarti */
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 640px) {
    .klaaspakett-spec__image {
        height: 220px;
    }
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.spec-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(7, 181, 218, 0.08);
    color: var(--color-ink, #0F2238);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid rgba(7, 181, 218, 0.2);
    white-space: nowrap;
}

.spec-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border, #E5EAEF);
    color: var(--color-ink, #0F2238);
    vertical-align: middle;
}

.spec-table tbody tr:last-child td {
    border-bottom: none;
}

.spec-table tbody tr:hover {
    background: rgba(7, 181, 218, 0.04);
}

.spec-table tbody td:first-child {
    font-weight: 600;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    color: var(--color-primary, #07B5DA);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .klaaspakett-spec {
        padding: var(--space-xl);
    }
    .spec-table {
        font-size: 13px;
    }
    .spec-table thead th,
    .spec-table tbody td {
        padding: 8px 10px;
    }
}


/* ==========================================================================
   VÄRVITOONID + KÄEPIDEMED — tooteline lehtede alumine sektsioon
   (Plasto 76 / 82 / Nordic — paberi visandi järgi)
   ========================================================================== */

/* Värvi-paleti grupp — premium kaardi disain */
.color-palette {
    max-width: 1240px;
    margin: 0 auto;
}

.color-palette__category {
    margin-bottom: 64px;
}

.color-palette__category:last-child {
    margin-bottom: 0;
}

/* Kategooria-päis: number + pealkiri + joon */
.color-palette__category-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(7, 181, 218, 0.15);
}

.color-palette__category-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-ink, #0F2238);
    margin: 0;
    letter-spacing: -0.01em;
    text-transform: none;
}

.color-palette__category-line {
    flex: 1;
    height: 0;
    background: transparent;
}

/* Värvi-kaartide grid — fikseeritud 4 veergu desktop'is
   (et 7 värvi + "+" kaart = 8 = täpselt 2 rida täis) */
.color-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Lisavärvid + "+" kaart — peidetud / nähtaval data-extras-visible põhjal */
.color-swatches[data-extras-visible="false"] .color-swatch--extra {
    display: none;
}

.color-swatches[data-extras-visible="true"] .color-swatch--toggle {
    display: none; /* "+" kaart kaob kui kõik on lahti */
}

.color-swatches[data-extras-visible="true"] .color-swatch--extra {
    animation: colorExtraFadeIn .35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Staggered fade-in lisavärvidele */
.color-swatches[data-extras-visible="true"] .color-swatch--extra:nth-child(n+10) { animation-delay: 40ms; }
.color-swatches[data-extras-visible="true"] .color-swatch--extra:nth-child(n+14) { animation-delay: 80ms; }
.color-swatches[data-extras-visible="true"] .color-swatch--extra:nth-child(n+18) { animation-delay: 120ms; }
.color-swatches[data-extras-visible="true"] .color-swatch--extra:nth-child(n+22) { animation-delay: 160ms; }
.color-swatches[data-extras-visible="true"] .color-swatch--extra:nth-child(n+26) { animation-delay: 200ms; }

@keyframes colorExtraFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* "+" toggle kaart — sama dimensioonid kui värvikaardid */
.color-swatch--toggle {
    appearance: none;
    border: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}

.color-swatch__chip--plus {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    color: #07B5DA;
    position: relative;
    overflow: hidden;
}

/* Üks lisavärvi pilt taustaks (madala läbipaistvusega) */
.color-swatch__plus-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    transition: opacity 350ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Heledav valge-tinted overlay — annab kogu kaardile valge tooni */
.color-swatch__chip--plus::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    z-index: 1;
    transition: background 300ms ease;
}

.color-swatch__plus {
    position: relative;
    z-index: 2;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 1px 3px rgba(15, 34, 56, 0.20));
}

/* Hover: plus pöörab + skaaleerub, pilt tugevneb veidi */
.color-swatch--toggle:hover .color-swatch__plus {
    transform: scale(1.15) rotate(90deg);
}

.color-swatch--toggle:hover .color-swatch__plus-bg {
    opacity: 0.5;
    transform: scale(1.04);
}

.color-swatch--toggle:hover .color-swatch__chip--plus::before {
    background: rgba(255, 255, 255, 0.30);
}

.color-swatch--toggle .color-swatch__name {
    color: #07B5DA;
}

.color-swatch--toggle:focus-visible {
    outline: 2px solid #07B5DA;
    outline-offset: 3px;
}

/* (Eemaldatud — vana eraldi toggle-nupu CSS. Nüüd on toggle integreeritud
   gridi "+" kaardiks: .color-swatch--toggle) */

/* Üks värvi-kaart — subtle radius pehmema tunde jaoks */
.color-swatch {
    background: var(--color-white, #fff);
    border-radius: var(--radius-md, 4px);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(16, 44, 62, 0.04),
        0 4px 12px rgba(16, 44, 62, 0.04);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s ease;
    cursor: default;
    position: relative;
}

.color-swatch:hover {
    transform: translateY(-6px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 18px 36px rgba(0, 0, 0, 0.14);
}

/* Värvi-pind — ruut, suurem, modernsem (nüüd pildiga, mitte hex-värviga) */
.color-swatch__chip {
    aspect-ratio: 1 / 1;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #f5f7fa; /* placeholder kui pilt laadib */
}

/* Salamander värvitooni pilt — Tagasiside #199 */
.color-swatch__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}

.color-swatch:hover .color-swatch__image {
    transform: scale(1.04);
}

/* Salamander värvi-kood badge — väike valge "ring" pildi parem-üla nurgas
   (Tagasiside #227 — koodid on Maili sõnul "VÄGA tähtsad") */
.color-swatch__code-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #0F2238;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow:
        0 1px 2px rgba(15, 34, 56, 0.10),
        0 2px 8px rgba(15, 34, 56, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Tekst alumises kastis — generoosem padding */
.color-swatch__info {
    padding: 18px 20px;
    background: #fff;
}

.color-swatch__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink, #0F2238);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    line-height: 1.25;
}

.color-swatch__code {
    font-size: 12px;
    color: var(--color-text-secondary, #6B7C8E);
    font-weight: 500;
    letter-spacing: 0.03em;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    text-transform: uppercase;
}

/* Tablet */
@media (max-width: 900px) {
    .color-swatches {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .color-swatches {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .color-swatch__info {
        padding: 14px 16px;
    }
    .color-swatch__name {
        font-size: 15px;
    }
    .color-palette__category-title {
        font-size: 18px;
    }
}

/* Käepidemed sektsiooni Plasto dark stiilis (sama mis feature-cards-grid--dark)
   Tagasiside #177: 3 kaarti reas, pildi-tugi (fallback SVG-ikoonile) */
.handles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}

/* Tagasiside #301 (Maili, 27.05.2026): välisuste valik — 5 disaini-kaardi grid */
.door-options-section {
    padding: var(--space-3xl) 0;
}

.door-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}

.door-option-card {
    background: #fff;
    border: 1px solid rgba(15, 34, 56, 0.08);
    border-radius: var(--radius-md, 4px);
    overflow: hidden;
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color .3s ease,
                box-shadow .3s ease;
    display: flex;
    flex-direction: column;
}

.door-option-card:hover {
    transform: translateY(-3px);
    border-color: rgba(7, 181, 218, 0.40);
    box-shadow:
        0 2px 4px rgba(15, 34, 56, 0.06),
        0 12px 28px rgba(15, 34, 56, 0.10);
}

.door-option-card__media {
    /* Allikapildid on 1254×1254 (1:1 ruut, sees on uks koos taustaga) —
       kasutame ruudukujulist mahutit, padding 0 et uks oleks võimalikult suur */
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #f0f4f8 0%, #e2e8ed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.door-option-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}

.door-option-card:hover .door-option-card__media img {
    transform: scale(1.05);
}

.door-option-card__body {
    padding: 14px 18px 16px;
    border-top: 1px solid rgba(15, 34, 56, 0.06);
    background: #fff;
    text-align: center;
}

.door-option-card__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-dark, #0F2238);
    margin: 0;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {
    .door-options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}


.handle-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(7, 181, 218, 0.18);
    border-radius: var(--radius-md, 4px);
    padding: 0 0 32px;
    overflow: hidden;
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease, background .3s ease;
    cursor: default;
    position: relative;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
}

/* Subheader Nordic-spetsiifiliste käepidemete ette (täislaius gridis) */
.handles-grid__subheader {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 8px;
}

.handles-grid__subheader-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(7, 181, 218, 0.30) 50%, transparent 100%);
}

.handles-grid__subheader-text {
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #07B5DA;
    flex-shrink: 0;
}

/* Nordic-spetsiifiline kaart — cyan-tinted border eristamiseks */
.handle-card--nordic {
    border-color: rgba(7, 181, 218, 0.42);
}

.handle-card:hover {
    transform: translateY(-4px);
    border-color: rgba(7, 181, 218, 0.5);
    background: linear-gradient(180deg, rgba(7, 181, 218, 0.06) 0%, rgba(255,255,255,0.02) 100%);
}

/* Pildi/ikooni wrapper — ruut, sobib vertikaalsetele käepidemetele.
   object-fit: contain (mitte cover) — kogu käepide jääb nähtavaks,
   padding annab ruumi, gradient-bg leevendab valge ja tumeda kontrasti */
.handle-card__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #f5f7fa 0%, #e8edf2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    position: relative;
}

/* Subtle dot-grid taustal — annab "premium product photo" tunde */
.handle-card__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 34, 56, 0.06) 1px, transparent 1.4px);
    background-size: 14px 14px;
    opacity: 0.5;
    pointer-events: none;
}

.handle-card__image {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 10px 24px rgba(15, 34, 56, 0.18));
}

.handle-card:hover .handle-card__image {
    transform: scale(1.05) translateY(-2px);
}

/* Ikoon — fallback kui pilti pole, cyan accent keskel */
.handle-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #07B5DA;
    opacity: 0.85;
}

.handle-card__icon svg {
    width: 56px;
    height: 56px;
}

.handle-card__body {
    padding: 28px 28px 0;
}

/* Pealkiri — Space Grotesk, valge, suurem */
.handle-card__name {
    margin: 0 0 8px;
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Tagline — pisem, pehmem valge */
.handle-card__tagline {
    margin: 0 0 24px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Features-loend */
.handle-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.handle-card__features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.handle-card__features svg {
    flex-shrink: 0;
    color: #07B5DA;
    width: 16px;
    height: 16px;
}

@media (max-width: 960px) {
    .handles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .handles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .handle-card {
        padding: 0 0 26px;
    }
    .handle-card__body {
        padding: 24px 24px 0;
    }
    .handle-card__name {
        font-size: 20px;
    }
}

@media (max-width: 640px) {
    /* Kermo 01.06.2026: pilt telefonis suuremaks — fikseeritud 60px kõrgus tegi
       pildist lameriba. Ruudukujuline chip skaleerub veeru laiusega (suurem pilt).
       Veergude/ridade arvu EI muudeta (auto-fill minmax 90px jääb samaks). */
    .color-swatch__chip {
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .color-swatches {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: var(--space-md);
    }
}


/* ==========================================================================
   Referentside tühi-teade — kuvatakse, kui filter peidab kõik kaardid
   ========================================================================== */
.ref-empty-state {
    text-align: center;
    padding: 60px 20px 30px;
    max-width: 480px;
    margin: 0 auto;
}

.ref-empty-state[hidden] {
    display: none;
}

.ref-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    background: rgba(7, 181, 218, 0.06);
    color: #07B5DA;
    border-radius: 50%;
    margin-bottom: 20px;
}

.ref-empty-state__title {
    margin: 0 0 8px;
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-ink, #0F2238);
    line-height: 1.3;
}

.ref-empty-state__desc {
    margin: 0 0 24px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--color-text-secondary, #6B7C8E);
}

.ref-empty-state__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    background: #173E58;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ref-empty-state__btn:hover {
    background: #0F2C40;
    transform: translateY(-1px);
}

.ref-empty-state__btn:focus-visible {
    outline: 2px solid #07B5DA;
    outline-offset: 3px;
}


/* ==========================================================================
   KONTAKTI-VORM (esindused) — Tagasiside #193
   Kasutab esilehe .contact / .contact-wrapper / .form-group jne klasse
   (defineeritud plasto-main.css'is). Siin ainult lisad: honeypot + scroll.
   ========================================================================== */

#kontakt-vorm {
    scroll-margin-top: 100px;
}

.contact-form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}



/* ==========================================================================
   HSD AVAMIS-SKEEMID — Tagasiside #240 (Maili, 25.05.2026)
   2-veeruline grid lükandukse avamis-skeemide joonistele
   ========================================================================== */

.hsd-schemes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl, 32px);
    margin-top: var(--space-3xl, 56px);
    align-items: center;
}

.hsd-scheme {
    margin: 0;
    padding: 24px;
    background: #ffffff;
    border: 1px solid rgba(15, 34, 56, 0.08);
    border-radius: 4px;
    box-shadow:
        0 1px 2px rgba(15, 34, 56, 0.04),
        0 4px 12px rgba(15, 34, 56, 0.05);
}

.hsd-scheme img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 720px) {
    .hsd-schemes {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .hsd-scheme {
        padding: 18px;
    }
}


/* ==========================================================================
   INFO-HINT — Tagasiside #256-#257 (Maili, 26.05.2026)
   Tooltip-stiilis hint: cyan tekst + dotted underline; hover'il klassikaline custom tooltip
   ========================================================================== */
.info-hint {
    position: relative;
    color: #07B5DA;
    border-bottom: 1px dotted rgba(7, 181, 218, 0.55);
    cursor: help;
    text-decoration: none;
    transition: color 180ms ease, border-color 180ms ease;
    display: inline-block;
}

.info-hint:hover,
.info-hint:focus {
    color: #0894B0;
    border-bottom-color: #07B5DA;
    outline: none;
}

/* Tooltip-mull (tumesinine, valge tekst, väike nool alla) */
.info-hint::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0F2238;
    color: #ffffff;
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    box-shadow:
        0 2px 4px rgba(15, 34, 56, 0.20),
        0 8px 24px rgba(15, 34, 56, 0.25);
    z-index: 100;
}

/* Nool tooltip'i alumisel servas — Plasto-ink kolmnurk */
.info-hint::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #0F2238;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    z-index: 100;
}

.info-hint:hover::before,
.info-hint:hover::after,
.info-hint:focus::before,
.info-hint:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* Footnote rida + loend product-showcase juures (Tagasiside #278) — väiksem note Uw-väärtuste jaoks */
.product-showcase-content .footnote-line {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(15, 34, 56, 0.08);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: var(--space-sm);
}

.product-showcase-content .footnote-list {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: 0;
}

/* =====================================================
   ERAKLIENT LANDING PAGE — Tagasiside #355 (Maili)
   ===================================================== */

/* Hero */
.eraklient-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.eraklient-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.eraklient-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,26,50,0.80) 0%, rgba(10,26,50,0.50) 100%);
}
.eraklient-hero .container {
    position: relative;
    z-index: 1;
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}
.eraklient-hero__content {
    max-width: 700px;
}
.eraklient-hero__title {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
}
.eraklient-hero__desc {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.88);
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
}
.eraklient-hero__btns {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Products stacked list */
.eraklient-products {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
    margin-top: var(--space-2xl);
}

/* projects.php taaskasutus siselehtedel (nt eraklient): .reveal animatsiooni-JS
   laeb ainult esilehel — siselehel teeme .reveal vaikimisi nähtavaks. */
.inner-page .reveal {
    opacity: 1;
    transform: none;
}

/* Tootevaliku showcase'id: ühtne pildikõrgus + tekst vertikaalselt keskel,
   et lühikese teksti kõrval ei tekiks liiga kõrget pilti. */
.eraklient-products .product-showcase {
    align-items: center;
    margin-bottom: 0;
}
.eraklient-products .product-showcase-image {
    min-height: 0;
    height: 380px;
}

@media (max-width: 768px) {
    .eraklient-hero {
        min-height: 420px;
    }
    .eraklient-hero__btns {
        flex-direction: column;
    }
}

/* =====================================================
   KAMPAANIALEHT — Tagasiside #353 (Maili)
   ===================================================== */
.kampaania-tingimused {
    max-width: 720px;
    margin: 0 auto;
    list-style: none;
    padding: var(--space-xl) var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
}
.kampaania-tingimused li {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.0625rem;
    line-height: 1.5;
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kampaania-tingimused li:last-child {
    border-bottom: 0;
}
.kampaania-tingimused li svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

/* Kampaania showcase'id: ühtne pildikõrgus + tekst keskel (vältida tasakaalutust) */
.kampaania-showcase {
    align-items: center;
}
.kampaania-showcase .product-showcase-image {
    min-height: 0;
    height: 400px;
}
/* Hero "Küsi pakkumist" nupp eraldatud kehtivuse-tekstist */
.page-hero-desc .btn-primary {
    margin-top: var(--space-xs);
}

/* Kampaania bänner — Tagasiside #353: ainult pilt, tekst on pildi sees.
   padding-top = nav kõrgus, et fikseeritud menüü pilti ei kataks. */
.kampaania-banner {
    padding-top: var(--nav-height);
    background-color: var(--color-dark);
}
.kampaania-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

/* Kampaania bänneri-alune tekstiplokk */
.kampaania-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.kampaania-intro__title {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.2;
    margin: 0 0 var(--space-md);
    letter-spacing: -0.01em;
}
.kampaania-intro__lead {
    font-size: 1.15rem;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 0 var(--space-lg);
}
.kampaania-intro__period {
    /* Tagasiside #353-follow-up: kehtivus omaette real, nupp keskele alla */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin: 0 0 var(--space-xl);
}
.kampaania-intro__period svg {
    color: var(--color-primary);
}

/* Tagasiside #385 (Maili, 31.05.2026): diagramm-tüüpi showcase-pilt täies ulatuses (ei kärbi servi/teksti) */
.product-showcase-image--contain { background: #fff; }
.product-showcase-image--contain img { object-fit: contain !important; padding: 16px; }
.product-showcase:hover .product-showcase-image--contain img { transform: none; }