/* ==========================================================================
   SMARTER STEP — Premium Design System
   Feminine power · Mature · Deep · Clear
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE — refreshed widget layouts (orientation 2-col split, vision intro,
   testimonials intro, minimal footer). Loaded first; specific overrides below.
   ========================================================================== */

/* ─── Orientation: centered, stacked (title row → description row) ─── */
.orient-split { padding: clamp(1rem, 2.5vw, 1.75rem) 0; background: var(--cream); }
.orient-split-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.25rem;
  max-width: 880px;
  margin: 0 auto;
}
/* Title block */
.orient-split .orient-head {
  max-width: 820px;
  margin: 0;
}
.orient-split .orient-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1.4rem;
}
.orient-split .orient-head .eyebrow::before,
.orient-split .orient-head .eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.orient-split .orient-head h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  max-width: 820px;
  margin: 0;
}
/* Description block */
.orient-split .orient-body {
  max-width: 760px;
  margin: 0;
}
.orient-split .orient-body p {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.7;
  color: var(--text-soft);
  font-weight: 400;
  margin: 0 0 1.6rem;
}
.orient-split .orient-body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .orient-split-grid { gap: 1.75rem; }
}
@media (max-width: 560px) {
  .orient-split .orient-head .eyebrow::before,
  .orient-split .orient-head .eyebrow::after { width: 20px; }
}

/* ─── Vision: centered minimal intro (dark luxury — improved readability) ─── */
.vision-intro {
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
  background: linear-gradient(180deg, #182236 0%, #111a2d 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.vision-intro::before {
  content: '';
  position: absolute;
  right: -120px; top: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.vision-intro::after {
  content: '';
  position: absolute;
  left: -100px; bottom: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}
.vision-intro-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.vision-intro .eyebrow {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
  font-weight: 600;
  margin-bottom: 1.75rem;
}
.vision-intro h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.8vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 1.5rem;
  letter-spacing: -0.005em;
}
.vision-intro p {
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 300;
  max-width: 640px;
  margin: 0 auto 1rem;
}
.vision-intro-divider {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--gold);
  margin: 2.5rem auto 0;
  opacity: 1;
  border-radius: 2px;
}
@media (max-width: 900px) {
  .vision-intro p { font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, 0.95); }
}
@media (max-width: 560px) {
  .vision-intro h2 { font-size: clamp(26px, 7vw, 34px); }
}

/* ─── Testimonials intro paragraph ─── */
.testimonials-intro {
  margin: 1.25rem auto 0;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.85;
  color: var(--text-soft);
  font-weight: 400;
  max-width: none;
  text-align: center;
  white-space: nowrap;
}
/* Brown (brand) eyebrow for the testimonials head, not green */
.testimonials-head .eyebrow { color: var(--brand); }
.testimonials-head .eyebrow::before,
.testimonials-head .eyebrow::after { background: var(--brand); }
@media (max-width: 768px) {
  .testimonials-intro { white-space: normal; max-width: 620px; }
}

/* ─── Footer minimal layout ─── */
.footer-minimal { padding: 5rem 0 2.5rem; background: var(--midnight); color: rgba(238, 242, 248, 0.7); }
.footer-min-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.footer-minimal .footer-brand .logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer-minimal .footer-brand .logo-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.footer-minimal .logo-tag {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.25rem;
}
.footer-minimal .footer-company {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--cream);
  margin: 0 0 0.2rem;
}
.footer-minimal .footer-code {
  font-size: 13px;
  color: rgba(238, 242, 248, 0.45);
  letter-spacing: 0.04em;
  margin: 0;
}
.footer-minimal h5 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 1rem;
}
.footer-minimal ul { list-style: none; padding: 0; margin: 0; }
.footer-minimal li { margin-bottom: 0.6rem; }
.footer-minimal a {
  color: rgba(238, 242, 248, 0.75);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.3s ease;
}
.footer-minimal a:hover { color: var(--gold); }
.footer-minimal .footer-social { display: flex; gap: 0.75rem; }
.footer-minimal .footer-social li { margin: 0; }
.footer-minimal .footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(238, 242, 248, 0.15);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  color: rgba(238, 242, 248, 0.7);
}
.footer-minimal .footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--midnight);
}
.footer-bottom-minimal {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(238, 242, 248, 0.08);
  /* Was 13px at 0.4 alpha — around 2.6:1 on the navy footer. */
  font-size: var(--fs-meta);
  color: rgba(238, 242, 248, 0.72);
  text-align: center;
}
@media (max-width: 900px) {
  .footer-min-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 520px) {
  .footer-min-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-minimal { padding: 3.5rem 0 2rem; }
}

/* ─── Section flow: dark Pasirinkimas → cream services transition ─── */
.vision-intro + .services { padding-top: 5rem; }
@media (max-width: 900px) { .vision-intro + .services { padding-top: 3.5rem; } }

/* ─── Subtle hover lift on service cards (homepage) ─── */
.service-item {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 31, 58, 0.08);
}



/* ---------- TOKENS ---------- */
:root {
  /* Color palette — deep blues with sage green accents (per client) */
  --ink: #0a1628;
  --midnight: #0f1f3a;
  --navy: #1a2f52;
  --ocean: #2a4670;
  --steel: #4a6391;
  --mist: #8da4c4;
  --sky: #c5d4e8;
  --pearl: #eef2f8;
  --paper: #f8f6f1;
  --cream: #faf8f3;

  /* Sage green accent system */
  --sage-deep: #933C45;
  --sage: #6d8a7c;
  --sage-soft: #9eb3a5;
  --sage-mist: #d4ddd4;

  /* Gold accent for premium touches */
  --gold: #c9a961;
  --gold-soft: #e0c98a;
  /* Gold is a background/decoration colour. As text on cream it measures about
     2:1, so anything meant to be *read* in gold uses this deeper tone (~4.9:1)
     instead. Markers, rules and numerals keep the bright --gold. */
  --gold-ink: #8a6a1c;

  /* Brand accent — matches the logo mark */
  --brand: #933C45;
  --brand-deep: #7c323a;
  --brand-soft: #c46a73; /* lightened brand brown for legibility on dark backgrounds */

  /* Functional */
  --bg: var(--cream);
  --bg-deep: var(--ink);
  --text: var(--ink);
  /* Body copy ink. Darkened from #3a4a63 so running text sits in the same
     tonal family as the header nav instead of reading as washed-out grey. */
  --text-soft: #22314b;
  --text-mute: #22314b;
  --line: #d8d2c4;
  --line-soft: rgba(26, 47, 82, 0.08);

  /* Typography */
  --serif: 'Playfair Display', 'EB Garamond', Georgia, serif;
  --sans: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* ── Body-copy scale (single source of truth) ──────────────────────
     Body text previously ran 14 / 14.5 / 15 / 15.5 / 16 / 16.5 / 17 / 17.5px
     at weights 300 and 400 across three different inks, so Pradžia, Apie mane
     and Paslaugos each read as a different typeface. Every running-text rule
     now resolves to one of these three steps. */
  --fs-body: 17px;      /* all standard running text */
  --fs-lead: 18px;      /* section intro sitting under a heading */
  --fs-label: 12.5px;   /* uppercase eyebrow / section label */
  --fs-meta: 15px;      /* attribution, consent, filter pills — the floor */
  --fw-body: 400;       /* never 300 — hairline weight reads as low contrast */
  --lh-body: 1.75;
  --lh-compact: 1.6;

  /* Scale */
  --container: 1380px;
  --container-narrow: 920px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* overflow-x: clip hides horizontal breakout overflow WITHOUT turning <html>
   into a scroll container (which broke vertical scrolling on some pages).
   The viewport keeps its native vertical scroll. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip (not hidden) prevents a 2nd scroll container — html is the sole
     scrollbar. hidden here + hidden on html caused a double scrollbar. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; }

/* ---------- TYPOGRAPHY ---------- */
.font-serif { font-family: var(--serif); }
.font-sans { font-family: var(--sans); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

.italic { font-style: italic; }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--sage);
  display: inline-block;
}

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
section { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0.85rem 0;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line-soft);
}
/* Scroll state intentionally identical — no height/background animation */
.nav.scrolled {
  padding: 0.85rem 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
/* Image-based custom logo (uploaded via WP Customizer) */
.logo-img {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo-img img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.logo-img:hover img { opacity: 0.85; }
@media (max-width: 900px) {
  .logo-img img { height: 48px; }
}
@media (max-width: 560px) {
  .logo-img img { height: 42px; max-width: 180px; }
}
.footer-minimal .footer-logo-img img {
  height: 52px;
  max-width: 200px;
  /* No filter — show the logo in its true colors (red mark), same as the header. */
  opacity: 1;
}
.footer-minimal .footer-logo-img { margin-bottom: 1rem; }

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.logo-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--ocean));
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.logo-mark::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 97, 0.5);
}
.logo-mark::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.logo-name { line-height: 1; }
.logo-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-top: 4px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
}
.nav-links a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  padding: 0.4rem 0;
  transition: color 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--brand); }
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* CTA button in nav */
.nav-links a.nav-cta,
.nav-cta {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: all 0.3s var(--ease);
}
.nav-links a.nav-cta:hover,
.nav-cta:hover {
  background: var(--brand);
  color: var(--cream);
  transform: translateY(-1px);
}
.nav-links a.nav-cta::after,
.nav-cta::after { display: none; }

/* ─── Submenu dropdown (desktop hover) ─── */
.nav-links li.has-children { position: relative; }
.nav-links li.has-children > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-links .submenu-caret {
  transition: transform 0.3s ease;
  opacity: 0.7;
}
.nav-links li.has-children:hover > a .submenu-caret,
.nav-links li.has-children:focus-within > a .submenu-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-links .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  list-style: none;
  padding: 0.65rem 0;
  margin: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(15, 31, 58, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
  z-index: 100;
}
.nav-links .sub-menu::before {
  content: '';
  position: absolute;
  top: -16px; left: -20px; right: -20px;
  height: 20px;
}
.nav-links li.has-children:hover > .sub-menu,
.nav-links li.has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0s;
}
.nav-links .sub-menu li { display: block; width: 100%; }
.nav-links .sub-menu a {
  display: block;
  padding: 0.7rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-links .sub-menu a::after { display: none; }
.nav-links .sub-menu a:hover {
  background: var(--paper);
  color: var(--brand);
  padding-left: 1.5rem;
}
.nav-links .sub-menu a.active {
  background: rgba(147, 60, 69, 0.08);
  color: var(--brand);
  font-weight: 500;
  position: relative;
}
.nav-links .sub-menu a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
}

/* Parent of active submenu — keep parent visually flagged */
.nav-links li.has-children > a.active {
  color: var(--brand);
}
.nav-links li.has-children > a.active::after { transform: scaleX(1); transform-origin: left; }

/* Mobile menu */
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: all 0.3s;
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--ink);
  transition: all 0.3s;
}
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }
.menu-toggle.open span { background: transparent; }
.menu-toggle.open span::before { transform: rotate(45deg); top: 0; }
.menu-toggle.open span::after { transform: rotate(-45deg); top: 0; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2rem;
  /* reset.css puts a 1px #c36 border on every <button>; variants that want
     one (.btn-ghost) re-declare it below. */
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--gold);
  color: var(--ink);
}
.btn-primary:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 21, 35, 0.22);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}
.btn-light {
  background: var(--cream);
  color: var(--ink);
}
.btn-light:hover {
  background: var(--gold);
  color: var(--ink);
}
.btn .arrow {
  transition: transform 0.4s var(--ease);
}
.btn:hover .arrow {
  transform: translateX(4px);
}

/* Text-link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: all 0.3s;
}
.link-arrow:hover {
  color: var(--sage-deep);
  border-color: var(--sage-deep);
  gap: 0.9rem;
}

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}

/* Atmospheric background */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(74, 107, 93, 0.25), transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(42, 70, 112, 0.45), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(201, 169, 97, 0.08), transparent 60%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 36px 36px;
  opacity: 0.5;
}

/* Compass element */
.hero-compass {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(700px, 75vw);
  aspect-ratio: 1;
  opacity: 0.18;
  z-index: 1;
  pointer-events: none;
  animation: rotate 220s linear infinite;
}
@keyframes rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.2s forwards;
}
.hero-eyebrow::before {
  content: '';
  width: 40px; height: 1px;
  background: var(--gold);
}
.hero h1 {
  color: var(--cream);
  font-size: clamp(34px, 6.5vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.35s forwards;
}
.hero h1 br { display: inline; }
@media (max-width: 720px) {
  .hero h1 br { display: none; }
}
.hero h1 .accent {
  font-style: normal;
  color: var(--gold-soft);
  font-weight: 300;
}
.hero-sub {
  font-size: 1.15rem;
  color: rgba(238, 242, 248, 0.78);
  max-width: 520px;
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.5s forwards;
}
.hero-quote {
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: rgba(238, 242, 248, 0.88);
  max-width: 480px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.65s forwards;
}
.hero-quote cite {
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hero-actions {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.8s forwards;
}
@media (max-width: 560px) {
  .hero-actions { gap: 0.85rem; }
}
.hero .btn-primary {
  background: var(--gold);
  color: var(--ink);
}
.hero .btn-primary:hover {
  background: var(--cream);
  color: var(--ink);
}
.hero .btn-ghost {
  border-color: rgba(238, 242, 248, 0.4);
  color: var(--cream);
}
.hero .btn-ghost:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

/* Hero portrait */
.hero-portrait {
  position: relative;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) 0.5s forwards;
}
.hero-portrait-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.hero-portrait-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Anchor to the top so any overflow is cropped from the bottom, never the head */
  object-position: 50% 0%;
  filter: brightness(0.92) contrast(1.05);
}
.hero-portrait::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px;
  right: 20px; bottom: 20px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  z-index: -1;
  opacity: 0.5;
}
.hero-stats {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(201, 169, 97, 0.4);
  padding: 1rem 0 1rem 1.25rem;
}
.hero-stat {
  font-family: var(--serif);
}
.hero-stat-num {
  font-size: 2rem;
  color: var(--gold-soft);
  line-height: 1;
  font-weight: 300;
  display: block;
}
.hero-stat-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 242, 248, 0.6);
  margin-top: 0.5rem;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll indicator */
.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 242, 248, 0.5);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1s forwards;
}
.scroll-cue::after {
  content: '';
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--gold-soft), transparent);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ==========================================================================
   ORIENTATION BLOCK — three audience cards
   ========================================================================== */
.orient {
  background: var(--cream);
  position: relative;
}
.orient-head {
  text-align: center;
  margin-bottom: 2.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.orient-head h2 {
  margin-top: 1.25rem;
}
.orient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.orient-card {
  position: relative;
  padding: 3rem 2.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.5s var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 380px;
}
.orient-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--sage-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.orient-card:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-6px);
  border-color: var(--ink);
}
.orient-card:hover::before {
  transform: scaleX(1);
  background: var(--gold);
}
.orient-card:hover .orient-icon {
  border-color: var(--gold);
  color: var(--gold);
}
.orient-card:hover .orient-num {
  color: rgba(201, 169, 97, 0.4);
}
.orient-card:hover h3 {
  color: var(--cream);
}
.orient-card:hover p {
  color: rgba(238, 242, 248, 0.75);
}
.orient-card:hover .link-arrow {
  color: var(--gold-soft);
  border-color: var(--gold-soft);
}
.orient-num {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-mute);
  transition: color 0.4s;
}
.orient-icon {
  width: 56px; height: 56px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 2rem;
  color: var(--ink);
  transition: all 0.4s;
}
.orient-card h3 {
  margin-bottom: 0.85rem;
  transition: color 0.4s;
}
.orient-card .label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 0.85rem;
  display: block;
  transition: color 0.4s;
}
.orient-card:hover .label {
  color: var(--gold-soft);
}
.orient-card p {
  margin-bottom: 2rem;
  color: var(--text-soft);
  flex: 1;
  transition: color 0.4s;
}

/* ==========================================================================
   VISION BLOCK
   ========================================================================== */
.vision {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
  position: relative;
  overflow: hidden;
}
.vision::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(74, 107, 93, 0.2), transparent 60%);
}
.vision-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}
.vision-text h2 {
  color: var(--cream);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.15;
  margin: 1rem 0 2rem;
}
.vision-text h2 em {
  color: var(--gold-soft);
  font-style: italic;
}
.vision-text .eyebrow {
  color: var(--gold-soft);
}
.vision-text .eyebrow::before { background: var(--gold); }
.vision-text p {
  color: rgba(238, 242, 248, 0.78);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  max-width: 520px;
}
.vision-image {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.vision-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
}
.vision-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(10, 22, 40, 0.4));
  z-index: 1;
}

/* ==========================================================================
   SERVICES BLOCK
   ========================================================================== */
.services {
  background: var(--cream);
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
}
.services-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}
.services-head h2 {
  margin-top: 0;
}
.services-head p {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 600px;
  margin: 1.25rem auto 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.service-item {
  padding: 3rem 2.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 340px;
  overflow: hidden;
}
.service-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--gold);
  transition: width 0.5s ease;
}
.service-item:hover,
.service-item:focus-within {
  background: var(--midnight);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(15, 31, 58, 0.28);
  border-color: rgba(201, 169, 97, 0.4);
}
.service-item:hover::before,
.service-item:focus-within::before { width: 100%; }

/* Invert the card's text for the dark hover state */
.service-item:hover .service-num,
.service-item:focus-within .service-num {
  color: var(--gold-soft);
}
.service-item:hover .service-num::after,
.service-item:focus-within .service-num::after {
  background: rgba(201, 169, 97, 0.35);
}
.service-item:hover h3,
.service-item:focus-within h3 {
  color: var(--pearl);
}
.service-item:hover p,
.service-item:focus-within p {
  color: rgba(238, 242, 248, 0.78);
}
.service-item:hover a,
.service-item:focus-within a {
  color: var(--gold-soft);
}
.service-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-mute);
  margin-bottom: 1.5rem;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.service-num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.service-item h3 {
  margin-bottom: 0.85rem;
}
.service-item p {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}
.service-item .link-arrow {
  font-size: 0.85rem;
}

/* ==========================================================================
   TRUST BLOCK
   ========================================================================== */
.trust {
  background: var(--paper);
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
  position: relative;
}
.trust-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
/* The item list is far taller than the photo, so the photo tracks the reader
   down the column instead of leaving dead space (same pattern as .about-portrait). */
.trust-image {
  position: sticky;
  top: 8rem;
  border-radius: 2px;
}
/* No fixed aspect-ratio: the photo keeps its natural proportions so wide group
   shots are never cropped at the sides. */
.trust-image img {
  display: block;
  width: 100%; height: auto;
  border-radius: inherit;
}
/* Offset rule peeking out behind the photo on the bottom/right. */
.trust-image::after {
  content: '';
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--gold);
  z-index: -1;
  pointer-events: none;
}
.trust-content h2 { margin-top: 1.25rem; margin-bottom: 2rem; }
.trust-sub { margin-top: -2.25rem; margin-bottom: 1.75rem; color: var(--text-soft); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; }
.trust-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.trust-list li {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.trust-list li:last-child { border-bottom: none; }
.trust-list h4 {
  font-family: var(--serif);
  margin-bottom: 0.6rem;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 500;
  color: var(--ink);
}
.trust-list p {
  font-family: var(--serif);
  color: var(--text-soft);
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.65;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials {
  background: var(--cream);
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
}
.testimonials-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.testimonials-head h2 { margin-top: 1.25rem; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 980px;
  margin: 0 auto;
}
.testimonial {
  background: var(--paper);
  padding: 3rem 2.75rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  position: relative;
  transition: all 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.testimonial p { flex: 1 1 auto; }
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(10, 22, 40, 0.08);
}
.testimonial-mark {
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 0.5;
  color: var(--sage);
  margin-bottom: 0.5rem;
  display: block;
  height: 30px;
}
.testimonial p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 2rem;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage), var(--sage-deep));
  display: grid;
  place-items: center;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.testimonial-info strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.testimonial-info span {
  font-size: 0.8rem;
  color: var(--text-mute);
}

