/* ==========================================================================
   Ehitusgrupp — technical / blueprint construction-company design.
   Ported from a Tailwind-CDN demo (utility classes + inline design tokens).
   The token set below reproduces those tokens as real custom properties, and
   every section becomes a semantic class — no Tailwind at runtime.
   ========================================================================== */

:root {
  /* brand (palette-overridable — see template.json) */
  --ap-primary:            #0d1a82;
  --ap-primary-d:          #0a1466;
  --ap-primary-fixed:      #dbe3ff;
  --ap-on-primary-fixed:   #0d1a82;
  --ap-on-primary:         #ffffff;

  /* surfaces */
  --ap-surface:            #f8f9fa;
  --ap-surface-lowest:     #ffffff;
  --ap-surface-low:        #f5f5f9;
  --ap-surface-high:       #e8e8ec;
  --ap-surface-highest:    #e2e2e6;
  --ap-inverse-surface:    #1b1b1f;
  --ap-inverse-on-surface: #f2f0f4;
  --ap-inverse-primary:    #a6c8ff;

  --ap-ink:                #1b1b1f;
  --ap-muted:              #44474f;
  --ap-outline:            #74777f;
  --ap-outline-variant:    #c4c6d0;
  --ap-error:              #ba1a1a;

  /* type */
  --ap-font-display: 'Archivo Narrow', 'Inter', sans-serif;
  --ap-font-body:    'Inter', sans-serif;

  /* geometry */
  --ap-radius:      2px;
  --ap-radius-lg:   4px;
  --ap-container:   1280px;
  --ap-gap:         24px;
  --ap-pad-m:       16px;   /* margin-mobile */
  --ap-pad-d:       64px;   /* margin-desktop */
  --ap-section-pad: 96px;
}

@media (max-width: 900px) { :root { --ap-section-pad: 64px; } }

/* ── Base ─────────────────────────────────────────────────────────────────── */
/* No color:inherit here — every link context below sets its own explicit
   color, and "a" in the selector gives this more specificity than a lone
   button class (e.g. .ap-btn--primary), which silently overrode them. */