/* ==========================================================================
   RESOURCES
   ========================================================================== */
.resources {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
  position: relative;
  overflow: hidden;
  /* Full-bleed: span the viewport even inside a boxed page template (e.g. Atraskite page) */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
}
.resources::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(74, 107, 93, 0.18), transparent 60%);
}
.resources-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  position: relative;
}
.resources-head h2 {
  color: var(--cream);
  font-weight: 300;
  margin-top: 1.25rem;
}
.resources-head h2 em { color: var(--gold-soft); font-style: italic; }
.resources-head p {
  font-family: var(--serif);
  color: rgba(238, 242, 248, 0.78);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  max-width: 700px;
  margin: 1.25rem auto 0;
}
.resources-head .eyebrow { color: var(--gold-soft); }
.resources-head .eyebrow::before { background: var(--gold); }

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.resource-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(238, 242, 248, 0.1);
  padding: 2.5rem 2rem;
  border-radius: 6px;
  transition: all 0.4s var(--ease);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  text-decoration: none;
}
.resource-card:hover {
  background: rgba(201, 169, 97, 0.08);
  border-color: var(--gold);
  transform: translateY(-4px);
}
.resource-icon {
  width: 40px; height: 40px;
  margin-bottom: 1.5rem;
  color: var(--gold-soft);
}
.resource-card h4 {
  font-family: var(--serif);
  color: var(--cream);
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.resource-card p {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 17px);
  color: rgba(238, 242, 248, 0.7);
  line-height: 1.6;
}
.resources-cta { text-align: center; margin-top: 3.5rem; }
.resource-card-cta {
  margin-top: auto;
  padding-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.resource-card-cta svg { transition: transform 0.3s var(--ease); }
.resource-card:hover .resource-card-cta { color: var(--gold); }
.resource-card:hover .resource-card-cta svg { transform: translateX(4px); }
.resource-card[data-ss-modal] { cursor: pointer; }

/* ── Programos: per-card detail popups ── */
.resource-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.resource-modal[hidden] { display: none; }
.resource-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 21, 35, 0.72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.resource-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--cream);
  color: var(--ink);
  border-radius: 14px;
  padding: 44px 44px 40px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  animation: ss-modal-in 0.35s var(--ease);
}
@keyframes ss-modal-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.resource-modal-close {
  position: absolute;
  top: 16px; right: 18px;
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.resource-modal-close:hover { opacity: 1; }
.resource-modal-panel h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 400;
  margin: 0 0 22px;
  color: var(--ink);
  padding-right: 28px;
}
.resource-modal-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 24px;
}
.resource-modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
.resource-modal-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-soft);
  border-bottom: 1px solid rgba(15, 21, 35, 0.08);
}
.resource-modal-list li:last-child { border-bottom: none; }
.resource-modal-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 19px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.resource-modal-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.resource-modal-cta .btn { font-size: 0.82rem; padding: 0.85rem 1.6rem; }
body.ss-modal-open { overflow: hidden; }

/* ── Programos: bottom CTA below the cards ── */
.resources-bottom-cta {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: center;
  max-width: 640px;
}
.resources-bottom-cta p {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  color: rgba(238, 242, 248, 0.9);
  margin: 0 0 1.5rem;
}
.resources-bottom-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}
.resources-bottom-cta-link {
  color: var(--gold-soft);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}
.resources-bottom-cta-link:hover { color: var(--gold); }

/* ── Atraskite two-column hero (blends into the cards section) ── */
.ss-atr-hero { background: var(--ink); }
.ss-atr-hero .ss-detail-hero {
  background: linear-gradient(180deg, #182236 0%, #0a1628 100%);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.resources.resources--has-hero { padding-top: clamp(1rem, 2.5vw, 2rem); }

@media (max-width: 580px) {
  .resource-modal-panel { padding: 36px 26px 32px; }
  .resource-modal-cta .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta {
  background: var(--cream);
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 107, 93, 0.06), transparent 70%);
}
.final-cta-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.final-cta h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300;
  margin: 1.5rem 0 1.5rem;
  line-height: 1.15;
}
.final-cta h2 em {
  color: var(--sage-deep);
  font-style: italic;
}
.final-cta p {
  font-size: 1.1rem;
  color: var(--text-soft);
  margin-bottom: 2.5rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--ink);
  color: rgba(238, 242, 248, 0.7);
  padding: 5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
.footer-brand .logo { color: var(--cream); }
.footer-brand p {
  margin-top: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 320px;
}
.footer-col h5 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-col a {
  font-size: 0.92rem;
  color: rgba(238, 242, 248, 0.7);
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--cream); }

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(238, 242, 248, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
  list-style: none;
}
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(238, 242, 248, 0.2);
  display: grid;
  place-items: center;
  transition: all 0.3s;
}
.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* ==========================================================================
   PAGE-SPECIFIC: Page Hero (sub pages)
   ========================================================================== */
.page-hero {
  padding: 11rem 0 5rem;
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(74, 107, 93, 0.2), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(201, 169, 97, 0.06), transparent 50%);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 36px 36px;
  opacity: 0.6;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}
.page-hero .eyebrow {
  color: var(--gold-soft);
  margin-bottom: 1.5rem;
}
.page-hero .eyebrow::before { background: var(--gold); }
.page-hero h1 {
  color: var(--cream);
  font-weight: 300;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.page-hero h1 em { font-style: italic; color: var(--gold-soft); }
.page-hero-sub {
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgba(238, 242, 248, 0.78);
  max-width: 660px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 242, 248, 0.5);
  margin-bottom: 2rem;
}
.breadcrumb a {
  color: rgba(238, 242, 248, 0.7);
  transition: color 0.3s;
}
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb-sep { opacity: 0.4; }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}
.about-portrait {
  position: sticky;
  top: 8rem;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-content > *:not(:last-child) { margin-bottom: 3rem; }
.about-content h3 {
  margin-bottom: 1rem;
  color: var(--ink);
}
.about-content p {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.about-content .lead {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 2rem;
}
.about-section {
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.about-section .eyebrow { margin-bottom: 1rem; }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.skill-pill {
  padding: 0.85rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.skill-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage-deep);
}

/* ==========================================================================
   SERVICES PAGE — list view
   ========================================================================== */
.svc-list {
  display: flex;
  flex-direction: column;
}
.svc-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.2fr auto;
  gap: 3rem;
  padding: 3.5rem 0;
  border-top: 1px solid var(--line);
  align-items: start;
  transition: padding 0.3s var(--ease);
}
.svc-row:last-child { border-bottom: 1px solid var(--line); }
.svc-row:hover { padding-left: 1rem; }
.svc-row .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--sage-deep);
}
.svc-row h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: 0.5rem;
}
.svc-row .tag {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  display: block;
  margin-bottom: 0.5rem;
}
.svc-row p {
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}
.svc-row p + p { margin-top: 0.85rem; }
.svc-row .arrow-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: grid;
  place-items: center;
  transition: all 0.4s var(--ease);
  flex-shrink: 0;
}
.svc-row:hover .arrow-circle {
  background: var(--ink);
  color: var(--cream);
  transform: rotate(-45deg);
}

/* Highlight feature program */
.feature-program-fw {
  background: linear-gradient(135deg, var(--midnight), var(--ink));
  color: var(--cream);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.feature-program-fw::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 90% 50%, rgba(201, 169, 97, 0.15), transparent 50%);
  pointer-events: none;
}
.feature-program-fw > .container { position: relative; z-index: 1; }

.feature-program {
  background: none;
  color: var(--cream);
  padding: 0;
  border-radius: 0;
  margin-top: 0;
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  align-items: center;
}
.feature-program > * { position: relative; z-index: 1; }
.feature-program .badge {
  display: inline-flex;
  padding: 0.4rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.5rem;
}
.feature-program h2 {
  color: var(--cream);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 1.5rem;
}
.feature-program h2 em { color: var(--gold-soft); font-style: italic; }
.feature-program p {
  color: rgba(238, 242, 248, 0.78);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 480px;
}
.feature-program .image {
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.feature-program .image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.feature-program .image::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 2px;
}

/* ==========================================================================
   ORGANIZATIONS PAGE
   ========================================================================== */
.org-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}
.org-card {
  position: relative;
  padding: 3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.4s var(--ease);
  overflow: hidden;
}
.org-card:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-4px);
}
.org-card:hover h3,
.org-card:hover .org-num { color: var(--cream); }
.org-card:hover p { color: rgba(238, 242, 248, 0.75); }
.org-card:hover li::before { background: var(--gold); }
.org-card .org-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-mute);
  margin-bottom: 1rem;
  display: block;
  transition: color 0.4s;
}
.org-card h3 {
  margin-bottom: 1rem;
  transition: color 0.4s;
}
.org-card > p {
  color: var(--text-soft);
  margin-bottom: 1.5rem;
  font-size: 0.98rem;
  line-height: 1.6;
  transition: color 0.4s;
}
.org-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}
.org-card li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  transition: color 0.4s;
  line-height: 1.5;
}
.org-card:hover li { color: rgba(238, 242, 248, 0.78); }
.org-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--sage-deep);
  border-radius: 50%;
  transition: background 0.4s;
}

/* ==========================================================================
   PROJEKTAI — full-width hero + cards grid
   ========================================================================== */

/* Full-width hero breakout */
.ss-hero-wrap {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #0f1523;
  padding: 90px 0 56px;
  margin-bottom: 80px;
  overflow: hidden;
}
.ss-hero-wrap::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ss-hero-wrap::before {
  content: '';
  position: absolute;
  right: 120px;
  top: 60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.035);
}
.ss-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 60px;
  position: relative;
  z-index: 1;
}
.ss-hero-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.ss-hero-label span {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.ss-hero-label p {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  margin: 0;
}
.ss-hero-wrap h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  color: #fff;
  max-width: 820px;
}
.ss-hero-wrap h1 em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

/* Projektai hero — split text + photo (matches the other page heroes) */
.ss-hero-wrap--split { padding: 110px 0 80px; }
.ss-hero-inner.ss-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  max-width: var(--container);
}
.ss-hero-wrap--split .ss-hero-col-text { text-align: left; }
.ss-hero-wrap--split h1 {
  max-width: none;
  font-size: clamp(28px, 3.4vw, 40px);
  text-align: left;
}
.ss-hero-wrap--split .ss-hero-label { justify-content: flex-start; }
.ss-hero-col-image { position: relative; z-index: 1; }
.ss-hero-col-image::before {
  content: '';
  position: absolute;
  top: -16px; left: -16px; right: 16px; bottom: 16px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  opacity: 0.4;
  z-index: 0;
}
.ss-hero-photo-frame {
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.ss-hero-photo-frame img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
}
@media (max-width: 860px) {
  .ss-hero-inner.ss-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ss-hero-photo-frame img { height: 320px; }
}

/* Content wrapper */
.ss-proj {
  font-family: var(--sans);
  color: #1a1f2e;
  max-width: var(--container);
  margin: 0 auto;
}
.ss-proj * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Section label */
.ss-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ss-section-label span {
  display: block;
  width: 32px;
  height: 1px;
  background: #1a1f2e;
}
.ss-section-label p {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
}
.ss-section-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  color: #1a1f2e;
  margin-bottom: 48px;
  line-height: 1.2;
}

/* Grid */
.ss-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 80px;
}

/* Card */
.ss-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.ss-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: #c9a84c;
  transition: width 0.5s ease;
  z-index: 3;
}
.ss-card:hover {
  background: #0f1523;
  border-color: #0f1523;
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(15, 21, 35, 0.18);
}
.ss-card:hover::before { width: 100%; }
.ss-card-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease;
}
.ss-card:hover .ss-card-img { filter: brightness(0.75); }
.ss-card-img-placeholder {
  width: 100%;
  height: 260px;
  display: block;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  transition: background 0.4s ease;
}
.ss-card:hover .ss-card-img-placeholder { background: linear-gradient(135deg, #1e2d4a 0%, #0f1523 100%); }

/* Project card slideshow */
.ss-card-slider { position: relative; overflow: hidden; }
.ss-card-slider .ss-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* show the full photo, never crop */
  object-position: center center;
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 0;
}
.ss-card-slider .ss-hero-slide.is-active { opacity: 1; z-index: 1; }
.ss-card-slider .ss-hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: #fff;
  background: rgba(15, 21, 35, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.ss-card-slider:hover .ss-hero-slider-arrow { opacity: 1; }
.ss-card-slider .ss-hero-slider-arrow:hover { background: rgba(15, 21, 35, 0.82); }
.ss-card-slider .ss-hero-slider-arrow.prev { left: 10px; }
.ss-card-slider .ss-hero-slider-arrow.next { right: 10px; }
.ss-card-slider .ss-hero-slider-dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.ss-card-slider .ss-hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.3s ease, transform 0.3s ease;
}
.ss-card-slider .ss-hero-dot.is-active { background: #fff; transform: scale(1.25); }
.ss-card-body {
  padding: 36px 34px 40px;
  flex: 1 1 auto;
}
.ss-card-tag {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
  margin-bottom: 14px;
  transition: color 0.4s ease;
}
.ss-card:hover .ss-card-tag { color: #c9a84c; }
.ss-card-title {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  color: #1a1f2e;
  margin-bottom: 10px;
  line-height: 1.25;
  transition: color 0.4s ease;
}
.ss-card:hover .ss-card-title { color: #fff; }
.ss-card-nr {
  font-size: 12.5px;
  color: var(--text-soft);
  font-weight: 300;
  margin-bottom: 18px;
  font-style: italic;
  transition: color 0.4s ease;
}
.ss-card:hover .ss-card-nr { color: rgba(255,255,255,0.5); }
.ss-divider {
  height: 1px;
  background: #f0f1f3;
  margin-bottom: 18px;
  transition: background 0.4s ease;
}
.ss-card:hover .ss-divider { background: rgba(255,255,255,0.12); }
.ss-card-text {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.75;
  font-weight: 300;
  transition: color 0.4s ease;
}
.ss-card:hover .ss-card-text { color: rgba(255,255,255,0.75); }
.ss-card-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.ss-card-list li {
  font-size: 14.5px;
  color: var(--text-soft);
  font-weight: 300;
  padding: 6px 0;
  border-bottom: 1px solid #f4f5f7;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.ss-card-list li:last-child { border-bottom: none; }
.ss-card-list li::before {
  content: '—';
  color: var(--text-soft);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.4s ease;
}
.ss-card:hover .ss-card-list li {
  color: rgba(255,255,255,0.72);
  border-bottom-color: rgba(255,255,255,0.08);
}
.ss-card:hover .ss-card-list li::before { color: #c9a84c; }
.ss-card-partners {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f0f1f3;
  transition: border-color 0.4s ease;
}
.ss-card:hover .ss-card-partners { border-top-color: rgba(255,255,255,0.12); }
.ss-card-partners p {
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  transition: color 0.4s ease;
}
.ss-card:hover .ss-card-partners p { color: rgba(255,255,255,0.55); }

/* ── Projects section: refined card typography, spacing & logo badges ── */
.ss-proj .ss-card-nr { margin-bottom: 20px; }
.ss-proj .ss-divider { margin-bottom: 22px; }
.ss-proj .ss-card-text {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
.ss-proj .ss-card-list { margin-top: 16px; }
.ss-proj .ss-card-list li {
  font-size: 15px;
  line-height: 1.5;
  padding: 6px 0;
}
.ss-proj .ss-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.ss-proj .ss-card-badge {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  border: 1px solid #ececef;
  box-shadow: 0 4px 14px rgba(15, 21, 35, 0.06);
}
.ss-proj .ss-card-badge img {
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
  object-fit: contain; /* preserve logo proportions — no stretching */
}
@media (max-width: 580px) {
  .ss-proj .ss-card-badges { gap: 12px; }
  .ss-proj .ss-card-badge { padding: 12px 16px; }
  .ss-proj .ss-card-badge img { height: 56px; }
}

/* Featured wide card */
.ss-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 440px 1fr;
  min-height: 360px;
}
.ss-card-wide .ss-card-img,
.ss-card-wide .ss-card-img-placeholder {
  height: 100%;
  min-height: 360px;
  width: 440px;
  flex-shrink: 0;
}
.ss-card-wide .ss-card-body {
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ss-card-wide .ss-card-title {
  font-size: 30px;
}

/* Responsive */
@media (max-width: 900px) {
  .ss-grid { grid-template-columns: 1fr 1fr; }
  .ss-card-wide { grid-template-columns: 1fr; min-height: 0; }
  .ss-card-wide .ss-card-img,
  .ss-card-wide .ss-card-img-placeholder { width: 100%; min-height: 240px; }
  .ss-card-wide .ss-card-body { padding: 40px 36px; }
  .ss-card-wide .ss-card-title { font-size: 26px; }
  .ss-card { min-height: 0; }
  .ss-hero-inner { padding: 0 36px; }
  .ss-hero-wrap { padding: 60px 0 72px; }
}
@media (max-width: 580px) {
  .ss-grid { grid-template-columns: 1fr; }
  .ss-card-body { padding: 28px 24px 32px; }
  .ss-hero-inner { padding: 0 24px; }
  .ss-hero-wrap { padding: 44px 0 56px; }
}

/* ==========================================================================
   RESOURCES PAGE — store grid
   ========================================================================== */
.store-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.filter-btn {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-soft);
  background: transparent;
  transition: all 0.3s;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.product-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: all 0.4s var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.12);
  border-color: var(--sage);
}
.product-image {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink), var(--ocean));
}
.product-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .product-image img { transform: scale(1.04); }
.product-image .badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--gold);
  color: var(--ink);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.product-info {
  padding: 1.75rem;
}
.product-info .tag {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 0.5rem;
  display: block;
}
.product-info h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.product-info p {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.product-price {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
}
.product-price .small {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-family: var(--sans);
}
.product-meta .link-arrow {
  font-size: 0.82rem;
  border: none;
  padding: 0;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5rem;
  align-items: start;
}
.contact-info > * + * { margin-top: 2.5rem; }
.contact-info h3 { margin-bottom: 1rem; }
.contact-info p { color: var(--text-soft); line-height: 1.7; }

.contact-list {
  list-style: none;
}
.contact-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.contact-list li:last-child { border-bottom: none; }
.contact-list .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--sage-deep);
  flex-shrink: 0;
}
.contact-list .label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
  margin-bottom: 0.25rem;
}
.contact-list a {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
  transition: color 0.3s;
}
.contact-list a:hover { color: var(--sage-deep); }

/* Calendar (Calendly embed) */
.ss-calendar-section { padding: 6rem 0; }
.ss-calendar-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2.5rem;
}
.ss-calendar-title {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  margin: 0 0 0.85rem;
}
.ss-calendar-sub {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}
.ss-calendar-wrap {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  padding-top: 1.25rem;
}
.ss-calendar-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 2px;
  background: var(--gold);
}
.ss-calendar-wrap .calendly-inline-widget {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
}
/* Contact: calendar + form side by side */
.ss-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.ss-contact-grid.is-single { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
.ss-contact-grid .ss-calendar-head { max-width: none; }
.ss-contact-grid .ss-calendar-wrap { max-width: none; }
.ss-contact-grid .ss-contact-form-wrap { max-width: none; }
@media (max-width: 900px) {
  .ss-contact-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* Client questionnaire (Google Form) CTA */
.ss-gform-cta {
  text-align: center;
  max-width: 640px;
  margin: 4rem auto 0;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.ss-gform-title {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 0.75rem;
}
.ss-gform-sub {
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 auto 1.75rem;
  max-width: 520px;
}
.ss-gform-btn { display: inline-block; }

@media (max-width: 768px) {
  .ss-calendar-section { padding: 4rem 0; }
}

/* Form */
.form-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3rem;
  position: relative;
}
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 2px;
  background: var(--gold);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-group label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 0.6rem;
  font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 2px;
  font-size: 0.95rem;
  color: var(--ink);
  transition: all 0.3s;
  font-family: var(--sans);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--sage-deep);
  background: var(--cream);
}
.form-group textarea {
  resize: vertical;
  min-height: 140px;
}
.form-card .btn {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   ANIMATIONS — scroll reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ==========================================================================
   PASLAUGOS — full page design (hero + intro + services + promo + how + cta)
   All rules scoped under .ss-page to avoid clashing with .ss-hero-* on Projektai.
   ========================================================================== */

.ss-page {
  /* page-scoped color vars (override theme vars for descendants only) */
  --pas-cream: #F5F2EC;
  --pas-navy: #0f1523;
  --pas-navy2: #1a2540;
  --pas-ink: #1a1f2e;
  /* Kept in step with --text-soft so Paslaugos/Apie body copy matches Pradžia. */
  --pas-muted: var(--text-soft);
  --pas-border: #ddd9d0;
  --pas-gold: #c9a84c;

  font-family: var(--sans);
  background: var(--pas-cream);
  color: var(--pas-ink);
  /* clip, NOT hidden. overflow-x: hidden makes this element its own scroll
     container (overflow-y computes to auto), which gave .ss-page pages a
     second scrollbar and let the wrapper swallow the wheel instead of
     scrolling the page. clip suppresses the 100vw breakout overflow without
     creating a scroll container — same reason html/body use clip. */
  overflow-x: clip;

  /* Break out so the cream bg covers the viewport */
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
.ss-page * { box-sizing: border-box; }

/* Full-width util (kept for the hero, harmless if already inside .ss-page) */
.ss-page .ss-fw {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
.ss-page .ss-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) { .ss-page .ss-inner { padding: 0 24px; } }
@media (max-width: 480px) { .ss-page .ss-inner { padding: 0 20px; } }

/* HERO ─────────────────────────────────────── */
.ss-page .ss-hero {
  background: var(--pas-navy);
  /* top padding clears the fixed nav (~96px) so the breadcrumb isn't hidden */
  padding: 144px 0 96px;
  overflow: hidden;
  position: relative;
}
.ss-page .ss-hero--photo {
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.ss-page .ss-pas-feature {
  position: relative;
  margin: 56px 0;
  border-radius: 10px;
  overflow: hidden;
}
.ss-page .ss-pas-feature img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
}
.ss-page .ss-pas-feature figcaption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.ss-page .ss-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.ss-page .ss-hero-content .ss-hero-label { justify-content: center; }
.ss-page .ss-hero-content h1 { max-width: none; margin-left: auto; margin-right: auto; }
.ss-page .ss-hero-content .ss-hero-sub { margin-left: auto; margin-right: auto; }
.ss-page .ss-hero::before {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}
.ss-page .ss-hero::after {
  content: '';
  position: absolute;
  right: 80px; top: 40px;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.03);
  pointer-events: none;
}
.ss-page .ss-breadcrumb {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 10px;
}
.ss-page .ss-breadcrumb span { color: #d8d2c4; }
.ss-page .ss-hero-label {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.ss-page .ss-hero-label::before {
  content: '';
  display: block;
  width: 36px; height: 1px;
  background: rgba(255,255,255,.3);
}
.ss-page .ss-hero-label p {
  font-size: 15px; letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin: 0;
}
.ss-page .ss-hero h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5.5vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  max-width: 760px;
  margin: 0 0 20px;
}
.ss-page .ss-hero h1 em {
  font-style: italic;
  color: var(--pas-gold);
}
.ss-page .ss-hero-sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.55);
  max-width: 600px;
  line-height: 1.75;
  margin: 0;
}

/* INTRO SPLIT ──────────────────────────────── */
.ss-page .ss-intro { padding: 80px 0 72px; }
/* Two-column split: heading left, copy right (the markup's own left/right
   structure, and what the ≤900px stacking rule already assumes). */
.ss-page .ss-intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.ss-page .ss-intro-left h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.2;
  margin: 0;
}
.ss-page .ss-intro-left h2 em {
  font-style: italic;
  color: var(--pas-navy2);
}
/* One size and one colour for all intro body copy — lead, bullets and closing
   line previously ran 15.5/15/16.5/17px across two different inks. */
.ss-page .ss-intro-right p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.8;
  margin: 0 0 14px;
}
.ss-page .ss-intro-bullets {
  list-style: none;
  margin: 18px 0 28px;
  padding: 0;
}
.ss-page .ss-intro-bullets li {
  font-size: 17px;
  color: var(--text-soft);
  font-weight: 300;
  line-height: 1.8;
  padding: 6px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ss-page .ss-intro-bullets li::before {
  content: '·';
  color: var(--pas-gold);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
/* Closing line reads as the takeaway: same size and colour as the rest,
   separated by weight alone rather than a colour jump. */
.ss-page .ss-intro-right > p:last-of-type {
  font-weight: 500;
  margin-top: 4px;
}
/* Same gold pill component as the "Sužinoti daugiau" promo CTA. */
.ss-page .ss-intro-right .ss-btn-primary { margin-top: 14px; }
.ss-page .ss-btn {
  display: inline-block;
  background: var(--pas-navy);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 2px;
  transition: background .2s;
  cursor: pointer;
  border: none;
}
.ss-page .ss-btn:hover { background: #1e2d4a; }
.ss-page .ss-btn-outline {
  display: inline-block;
  border: 1px solid var(--pas-navy);
  color: var(--pas-navy);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 999px;
  transition: all .2s;
  cursor: pointer;
  background: transparent;
}
.ss-page .ss-btn-outline:hover { background: var(--pas-navy); color: #fff; }

/* DIVIDER ──────────────────────────────────── */
.ss-page .ss-rule {
  border: none;
  border-top: 1px solid var(--pas-border);
  margin: 0;
}

/* SERVICES LIST ────────────────────────────── */
.ss-page .ss-services { padding: 72px 0 80px; }
.ss-page .ss-services-label {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 48px;
}
.ss-page .ss-services-label::before {
  content: ''; display: block;
  width: 32px; height: 1px;
  background: var(--pas-ink);
}
.ss-page .ss-services-label span {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pas-muted);
  font-weight: 600;
}
.ss-page .ss-service-row {
  display: grid;
  grid-template-columns: 72px 1fr 2.1fr 88px;
  gap: 40px;
  align-items: center;
  padding: 56px 40px;
  min-height: 200px;
  border-top: 1px solid var(--pas-border);
  transition: background 0.4s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.ss-page .ss-service-row::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 3px;
  background: var(--pas-gold);
  transition: width 0.5s ease;
  z-index: 2;
}
.ss-page .ss-service-row:last-child { border-bottom: 1px solid var(--pas-border); }
.ss-page .ss-service-row:hover { background: var(--pas-navy); }
.ss-page .ss-service-row:hover::before { width: 100%; }
.ss-page .ss-service-num {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--pas-muted);
  font-weight: 400;
  align-self: flex-start;
  padding-top: 6px;
  transition: color 0.4s ease;
}
.ss-page .ss-service-row:hover .ss-service-num { color: var(--pas-gold); }
.ss-page .ss-service-tag {
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pas-muted);
  margin: 0 0 10px;
  font-weight: 600;
  transition: color 0.4s ease;
}
.ss-page .ss-service-row:hover .ss-service-tag { color: var(--pas-gold); }
.ss-page .ss-service-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.9vw, 34px);
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.18;
  margin: 0;
  transition: color 0.4s ease;
  letter-spacing: -0.005em;
}
.ss-page .ss-service-row:hover .ss-service-title { color: #fff; }
.ss-page .ss-service-desc {
  font-size: 16.5px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.75;
  margin: 0;
  transition: color 0.4s ease;
}
.ss-page .ss-service-row:hover .ss-service-desc { color: rgba(255,255,255,0.75); }
.ss-page .ss-service-arrow {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--pas-border);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.45s ease;
  flex-shrink: 0;
  justify-self: end;
  color: var(--pas-ink);
  background: transparent;
}
.ss-page .ss-service-row:hover .ss-service-arrow {
  background: var(--pas-gold);
  border-color: var(--pas-gold);
  color: var(--pas-navy);
  transform: rotate(-45deg) scale(1.05);
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.35);
}
.ss-page .ss-service-arrow svg { width: 22px; height: 22px; }

/* Sužinoti daugiau CTA inside each service row */
.ss-page .ss-service-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ss-page .ss-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pas-gold);
  align-self: flex-start;
  transition: gap 0.35s ease, color 0.35s ease;
}
.ss-page .ss-service-cta svg { width: 14px; height: 14px; transition: transform 0.35s ease; }
.ss-page .ss-service-row:hover .ss-service-cta { gap: 14px; color: #fff; }
.ss-page .ss-service-row:hover .ss-service-cta svg { transform: translateX(2px); }

/* KARTŲ KODAS PROMO ────────────────────────── */
.ss-page .ss-promo-wrap { padding: 0 0 80px; }
.ss-page .ss-promo {
  background: var(--pas-navy);
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 420px;
  min-height: 340px;
  position: relative;
}
.ss-page .ss-promo-body {
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ss-page .ss-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.ss-page .ss-promo-badge .pill {
  background: var(--pas-gold);
  color: var(--pas-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 2px;
}
.ss-page .ss-promo-badge .year {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(255,255,255,.75);
}
.ss-page .ss-promo-body h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 16px;
}
.ss-page .ss-promo-body h2 em {
  font-style: italic;
  color: var(--pas-gold);
}
.ss-page .ss-promo-body p {
  font-size: 14.5px;
  font-weight: 300;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  max-width: 440px;
  margin: 0 0 8px;
}
.ss-page .ss-promo-body p.italic {
  font-style: italic;
  color: rgba(255,255,255,.4);
  font-size: 13.5px;
}
.ss-page .ss-promo-cta { margin-top: 28px; }
.ss-page .ss-promo-img { position: relative; overflow: hidden; }
.ss-page .ss-promo-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.85);
}
.ss-page .ss-promo-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1e2d4a, #0f1523);
  display: flex; align-items: center; justify-content: center;
  min-height: 260px;
}
.ss-page .ss-promo-img-placeholder span {
  font-size: 13px;
  color: rgba(255,255,255,.2);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* HOW IT WORKS ─────────────────────────────── */
.ss-page .ss-how { padding: 80px 0 88px; }
.ss-page .ss-how-header { text-align: center; margin-bottom: 64px; }
.ss-page .ss-how-header .ss-label {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 16px;
}
.ss-page .ss-how-header .ss-label::before,
.ss-page .ss-how-header .ss-label::after {
  content: ''; display: block;
  width: 28px; height: 1px;
  background: var(--pas-muted);
}
.ss-page .ss-how-header .ss-label span {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pas-muted);
  font-weight: 600;
}
.ss-page .ss-how-header h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.2;
  max-width: 600px;
  margin: 0 auto;
}
.ss-page .ss-how-sub {
  font-size: 15px;
  font-weight: 300;
  color: var(--pas-muted);
  max-width: 520px;
  margin: 14px auto 0;
  line-height: 1.7;
  text-align: center;
}
.ss-page .ss-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--pas-border);
  border-radius: 6px;
  overflow: hidden;
}
.ss-page .ss-step {
  padding: 36px 32px 40px;
  border-right: 1px solid var(--pas-border);
  background: #fff;
}
.ss-page .ss-step:last-child { border-right: none; }
.ss-page .ss-step-num {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--pas-muted);
  margin-bottom: 20px;
  display: block;
  font-weight: 600;
}
.ss-page .ss-step h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.25;
  margin: 0 0 14px;
}
.ss-page .ss-step p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.75;
  margin: 0;
}

/* FINAL CTA ────────────────────────────────── */
.ss-page .ss-cta-section { padding: 80px 0 96px; text-align: center; }
.ss-page .ss-cta-section .ss-label {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 20px;
}
.ss-page .ss-cta-section .ss-label::before,
.ss-page .ss-cta-section .ss-label::after {
  content: ''; display: block;
  width: 28px; height: 1px;
  background: var(--pas-muted);
}
.ss-page .ss-cta-section .ss-label span {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pas-muted);
  font-weight: 600;
}
.ss-page .ss-cta-section h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 50px);
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.15;
  max-width: 560px;
  margin: 0 auto 16px;
}
.ss-page .ss-cta-section h2 em { font-style: normal; color: var(--brand); }
.ss-page .ss-cta-section p {
  font-size: 15.5px;
  font-weight: 300;
  color: var(--pas-muted);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
/* ─── BUTTON SYSTEM (unified across all .ss-page contexts) ─── */
/* Primary: gold-fill — used for hero CTAs and final CTAs */
.ss-page .ss-cta-btn,
.ss-page .ss-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--pas-gold);
  color: var(--pas-navy);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  cursor: pointer;
  transition: color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease, background 0.35s ease;
}
.ss-page .ss-cta-btn::before,
.ss-page .ss-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pas-navy);
  transform: translateX(-101%);
  transition: transform 0.45s ease;
  z-index: -1;
}
.ss-page .ss-cta-btn:hover,
.ss-page .ss-btn-primary:hover {
  color: #fff;
  box-shadow: 0 14px 32px rgba(15, 21, 35, 0.28);
  transform: translateY(-2px);
}
.ss-page .ss-cta-btn:hover::before,
.ss-page .ss-btn-primary:hover::before { transform: translateX(0); }
.ss-page .ss-cta-btn svg,
.ss-page .ss-btn-primary svg {
  width: 16px; height: 16px;
  transition: transform 0.4s ease;
}
.ss-page .ss-cta-btn:hover svg,
.ss-page .ss-btn-primary:hover svg { transform: translateX(6px); }

/* Secondary: dark outline — used inline within sections (Pasitarti, etc.) */
.ss-page .ss-btn-secondary,
.ss-page .ss-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--pas-navy);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  padding: 14px 32px;
  border: 1.5px solid var(--pas-navy);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.ss-page .ss-btn-secondary:hover,
.ss-page .ss-btn-outline:hover {
  background: var(--pas-navy);
  color: #fff;
  transform: translateY(-2px);
}

/* Dark backgrounds (e.g. hero) — flip secondary to gold outline + light text */
.ss-page .ss-detail-hero .ss-btn-secondary,
.ss-page .ss-detail-hero .ss-btn-outline {
  border-color: var(--pas-gold);
  color: var(--pas-gold);
}
.ss-page .ss-detail-hero .ss-btn-secondary:hover,
.ss-page .ss-detail-hero .ss-btn-outline:hover {
  background: var(--pas-gold);
  color: var(--pas-navy);
}

/* ─── APIE PAGE additions ─── */