.ap-grid-bg a { text-decoration: none; }
.ap-grid-bg {
  background-color: var(--ap-surface);
  background-image:
    linear-gradient(to right, rgba(26,28,30,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,28,30,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  color: var(--ap-ink);
  font-family: var(--ap-font-body);
}
.cms-block--ap-navbar, .cms-block--ap-footer { display: block; }

.ap-container { max-width: var(--ap-container); margin: 0 auto; padding: 0 var(--ap-pad-m); }
@media (min-width: 900px) { .ap-container { padding: 0 var(--ap-pad-d); } }

.ap-eyebrow {
  display: flex; align-items: center; gap: var(--ap-gap-xs, 16px);
  font: 500 12px/1.2 var(--ap-font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ap-primary); margin-bottom: 24px;
}
.ap-eyebrow::before { content: ''; width: 48px; height: 2px; background: var(--ap-primary); flex-shrink: 0; }
.ap-eyebrow--on-dark { color: var(--ap-inverse-on-surface); }
.ap-eyebrow--on-dark::before { background: var(--ap-inverse-on-surface); }

.ap-h1 {
  font: 700 clamp(2.1rem, 5vw + 1rem, 4.5rem)/1.1 var(--ap-font-display);
  letter-spacing: -.02em; text-transform: uppercase; margin: 0;
}
.ap-h2 {
  font: 700 clamp(1.9rem, 3vw + 1rem, 3rem)/1.15 var(--ap-font-display);
  letter-spacing: -.015em; text-transform: uppercase; margin: 0;
}
.ap-h3 {
  font: 600 clamp(1.35rem, 1.4vw + 1rem, 1.75rem)/1.3 var(--ap-font-display);
  color: var(--ap-ink); margin: 0;
}
.ap-lead {
  font: 400 18px/1.6 var(--ap-font-body); color: var(--ap-muted); max-width: 42em;
  border-left: 4px solid var(--ap-primary); padding-left: 24px;
}
.ap-body { font: 400 16px/1.6 var(--ap-font-body); color: var(--ap-muted); }
h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; font: 700 14px/1.4 var(--ap-font-body); letter-spacing: .05em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.ap-btn--primary { background: var(--ap-primary); color: var(--ap-on-primary); border-color: var(--ap-primary); }
.ap-btn--primary:hover { background: var(--ap-primary-d); border-color: var(--ap-primary-d); }
.ap-btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.ap-btn--outline-light:hover { background: #fff; color: var(--ap-primary); }
.ap-btn--outline { background: transparent; color: var(--ap-primary); border-color: var(--ap-primary); }
.ap-btn--outline:hover { background: var(--ap-primary); color: var(--ap-on-primary); }
.ap-btn--sm { padding: 10px 20px; }
.ap-btn svg.ic { flex-shrink: 0; }

.ap-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px/1.4 var(--ap-font-body); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ap-ink); transition: color .2s;
}
.ap-textlink:hover { color: var(--ap-primary); }
.ap-textlink svg.ic { transition: transform .2s; }
.ap-textlink:hover svg.ic { transform: translateX(3px); }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.ap-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,249,250,.92); backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(196,198,208,.3);
}
.ap-nav__bar { max-width: var(--ap-container); margin: 0 auto; padding: 0 var(--ap-pad-m); height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 900px) { .ap-nav__bar { padding: 0 var(--ap-pad-d); height: 96px; } }
.ap-logo { display: flex; align-items: center; }
.ap-logo img { height: 48px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
@media (min-width: 900px) { .ap-logo img { height: 56px; } }
.ap-logo:not(:has(img)) { font: 700 20px var(--ap-font-display); text-transform: uppercase; color: var(--ap-primary); }

.ap-nav__links { display: none; align-items: center; gap: 24px; }
.ap-nav__links a {
  font: 600 14px/1.4 var(--ap-font-body); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ap-ink); padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.ap-nav__links a:hover { color: var(--ap-primary); }
.ap-nav__links a.is-active { color: var(--ap-primary); border-color: var(--ap-primary); }
.ap-nav__cta { display: none; }
@media (min-width: 1180px) { .ap-nav__links { display: flex; gap: 32px; } .ap-nav__cta { display: inline-flex; } }

.ap-burger {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; color: var(--ap-ink); flex-shrink: 0;
}
@media (min-width: 1180px) { .ap-burger { display: none; } }
.ap-burger .ic-close { display: none; }
.ap-mobile-panel {
  position: fixed; inset: 80px 0 0 0; z-index: 49; background: var(--ap-surface);
  padding: 32px var(--ap-pad-m); display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ap-mobile-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* :not(.ap-btn) — the CTA at the bottom of this panel is a real button, and
   this selector's specificity (class + element) would otherwise beat
   .ap-btn--primary's single class and repaint its text back to ink. */
.ap-mobile-panel a:not(.ap-btn) {
  padding: 16px 0; border-bottom: 1px solid rgba(196,198,208,.2);
  font: 600 24px var(--ap-font-display); text-transform: uppercase; color: var(--ap-ink);
}
.ap-mobile-panel a.is-active:not(.ap-btn) { color: var(--ap-primary); }
.ap-mobile-panel .ap-btn { margin-top: 24px; justify-content: center; }
body.ap-nav-open { overflow: hidden; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ap-hero {
  position: relative; min-height: 90vh; display: flex; align-items: center;
  padding: 96px var(--ap-pad-m); overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
}
@media (min-width: 900px) { .ap-hero { padding: 0 var(--ap-pad-d); } }
.ap-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ap-surface-highest); }
.ap-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateX(100%); transition: transform 1.2s ease; }
.ap-hero__bg img.is-current { transform: translateX(0); }
.ap-hero__bg img.is-prev { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .ap-hero__bg img { transition: none; } }
.ap-hero__scrim { position: absolute; inset: 0; background: rgba(27,27,31,.3); mix-blend-mode: multiply; }
.ap-hero__gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,26,130,.25), rgba(13,26,130,.08) 60%, transparent); }
.ap-hero__content { position: relative; z-index: 10; max-width: var(--ap-container); margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.ap-hero__content .ap-eyebrow, .ap-hero__content .ap-h1, .ap-hero__content .ap-lead { color: #fff; text-shadow: 0 2px 16px rgba(13,26,130,.5), 0 1px 4px rgba(0,0,0,.35); }
.ap-hero__content .ap-eyebrow::before { background: #fff; }
.ap-hero__content .ap-lead { border-color: #fff; }
.ap-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── Stats ────────────────────────────────────────────────────────────────── */
.ap-stats {
  padding: var(--ap-section-pad) var(--ap-pad-m) 96px; margin-top: -48px; position: relative; z-index: 10;
  background: var(--ap-surface); border-bottom: 2px solid rgba(196,198,208,.2);
  clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 900px) { .ap-stats { padding-left: var(--ap-pad-d); padding-right: var(--ap-pad-d); } }
.ap-stats__grid { max-width: var(--ap-container); margin: 48px auto 0; display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 640px) { .ap-stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--ap-gap); } }
.ap-stat { display: flex; flex-direction: column; border-left: 2px solid var(--ap-primary); padding-left: 24px; }
.ap-stat__num { font: 700 48px/1.2 var(--ap-font-display); color: var(--ap-ink); }
.ap-stat__label { font: 500 12px/1.2 var(--ap-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ap-muted); margin-top: 8px; }

/* ── Section shell ────────────────────────────────────────────────────────── */
.ap-section { padding: var(--ap-section-pad) var(--ap-pad-m); border-bottom: 2px solid rgba(196,198,208,.2); }
@media (min-width: 900px) { .ap-section { padding-left: var(--ap-pad-d); padding-right: var(--ap-pad-d); } }
.ap-section--tint { background: var(--ap-surface-lowest); }
.ap-section--dark { background: var(--ap-inverse-surface); border-bottom: none; }
.ap-section__head { display: flex; flex-direction: column; gap: 32px; margin-bottom: 64px; }
@media (min-width: 900px) { .ap-section__head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

/* ── About teaser (homepage) ─────────────────────────────────────────────── */
.ap-about-teaser { max-width: var(--ap-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); align-items: center; }
@media (min-width: 900px) { .ap-about-teaser { grid-template-columns: 1fr 1fr; } }
.ap-about-teaser__media { position: relative; height: 320px; background: var(--ap-surface-high); overflow: hidden; order: 2; clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
@media (min-width: 900px) { .ap-about-teaser__media { height: 440px; order: 1; } }
.ap-about-teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.ap-about-teaser__body { display: flex; flex-direction: column; gap: 24px; order: 1; }
@media (min-width: 900px) { .ap-about-teaser__body { order: 2; } }
.ap-about-teaser__figs { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 8px; }
.ap-fig { display: flex; flex-direction: column; }
.ap-fig__num { font: 700 clamp(1.8rem, 2vw + 1rem, 2.5rem)/1 var(--ap-font-display); color: var(--ap-primary); }
.ap-fig__label { font: 600 14px/1.4 var(--ap-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ap-muted); margin-top: 4px; }

/* ── Card grids (services / work preview) ────────────────────────────────── */
.ap-card-grid { max-width: var(--ap-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); }
@media (min-width: 640px) { .ap-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ap-card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.ap-service-tile { display: block; }
.ap-service-tile__img { width: 100%; aspect-ratio: 4/3; overflow: hidden; position: relative; border: 1px solid rgba(196,198,208,.5); margin-bottom: 24px; }
.ap-service-tile__img::after { content: ''; position: absolute; inset: 0; background: rgba(13,26,130,.2); opacity: 0; transition: opacity .2s; z-index: 1; }
.ap-service-tile:hover .ap-service-tile__img::after { opacity: 1; }
.ap-service-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ap-service-tile:hover .ap-service-tile__img img { transform: scale(1.05); }
.ap-service-tile__title { font: 600 24px/1.3 var(--ap-font-display); color: var(--ap-ink); margin-bottom: 12px; border-left: 2px solid var(--ap-primary); padding-left: 16px; }
.ap-service-tile__desc { font: 400 16px/1.6 var(--ap-font-body); color: var(--ap-muted); max-width: 32em; }

.ap-work-tile { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; border: 1px solid rgba(196,198,208,.4); }
.ap-work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease-out; }
.ap-work-tile:hover img { transform: scale(1.05); }
.ap-work-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,27,31,.9), rgba(27,27,31,.1) 60%, transparent); }
.ap-work-tile__label { position: absolute; left: 24px; bottom: 24px; z-index: 1; font: 600 24px var(--ap-font-display); text-transform: uppercase; color: #fff; }

/* ── Why-us (dark two-column) ─────────────────────────────────────────────── */
.ap-why { position: relative; overflow: hidden; background: var(--ap-inverse-surface); padding: var(--ap-section-pad) var(--ap-pad-m); }
@media (min-width: 900px) { .ap-why { padding-left: var(--ap-pad-d); padding-right: var(--ap-pad-d); } }
.ap-why__bg { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; }
.ap-why__grid { position: relative; z-index: 1; max-width: var(--ap-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; }
@media (min-width: 900px) { .ap-why__grid { grid-template-columns: 1fr 1fr; } }
.ap-why__title { color: var(--ap-primary-fixed); margin-bottom: 32px; }
.ap-why__points { display: flex; flex-direction: column; gap: 24px; }
.ap-why__point { display: flex; align-items: flex-start; gap: 16px; }
.ap-why__point svg.ic { color: var(--ap-inverse-primary); flex-shrink: 0; margin-top: 4px; width: 28px; height: 28px; }
.ap-why__point h4 { font: 700 18px var(--ap-font-display); color: #fff; margin-bottom: 6px; }
.ap-why__point p { font: 400 15px/1.6 var(--ap-font-body); color: rgba(226,226,230,.8); margin: 0; }
.ap-why__panel { background: var(--ap-surface-highest); padding: 32px; border: 1px solid rgba(196,198,208,.3); position: relative; overflow: hidden; }
@media (min-width: 900px) { .ap-why__panel { padding: 48px; } }
.ap-why__panel h3 { margin-bottom: 16px; }
.ap-why__panel p { margin-bottom: 32px; }
.ap-why__panel .ap-btn { width: 100%; justify-content: center; }
@media (min-width: 900px) { .ap-why__panel .ap-btn { width: auto; } }

/* ── Final CTA (light) ────────────────────────────────────────────────────── */
.ap-cta { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; max-width: var(--ap-container); margin: 0 auto; }
.ap-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding-top: 8px; }
.ap-cta__phone { display: flex; align-items: center; gap: 12px; font: 700 14px/1.4 var(--ap-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ap-ink); }
.ap-cta__phone svg.ic { color: var(--ap-primary); width: 24px; height: 24px; }
.ap-cta__phone:hover { color: var(--ap-primary); }
.ap-cta--dark-band { background: var(--ap-inverse-surface); position: relative; overflow: hidden; padding: 80px var(--ap-pad-m); border-bottom: none; text-align: center; }
@media (min-width: 900px) { .ap-cta--dark-band { padding-left: var(--ap-pad-d); padding-right: var(--ap-pad-d); } }
.ap-cta--dark-band__grid { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 32px 32px; }
.ap-cta--dark-band__inner { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.ap-cta--dark-band h2 { color: #fff; margin-bottom: 24px; font-size: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); }
.ap-cta--dark-band p { color: rgba(163,168,180,1); margin-bottom: 40px; font-size: 18px; }

/* ── Page intro (teenused / tehtud-tood / meist / kontakt) ───────────────── */
.ap-page-header { position: relative; padding: 80px var(--ap-pad-m) 64px; background: var(--ap-surface-lowest); border-bottom: 2px solid rgba(196,198,208,.2); overflow: hidden; }
@media (min-width: 900px) { .ap-page-header { padding: 80px var(--ap-pad-d) 80px; } }
.ap-page-header__bg { position: absolute; inset: 0; opacity: .03; pointer-events: none; background-image: linear-gradient(#1a1c1e 1px, transparent 1px), linear-gradient(90deg, #1a1c1e 1px, transparent 1px); background-size: 64px 64px; }
.ap-page-header__inner { position: relative; z-index: 1; max-width: var(--ap-container); margin: 0 auto; }
.ap-page-header .ap-h1 { margin-bottom: 24px; }

/* ── Services grid (full, on /teenused) ──────────────────────────────────── */
.ap-svc-grid { max-width: var(--ap-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); }
@media (min-width: 640px) { .ap-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ap-svc-grid { grid-template-columns: repeat(3, 1fr); } }
.ap-svc-card { display: flex; flex-direction: column; background: var(--ap-surface-lowest); border: 2px solid rgba(196,198,208,.2); overflow: hidden; scroll-margin-top: 96px; transition: background-color .3s; }
.ap-svc-card:hover { background: var(--ap-surface-high); }
.ap-svc-card__img { width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.ap-svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ap-svc-card:hover .ap-svc-card__img img { transform: scale(1.05); }
.ap-svc-card__body { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.ap-svc-card__body svg.ic { color: var(--ap-primary); margin-bottom: 16px; width: 40px; height: 40px; }
.ap-svc-card__body h3 { margin-bottom: 16px; }
.ap-svc-card__body p { margin: 0; }

/* ── Before / after slider ────────────────────────────────────────────────── */
.ap-ba { position: relative; overflow: hidden; background: #1b1b1f; touch-action: pan-y; border: 1px solid rgba(196,198,208,.4); }
.ap-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ap-ba-before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.ap-ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.ap-ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.ap-ba-handle svg.ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #1b1b1f; }
.ap-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ap-ba-tag { position: absolute; top: 12px; z-index: 2; padding: 5px 12px; font: 600 11px/1.2 var(--ap-font-body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(15,15,18,.6); pointer-events: none; }
.ap-ba-tag.is-before { left: 12px; }
.ap-ba-tag.is-after { right: 12px; }
.ap-ba-group { display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); margin-top: var(--ap-gap); }
@media (min-width: 700px) { .ap-ba-group { grid-template-columns: 1fr 1fr; } }
.ap-ba-lead { margin-bottom: var(--ap-gap); }

/* ── Gallery groups (tehtud tööd) ────────────────────────────────────────── */
.ap-gallery { max-width: var(--ap-container); margin: 0 auto var(--ap-section-pad); }
.ap-gallery__title { margin-bottom: 8px; border-left: 4px solid var(--ap-primary); padding-left: 16px; }
.ap-gallery__desc { margin: 8px 0 32px; max-width: 48em; }
.ap-gallery__grid { display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); }
@media (min-width: 640px) { .ap-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ap-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
.ap-gallery__item { display: block; aspect-ratio: 4/3; overflow: hidden; border: 1px solid rgba(196,198,208,.4); position: relative; background: var(--ap-surface-high); }
.ap-gallery__item::after { content: ''; position: absolute; inset: 0; background: rgba(13,26,130,.2); mix-blend-mode: multiply; opacity: 0; transition: opacity .2s; }
.ap-gallery__item:hover::after { opacity: 1; }
.ap-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease-out; }
.ap-gallery__item:hover img { transform: scale(1.05); }

/* ── Page-level CTA footer strip (bottom of teenused / tehtud tood) ─────── */
.ap-inline-cta { margin-top: var(--ap-section-pad); text-align: center; border-top: 1px solid rgba(196,198,208,.3); padding-top: 64px; }
.ap-inline-cta h4 { margin-bottom: 24px; }
.ap-inline-cta p { max-width: 40em; margin: 0 auto 32px; }

/* ── About page: stats + photo ───────────────────────────────────────────── */
.ap-about-hero { max-width: var(--ap-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); align-items: center; }
@media (min-width: 900px) { .ap-about-hero { grid-template-columns: 1fr 1fr; } }
.ap-about-hero__body { display: flex; flex-direction: column; gap: 24px; }
.ap-about-hero__figs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.ap-about-hero__rule { height: 1px; background: rgba(196,198,208,.3); width: 100%; }
.ap-about-hero__media { position: relative; height: 400px; background: var(--ap-inverse-surface); overflow: hidden; clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
@media (min-width: 900px) { .ap-about-hero__media { height: 600px; } }
.ap-about-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ap-about-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,27,31,.8), rgba(27,27,31,.05) 60%, transparent); pointer-events: none; }
.ap-about-hero__corner { position: absolute; width: 56px; height: 56px; border-color: var(--ap-primary-fixed); }
.ap-about-hero__corner--tl { top: 32px; left: 32px; border-top: 4px solid; border-left: 4px solid; }
.ap-about-hero__corner--br { bottom: 32px; right: 32px; border-bottom: 4px solid; border-right: 4px solid; }
.ap-about-hero__tag { position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 1; font: 500 12px var(--ap-font-body); letter-spacing: .3em; text-transform: uppercase; color: #fff; }

.ap-values { max-width: var(--ap-container); margin: 0 auto; }
.ap-values__head { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.ap-values__head svg.ic { color: var(--ap-primary); }
.ap-values__rule { height: 1px; background: rgba(196,198,208,.3); margin-bottom: 48px; }
.ap-values__grid { display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); }
@media (min-width: 900px) { .ap-values__grid { grid-template-columns: repeat(3, 1fr); } }
.ap-value-card { background: var(--ap-surface-lowest); padding: 32px; display: flex; flex-direction: column; gap: 16px; transition: background-color .3s; clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.ap-value-card:hover { background: var(--ap-surface-high); }
.ap-value-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--ap-primary); color: #fff; clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.ap-value-card h3 { margin: 0; }
.ap-value-card p { margin: 0; }

.ap-trust { max-width: var(--ap-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); align-items: center; }
@media (min-width: 900px) { .ap-trust { grid-template-columns: 7fr 5fr; } }
.ap-trust__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ap-trust__head svg.ic { color: var(--ap-primary); }
.ap-trust__text { margin-bottom: 32px; }
.ap-trust__fig { margin-bottom: 32px; }
.ap-trust__rule { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; border-top: 1px solid rgba(196,198,208,.3); }
@media (min-width: 700px) { .ap-trust__rule { flex-direction: row; } }
.ap-trust__item { display: flex; align-items: center; gap: 16px; }
.ap-trust__item-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--ap-primary); display: flex; align-items: center; justify-content: center; background: var(--ap-surface-lowest); color: var(--ap-primary); }
.ap-trust__cert { display: block; position: relative; overflow: hidden; border: 1px solid rgba(196,198,208,.4); clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.ap-trust__cert img { width: 100%; height: auto; display: block; transition: transform .5s; }
.ap-trust__cert:hover img { transform: scale(1.05); }
.ap-trust__cert-cta { position: absolute; right: 16px; bottom: 16px; background: rgba(248,249,250,.92); color: var(--ap-ink); font: 700 12px/1.4 var(--ap-font-body); letter-spacing: .05em; text-transform: uppercase; padding: 8px 16px; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .2s; }
.ap-trust__cert:hover .ap-trust__cert-cta { opacity: 1; }

/* ── Contact page ─────────────────────────────────────────────────────────── */
.ap-contact-grid { max-width: var(--ap-container); margin: 0 auto; padding-bottom: var(--ap-section-pad); display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); }
@media (min-width: 1024px) { .ap-contact-grid { grid-template-columns: 5fr 7fr; } }
.ap-contact-panel { background: var(--ap-surface-lowest); padding: 32px; border: 1px solid rgba(196,198,208,.5); }
.ap-contact-panel h2 { margin-bottom: 32px; border-bottom: 2px solid rgba(196,198,208,.3); padding-bottom: 16px; }
.ap-contact-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.ap-contact-item svg.ic { color: var(--ap-primary); flex-shrink: 0; width: 28px; height: 28px; }
.ap-contact-item__label { display: block; font: 500 12px var(--ap-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ap-muted); margin-bottom: 4px; }
.ap-contact-item__value { font: 400 18px/1.5 var(--ap-font-body); color: var(--ap-ink); }
a.ap-contact-item__value:hover { color: var(--ap-primary); }
.ap-contact-panel__legal { padding-top: 24px; border-top: 1px solid rgba(196,198,208,.3); }
.ap-contact-panel__legal span { display: block; font-size: 15px; }
.ap-contact-panel__legal span:first-child { color: var(--ap-ink); }
.ap-contact-panel__legal span:not(:first-child) { color: var(--ap-muted); }
.ap-maps-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ap-primary); font-size: 14px; margin-top: 8px; }
.ap-maps-link:hover { text-decoration: underline; }

.ap-form-panel { background: var(--ap-surface-lowest); padding: 32px; border: 1px solid rgba(196,198,208,.5); }
@media (min-width: 900px) { .ap-form-panel { padding: 48px; } }
.ap-form-panel h2 { margin-bottom: 32px; border-bottom: 2px solid rgba(196,198,208,.3); padding-bottom: 16px; }
.ap-form-row { display: flex; flex-direction: column; margin-bottom: 32px; }
.ap-form-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 640px) { .ap-form-grid { grid-template-columns: 1fr 1fr; } }
.ap-form-row label { font: 500 12px var(--ap-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ap-muted); margin-bottom: 8px; }
.ap-form-row input, .ap-form-row textarea {
  width: 100%; background: var(--ap-surface-low); border: 2px solid var(--ap-outline-variant);
  padding: 12px 16px; font: 400 17px/1.5 var(--ap-font-body); color: var(--ap-ink);
  transition: border-color .2s, box-shadow .2s;
}
.ap-form-row input::placeholder, .ap-form-row textarea::placeholder { color: rgba(68,71,79,.5); }
.ap-form-row input:focus, .ap-form-row textarea:focus { outline: none; border-color: var(--ap-primary); box-shadow: 0 0 0 3px rgba(13,26,130,.15); }
.ap-form-row.has-error input, .ap-form-row.has-error textarea { border-color: var(--ap-error); }
.ap-form-error { color: var(--ap-error); font-size: 13px; margin-top: 6px; }
.ap-form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(196,198,208,.3); }
.ap-form-foot p { font-size: 14px; color: var(--ap-muted); max-width: 28em; margin: 0; }
.ap-form-status { margin-bottom: 24px; padding: 16px; font-size: 14px; }
.ap-form-status.is-ok { background: rgba(13,26,130,.08); color: var(--ap-ink); }
.ap-form-status.is-error { background: #ffdad6; color: #410002; }
.ap-honeypot { position: absolute; left: -9999px; opacity: 0; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ap-footer { background: var(--ap-inverse-surface); color: var(--ap-primary-fixed); padding: 80px var(--ap-pad-m) 40px; border-top: 4px solid var(--ap-primary); }
@media (min-width: 900px) { .ap-footer { padding-left: var(--ap-pad-d); padding-right: var(--ap-pad-d); } }
.ap-footer__grid { max-width: var(--ap-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--ap-gap); }
@media (min-width: 900px) { .ap-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.ap-footer__brand { display: flex; flex-direction: column; gap: 24px; }
.ap-footer__logo img { height: 56px; width: auto; object-fit: contain; }
.ap-footer__logo:not(:has(img)) { font: 700 22px var(--ap-font-display); text-transform: uppercase; color: #fff; }
.ap-footer__desc { color: rgba(163,168,180,1); max-width: 22em; margin: 0; font-size: 15px; }
.ap-footer__col { display: flex; flex-direction: column; gap: 12px; }
.ap-footer__col-label { font: 500 12px var(--ap-font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(163,168,180,1); margin-bottom: 8px; }
.ap-footer__col a { color: rgba(163,168,180,1); transition: color .2s; }
.ap-footer__col a:hover { color: var(--ap-primary-fixed); }
.ap-footer__badge img { height: 128px; width: auto; object-fit: contain; }
/* grid-column spans every column — without it this sits inside the 4-column
   grid above as an ordinary item and only gets column 1's width, cramming the
   legal line and the credit into a narrow strip instead of the full footer. */
/* margin-top only — auto side margins (a leftover from before this was a grid
   item) were absorbing the grid's stretch space, shrinking this to content
   width and centering it instead of spanning the full row. */
.ap-footer__bottom { grid-column: 1 / -1; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(196,198,208,.2); display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
@media (min-width: 900px) { .ap-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.ap-footer__legal { color: rgba(163,168,180,1); font: 500 12px var(--ap-font-body); letter-spacing: .05em; }

.footer-credit { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-decoration: none; text-align: right; }
.footer-credit-name {
  font-family: var(--ap-font-display); font-weight: 700; font-size: 1.25rem;
  background-image: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent),
                     linear-gradient(90deg, var(--ap-primary), var(--ap-inverse-primary) 45%, #ffffff 60%, var(--ap-primary));
  background-size: 200% 100%, 100% 100%;
  background-position: -150% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position .8s ease;
}
.footer-credit-sub { font-size: .72rem; letter-spacing: .05em; color: rgba(255,255,255,.55); }
.footer-credit:hover .footer-credit-name, .footer-credit:focus-visible .footer-credit-name { background-position: 150% 0, 0 0; }
@media (prefers-reduced-motion: reduce) { .footer-credit-name { transition: none; } }

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

/* ── Skip link (shared pattern) ───────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ap-primary); color: #fff; padding: 12px 20px; z-index: 100; }
.skip-link:focus { left: 16px; top: 16px; }