/* Hero split (text + portrait) */
.ss-page .ss-hero-split {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ss-page .ss-hero-text { position: relative; z-index: 2; }
.ss-page .ss-hero h1 { max-width: none; margin-bottom: 18px; }
/* Unify the split hero text to the serif family (prefix, name, role, sub all Playfair) */
.ss-page .ss-hero-split .ss-hero-sub { font-family: var(--serif); }
.ss-page .ss-hero-role {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--brand);
  line-height: 1.45;
  margin: 0 0 18px;
  max-width: 560px;
}
.ss-page .ss-hero-image {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 600px;
}
.ss-page .ss-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.8s ease;
}
.ss-page .ss-hero-image:hover img { transform: scale(1.05); }
.ss-page .ss-hero-image-ph {
  width: 100%;
  height: 100%;
  background: var(--pas-navy2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-page .ss-hero-image-ph span {
  font-size: 12px;
  color: rgba(255,255,255,.25);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Section label (clean single-line — no decorative dash, no leaked card-label styles) */
.ss-page .ss-section-label {
  display: block;
  margin: 0 0 32px;
  padding: 0;
  background: none;
  gap: 0;
}
.ss-page .ss-section-label span {
  display: inline-block;
  width: auto;
  height: auto;
  background: transparent;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pas-gold);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.ss-page .ss-section-label p {
  display: none;
}

/* Hero name + dash inline */
.ss-page .ss-hero-split .ss-hero-text h1 span.name,
.ss-page .ss-hero h1 span.name {
  font-style: normal !important;
  color: var(--gold) !important;
  display: block;
  font-size: clamp(48px, 7.5vw, 76px) !important;
  line-height: 1.05;
}
.ss-page .ss-hero h1 .dash { color: rgba(255,255,255,.5); }

/* Bio split sections */
.ss-page .ss-bio { padding: 80px 0; }
.ss-page .ss-bio + .ss-bio { padding-top: 0; }
.ss-page .ss-bio-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 72px;
  align-items: start;
}
.ss-page .ss-bio-grid.reverse { grid-template-columns: 1fr 420px; }
.ss-page .ss-bio-grid.reverse .ss-bio-img { order: 2; }
.ss-page .ss-bio-grid.reverse .ss-bio-body { order: 1; }
.ss-page .ss-bio-img {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.ss-page .ss-bio-img img {
  width: 100%; height: 480px;
  object-fit: cover; display: block;
  transition: transform 0.8s ease;
}
.ss-page .ss-bio-img:hover img { transform: scale(1.05); }
.ss-page .ss-bio-img-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  background: rgba(15, 21, 35, 0.72);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}
.ss-page .ss-bio-img-ph {
  width: 100%; height: 480px;
  background: var(--pas-navy2);
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.ss-page .ss-bio-img-ph span {
  font-size: 12px;
  color: rgba(255,255,255,.2);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ss-page .ss-bio-body { padding-top: 8px; }
.ss-page .ss-bio-body .quote {
  font-family: var(--serif);
  font-size: clamp(20px, 2.7vw, 26px);
  font-style: italic;
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.5;
  margin-bottom: 32px;
  padding-left: 24px;
  border-left: 3px solid var(--pas-gold);
}
.ss-page .ss-bio-body h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.25;
  margin: 0 0 18px;
}
.ss-page .ss-bio-body p {
  font-size: 17.5px;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.8;
  margin: 0 0 16px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.ss-page .ss-bio-body p:last-child { margin-bottom: 0; }
.ss-page .ss-bio-body p strong { font-weight: 500; color: var(--pas-ink); }

/* Competencies */
.ss-page .ss-comp { padding: 0 0 80px; }
.ss-page .ss-comp-intro-wrap {
  margin-bottom: 24px;
  max-width: 720px;
}
.ss-page .ss-comp-intro {
  font-size: 15.5px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.85;
  margin: 0 0 14px;
}
.ss-page .ss-comp-intro:last-child { margin-bottom: 0; }
.ss-page .ss-comp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  margin-top: 12px;
}
.ss-page .ss-comp-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--pas-border);
  font-size: 15.5px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.5;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.ss-page .ss-comp-item:hover { color: var(--pas-ink); padding-left: 6px; }
.ss-page .ss-comp-item::before {
  content: '✓';
  color: var(--pas-gold);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 3px;
  font-weight: 600;
}

/* Philosophy / KAS MAN SVARBU card */
.ss-page .ss-philosophy {
  background: #fff;
  border: 1px solid var(--pas-border);
  border-radius: 8px;
  padding: 64px 72px;
  margin-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.ss-page .ss-philosophy::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 3px;
  background: var(--pas-gold);
}
.ss-page .ss-philosophy blockquote {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 400;
  font-style: italic;
  color: var(--pas-navy);
  line-height: 1.4;
  max-width: 820px;
  margin: 0;
}
.ss-page .ss-philosophy blockquote + p,
.ss-page .ss-philosophy p:first-of-type { margin-top: 28px; }
.ss-page .ss-philosophy p {
  font-size: 15.5px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.85;
  max-width: 760px;
  margin: 0 0 16px;
}
.ss-page .ss-philosophy p:last-child { margin-bottom: 0; }

/* Principles 2x2 */
.ss-page .ss-principles { padding: 0 0 80px; }
.ss-page .ss-principles-header { text-align: center; margin-bottom: 56px; }
.ss-page .ss-principles-header .ss-label-center {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ss-page .ss-principles-header .ss-label-center::before,
.ss-page .ss-principles-header .ss-label-center::after {
  content: ''; display: block;
  width: 28px; height: 1px;
  background: var(--pas-muted);
}
.ss-page .ss-principles-header .ss-label-center span {
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pas-muted);
  font-weight: 600;
}
.ss-page .ss-principles-header h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.2;
  margin: 0;
}
.ss-page .ss-principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--pas-border);
  border: 1px solid var(--pas-border);
  border-radius: 8px;
  overflow: hidden;
}
.ss-page .ss-principle {
  background: #fff;
  padding: 64px 52px 68px;
  min-height: 380px;
  position: relative;
  transition: background 0.45s ease;
  cursor: pointer;
  overflow: hidden;
}
.ss-page .ss-principle::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--pas-gold);
  transition: width 0.55s ease;
}
.ss-page .ss-principle:hover { background: var(--pas-navy); }
.ss-page .ss-principle:hover::before { width: 100%; }
.ss-page .ss-principle-num {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pas-gold);
  margin-bottom: 28px;
  display: block;
  font-weight: 500;
  transition: color 0.4s ease;
}
.ss-page .ss-principle:hover .ss-principle-num { color: var(--pas-gold); }
.ss-page .ss-principle h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--pas-ink);
  margin: 0 0 20px;
  line-height: 1.25;
  transition: color 0.4s ease;
}
.ss-page .ss-principle:hover h3 { color: #fff; }
.ss-page .ss-principle p {
  font-size: 15.5px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.85;
  margin: 0;
  transition: color 0.4s ease;
}
.ss-page .ss-principle:hover p { color: rgba(255,255,255,0.78); }

/* Apie CTA label (centered) */
.ss-page .ss-cta-label {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ss-page .ss-cta-label::before,
.ss-page .ss-cta-label::after {
  content: ''; display: block;
  width: 28px; height: 1px;
  background: var(--pas-muted);
}
.ss-page .ss-cta-label span {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pas-muted);
  font-weight: 600;
}

/* Apie responsive ─────────────────────────── */
@media (max-width: 900px) {
  .ss-page .ss-hero-split { grid-template-columns: 1fr; gap: 40px; }
  /* Cap hero portrait so it doesn't dominate the viewport on tablet */
  .ss-page .ss-hero-image {
    aspect-ratio: 4 / 5;
    max-width: 420px;
    max-height: 520px;
    margin: 0 auto;
  }
  .ss-page .ss-bio-grid,
  .ss-page .ss-bio-grid.reverse { grid-template-columns: 1fr; gap: 36px; }
  .ss-page .ss-bio-grid.reverse .ss-bio-img { order: 0; }
  .ss-page .ss-bio-grid.reverse .ss-bio-body { order: 0; }
  .ss-page .ss-bio-img img,
  .ss-page .ss-bio-img-ph { height: 360px; }
  .ss-page .ss-philosophy { padding: 48px 40px; }
  .ss-page .ss-philosophy blockquote { font-size: clamp(20px, 4vw, 26px); }
  .ss-page .ss-principles-grid { grid-template-columns: 1fr; }
  .ss-page .ss-principle { padding: 48px 36px 52px; min-height: 0; }
  .ss-page .ss-comp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Phone: tighter aspect ratio, full container width up to 360px */
  .ss-page .ss-hero-image {
    aspect-ratio: 5 / 6;
    max-width: 100%;
    max-height: 440px;
  }
  .ss-page .ss-hero-role { font-size: 16px; }
  .ss-page .ss-bio { padding: 56px 0; }
  .ss-page .ss-bio-img img,
  .ss-page .ss-bio-img-ph { height: 280px; }
  .ss-page .ss-bio-body .quote { padding-left: 16px; font-size: 19px; line-height: 1.5; }
  .ss-page .ss-bio-body p { font-size: 16.5px; }
  .ss-page .ss-philosophy { padding: 36px 26px; }
  .ss-page .ss-philosophy blockquote { font-size: 21px; line-height: 1.45; }
  .ss-page .ss-principle { padding: 40px 28px 44px; }
  .ss-page .ss-comp-item { padding: 14px 0; font-size: 15px; }
  .ss-page .ss-cta-btn { padding: 15px 30px; }
}

/* ─── SERVICE DETAIL PAGE (mentoryste / kvepavimo / renginiai / kartu-kodas) ─── */
.ss-page.ss-detail {
  background: var(--pas-cream);
}

.ss-page .ss-detail-hero {
  background: linear-gradient(180deg, #182236 0%, #0f1523 100%);
  /* top padding clears the fixed nav (~96px) so the breadcrumb isn't hidden */
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.ss-page .ss-detail-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ss-page .ss-detail-hero.has-visual .ss-detail-hero-grid {
  grid-template-columns: 1.15fr 1fr;
}
.ss-page .ss-detail-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

/* Atmosphere compositions (right column) */
.ss-page .ss-detail-hero-visual {
  position: relative;
  min-height: 360px;
  z-index: 1;
}

/* ── Homepage-style hero: framed photo + rotating compass backdrop ── */
.ss-page .ss-detail-hero.has-photo .ss-detail-hero-visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Compass decoration, mirrors the homepage hero-bg/hero-compass */
.ss-page .ss-detail-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ss-page .ss-detail-hero-bg .hero-compass {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(640px, 60vw);
  aspect-ratio: 1;
  opacity: 0.16;
  pointer-events: none;
  animation: rotate 220s linear infinite;
}

/* .ss-detail-hero-image is now the positioning wrapper (draws the offset frame) */
.ss-page .ss-detail-hero-image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}
.ss-page .ss-detail-hero-image::before {
  content: '';
  position: absolute;
  top: -18px; left: -18px; right: 18px; bottom: 18px;
  border: 1px solid var(--pas-gold);
  border-radius: 8px;
  opacity: 0.45;
  z-index: -1;
}
/* the frame clips the photo (and its hover zoom) */
.ss-page .ss-detail-hero-image-frame {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.ss-page .ss-detail-hero-image-frame img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  transition: transform 0.9s ease;
}
.ss-page .ss-detail-hero-image:hover .ss-detail-hero-image-frame img { transform: scale(1.04); }

/* ── Hero slider (service-detail) ── */
.ss-page .ss-hero-slider .ss-detail-hero-image-frame {
  position: relative;
  height: 520px;
}
.ss-page .ss-hero-slider .ss-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}
.ss-page .ss-hero-slider .ss-hero-slide.is-active { opacity: 1; z-index: 1; }
.ss-page .ss-hero-slider:hover .ss-hero-slide.is-active { transform: none; }
.ss-page .ss-hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: rgba(15, 21, 35, 0.5);
  border-radius: 50%;
  transition: background 0.3s ease;
}
.ss-page .ss-hero-slider-arrow:hover { background: rgba(15, 21, 35, 0.8); }
.ss-page .ss-hero-slider-arrow.prev { left: 12px; }
.ss-page .ss-hero-slider-arrow.next { right: 12px; }
.ss-page .ss-hero-slider-dots {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}
.ss-page .ss-hero-slider-dots .ss-hero-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.3s ease, transform 0.3s ease;
}
.ss-page .ss-hero-slider-dots .ss-hero-dot.is-active {
  background: var(--pas-gold);
  transform: scale(1.25);
}

/* Rings atmosphere — concentric gold rings, slow rotation */
.ss-page .ss-detail-atm { position: relative; width: 100%; height: 100%; min-height: 420px; }
.ss-page .ss-detail-atm-rings .ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.22);
  animation: ssRingsRotate 60s linear infinite;
}
.ss-page .ss-detail-atm-rings .ring.r1 { width: 520px; height: 520px; border-color: rgba(201, 168, 76, 0.10); animation-duration: 90s; }
.ss-page .ss-detail-atm-rings .ring.r2 { width: 400px; height: 400px; border-color: rgba(201, 168, 76, 0.15); animation-duration: 70s; animation-direction: reverse; }
.ss-page .ss-detail-atm-rings .ring.r3 { width: 280px; height: 280px; border-color: rgba(201, 168, 76, 0.22); animation-duration: 55s; }
.ss-page .ss-detail-atm-rings .ring.r4 { width: 160px; height: 160px; border-color: rgba(201, 168, 76, 0.32); animation-duration: 40s; animation-direction: reverse; }
.ss-page .ss-detail-atm-rings .dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pas-gold);
  box-shadow: 0 0 24px rgba(201, 168, 76, 0.5);
}
@keyframes ssRingsRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Breath atmosphere — pulsing concentric waves */
.ss-page .ss-detail-atm-breath .wave {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.16) 0%, rgba(201, 168, 76, 0) 70%);
  width: 480px;
  height: 480px;
  opacity: 0;
  animation: ssBreathe 8s ease-in-out infinite;
}
.ss-page .ss-detail-atm-breath .wave.w1 { animation-delay: 0s; }
.ss-page .ss-detail-atm-breath .wave.w2 { animation-delay: 2s; }
.ss-page .ss-detail-atm-breath .wave.w3 { animation-delay: 4s; }
.ss-page .ss-detail-atm-breath .wave.w4 { animation-delay: 6s; }
@keyframes ssBreathe {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
  20%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.4); }
}

/* Glow atmosphere — soft warm radial */
.ss-page .ss-detail-atm-glow .glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.30) 0%, rgba(201, 168, 76, 0.10) 35%, rgba(0,0,0,0) 70%);
  filter: blur(8px);
  animation: ssGlowFloat 14s ease-in-out infinite;
}
@keyframes ssGlowFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -55%) scale(1.06); }
}
.ss-page .ss-detail-hero .ss-breadcrumb {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
.ss-page .ss-detail-hero .ss-breadcrumb span { color: rgba(255,255,255,0.6); }
.ss-page .ss-detail-hero .ss-hero-label { margin-bottom: 28px; }
.ss-page .ss-detail-title {
  font-family: var(--serif);
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.ss-page .ss-detail-quote {
  position: relative;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--pas-gold);
  margin: 0 0 28px;
  max-width: 660px;
}
.ss-page .ss-detail-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.45;
  color: #fff;
  margin: 0 0 10px;
}
.ss-page .ss-detail-quote cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pas-gold);
}
.ss-page .ss-detail-intro p {
  font-size: 17.5px;
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  line-height: 1.8;
  margin: 0 0 18px;
  max-width: 620px;
}
.ss-page .ss-detail-intro p:last-child { margin-bottom: 0; }
.ss-page .ss-detail-hero-cta { margin-top: 36px; }

/* Body sections — wider container + premium editorial typography */
.ss-page .ss-detail-section {
  padding: 64px 0;
  border-top: 1px solid var(--pas-border);
  max-width: 920px;
}
.ss-page .ss-detail-section:first-of-type { border-top: none; padding-top: 80px; }
.ss-page .ss-detail-section-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.18;
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
.ss-page .ss-detail-section-body p {
  font-size: 17.5px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.8;
  margin: 0 0 18px;
}
.ss-page .ss-detail-section-body p:last-child { margin-bottom: 0; }
.ss-page .ss-detail-section-body strong { font-weight: 500; color: var(--pas-ink); }

/* Bullets — now visually richer (card-like containers with subtle hover) */
.ss-page .ss-detail-bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.ss-page .ss-detail-bullets li {
  position: relative;
  padding: 18px 18px 18px 44px;
  border-top: 1px solid var(--pas-border);
  font-size: 17px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.6;
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.ss-page .ss-detail-bullets li:last-child { border-bottom: 1px solid var(--pas-border); }
.ss-page .ss-detail-bullets li::before {
  content: '';
  position: absolute;
  left: 12px; top: 28px;
  width: 22px; height: 1px;
  background: var(--pas-gold);
  transition: width 0.3s ease;
}
.ss-page .ss-detail-bullets li:hover {
  background: rgba(201, 168, 76, 0.05);
  padding-left: 50px;
}
.ss-page .ss-detail-bullets li:hover::before { width: 28px; }

.ss-page .ss-detail-section-footer {
  margin-top: 32px;
  padding: 28px 32px;
  background: rgba(201, 168, 76, 0.06);
  border-left: 3px solid var(--pas-gold);
  border-radius: 4px;
}
.ss-page .ss-detail-section-footer p {
  font-size: 17.5px;
  font-weight: 300;
  color: var(--pas-ink);
  line-height: 1.8;
  font-style: italic;
  margin: 0;
  max-width: 720px;
}
/* Optional per-section CTA button (reuses .ss-btn-primary gold style) */
.ss-page .ss-detail-section-cta { margin-top: 28px; }

/* Steps section */
.ss-page .ss-detail-steps {
  padding: 72px 0 80px;
  border-top: 1px solid var(--pas-border);
}
.ss-page .ss-detail-steps-header { text-align: center; margin-bottom: 56px; }
.ss-page .ss-detail-steps-header .ss-label-center {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ss-page .ss-detail-steps-header .ss-label-center::before,
.ss-page .ss-detail-steps-header .ss-label-center::after {
  content: ''; display: block;
  width: 28px; height: 1px;
  background: var(--pas-muted);
}
.ss-page .ss-detail-steps-header .ss-label-center span {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pas-muted);
  font-weight: 600;
}
.ss-page .ss-detail-steps-header h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.2;
  margin: 0 auto;
  /* Full section measure: a 640px cap broke long headings into four short
     stacked lines instead of two full ones. */
  max-width: 100%;
}
.ss-page .ss-detail-steps-intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--pas-muted);
  max-width: 520px;
  margin: 14px auto 0;
  line-height: 1.7;
}
/* superseded by the step-card redesign further down */
.ss-page .ss-detail-steps-grid { display: grid; }
.ss-page .ss-detail-step {
  padding: 40px 32px 44px;
  border-right: 1px solid var(--pas-border);
  background: #fff;
}
.ss-page .ss-detail-step:last-child { border-right: none; }
.ss-page .ss-detail-step-num {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--pas-gold);
  margin-bottom: 22px;
  display: block;
  font-weight: 500;
}
.ss-page .ss-detail-step h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--pas-ink);
  line-height: 1.25;
  margin: 0 0 14px;
}
.ss-page .ss-detail-step p {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.75;
  margin: 0;
}

/* ─── Section media variants (banner / side-image / gallery) ─── */

/* Banner — cinematic full-width image above text */
.ss-page .ss-detail-section--banner { max-width: none; padding-left: 0; padding-right: 0; }
.ss-page .ss-detail-section--banner > *:not(.ss-detail-banner) { max-width: 920px; margin-left: auto; margin-right: auto; }
.ss-page .ss-detail-banner {
  margin: 0 0 56px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 30px 60px rgba(15, 21, 35, 0.18);
  position: relative;
}
.ss-page .ss-detail-banner img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.ss-page .ss-detail-banner:hover img { transform: scale(1.03); }
.ss-page .ss-detail-banner figcaption {
  position: absolute;
  bottom: 24px; left: 32px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(15, 21, 35, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 3px;
}

/* Side-image split — image + text grid */
.ss-page .ss-detail-section--side-left,
.ss-page .ss-detail-section--side-right { max-width: 1120px; }
.ss-page .ss-detail-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ss-page .ss-detail-section--side-right .ss-detail-split { direction: rtl; }
.ss-page .ss-detail-section--side-right .ss-detail-split > * { direction: ltr; }
.ss-page .ss-detail-split-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(15, 21, 35, 0.14);
}
.ss-page .ss-detail-split-image img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  transition: transform 1s ease;
}
.ss-page .ss-detail-split-image:hover img { transform: scale(1.05); }
.ss-page .ss-detail-image-caption {
  position: absolute;
  bottom: 18px; left: 18px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: rgba(15, 21, 35, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 7px 12px;
  border-radius: 2px;
}
.ss-page .ss-detail-split-text { min-width: 0; }

/* Gallery — 3-column row of images */
.ss-page .ss-detail-gallery {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ss-page .ss-detail-gallery-item {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 14px 34px rgba(15, 21, 35, 0.10);
  aspect-ratio: 4 / 5;
}
.ss-page .ss-detail-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,21,35,0) 60%, rgba(15,21,35,0.35) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.ss-page .ss-detail-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}
.ss-page .ss-detail-gallery-item:hover img { transform: scale(1.07); }
.ss-page .ss-detail-gallery-item:hover::after { opacity: 1; }

/* Auto-scrolling photo strip (marquee) */
/* ── EVENT CAROUSEL (replaces legacy auto-scrolling marquee strip) ─── */
/* The slider is media, not prose, so it uses the full container rather than
   the 920px reading measure its parent .ss-detail-section applies. */
.ss-page .ss-detail-section--marquee {
  max-width: none;
}
.ss-page .ss-detail-carousel {
  position: relative;
  margin: 40px 0 0;
}
.ss-page .ss-carousel-viewport {
  overflow: hidden;
  border-radius: 6px;
}
.ss-page .ss-carousel-track {
  display: flex;
  gap: 20px;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ss-page .ss-carousel-slide {
  flex: 0 0 calc((100% - 40px) / 3); /* 3 per view across the full width */
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 21, 35, 0.10);
  background: var(--pas-navy2);
}
.ss-page .ss-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  /* The gallery is mixed orientation — four 3:2 landscapes and five 3:4
     portraits. A square box with object-fit: cover cut 33% off the landscapes
     and 25% off the portraits, always from the edges, so every shot zoomed
     onto the people and lost the room, the cabin, the view. `contain` shows
     each photo whole; the 4/3 box is the middle ground that keeps the
     letterboxing small on both orientations. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
/* Arrows */
.ss-page .ss-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(15, 21, 35, 0.55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.ss-page .ss-carousel-arrow:hover { background: var(--pas-gold); color: var(--pas-navy); }
.ss-page .ss-carousel-arrow svg { width: 20px; height: 20px; }
.ss-page .ss-carousel-arrow.prev { left: 12px; }
.ss-page .ss-carousel-arrow.next { right: 12px; }
/* Dots */
.ss-page .ss-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.ss-page .ss-carousel-dots button {
  width: 9px; height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(15, 21, 35, 0.22);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.ss-page .ss-carousel-dots button.is-active {
  background: var(--pas-gold);
  transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
  .ss-page .ss-carousel-track { transition: none; }
}
@media (max-width: 1100px) {
  .ss-page .ss-carousel-slide { flex-basis: calc((100% - 20px) / 2); } /* 2 per view */
}
@media (max-width: 768px) {
  .ss-page .ss-carousel-slide { flex-basis: 100%; } /* one slide per view */
  .ss-page .ss-carousel-track { gap: 12px; }
  .ss-page .ss-carousel-arrow { width: 38px; height: 38px; }
  .ss-page .ss-carousel-arrow svg { width: 18px; height: 18px; }
}

/* Detail page responsive */
@media (max-width: 980px) {
  .ss-page .ss-detail-hero.has-visual .ss-detail-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ss-page .ss-detail-hero-visual { min-height: 280px; }
  .ss-page .ss-detail-hero-image { max-width: 100%; }
  .ss-page .ss-detail-hero-image img { height: 360px; }
  .ss-page .ss-detail-atm { min-height: 320px; }
}
@media (max-width: 900px) {
  .ss-page .ss-detail-hero { padding: 128px 0 72px; }
  .ss-page .ss-detail-section { padding: 56px 0; }
  .ss-page .ss-detail-section:first-of-type { padding-top: 72px; }
  .ss-page .ss-detail-steps { padding: 56px 0 64px; }
  .ss-page .ss-detail-steps-grid { grid-template-columns: 1fr; }
  .ss-page .ss-detail-step { border-right: none; border-bottom: 1px solid var(--pas-border); }
  .ss-page .ss-detail-step:last-child { border-bottom: none; }
  .ss-page .ss-detail-section-body p { font-size: 16.5px; }
  .ss-page .ss-detail-bullets li { font-size: 16px; padding-left: 40px; }
  .ss-page .ss-detail-atm-rings .ring.r1 { width: 380px; height: 380px; }
  .ss-page .ss-detail-atm-rings .ring.r2 { width: 290px; height: 290px; }
  .ss-page .ss-detail-atm-rings .ring.r3 { width: 200px; height: 200px; }
  .ss-page .ss-detail-atm-rings .ring.r4 { width: 120px; height: 120px; }
  .ss-page .ss-detail-atm-breath .wave { width: 360px; height: 360px; }
  .ss-page .ss-detail-atm-glow .glow { width: 400px; height: 400px; }
  /* Media variants */
  .ss-page .ss-detail-split { grid-template-columns: 1fr; gap: 32px; }
  .ss-page .ss-detail-section--side-right .ss-detail-split { direction: ltr; }
  .ss-page .ss-detail-split-image img { height: 380px; }
  .ss-page .ss-detail-banner img { height: 380px; }
  .ss-page .ss-detail-banner { margin-bottom: 40px; }
  .ss-page .ss-detail-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ss-page .ss-detail-hero { padding: 112px 0 60px; }
  .ss-page .ss-detail-title { font-size: clamp(30px, 9vw, 42px); }
  .ss-page .ss-detail-quote { padding-left: 16px; }
  .ss-page .ss-detail-quote p { font-size: 19px; }
  .ss-page .ss-detail-intro p { font-size: 16.5px; }
  .ss-page .ss-detail-hero-image img { height: 280px; }
  .ss-page .ss-detail-section { padding: 44px 0; }
  .ss-page .ss-detail-section:first-of-type { padding-top: 56px; }
  .ss-page .ss-detail-section-heading { font-size: clamp(24px, 6vw, 30px); margin-bottom: 22px; }
  .ss-page .ss-detail-section-body p { font-size: 16px; line-height: 1.75; }
  .ss-page .ss-detail-bullets li { padding-left: 36px; font-size: 15.5px; }
  .ss-page .ss-detail-bullets li::before { left: 6px; }
  .ss-page .ss-detail-section-footer { padding: 22px 22px; }
  .ss-page .ss-detail-section-footer p { font-size: 16px; }
  /* Media variants on mobile */
  .ss-page .ss-detail-split-image img { height: 280px; }
  .ss-page .ss-detail-banner img { height: 260px; }
  .ss-page .ss-detail-banner figcaption { bottom: 14px; left: 16px; font-size: 11px; padding: 6px 10px; }
  .ss-page .ss-detail-gallery { grid-template-columns: 1fr; gap: 12px; }
}

/* Paslaugos responsive ─────────────────────── */
@media (max-width: 900px) {
  .ss-page .ss-intro-grid { grid-template-columns: 1fr; gap: 36px; }
  .ss-page .ss-service-row {
    grid-template-columns: 56px 1fr 1fr 64px;
    gap: 28px;
    padding: 44px 28px;
    min-height: 180px;
  }
  .ss-page .ss-service-arrow { width: 56px; height: 56px; }
  .ss-page .ss-promo { grid-template-columns: 1fr; min-height: auto; }
  .ss-page .ss-promo-img { height: 260px; }
  .ss-page .ss-steps-grid { grid-template-columns: 1fr; }
  .ss-page .ss-step { border-right: none; border-bottom: 1px solid var(--pas-border); }
  .ss-page .ss-step:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  .ss-page .ss-hero { padding: 112px 0 72px; }
  .ss-page .ss-service-row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 38px 22px;
    min-height: 0;
  }
  .ss-page .ss-service-num { display: none; }
  .ss-page .ss-service-arrow { justify-self: start; width: 52px; height: 52px; }
  .ss-page .ss-service-arrow svg { width: 18px; height: 18px; }
  .ss-page .ss-promo-body { padding: 36px 28px; }
  .ss-page .ss-how { padding: 60px 0 72px; }
  .ss-page .ss-cta-section { padding: 60px 0 80px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1.3fr 1fr; gap: 3rem; }
  .resources-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid .footer-col:nth-child(4) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }

  .nav .nav-links,
  .nav-links {
    position: fixed !important;
    top: 70px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 70px) !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--cream);
    padding: 3rem 2rem !important;
    gap: 1.75rem !important;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto;
    border-top: 1px solid var(--line-soft);
    margin: 0 !important;
    list-style: none;
    z-index: 999;
  }
  .nav .nav-links > li,
  .nav-links > li {
    width: 100%;
    display: block;
  }
  .nav .nav-links.open,
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.4rem; font-family: var(--serif); }

  /* Mobile dropdown — submenu flows inline below parent, no absolute positioning. */
  .nav-links li.has-children { position: relative; width: 100%; }
  .nav-links li.has-children > a { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .nav-links .submenu-caret { width: 12px; height: 8px; }
  .nav-links .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0.5rem 0 1rem;
    margin: 0;
    width: 100%;
    text-align: center;
  }
  .nav-links .sub-menu a {
    font-size: 1.05rem;
    font-family: var(--serif);
    color: var(--text-soft);
    padding: 0.5rem 1rem;
  }
  .nav-links .sub-menu a:hover,
  .nav-links .sub-menu a.active {
    background: transparent;
    color: var(--brand);
  }

  .nav-links a.nav-cta,
  .nav-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.05rem;
    padding: 1rem 1.6rem;
    margin-top: 1rem;
  }
  .menu-toggle { display: flex; }
  .menu-toggle,
  .menu-toggle:focus,
  .menu-toggle:active {
    -webkit-tap-highlight-color: transparent;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-text { min-width: 0; }
  .hero h1 { font-size: clamp(2rem, 7.5vw, 3rem); overflow-wrap: break-word; word-break: break-word; }
  .hero-portrait { max-width: 380px; }
  .hero-compass { right: -25%; opacity: 0.1; }

  .orient-grid { grid-template-columns: 1fr; }
  .vision-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .services-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .services-grid { grid-template-columns: 1fr; }
  .trust-inner { grid-template-columns: 1fr; gap: 3rem; }
  .trust-image { position: relative; top: 0; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .resources-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .about-intro { grid-template-columns: 1fr; gap: 3rem; }
  .about-portrait { position: relative; top: 0; max-width: 480px; }
  .feature-program { grid-template-columns: 1fr; padding: 2.5rem; gap: 2rem; }
  .svc-row { grid-template-columns: 1fr; gap: 1rem; padding: 2.5rem 0; }
  .svc-row .num { font-size: 1rem; }
  .svc-row .arrow-circle { width: 48px; height: 48px; }
  .org-cats { grid-template-columns: 1fr; }
  .store-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .form-card { padding: 2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .skills-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 9rem 0 4rem; }
}
@media (max-width: 560px) {
  .hero { padding: 7rem 0 4rem; min-height: auto; }
  .hero-stats { flex-direction: column; gap: 1rem; padding-left: 1rem; }
  .resources-grid { grid-template-columns: 1fr; }
  .store-grid { grid-template-columns: 1fr; }
  .testimonial { padding: 2rem 1.75rem; }
  .orient-card { padding: 2.5rem 1.75rem; min-height: auto; }
  .service-item { padding: 2.25rem 1.75rem; min-height: auto; }
  .feature-program { padding: 2rem 1.5rem; }
  .form-card { padding: 1.75rem; }
  .nav-cta { display: none; }
}

/* ==========================================================================
   UI POLISH v2 — final overrides per Nov 2026 client feedback round
   Scope: typography upsize, service-row hover lift, premium quote block,
   gallery refinement, breath-page ambient, final-CTA gold divider, mobile.
   Loaded last so each rule overrides earlier defaults without edits in place.
   ========================================================================== */

/* ── Paslaugos hero sub: widen and lift the leading ─────────────────────── */
.ss-page .ss-hero-sub {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.78;
}

/* ── Service rows: smoother transition, subtle lift, gold left accent ──── */
.ss-page .ss-service-row {
  border-left: 3px solid transparent;
  transition: background 0.55s var(--ease),
              transform 0.45s var(--ease),
              box-shadow 0.55s var(--ease),
              border-color 0.45s var(--ease);
}
.ss-page .ss-service-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(15, 21, 35, 0.14);
  border-left-color: var(--pas-gold);
}

/* ── Detail page body text: nudge to 18px / 1.78 for editorial calm ────── */
.ss-page .ss-detail-section-body p,
.ss-page .ss-detail-section-footer p {
  font-size: 18px;
  line-height: 1.78;
}
.ss-page .ss-detail-bullets li {
  font-size: 17.5px;
  line-height: 1.65;
  padding-top: 20px;
  padding-bottom: 20px;
}
.ss-page .ss-detail-bullets li:hover {
  background: rgba(201, 168, 76, 0.06);
}
.ss-page .ss-detail-intro p {
  font-size: 18px;
  line-height: 1.82;
}

/* ── Premium quote block: larger italic, softer gold, more breathing room  */
.ss-page .ss-detail-quote {
  padding: 30px 0 30px 38px;
  margin: 12px 0 36px;
  border-left: 4px solid rgba(201, 168, 76, 0.62);
  position: relative;
}
.ss-page .ss-detail-quote::before {
  content: '\201C';
  position: absolute;
  top: -22px;
  left: 22px;
  font-family: var(--serif);
  font-size: 96px;
  line-height: 1;
  color: rgba(201, 168, 76, 0.28);
  pointer-events: none;
}
.ss-page .ss-detail-quote p {
  font-size: clamp(22px, 2.9vw, 30px);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* ── Gallery: gentle saturation lift on hover, refine shadow ───────────── */
.ss-page .ss-detail-gallery-item {
  box-shadow: 0 16px 38px rgba(15, 21, 35, 0.12);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.ss-page .ss-detail-gallery-item img {
  filter: saturate(0.95) brightness(0.97);
  transition: transform 0.9s ease, filter 0.6s ease;
}
.ss-page .ss-detail-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(15, 21, 35, 0.18);
}
.ss-page .ss-detail-gallery-item:hover img {
  filter: saturate(1.08) brightness(1.02);
}
/* Allow up to 4 columns when gallery has many images */
@media (min-width: 1100px) {
  .ss-page .ss-detail-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .ss-page .ss-detail-gallery:has(> :nth-child(7)) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Final CTA: gold divider on top, soft sage glow behind heading ─────── */
.ss-page .ss-cta-section {
  position: relative;
  padding-top: 96px;
}
.ss-page .ss-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--pas-gold, #c9a961), transparent);
}
.ss-page .ss-cta-section::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201, 168, 76, 0.07), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.ss-page .ss-cta-section > * { position: relative; z-index: 1; }

/* ── Kvėpavimo: ambient breathing gradient on the whole detail page ────── */
.ss-page:has(.ss-detail-hero[data-atmosphere="breath"]) {
  background:
    radial-gradient(ellipse 60% 40% at 80% 15%, rgba(143, 184, 198, 0.07), transparent 70%),
    radial-gradient(ellipse 50% 35% at 20% 85%, rgba(201, 168, 76, 0.05), transparent 70%);
  animation: ss-ambient-breath 14s ease-in-out infinite alternate;
}
@keyframes ss-ambient-breath {
  0%   { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 4% 2%, -3% -2%; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-page:has(.ss-detail-hero[data-atmosphere="breath"]) { animation: none; }
}

/* ── Paslaugos promo image: hide placeholder once a real image is in ───── */
.ss-page .ss-promo-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Mobile-specific tightening (per "mobile polish before launch" feedback) */
@media (max-width: 720px) {
  /* Detail pages: increase touch comfort + reduce edge crowding */
  .ss-page .ss-detail-section-body p,
  .ss-page .ss-detail-section-footer p { font-size: 16.5px; line-height: 1.75; }
  .ss-page .ss-detail-bullets li { font-size: 16px; padding-top: 16px; padding-bottom: 16px; }
  .ss-page .ss-detail-intro p { font-size: 16.5px; }
  .ss-page .ss-detail-quote { padding-left: 22px; margin-bottom: 28px; }
  .ss-page .ss-detail-quote::before { font-size: 72px; left: 12px; top: -16px; }
  .ss-page .ss-detail-quote p { font-size: 19px; line-height: 1.45; }

  /* CTAs: ensure full-width tap targets and centered layout */
  .ss-page .ss-cta-section { padding-top: 72px; }
  .ss-page .ss-cta-section::after { width: 220px; height: 220px; top: 16px; }
  .ss-page .ss-cta-btn { width: 100%; justify-content: center; }

  /* Service rows on mobile: lighter touch zones */
  .ss-page .ss-service-row { border-left-width: 2px; }
  .ss-page .ss-service-row:hover { transform: none; }

  /* Gallery: 2-up on tablets, 1-up handled below 600px already */
  .ss-page .ss-detail-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .ss-page .ss-detail-gallery { grid-template-columns: 1fr; }
  .ss-page .ss-detail-gallery-item { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   UI POLISH v3 — dedicated cinematic image sections + service-row imagery
   ========================================================================== */

/* ── FEATURE: cinematic full-bleed image break on detail pages ─────────── */
.ss-page .ss-detail-section--feature {
  max-width: none;
  padding: 64px 0;
  border-top: none;
}
.ss-page .ss-detail-section--feature + .ss-detail-section { border-top: none; }
.ss-page .ss-detail-feature {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 40px 80px rgba(15, 21, 35, 0.22);
}
.ss-page .ss-detail-feature img {
  display: block;
  width: 100%;
  height: clamp(380px, 56vw, 620px);
  object-fit: cover;
  transition: transform 2s var(--ease, ease);
}
.ss-page .ss-detail-feature:hover img { transform: scale(1.04); }
.ss-page .ss-detail-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 21, 35, 0) 35%, rgba(15, 21, 35, 0.55) 100%),
    linear-gradient(180deg, rgba(15, 21, 35, 0.25) 0%, rgba(15, 21, 35, 0) 25%);
  pointer-events: none;
}
.ss-page .ss-detail-feature figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 0 44px;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}
.ss-page .ss-detail-feature figcaption span {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 24px);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.96);
  padding: 14px 28px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  position: relative;
}
.ss-page .ss-detail-feature figcaption span::before,
.ss-page .ss-detail-feature figcaption span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: rgba(201, 168, 76, 0.7);
}
.ss-page .ss-detail-feature figcaption span::before { right: 100%; margin-right: 14px; }
.ss-page .ss-detail-feature figcaption span::after  { left: 100%;  margin-left: 14px; }

/* Mobile: shorter cinematic image, smaller caption */
@media (max-width: 720px) {
  .ss-page .ss-detail-section--feature { padding: 40px 0; }
  .ss-page .ss-detail-feature img { height: clamp(260px, 56vw, 380px); }
  .ss-page .ss-detail-feature figcaption { padding-bottom: 28px; }
  .ss-page .ss-detail-feature figcaption span { font-size: 16px; padding: 10px 18px; }
  .ss-page .ss-detail-feature figcaption span::before,
  .ss-page .ss-detail-feature figcaption span::after { width: 18px; }
  .ss-page .ss-detail-feature figcaption span::before { margin-right: 8px; }
  .ss-page .ss-detail-feature figcaption span::after  { margin-left: 8px; }
}

/* ── PASLAUGOS service rows: always-visible subtle imagery, stronger on hover */
.ss-page .ss-service-row { overflow: hidden; }
.ss-page .ss-service-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  /* Always visible as a soft watermark; reveals on hover. */
  opacity: 0.22;
  transform: scale(1.04);
  filter: saturate(0.85);
  transition: opacity 0.7s var(--ease, ease), transform 1.4s var(--ease, ease), filter 0.7s var(--ease, ease);
  pointer-events: none;
  z-index: 0;
}
/* Soft cream wash always sits above the image so text on the row reads cleanly */
.ss-page .ss-service-row.has-hover-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(250, 248, 243, 0.92) 0%,
    rgba(250, 248, 243, 0.78) 50%,
    rgba(250, 248, 243, 0.55) 100%);
  transition: opacity 0.55s var(--ease, ease);
  pointer-events: none;
  z-index: 1;
  height: auto !important; width: 100% !important;
}
/* Dark navy overlay fades in on hover for the photo to "take over" with white text */
.ss-page .ss-service-row.has-hover-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 21, 35, 0.88), rgba(26, 47, 82, 0.82));
  opacity: 0;
  transition: opacity 0.55s var(--ease, ease);
  pointer-events: none;
  z-index: 2;
}
.ss-page .ss-service-row.has-hover-image:hover { background: transparent; }
.ss-page .ss-service-row.has-hover-image:hover .ss-service-bg {
  opacity: 0.55;
  transform: scale(1);
  filter: saturate(1);
}
.ss-page .ss-service-row.has-hover-image:hover::before { opacity: 0; }
.ss-page .ss-service-row.has-hover-image:hover::after { opacity: 1; }
/* Ensure foreground content stays above the bg + overlays */
.ss-page .ss-service-row > *:not(.ss-service-bg) { position: relative; z-index: 3; }

/* Mobile: drop watermark intensity (touch devices have no hover state to "reveal" into) */
@media (max-width: 720px) {
  .ss-page .ss-service-bg { opacity: 0.16; }
}

/* Accessibility: don't animate on reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ss-page .ss-service-bg { transition: opacity 0.2s ease; transform: none; }
  .ss-page .ss-detail-feature img { transition: none; }
  .ss-page .ss-detail-feature:hover img { transform: none; }
}

/* ==========================================================================
   IMAGE PLACEHOLDER — elegant tonal block when a section's image isn't set
   Renders for feature / banner / side-left / side-right whenever the
   resolved image URL is empty, so the layout slot stays visible and the
   page rhythm is preserved before final images are uploaded.
   ========================================================================== */
.ss-page .ss-detail-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 280px;
  background:
    linear-gradient(135deg, rgba(15, 21, 35, 0.04) 0%, rgba(15, 21, 35, 0.10) 100%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(15, 21, 35, 0.025) 22px 23px);
  color: rgba(15, 21, 35, 0.45);
  border: 1px solid rgba(15, 21, 35, 0.08);
  border-radius: inherit;
  position: relative;
  overflow: hidden;
}
.ss-page .ss-detail-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(201, 168, 76, 0.35);
  border-radius: 4px;
  pointer-events: none;
}
.ss-page .ss-detail-img-placeholder-mark {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  color: rgba(201, 168, 76, 0.65);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0;
}
.ss-page .ss-detail-img-placeholder-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15, 21, 35, 0.4);
  font-weight: 500;
}

/* Feature placeholder — match cinematic full-bleed proportions */
.ss-page .ss-detail-feature.is-placeholder {
  box-shadow: 0 24px 60px rgba(15, 21, 35, 0.10);
}
.ss-page .ss-detail-feature.is-placeholder .ss-detail-img-placeholder {
  height: clamp(380px, 56vw, 620px);
  border-radius: 0;
}
.ss-page .ss-detail-feature.is-placeholder::after { display: none; }
.ss-page .ss-detail-feature.is-placeholder figcaption span {
  color: rgba(15, 21, 35, 0.55);
  text-shadow: none;
}
.ss-page .ss-detail-feature.is-placeholder figcaption span::before,
.ss-page .ss-detail-feature.is-placeholder figcaption span::after {
  background: rgba(201, 168, 76, 0.55);
}

/* Banner placeholder — match banner 520px frame */
.ss-page .ss-detail-banner.is-placeholder { box-shadow: 0 20px 44px rgba(15, 21, 35, 0.08); }
.ss-page .ss-detail-banner.is-placeholder .ss-detail-img-placeholder {
  height: 520px;
  border-radius: 8px;
}

/* Side-layout placeholder — match split image 520px frame + 4:5 cap on small screens */
.ss-page .ss-detail-split-image.is-placeholder { box-shadow: 0 24px 56px rgba(15, 21, 35, 0.08); }
.ss-page .ss-detail-split-image.is-placeholder .ss-detail-img-placeholder {
  height: 520px;
  border-radius: 8px;
}

/* Mobile: match the responsive heights used by real images */
@media (max-width: 900px) {
  .ss-page .ss-detail-banner.is-placeholder .ss-detail-img-placeholder { height: 380px; }
  .ss-page .ss-detail-split-image.is-placeholder .ss-detail-img-placeholder { height: 380px; }
}
@media (max-width: 720px) {
  .ss-page .ss-detail-feature.is-placeholder .ss-detail-img-placeholder { height: clamp(260px, 56vw, 380px); }
  .ss-page .ss-detail-img-placeholder { min-height: 220px; }
  .ss-page .ss-detail-img-placeholder-mark { font-size: 30px; }
}
@media (max-width: 600px) {
  .ss-page .ss-detail-banner.is-placeholder .ss-detail-img-placeholder { height: 260px; }
}
@media (max-width: 480px) {
  .ss-page .ss-detail-split-image.is-placeholder .ss-detail-img-placeholder { height: 280px; }
}

/* ==========================================================================
   PROJECTS GRID — full-width stacked layout
   All project cards on /organizacijoms/ now render as side-by-side
   image+text blocks, stacked vertically. Reuses the existing .ss-card-wide
   visual treatment but applies it to every card in .ss-grid.
   ========================================================================== */
.ss-grid {
  grid-template-columns: 1fr;
  gap: 32px;
}
.ss-grid .ss-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 580px 1fr;
  min-height: 380px;
}
/* Wider image column: at 460px these landscape photos lost ~40-55% of their
   width to the object-fit crop. */
.ss-grid .ss-card .ss-card-img,
.ss-grid .ss-card .ss-card-img-placeholder {
  height: 100%;
  min-height: 380px;
  width: 580px;
  flex-shrink: 0;
}
.ss-grid .ss-card .ss-card-body {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ss-grid .ss-card .ss-card-title { font-size: 30px; }
/* Logos always sit on the card's bottom edge, below the list/partners that
   follow them in source order. */
.ss-grid .ss-card .ss-card-badges {
  order: 1;
  margin-top: auto;
  padding-top: 28px;
}

/* Tablet: shrink image column proportionally */
@media (max-width: 1024px) {
  .ss-grid .ss-card { grid-template-columns: 440px 1fr; }
  .ss-grid .ss-card .ss-card-img,
  .ss-grid .ss-card .ss-card-img-placeholder { width: 440px; min-height: 340px; }
  .ss-grid .ss-card .ss-card-body { padding: 32px 34px; }
}

/* Mobile: stack image on top of text */
@media (max-width: 760px) {
  .ss-grid { gap: 24px; }
  .ss-grid .ss-card { grid-template-columns: 1fr; min-height: 0; }
  .ss-grid .ss-card .ss-card-img,
  .ss-grid .ss-card .ss-card-img-placeholder { width: 100%; height: 240px; min-height: 240px; }
  .ss-grid .ss-card .ss-card-body { padding: 32px 28px 36px; }
  .ss-grid .ss-card .ss-card-title { font-size: 24px; }
}

/* ==========================================================================
   FULL-WIDTH SECTIONS — home (.home) & contact (kontaktai) pages
   Body gets .ss-fullwidth (see functions.php). Elementor's boxed section
   wrapper is stretched to the viewport so each widget's full-bleed background
   reaches the edges. The widgets keep their own inner .container for the
   centered, readable content column — so only the backgrounds go edge-to-edge.
   ========================================================================== */
body.ss-fullwidth .elementor-section.elementor-section-boxed > .elementor-container,
body.ss-fullwidth .elementor-section > .elementor-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* Remove Elementor's column-gap padding that would inset the section background */
body.ss-fullwidth .elementor-column > .elementor-element-populated,
body.ss-fullwidth .elementor-widget-wrap {
  padding: 0;
}
/* Newer Flexbox containers, in case any section is built/rebuilt as one */
body.ss-fullwidth .e-con.e-con-boxed > .e-con-inner,
body.ss-fullwidth .e-con > .e-con-inner {
  max-width: 100%;
}
body.ss-fullwidth .e-con,
body.ss-fullwidth .e-con > .e-con-inner {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   UNIFIED SECTION TITLES — every section heading caps at 56px (client spec).
   clamp() keeps it exactly 56px on desktop and scales down on small screens
   so long Lithuanian titles don't overflow. Listed last so it wins by source
   order. Card/item titles (.ss-card-title, .ss-service-title) are excluded
   on purpose — those are list items, not section titles.
   ========================================================================== */
.orient-split .orient-head h2,
.orient-head h2,
.vision-intro h2,
.vision-text h2,
.services-head h2,
.trust-content h2,
.testimonials-head h2,
.resources-head h2,
.final-cta h2,
.feature-program h2,
.ss-section-title,
.ss-page .ss-intro-left h2,
.ss-page .ss-promo-body h2,
.ss-page .ss-how-header h2,
.ss-page .ss-cta-section h2,
.ss-page .ss-bio-body h2,
.ss-page .ss-principles-header h2,
.ss-page .ss-detail-section-heading,
.ss-page .ss-detail-steps-header h2 {
  font-size: clamp(30px, 5vw, 48px);
}

/* ==========================================================================
   CENTERED HEROES — Kontaktai (.page-hero) & Projektai (.ss-hero-wrap)
   Scoped via body.ss-hero-center (see functions.php) so the shared
   .page-hero on Organizacijoms stays left-aligned.
   ========================================================================== */
/* Kontaktai */
body.ss-hero-center .page-hero-inner {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
body.ss-hero-center .page-hero .breadcrumb,
body.ss-hero-center .page-hero .eyebrow {
  justify-content: center;
}
body.ss-hero-center .page-hero-sub {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
/* Projektai */
body.ss-hero-center .ss-hero-inner {
  text-align: center;
}
body.ss-hero-center .ss-hero-label {
  justify-content: center;
}
body.ss-hero-center .ss-hero-wrap h1 {
  margin-left: auto;
  margin-right: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   Paslaugos page — this used to be a per-page patch that nudged body text up
   to 16–18px to "match the other pages". The TYPOGRAPHY UNIFICATION block at
   the end of this file now sets those sizes for every page at once, so the
   one-offs are gone; only the dark promo panel, which is genuinely its own
   surface, still sets its own size.
   ────────────────────────────────────────────────────────────────────────── */
.ss-page.ss-page-paslaugos .ss-promo-body p { font-size: var(--fs-body); }

/* ── Legal pages (Privatumo / Slapukų politika) ───────────────────── */
.ss-legal-page .elementor-widget-text-editor,
.page-template-default .elementor-widget-text-editor p,
.elementor-page .elementor-widget-text-editor p {
  color: var(--text-soft);
}
.elementor-widget-text-editor h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  margin: 2.6rem 0 0.9rem;
  line-height: 1.3;
}
.elementor-widget-text-editor p {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.elementor-widget-text-editor ul {
  margin: 0 0 1.25rem 0;
  padding-left: 1.2rem;
  list-style: none;
}
.elementor-widget-text-editor ul li {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1rem;
}
.elementor-widget-text-editor ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.68em;
  width: 5px; height: 1px;
  background: var(--gold);
}
.elementor-widget-text-editor a { color: var(--brand); text-decoration: underline; }
.elementor-widget-text-editor a:hover { color: var(--brand-deep); }
.ss-legal-intro { font-size: 1.08rem !important; }
.ss-legal-updated {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem !important;
  color: var(--text-soft);
  font-style: italic;
}

/* ── Apie mane: show the whole photo — never crop people out (client req.) ── */
.ss-page .ss-bio-img img {
  height: auto;
  max-height: 480px;
  object-fit: contain;
  object-position: center;
  background: var(--paper);
}
.ss-page .ss-bio-img { align-self: start; }
@media (max-width: 900px) {
  .ss-page .ss-bio-img img { max-height: 360px; height: auto; }
}

/* ── KRYPTYS: three equal blocks in one row (client req. — was over-stretched) ── */
.ss-page .ss-detail-colrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
  margin: 8px 0 48px;
}
.ss-page .ss-detail-colrow .ss-detail-section {
  margin: 0;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 100%;
}
.ss-page .ss-detail-colrow .ss-detail-section-heading {
  font-size: 1.12rem;
  line-height: 1.35;
  margin-bottom: 1rem;
}
.ss-page .ss-detail-colrow .ss-detail-bullets li {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-soft);
}
@media (max-width: 900px) {
  .ss-page .ss-detail-colrow { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Justify body copy to both edges (client req. — "į abu kraštus tvarkingai") ── */
.ss-page .ss-bio-text p,
.ss-page .ss-detail-section-body p,
.ss-page .ss-intro-right p,
.ss-page .ss-hero-intro p,
.elementor-widget-text-editor p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Never justify short/centred display text — it creates ugly word gaps */
.ss-page .ss-intro-right > p:last-of-type,
.ss-page .ss-hero-sub,
.ss-page .ss-section-intro,
.ss-page blockquote p,
.ss-legal-updated,
.ss-page .ss-detail-colrow p {
  text-align: left;
}
@media (max-width: 700px) {
  .ss-page .ss-bio-text p,
  .ss-page .ss-detail-section-body p,
  .elementor-widget-text-editor p { text-align: left; }
}

/* ── Cookie consent banner ───────────────────────────────────────── */
.ss-cookie {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 9999;
  background: var(--midnight);
  color: var(--pearl);
  border: 1px solid rgba(201,169,97,0.28);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: fadeUp 0.5s var(--ease) forwards;
}
.ss-cookie[hidden] { display: none; }
.ss-cookie-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.ss-cookie-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(238,242,248,0.85);
  text-align: left;
}
.ss-cookie-text a { color: var(--gold-soft); text-decoration: underline; }
.ss-cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-cookie-btn {
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201,169,97,0.45);
  background: transparent;
  color: var(--pearl);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ss-cookie-btn:hover { border-color: var(--gold); background: rgba(201,169,97,0.12); }
.ss-cookie-accept { background: var(--gold); border-color: var(--gold); color: #1a1200; font-weight: 500; }
.ss-cookie-accept:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.ss-cookie-panel {
  flex: 1 1 100%;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}
.ss-cookie-panel[hidden] { display: none; }
.ss-cookie-opt {
  font-size: 0.88rem;
  color: rgba(238,242,248,0.8);
  display: flex; align-items: center; gap: 8px;
}
.ss-cookie-opt span { color: rgba(238,242,248,0.5); }
@media (max-width: 700px) {
  .ss-cookie { left: 10px; right: 10px; bottom: 10px; }
  .ss-cookie-inner { padding: 16px; }
  .ss-cookie-actions { width: 100%; }
  .ss-cookie-btn { flex: 1 1 auto; }
}

/* ── Form consent notice (GDPR) ─────────────────────────────────── */
.ss-form-consent {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 1.1rem;
  text-align: left;
}
.ss-form-consent a { color: var(--brand); text-decoration: underline; }
.ss-form-consent a:hover { color: var(--brand-deep); }

/* ── Projektai: larger body text, bigger/bolder project numbers (client req.) ── */
.ss-proj .ss-card-nr {
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.ss-proj .ss-card-body,
.ss-proj .ss-card-body p,
.ss-proj .ss-card-list li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
}
.ss-proj .ss-card-partners p {
  font-size: 14px;
  color: var(--text-soft);
}
/* Keep the projects heading clear of the dark hero band above it. This sits on
   the section itself, so the gap survives the label or heading being emptied —
   it previously hung off .ss-section-label and vanished with it. */
.ss-proj {
  padding-top: 88px;
}

/* ═══════════════════════════════════════════════════════════════════
   PROCESS STEPS — card redesign (responsive + staggered motion)
   Auto-fitting track: no orphaned empty cell at any step count.
   ═══════════════════════════════════════════════════════════════════ */
.ss-page .ss-detail-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  border: 0;
  background: none;
  overflow: visible;
  border-radius: 0;
  counter-reset: ss-step;
}
/* 5 items: 3 on top, bottom 2 centred — never a lone gap */
.ss-page .ss-detail-steps-grid[data-steps="5"] { grid-template-columns: repeat(6, 1fr); }
.ss-page .ss-detail-steps-grid[data-steps="5"] > .ss-detail-step { grid-column: span 2; }
.ss-page .ss-detail-steps-grid[data-steps="5"] > .ss-detail-step:nth-child(4) { grid-column: 2 / span 2; }
.ss-page .ss-detail-steps-grid[data-steps="5"] > .ss-detail-step:nth-child(5) { grid-column: 4 / span 2; }

.ss-page .ss-detail-step {
  position: relative;
  padding: 34px 28px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    background 0.5s ease;
}
/* gold sweep that fills from the left on hover */
.ss-page .ss-detail-step::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--brand) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
/* soft radial glow that blooms behind the number */
.ss-page .ss-detail-step::after {
  content: '';
  position: absolute;
  top: -40px; left: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,0.16) 0%, rgba(201,169,97,0) 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.ss-page .ss-detail-step:hover,
.ss-page .ss-detail-step:focus-within {
  transform: translateY(-8px);
  border-color: rgba(201,169,97,0.5);
  box-shadow: 0 22px 48px rgba(15,31,58,0.13);
}
.ss-page .ss-detail-step:hover::before,
.ss-page .ss-detail-step:focus-within::before { transform: scaleY(1); }
.ss-page .ss-detail-step:hover::after,
.ss-page .ss-detail-step:focus-within::after { opacity: 1; transform: scale(1); }

/* ── number badge ── */
.ss-page .ss-detail-step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,97,0.45);
  background: linear-gradient(145deg, rgba(201,169,97,0.10), rgba(201,169,97,0));
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--gold);
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.ss-page .ss-detail-step:hover .ss-detail-step-num,
.ss-page .ss-detail-step:focus-within .ss-detail-step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1200;
  transform: scale(1.08) rotate(-4deg);
}
.ss-page .ss-detail-step h3 {
  position: relative; z-index: 1;
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  color: var(--ink);
  transition: color 0.4s ease;
}
.ss-page .ss-detail-step p {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-soft);
  text-align: left;
}

/* ── staggered entrance (uses the site's .reveal observer) ── */
.ss-page .ss-detail-step.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--step-i, 0) * 110ms);
}
.ss-page .ss-detail-step.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* hover transform must win once the card has landed */
.ss-page .ss-detail-step.reveal.in:hover,
.ss-page .ss-detail-step.reveal.in:focus-within {
  transform: translateY(-8px);
  transition-delay: 0s;
}

/* ── responsive ── */
@media (max-width: 1024px) {
  .ss-page .ss-detail-steps-grid,
  .ss-page .ss-detail-steps-grid[data-steps="5"] { grid-template-columns: repeat(2, 1fr); }
  .ss-page .ss-detail-steps-grid[data-steps="5"] > .ss-detail-step,
  .ss-page .ss-detail-steps-grid[data-steps="5"] > .ss-detail-step:nth-child(4),
  .ss-page .ss-detail-steps-grid[data-steps="5"] > .ss-detail-step:nth-child(5) {
    grid-column: auto;
  }
}
@media (max-width: 680px) {
  .ss-page .ss-detail-steps-grid,
  .ss-page .ss-detail-steps-grid[data-steps="5"] {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ss-page .ss-detail-step { padding: 26px 22px 24px; border-radius: 10px; }
  .ss-page .ss-detail-step-num { width: 38px; height: 38px; margin-bottom: 14px; font-size: 0.88rem; }
  .ss-page .ss-detail-step h3 { font-size: 1.08rem; }
  .ss-page .ss-detail-step p { font-size: 0.92rem; }
  /* touch devices have no hover — show the accent bar by default */
  .ss-page .ss-detail-step::before { transform: scaleY(1); opacity: 0.55; }
  .ss-page .ss-detail-step.reveal { transition-delay: calc(var(--step-i, 0) * 70ms); }
}
@media (hover: none) {
  .ss-page .ss-detail-step:hover { transform: none; box-shadow: none; }
  .ss-page .ss-detail-step.reveal.in:hover { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-page .ss-detail-step,
  .ss-page .ss-detail-step.reveal,
  .ss-page .ss-detail-step-num,
  .ss-page .ss-detail-step::before,
  .ss-page .ss-detail-step::after {
    transition: none !important;
    animation: none !important;
    transition-delay: 0s !important;
  }
  .ss-page .ss-detail-step.reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED CARD SYSTEM
   One card design across the whole site — homepage service cards,
   "Kaip kuriamas pokytis" (.ss-step) and process steps (.ss-detail-step)
   now share identical geometry, hover and motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ── grids: separate cards, no joined table ── */
.ss-page .ss-steps-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}

/* ── the card ── */
.ss-page .ss-step,
.ss-page .ss-detail-step {
  padding: 3rem 2.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  overflow: hidden;
  isolation: isolate;
  transition:
    background 0.4s var(--ease),
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.ss-page .ss-step:last-child { border-right: 1px solid var(--line); }

/* gold bar sweeping across the top — identical to the homepage cards */
.ss-page .ss-step::before,
.ss-page .ss-detail-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: auto;
  width: 0; height: 3px;
  background: var(--gold);
  transform: none;
  transition: width 0.5s ease;
  z-index: 2;
}
.ss-page .ss-step:hover::before,
.ss-page .ss-step:focus-within::before,
.ss-page .ss-detail-step:hover::before,
.ss-page .ss-detail-step:focus-within::before {
  width: 100%;
  transform: none;
}
/* drop the radial glow so the hover reads exactly like the homepage */
.ss-page .ss-detail-step::after { content: none; }

/* ── hover: dark navy, as the client asked for on the homepage ── */
.ss-page .ss-step:hover,
.ss-page .ss-step:focus-within,
.ss-page .ss-detail-step:hover,
.ss-page .ss-detail-step:focus-within {
  background: var(--midnight);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(15, 31, 58, 0.28);
  border-color: rgba(201, 169, 97, 0.4);
}

/* ── number: serif italic with the trailing rule, as on the homepage ── */
.ss-page .ss-step-num,
.ss-page .ss-detail-step-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: normal;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: auto; height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  transform: none;
  transition: color 0.3s;
}
.ss-page .ss-step-num::after,
.ss-page .ss-detail-step-num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  transition: background 0.4s ease;
}
.ss-page .ss-step:hover .ss-step-num,
.ss-page .ss-detail-step:hover .ss-detail-step-num {
  color: var(--gold-soft);
  background: none;
  transform: none;
}
.ss-page .ss-step:hover .ss-step-num::after,
.ss-page .ss-detail-step:hover .ss-detail-step-num::after {
  background: rgba(201, 169, 97, 0.35);
}

/* ── text ── */
.ss-page .ss-step h3,
.ss-page .ss-detail-step h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--pas-ink, var(--ink));
  margin: 0 0 0.85rem;
  transition: color 0.4s ease;
}
.ss-page .ss-step p,
.ss-page .ss-detail-step p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0;
  text-align: left;
  transition: color 0.4s ease;
}
.ss-page .ss-step:hover h3,
.ss-page .ss-detail-step:hover h3 { color: var(--pearl); }
.ss-page .ss-step:hover p,
.ss-page .ss-detail-step:hover p { color: rgba(238, 242, 248, 0.78); }

/* ── staggered entrance, shared by both ── */
.ss-page .ss-step.reveal,
.ss-page .ss-detail-step.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--step-i, 0) * 110ms);
}
.ss-page .ss-step.reveal.in,
.ss-page .ss-detail-step.reveal.in { opacity: 1; transform: translateY(0) scale(1); }
.ss-page .ss-step.reveal.in:hover,
.ss-page .ss-step.reveal.in:focus-within,
.ss-page .ss-detail-step.reveal.in:hover,
.ss-page .ss-detail-step.reveal.in:focus-within {
  transform: translateY(-6px);
  transition-delay: 0s;
}

/* ── responsive ── */
@media (max-width: 1024px) {
  .ss-page .ss-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .ss-page .ss-step,
  .ss-page .ss-detail-step { min-height: 0; padding: 2.25rem 1.9rem; }
}
@media (max-width: 680px) {
  .ss-page .ss-steps-grid { grid-template-columns: 1fr; gap: 1rem; }
  .ss-page .ss-step,
  .ss-page .ss-detail-step { padding: 2rem 1.6rem; border-radius: 8px; }
  .ss-page .ss-step h3,
  .ss-page .ss-detail-step h3 { font-size: 1.2rem; }
  .ss-page .ss-step::before,
  .ss-page .ss-detail-step::before { width: 100%; opacity: 0.5; }
  .ss-page .ss-step.reveal,
  .ss-page .ss-detail-step.reveal { transition-delay: calc(var(--step-i, 0) * 70ms); }
}
@media (hover: none) {
  .ss-page .ss-step:hover,
  .ss-page .ss-detail-step:hover { background: #fff; transform: none; box-shadow: none; }
  .ss-page .ss-step:hover h3,
  .ss-page .ss-detail-step:hover h3 { color: var(--pas-ink, var(--ink)); }
  .ss-page .ss-step:hover p,
  .ss-page .ss-detail-step:hover p { color: var(--text-soft); }
  .ss-page .ss-step:hover .ss-step-num,
  .ss-page .ss-detail-step:hover .ss-detail-step-num { color: var(--text-soft); }
  .ss-page .ss-step.reveal.in:hover,
  .ss-page .ss-detail-step.reveal.in:hover { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-page .ss-step,
  .ss-page .ss-step.reveal,
  .ss-page .ss-detail-step,
  .ss-page .ss-detail-step.reveal {
    transition: none !important;
    transition-delay: 0s !important;
    opacity: 1;
    transform: none;
  }
}

/* ── Step cards have no CTA link, so the homepage 340px floor leaves a gap.
      Size to content instead; the grid still equalises heights per row.   ── */
.ss-page .ss-step,
.ss-page .ss-detail-step {
  min-height: 0;
  height: 100%;
  padding: 2.5rem 2.25rem;
  justify-content: flex-start;
}
.ss-page .ss-steps-grid,
.ss-page .ss-detail-steps-grid { align-items: stretch; }
.ss-page .ss-step p,
.ss-page .ss-detail-step p { margin-bottom: 0; }
.ss-page .ss-step > *:last-child,
.ss-page .ss-detail-step > *:last-child { margin-bottom: 0; }
@media (max-width: 680px) {
  .ss-page .ss-step,
  .ss-page .ss-detail-step { padding: 1.9rem 1.6rem; }
}

/* ── Legal page H1 (Privatumo / Slapukų politika) — brand serif, not kit blue ── */
/* class sits on the widget WRAPPER; target the inner heading, beat elementor kit */
.ss-legal-title.elementor-widget-heading .elementor-heading-title,
.elementor-page .ss-legal-title .elementor-heading-title {
  font-family: var(--serif) !important;
  font-size: clamp(2.1rem, 4.5vw, 3.1rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin-bottom: 1.6rem;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   EVENTS + REGISTRATION  (SS Events widget)
   Dark section matching the Atraskite / Resources treatment.
   ========================================================================== */
.ss-events {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(3.5rem, 6vw, 6rem) 0;
  position: relative;
  overflow: hidden;
  /* Full-bleed, like .resources, so it spans the viewport inside boxed pages */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
}
.ss-events::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 15%, rgba(201, 169, 97, 0.10), transparent 62%);
  pointer-events: none;
}
.ss-events > .container { position: relative; }

.ss-events-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
}
.ss-events-head .eyebrow { color: var(--gold-soft); }
.ss-events-head .eyebrow::before { background: var(--gold); }
.ss-events-head h2 {
  color: var(--cream);
  font-weight: 300;
  margin-top: 1.25rem;
}
.ss-events-head p {
  font-family: var(--serif);
  color: rgba(238, 242, 248, 0.75);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  margin: 1.15rem auto 0;
}
.ss-events-empty {
  text-align: center;
  font-family: var(--serif);
  color: rgba(238, 242, 248, 0.7);
  margin-bottom: 3rem;
}

/* ─── Event cards ─── */
.ss-events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}
.ss-event-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(238, 242, 248, 0.1);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.ss-event-card:hover {
  background: rgba(201, 169, 97, 0.07);
  border-color: var(--gold);
  transform: translateY(-4px);
}
.ss-event-card.is-full { opacity: 0.72; }
.ss-event-card.is-full:hover { transform: none; border-color: rgba(238, 242, 248, 0.1); background: rgba(255, 255, 255, 0.04); }

.ss-event-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ss-event-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-event-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2rem 1.9rem 1.9rem;
}
.ss-event-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.9rem;
}
.ss-event-card h3 {
  font-family: var(--serif);
  color: var(--cream);
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 1.1rem;
}
.ss-event-meta {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid rgba(238, 242, 248, 0.1);
  display: grid;
  gap: 0.45rem;
}
.ss-event-meta li {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: rgba(238, 242, 248, 0.86);
  display: flex;
  gap: 0.6rem;
}
.ss-event-meta-k {
  min-width: 110px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 242, 248, 0.5);
  padding-top: 0.16rem;
}
.ss-event-desc {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: rgba(238, 242, 248, 0.72);
  margin: 0 0 1.1rem;
}
.ss-event-points {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.ss-event-points li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(238, 242, 248, 0.78);
}
.ss-event-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 1px;
  background: var(--gold);
}
/* "Plačiau apie renginį" — opens the event detail modal */
.ss-event-more-wrap {
  margin: 0 0 1.4rem;
  border-top: 1px solid rgba(238, 242, 248, 0.1);
  padding-top: 1rem;
}
.ss-event-more-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.3s ease;
}
.ss-event-more-btn::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
}
.ss-event-more-btn:hover { color: #fff; }

/* Event detail modal — shares .resource-modal open/close mechanics */
.ss-event-modal .resource-modal-panel { max-width: 680px; }
@media (min-width: 900px) {
  .ss-event-modal .resource-modal-panel { max-width: 70%; }
}
/* Dialog anatomy: the panel is a fixed-height flex column — the close button
   is pinned to its top-right corner, the text scrolls in an inner body, and
   the CTA is a real footer. No sticky tricks needed. */
.ss-event-modal .resource-modal-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.ss-event-modal-scroll {
  overflow-y: auto;
  padding: 44px 44px 32px;
}
/* The modal JS focuses this button when the dialog opens, and the theme
   reset (plus our neutralizer) styles button:focus — so every state below,
   including :focus, must out-rank those (0,2,0) selectors. The extra
   .resource-modal-panel level keeps this at (0,3,0). */
.ss-event-modal .resource-modal-panel .resource-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  z-index: 3;
  padding: 0;
  font-size: 0;                   /* mute the base rule's 28px &times; sizing */
  opacity: 1;
  appearance: none;
  -webkit-appearance: none;
  color: var(--ink);
  background-color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(10, 22, 40, 0.18);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ss-event-modal .resource-modal-panel .resource-modal-close:focus {
  color: var(--ink);
  background-color: var(--gold);
  border-color: var(--gold);
}
.ss-event-modal .resource-modal-panel .resource-modal-close svg {
  display: block;
  transition: transform 0.35s var(--ease);
}
.ss-event-modal .resource-modal-panel .resource-modal-close:hover,
.ss-event-modal .resource-modal-panel .resource-modal-close:focus-visible {
  opacity: 1;
  color: var(--cream);
  background-color: var(--ink);
  border-color: var(--gold);
}
.ss-event-modal .resource-modal-panel .resource-modal-close:hover svg,
.ss-event-modal .resource-modal-panel .resource-modal-close:focus-visible svg {
  transform: rotate(90deg);
}
.ss-event-modal .resource-modal-panel .resource-modal-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ss-event-modal .resource-modal-panel .resource-modal-close svg { transition: none; }
}
.ss-event-modal .resource-modal-cta {
  flex-shrink: 0;
  margin: 0;
  padding: 16px 44px 20px;
  background: var(--cream);
  box-shadow: 0 -14px 18px -12px rgba(15, 21, 35, 0.22);
}
.ss-event-modal-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.ss-event-modal .resource-modal-panel h3 { margin-bottom: 16px; }
.ss-event-modal-p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 14px;
}
.ss-event-modal-p:last-of-type { margin-bottom: 0; }
.ss-event-modal .resource-modal-cta { margin-top: 26px; }
/* Small screens: keep every modal comfortably inside the viewport */
@media (max-width: 580px) {
  .resource-modal { padding: 14px; }
  .resource-modal-panel {
    padding: 36px 22px 28px;
    max-height: 88dvh;
    border-radius: 10px;
  }
  .ss-event-modal-p { font-size: 15px; }
  /* Match the tighter panel padding above */
  .ss-event-modal-scroll { padding: 36px 22px 24px; }
  .ss-event-modal .resource-modal-panel .resource-modal-close { top: 10px; right: 10px; }
  .ss-event-modal .resource-modal-cta { padding: 14px 22px 16px; }
}
.ss-event-actions { margin-top: auto; padding-top: 0.5rem; }
.ss-event-closed {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 242, 248, 0.55);
  border: 1px solid rgba(238, 242, 248, 0.22);
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
}

/* ─── Registration form ─── */
.ss-event-form-wrap {
  max-width: 760px;
  margin: clamp(3rem, 5vw, 4.5rem) auto 0;
}
.ss-event-form-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  color: var(--cream);
  text-align: center;
  margin: 0 0 0.9rem;
}
.ss-event-form-sub {
  font-family: var(--serif);
  text-align: center;
  color: rgba(238, 242, 248, 0.72);
  line-height: 1.6;
  margin: 0 auto 2rem;
  max-width: 560px;
}
.ss-event-notice {
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--cream);
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, 0.06);
}
.ss-event-notice.is-error { border-left-color: var(--brand-soft); }
.ss-event-form.form-card { padding: clamp(1.9rem, 4vw, 3rem); }
.ss-event-form .form-group:last-of-type { margin-bottom: 1rem; }
.ss-event-form textarea { min-height: 110px; }

@media (max-width: 900px) {
  .ss-events-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ss-event-form .form-row { grid-template-columns: 1fr; }
  .ss-event-meta-k { min-width: 92px; }
}

/* ─── Events pagination ─── */
.ss-events-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.ss-pager-num,
.ss-pager-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.6rem;
  border: 1px solid rgba(238, 242, 248, 0.18);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: rgba(238, 242, 248, 0.82);
  text-decoration: none;
  transition: all 0.3s var(--ease);
}
.ss-pager-num:hover,
.ss-pager-arrow:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(201, 169, 97, 0.08);
}
.ss-pager-num.is-current {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.ss-pager-arrow { font-size: 1.25rem; line-height: 1; }
.ss-pager-arrow.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Paged event cards: all are printed, only the current page is shown.
   The attribute selector keeps this working before JS runs. */
.ss-events-grid[data-page] > .ss-event-card { display: none; }
.ss-events-grid[data-page="1"] > .ss-event-card[data-ss-page="1"],
.ss-events-grid[data-page="2"] > .ss-event-card[data-ss-page="2"],
.ss-events-grid[data-page="3"] > .ss-event-card[data-ss-page="3"],
.ss-events-grid[data-page="4"] > .ss-event-card[data-ss-page="4"],
.ss-events-grid[data-page="5"] > .ss-event-card[data-ss-page="5"],
.ss-events-grid[data-page="6"] > .ss-event-card[data-ss-page="6"],
.ss-events-grid[data-page="7"] > .ss-event-card[data-ss-page="7"],
.ss-events-grid[data-page="8"] > .ss-event-card[data-ss-page="8"] { display: flex; }
/* Beyond the 8 pages enumerated above, fall back to showing everything
   rather than an empty grid. */
.ss-events-grid[data-page]:not([data-page="1"]):not([data-page="2"]):not([data-page="3"]):not([data-page="4"]):not([data-page="5"]):not([data-page="6"]):not([data-page="7"]):not([data-page="8"]) > .ss-event-card { display: flex; }

/* Notice: dismissible, and cleared from the URL so a reload does not re-show it */
.ss-event-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ss-event-notice > span { flex: 1; }
.ss-event-notice-close {
  flex: none;
  background: none;
  border: none;
  padding: 0 0.2rem;
  line-height: 1;
  font-size: 1.4rem;
  color: rgba(238, 242, 248, 0.6);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.ss-event-notice-close:hover { color: var(--gold); }

/* The hello-elementor reset paints every button pink on hover
   ([type=button],button:hover{background:#c36;color:#fff}). Our icon-only close
   buttons declared no hover background, so they inherited it. */
.ss-event-notice-close,
.resource-modal-close {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.ss-event-notice-close:hover,
.ss-event-notice-close:focus,
.resource-modal-close:hover,
.resource-modal-close:focus {
  background: transparent;
  border: none;
  box-shadow: none;
}
.ss-event-notice-close:hover,
.ss-event-notice-close:focus { color: var(--gold); }
.resource-modal-close:hover,
.resource-modal-close:focus { color: var(--ink); opacity: 1; }
.ss-event-notice-close:focus-visible,
.resource-modal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ==========================================================================
   TYPOGRAPHY UNIFICATION — single body-copy system across all pages
   --------------------------------------------------------------------------
   Pradžia, Apie mane and Paslaugos were each built as a separate pass, so
   running text drifted to 14 / 14.5 / 15 / 15.5 / 16 / 16.5 / 17 / 17.5px at
   weights 300 and 400 in three different inks. Read one after another the
   pages looked like three different sites.

   This block is the last word on body copy: one family (--sans), one size
   step per role, one weight, one ink. It sits at the end of the file on
   purpose — it must win over the per-widget rules above, including their
   breakpoint overrides, which is what kept small text small on mobile.
   Headings, hero display type and dark-section copy are deliberately left
   to their own rules.
   ========================================================================== */

/* ── Standard running text ───────────────────────────────────────────────── */
.orient-card p,
.services-head p,
.service-item p,
.trust-sub,
.about-content p,
.final-cta p,
.svc-row p,
.org-card > p,
.org-card li,
.product-info p,
.contact-info p,
.resource-modal-desc,
.resource-modal-list li,
.ss-card-text,
.ss-card-list li,
.ss-proj .ss-card-text,
.ss-proj .ss-card-list li,
.ss-card-partners p,
.ss-page .ss-bio-body p,
.ss-page .ss-comp-intro,
.ss-page .ss-comp-item,
.ss-page .ss-philosophy p,
.ss-page .ss-principle p,
.ss-page .ss-step p,
.ss-page .ss-detail-step p,
.ss-page .ss-detail-section-body p,
.ss-page .ss-detail-bullets li,
.ss-page .ss-detail-colrow .ss-detail-bullets li,
.ss-page .ss-detail-colrow p,
.ss-page .ss-cta-section p,
.ss-page .ss-intro-right p,
.ss-page .ss-intro-bullets li,
.ss-page.ss-page-paslaugos .ss-service-desc,
.ss-page .ss-service-desc,
.ss-legal-page .elementor-widget-text-editor p,
.elementor-widget-text-editor p,
.elementor-widget-text-editor ul li {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-soft);
}

/* Tighter leading where the text sits inside a card or a bordered list row
   and wraps to two or three lines rather than a full paragraph. */
.ss-page .ss-comp-item,
.ss-page .ss-intro-bullets li,
.ss-page .ss-detail-bullets li,
.ss-page .ss-detail-colrow .ss-detail-bullets li,
.ss-card-list li,
.ss-proj .ss-card-list li,
.org-card li {
  line-height: var(--lh-compact);
}

/* ── Section intros (the line directly under a section heading) ──────────── */
.testimonials-intro,
.ss-page .ss-how-sub,
.ss-page .ss-detail-steps-intro,
.ss-calendar-sub,
.ss-gform-sub {
  font-family: var(--sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-soft);
}

/* ── Uppercase section labels on light backgrounds ───────────────────────
   These ran 11–13px, several of them in gold (#c9a84c on #f5f2ec is roughly
   2:1 — unreadable). Gold stays on the decorative rules and on dark panels;
   the lettering itself takes the body ink so it reads at a glance. */
.ss-section-label span,
.ss-section-label p,
.ss-page .ss-section-label span,
.ss-page .ss-services-label span,
.ss-page .ss-how-header .ss-label span,
.ss-page .ss-cta-section .ss-label span,
.ss-page .ss-cta-label span,
.ss-page .ss-principles-header .ss-label-center span,
.ss-page .ss-detail-steps-header .ss-label-center span,
.ss-page .ss-service-tag,
.ss-card-tag,
.contact-list .label,
.product-price .small,
.form-group label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}

/* ── Numerals and meta text ──────────────────────────────────────────────
   Attribution lines, consent copy and filter pills are secondary, so they
   keep a smaller step — but --fs-meta is a floor, not a free-for-all: they
   were 12.8–13.6px, which is where "too small to read" started. */
.orient-num,
.service-num,
.ss-card-nr,
.org-card .org-num,
.ss-page .ss-service-num,
.ss-page .ss-step-num {
  color: var(--text-soft);
}
.testimonial-info span,
.filter-btn,
.ss-form-consent {
  font-size: var(--fs-meta);
  font-weight: var(--fw-body);
  color: var(--text-soft);
}

/* The ✓ / · markers were 13px next to 15.5px text and read as specks.
   They keep the gold accent but scale with the copy they belong to. */
.ss-page .ss-comp-item::before {
  font-size: 14px;
  margin-top: 4px;
}

/* ── Eyebrows: one size, readable ink on light backgrounds ──────────────────
   The base .eyebrow keeps the brand maroon (~6.9:1 on cream). The orientation
   eyebrow was gold on cream at 11px (~2:1) — it takes the body ink instead.
   Eyebrows sitting on the dark panels (.vision-intro, .page-hero, hover states)
   set their own colour at higher specificity and are untouched. */
.eyebrow,
.hero-eyebrow,
.orient-split .orient-head .eyebrow,
.ss-event-tag {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
}
.orient-split .orient-head .eyebrow {
  color: var(--text-soft);
  font-weight: 600;
}

/* ── Gold text that has to be read, on light backgrounds ─────────────────── */
.ss-page .ss-service-cta,
.ss-page .ss-detail-quote cite,
.resource-card-cta,
.resources-bottom-cta-link {
  color: var(--gold-ink);
}
/* Inside a hovered (dark) service row the bright gold is back on contrast. */
.ss-page .ss-service-row:hover .ss-service-cta { color: var(--pas-gold); }

/* ── Running text is sans, always ─────────────────────────────────────────
   The homepage trust list and the resources cards set body copy in Playfair
   while the same kind of copy on Apie mane and Paslaugos was Barlow — the
   single biggest reason the three pages read as different sites. Playfair
   stays where it belongs: headings, the hero, and pull-quotes
   (.testimonial p, .ss-bio-body .quote, .ss-hero-role), which are display
   type rather than running text. */
.trust-list p,
.resources-head p,
.resource-card p {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}
.trust-list p { color: var(--text-soft); }

/* ── Body copy on the dark panels ────────────────────────────────────────
   These were 0.7–0.78 alpha on navy, i.e. the dark-background version of the
   same washed-out grey. Raised so they read at the same strength as the
   copy on the cream sections. */
.resources-head p { color: rgba(238, 242, 248, 0.92); }
.resource-card p { color: rgba(238, 242, 248, 0.88); }
.ss-page .ss-promo-body p { color: rgba(255, 255, 255, 0.9); font-weight: var(--fw-body); }

/* ==========================================================================
   DETAIL SECTION — "two-col": text only, heading left / outcome list right
   --------------------------------------------------------------------------
   Used where a section has no photograph. The obvious alternative — leaving a
   side-image section with an empty slot — renders the "✦ Image" placeholder
   box, and dropping to the plain full-width layout leaves a four-row list
   stretched across 920px with nothing holding the right half of the page.

   So the list itself takes the picture's place: same 1120px footprint and the
   same two-column split as the neighbouring image sections, so removing a
   photo doesn't break the page's left/right cadence. The list sits on a white
   panel — the same card treatment as the "Kryptys" cards on Paslaugos — so it
   carries the visual weight the image used to.

   The bullets are parallel outcomes of a session, not steps, so they are not
   numbered. Their one flourish is the gold rule that draws itself out from
   the margin as the section arrives, one row after the next.
   ========================================================================== */
.ss-page .ss-detail-section--two-col {
  max-width: 1120px;
  display: grid;
  /* Same geometry as .ss-detail-split (1fr 1fr / 64px) so this section shares a
     spine with the image sections it stacks against — the column seam lands on
     the same two x positions whether the right half is a photo or this panel.
     A 0.95/1.05 split shifted the seam 26px and read as crooked. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Row 4 takes the slack so the CTA can sit on the panel's bottom edge. */
  grid-template-rows: auto auto auto minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}
.ss-page .ss-detail-section--two-col > .ss-section-label { grid-column: 1 / -1; grid-row: 1; }
.ss-page .ss-detail-section--two-col > .ss-detail-section-heading { grid-column: 1; grid-row: 2; }
.ss-page .ss-detail-section--two-col > .ss-detail-section-body { grid-column: 1; grid-row: 3; }
/* Bottom-aligned against the panel so both columns close on the same line. */
.ss-page .ss-detail-section--two-col > .ss-detail-section-cta { grid-column: 1; grid-row: 4; margin-top: 32px; align-self: end; }
.ss-page .ss-detail-section--two-col > .ss-detail-bullets {
  grid-column: 2;
  grid-row: 2 / span 3;
  /* Flush with the top of the heading, not 6px under it. */
  margin: 0;
  background: #fff;
  border: 1px solid var(--pas-border);
  border-radius: 8px;
  padding: 4px 28px;
}

/* Lead paragraph: one step up from body, same ink as everything else on the
   page. Left-aligned — justifying this column opened the word gaps the client
   flagged. */
/* Fills the column, like the text half of the image sections — a 42ch cap left
   the paragraph short of the heading and added a second ragged edge. */
.ss-page .ss-detail-section--two-col .ss-detail-section-body p {
  font-size: var(--fs-lead);
  text-align: left;
  max-width: none;
}
.ss-page .ss-detail-section--two-col .ss-detail-section-body p:last-child { margin-bottom: 0; }

.ss-page .ss-detail-section--two-col .ss-detail-bullets li {
  padding: 20px 0 20px 44px;
  border-top: 1px solid var(--pas-border);
}
.ss-page .ss-detail-section--two-col .ss-detail-bullets li:first-child { border-top: none; }
/* The base list closes itself with a rule under the last row; inside a bordered
   panel that reads as a stray line above the panel edge. */
.ss-page .ss-detail-section--two-col .ss-detail-bullets li:last-child { border-bottom: none; }
.ss-page .ss-detail-section--two-col .ss-detail-bullets li::before {
  left: 0;
  top: 31px;
  width: 28px;
  /* 2px, not the base 1px: a hairline landing on a fractional y renders
     anti-aliased, so some rows came out grey and some gold. */
  height: 2px;
}

/* Signature: the rules draw out in sequence once the section reveals. */
.ss-page .ss-detail-section--two-col.reveal .ss-detail-bullets li::before {
  width: 0;
  transition: width 0.5s var(--ease);
}
.ss-page .ss-detail-section--two-col.reveal.in .ss-detail-bullets li::before { width: 28px; }
.ss-page .ss-detail-section--two-col.reveal.in .ss-detail-bullets li:nth-child(1)::before { transition-delay: 0.15s; }
.ss-page .ss-detail-section--two-col.reveal.in .ss-detail-bullets li:nth-child(2)::before { transition-delay: 0.24s; }
.ss-page .ss-detail-section--two-col.reveal.in .ss-detail-bullets li:nth-child(3)::before { transition-delay: 0.33s; }
.ss-page .ss-detail-section--two-col.reveal.in .ss-detail-bullets li:nth-child(4)::before { transition-delay: 0.42s; }
.ss-page .ss-detail-section--two-col .ss-detail-bullets li:hover::before { width: 40px; }

@media (prefers-reduced-motion: reduce) {
  .ss-page .ss-detail-section--two-col.reveal .ss-detail-bullets li::before {
    width: 28px;
    transition: none;
  }
}

@media (max-width: 900px) {
  .ss-page .ss-detail-section--two-col {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .ss-page .ss-detail-section--two-col > .ss-section-label,
  .ss-page .ss-detail-section--two-col > .ss-detail-section-heading,
  .ss-page .ss-detail-section--two-col > .ss-detail-section-body,
  .ss-page .ss-detail-section--two-col > .ss-detail-bullets,
  .ss-page .ss-detail-section--two-col > .ss-detail-section-cta {
    grid-column: 1;
    grid-row: auto;
  }
  .ss-page .ss-detail-section--two-col > .ss-detail-bullets { margin: 28px 0 0; padding: 4px 20px; }
  .ss-page .ss-detail-section--two-col > .ss-detail-section-cta { margin-top: 28px; }
  .ss-page .ss-detail-section--two-col .ss-detail-section-body p { max-width: none; }
}

/* ── Prose variant: same layout, no list ─────────────────────────────────
   Some sections close with a single statement rather than a list. The left
   rail still carries label, heading and CTA; the paragraph moves into the
   right column, where the photo or the panel would have been. That keeps the
   spine intact and gives the prose a ~62-character measure instead of running
   the full 1120px, which is well past comfortable reading width. */
.ss-page .ss-detail-section--two-col:not(:has(.ss-detail-bullets)) > .ss-detail-section-body {
  grid-column: 2;
  grid-row: 2 / span 3;
}
/* Bottom-aligning the CTA is right against a tall panel, but against a short
   paragraph it just leaves the button hanging below the text it belongs to. */
.ss-page .ss-detail-section--two-col:not(:has(.ss-detail-bullets)) > .ss-detail-section-cta {
  margin-top: 16px;
  align-self: start;
}
@media (max-width: 900px) {
  .ss-page .ss-detail-section--two-col:not(:has(.ss-detail-bullets)) > .ss-detail-section-body {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ── Bilingual steps heading (EN name — LT translation) ──────────────────
   Authored with a <br> so the trademarked English name holds one line and the
   Lithuanian reading sits on the next. Below 700px there isn't room for either
   on a single line, so the break is dropped and the heading flows. */
@media (max-width: 700px) {
  .ss-page .ss-detail-steps-header h2 br { display: none; }
}
/* Slightly wider measure: at 520px this intro broke into a short, lopsided
   two lines under a full-width heading. */
.ss-page .ss-detail-steps-intro { max-width: 660px; }

/* With the EN/LT break in place the heading no longer needs the full 48px to
   fill its measure — 44px leaves margin at the container edges and narrows the
   jump down to the intro. */
.ss-page .ss-detail-steps-header h2 { font-size: clamp(28px, 3.2vw, 44px); }
/* Even line lengths instead of a long first line over a stub. */
.ss-page .ss-detail-steps-intro { text-wrap: balance; }

/* ==========================================================================
   PROJEKTAI — picture column widened, text column tightened
   --------------------------------------------------------------------------
   Two things were hurting picture visibility.

   First the split: 580px of image against 798px of text, so the photo held
   42% of a full-width card. Now 1.05fr / 0.95fr — the picture leads, and the
   text column lands near 600px, which is a ~60-character measure rather than
   the 90+ it was running.

   Second, and worse: the media had height:100%, so its shape was dictated by
   how much text sat beside it. The same photo was cropped into a 1.53 box on
   one card and a 0.85 box on the next, and the card with the longest bullet
   list — where the box went most portrait — threw away half the width of its
   16:9 photos. The box is now a fixed 4/3, the most common ratio in this set,
   so every card crops the same predictable amount and six of the photos crop
   barely at all.
   ========================================================================== */
.ss-grid .ss-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.ss-grid .ss-card .ss-card-img,
.ss-grid .ss-card .ss-card-img-placeholder {
  width: auto;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: start;
  object-fit: cover;
  /* Cards whose text runs longer than the picture leave a little space below
     it rather than a stretched, over-cropped photo. Matching the card's own
     white keeps that space invisible. */
  background: #fff;
}
.ss-grid .ss-card .ss-card-body { padding: 40px 44px; }

/* ── Card typography on the same scale as the rest of the site ───────────
   .ss-proj .ss-card-body p was pinned to 1rem and out-specified the shared
   body rule; the partner line was 14px; the tag and project number were 16px
   where every other uppercase label on the site is 12.5px. */
.ss-proj .ss-card-body p,
.ss-proj .ss-card-text,
.ss-proj .ss-card-list li {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  color: var(--text-soft);
}
.ss-proj .ss-card-partners p { font-size: var(--fs-meta); }
/* Scoped through .ss-card-body: these are <p> elements, so they need to beat
   the body-paragraph rule above rather than tie with it. */
.ss-proj .ss-card-body .ss-card-tag,
.ss-proj .ss-card-body .ss-card-nr {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}

@media (max-width: 1024px) {
  .ss-grid .ss-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ss-grid .ss-card .ss-card-img,
  .ss-grid .ss-card .ss-card-img-placeholder { width: auto; min-height: 0; }
  .ss-grid .ss-card .ss-card-body { padding: 32px 34px; }
}
@media (max-width: 760px) {
  .ss-grid .ss-card { grid-template-columns: 1fr; }
  .ss-grid .ss-card .ss-card-img,
  .ss-grid .ss-card .ss-card-img-placeholder {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ── Projektai: card hover (dark) ────────────────────────────────────────
   The card flips to navy on hover, and the light-on-dark colours for that
   state were already defined — but the typography rules above are scoped
   through .ss-proj / .ss-card-body and so out-specified them, leaving dark
   navy text sitting on a dark navy card.  Re-stated here at matching
   specificity.

   The alphas are also lifted from the originals (0.5-0.75), which were faint
   even when they did apply: the project number and the partner line were the
   two hardest things to read in the hover state. */
/* --gold, not --pas-gold: the latter is declared on .ss-page, and this page
   wraps in .ss-proj, so it resolves to nothing and the declaration is dropped
   at computed-value time — leaving the tag its dark default on the dark card. */
.ss-proj .ss-card:hover .ss-card-body .ss-card-tag,
.ss-proj .ss-card:focus-within .ss-card-body .ss-card-tag {
  color: var(--gold);
}
.ss-proj .ss-card:hover .ss-card-body .ss-card-nr,
.ss-proj .ss-card:focus-within .ss-card-body .ss-card-nr {
  color: rgba(255, 255, 255, 0.82);
}
.ss-proj .ss-card:hover .ss-card-body p,
.ss-proj .ss-card:hover .ss-card-text,
.ss-proj .ss-card:hover .ss-card-list li,
.ss-proj .ss-card:focus-within .ss-card-body p,
.ss-proj .ss-card:focus-within .ss-card-text,
.ss-proj .ss-card:focus-within .ss-card-list li {
  color: rgba(255, 255, 255, 0.9);
}
.ss-proj .ss-card:hover .ss-card-partners p,
.ss-proj .ss-card:focus-within .ss-card-partners p {
  color: rgba(255, 255, 255, 0.75);
}
.ss-proj .ss-card:focus-within .ss-card-title { color: #fff; }

/* ── Projektai: funder logo in the card's top-right corner ──────────────
   Opt-in per project via the "Logo in top-right corner" switch on the item
   (class .ss-card--badge-top). Default stays as it was: logo pinned to the
   bottom of the text column.

   Used on KidsLikeUs, whose bullet list made the text column ~130px taller
   than its picture and left a band of empty white under the image. With the
   logo in the corner the column shortens to nearly match the picture, and the
   logo reads as a credit beside the project name rather than a footer.

   Absolute, because the badge comes last in the markup — reordering it in the
   DOM would put the logo before the project name for a screen reader. The
   header rows reserve a gutter for it; the body copy below runs full width. */
.ss-grid .ss-card--badge-top .ss-card-body { position: relative; padding-top: 36px; padding-bottom: 36px; }
.ss-grid .ss-card--badge-top .ss-card-badges {
  position: absolute;
  top: 36px;
  right: 44px;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}
.ss-grid .ss-card--badge-top .ss-card-badge { padding: 12px 16px; }
.ss-grid .ss-card--badge-top .ss-card-badge img { height: 56px; }

/* Gutter on the rows level with the badge — 200px is the badge's own width
   plus a gap; wider pushed the project title onto an extra line. */
.ss-grid .ss-card--badge-top .ss-card-tag,
.ss-grid .ss-card--badge-top .ss-card-title,
.ss-grid .ss-card--badge-top .ss-card-nr {
  padding-right: 200px;
}

@media (max-width: 1024px) {
  .ss-grid .ss-card--badge-top .ss-card-badges { top: 28px; right: 34px; }
  .ss-grid .ss-card--badge-top .ss-card-badge img { height: 44px; }
  .ss-grid .ss-card--badge-top .ss-card-tag,
  .ss-grid .ss-card--badge-top .ss-card-title,
  .ss-grid .ss-card--badge-top .ss-card-nr { padding-right: 190px; }
}
/* Stacked layout: back into the flow, under the text. */
@media (max-width: 760px) {
  .ss-grid .ss-card--badge-top .ss-card-badges {
    position: static;
    margin-top: 24px;
    justify-content: flex-start;
  }
  .ss-grid .ss-card--badge-top .ss-card-tag,
  .ss-grid .ss-card--badge-top .ss-card-title,
  .ss-grid .ss-card--badge-top .ss-card-nr { padding-right: 0; }
}

/* The picture is never shorter than its card. 4/3 stays the floor — so the
   crop matches the other cards when the text is short — but if the text column
   runs longer, the picture grows to meet it instead of leaving a white band
   under the slider. Scoped to the badge-top card; the others sit within 2px. */
.ss-grid .ss-card--badge-top .ss-card-img,
.ss-grid .ss-card--badge-top .ss-card-img-placeholder {
  /* width: 100% is load-bearing — with width:auto the aspect-ratio grows the
     picture sideways to match the taller box, and the card falls out of line
     with its neighbours. */
  width: 100%;
  min-height: 100%;
}
@media (max-width: 760px) {
  .ss-grid .ss-card--badge-top .ss-card-img,
  .ss-grid .ss-card--badge-top .ss-card-img-placeholder { min-height: 0; }
}

/* ── Projektai card slider: arrows on touch ─────────────────────────────
   The arrows sit at opacity:0 and are only revealed by .ss-card-slider:hover,
   so on a phone — where there is no hover — they never appeared at all and the
   slider looked like a still image. Anywhere the pointer can't hover they stay
   visible, and they show on keyboard focus too. Not a width breakpoint: a
   touchscreen laptop at 1440px has the same problem. */
@media (hover: none), (pointer: coarse) {
  .ss-card-slider .ss-hero-slider-arrow {
    opacity: 1;
    /* 34px is under the 44px minimum tap target. */
    width: 40px;
    height: 40px;
  }
  .ss-card-slider .ss-hero-slider-arrow.prev { left: 8px; }
  .ss-card-slider .ss-hero-slider-arrow.next { right: 8px; }
  /* A little more weight so they read against a bright photo. */
  .ss-card-slider .ss-hero-slider-arrow { background: rgba(15, 21, 35, 0.62); }
}
/* Keyboard users get them on focus regardless of pointer type. */
.ss-card-slider .ss-hero-slider-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ==========================================================================
   QUOTATIONS — one citation style everywhere
   --------------------------------------------------------------------------
   Cited authors were set three different ways: uppercase gold on the page
   heroes (Leonardo da Vinci, Karlas Jungas, Helen Keller), bold italic sans
   inside a section footer (Benjamin Disraeli), and — on the breathing page —
   not separated from the quote at all (Leonard Orr ran on inside the
   sentence). They all resolve to the hero treatment now: the name on its own
   line, uppercase, letterspaced, in gold.

   Colour is the one thing that varies, because it has to: bright gold reads
   on the navy heroes and measures ~2:1 on cream, so quotes sitting in a light
   section take the deeper --gold-ink instead.
   ========================================================================== */
.hero-quote cite,
.ss-page .ss-detail-quote cite {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* On the dark heroes. Overrides the earlier blanket --gold-ink rule, which
   was meant for gold text on cream and left these citations dim on navy. */
.hero-quote cite,
.ss-page .ss-detail-quote cite {
  color: var(--gold);
}

/* ── Pull-quote inside a body section (light background) ────────────────── */
.ss-page .ss-detail-quote--body {
  max-width: 660px;
  margin: 32px 0;
}
.ss-page .ss-detail-quote--body p {
  color: var(--pas-ink);
  font-size: clamp(19px, 2.1vw, 23px);
}
.ss-page .ss-detail-quote--body cite { color: var(--gold-ink); }
.ss-page .ss-detail-quote--body::before { color: rgba(201, 168, 76, 0.34); }