/* ==========================================================================
   ABOUT — BBDO dark/gold rebuild. Scoped with ab- prefixed classes so nothing
   collides with sitewide selectors (.hero, .sec, .content, .lead, .cta, .pill
   all already exist globally — see AGENTS.md gotcha re: .hero-stack vs .reveal).
   Enqueued only on the About page (see turajlic_about_assets in functions.php).
   Uses existing :root tokens (--ink, --gold, --paper, --line, --safe…) — none
   redefined here. Scroll-reveal reuses the sitewide .reveal/.is-in mechanism
   (app.js GSAP ScrollTrigger) — no page-local IntersectionObserver needed.
   ========================================================================== */

.about { --ab-nav-offset: calc(var(--nav-h) + 1.5rem); }

/* padding-inline (NE "padding" shorthand) — namerno ne diramo padding-top/bottom: kad se .ab-full
   nadje na istom elementu kao .cta-band__inner (vidi turajlic_cta_band wrap_class='ab-full'),
   "padding:0 X" bi pri istoj specifičnosti pobedio .cta-band__inner-ov padding-block (about.css se
   učitava posle style.css) i izravnao CTA traku na About-u na 0 — tu je nestajala "Let's solve it" pilula. */
.ab-full { max-width: 1600px; margin: 0 auto; padding-inline: clamp(24px,6vw,96px); }
.ab-gi { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--gold); }
.ab-hl { color: var(--gold); }
.ab-kicker { font-size: .7rem; letter-spacing: .42em; font-weight: 800; color: var(--gold-deep); text-transform: uppercase; }
.ab-kanji { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; }
.ab-kanji-div { text-align: center; padding: 1.2rem 0; color: var(--gold-deep); opacity: .55; font-size: 1.35rem; }

/* ---------- HERO ---------- */
.ab-hero { padding: 8.5rem 0 5rem; border-bottom: 1px solid var(--line); }
.ab-hero .ab-kicker { margin-bottom: 2.4rem; }
.ab-hero h1 {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2.4rem,6vw,4.6rem); line-height: 1.04; letter-spacing: -.03em;
  max-width: 17ch; color: var(--paper);
}
.ab-rot { position: relative; display: inline-block; color: var(--gold); white-space: nowrap; }
.ab-rot span { display: inline-block; white-space: nowrap; will-change: opacity, filter, transform; transition: opacity .26s ease, filter .26s ease, transform .26s cubic-bezier(.2,.7,.2,1); }
.ab-rot span.ab-in-flow { position: relative; }
.ab-rot span.ab-overlay { position: absolute; left: 0; top: 0; }
.ab-rot span.ab-enter { opacity: 0; filter: blur(12px); transform: translateX(18px); }
.ab-rot span.ab-leave { opacity: 0; filter: blur(12px); transform: translateX(-18px); }
@media (prefers-reduced-motion: reduce) {
  .ab-rot span { transition: opacity .2s ease; }
  .ab-rot span.ab-enter, .ab-rot span.ab-leave { filter: none; transform: none; }
}
.ab-lead { margin-top: 2.6rem; max-width: 34rem; font-size: 1.18rem; line-height: 1.65; color: #d8d5cc; }

/* ---------- two-column body section ---------- */
.ab-sec {
  display: grid;
  grid-template-columns: minmax(240px,30rem) minmax(0,1fr);
  column-gap: clamp(2.5rem,6vw,7rem);
  max-width: 1600px; margin: 0 auto;
  padding: clamp(4.5rem,7vw,7rem) clamp(24px,6vw,96px);
}
.ab-sec.ab-divline { border-top: 1px solid var(--line); }
.ab-sec h2 {
  grid-column: 1; align-self: start; position: sticky; top: var(--ab-nav-offset);
  scroll-margin-top: var(--ab-nav-offset);
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.7rem,2.9vw,2.5rem); line-height: 1.1; letter-spacing: -.025em;
  color: var(--paper);
}
.ab-content { grid-column: 2; max-width: 42rem; }
.about .frame {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
}
.ab-body p { margin-bottom: 1.35rem; color: #cfccc3; }
.ab-body p:last-child { margin-bottom: 0; }
.ab-body strong { color: var(--paper); font-weight: 700; }
.ab-callout { font-size: 1.22rem; color: var(--paper); font-weight: 600; margin-top: 1.8rem; }

/* UKT lead testimonial */
.ab-lead-quote { margin: 2.6rem 0; border-left: 3px solid var(--gold); padding-left: 2rem; position: relative; }
.ab-lead-quote .qm { font-family: 'Fraunces', serif; color: var(--gold); font-size: 3.4rem; line-height: 0; display: block; height: 1.7rem; }
.ab-lead-quote blockquote { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.5rem,2.5vw,2rem); line-height: 1.3; color: var(--paper); }
.ab-lead-quote cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: .7rem; letter-spacing: .3em; font-weight: 800; text-transform: uppercase; color: var(--gold-deep); }

/* review cards */
.ab-review { background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px; padding: 2.1rem 2.3rem 1.9rem; margin: 2.2rem 0; position: relative; }
.ab-review::before { content: "\201C"; position: absolute; top: .6rem; right: 1.3rem; font-family: 'Fraunces', serif; font-size: 4rem; line-height: 1; color: var(--gold); opacity: .22; }
.ab-review p { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--paper); margin-bottom: 1.1rem; }
.ab-review cite { font-style: normal; font-family: 'Inter', sans-serif; font-size: .66rem; letter-spacing: .26em; font-weight: 800; text-transform: uppercase; color: var(--gold-deep); }
.ab-review--big p { font-size: clamp(1.4rem,2.3vw,1.72rem); }

/* ---------- TAKUMI ---------- */
.ab-takumi { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6rem 0 5.5rem; }
.ab-takumi-col { max-width: 44rem; }
.ab-takumi .ab-glyph { color: var(--gold-deep); opacity: .85; font-size: clamp(2.6rem,5vw,3.6rem); line-height: 1; margin-bottom: 1.8rem; }
.ab-takumi .ab-body p { max-width: 42rem; }
.ab-closer { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.5rem,3.2vw,2.3rem); line-height: 1.18; letter-spacing: -.02em; color: var(--paper); margin-top: 2.6rem; max-width: 22ch; }
.ab-small-glyph { margin-top: 2.6rem; color: var(--gold-deep); opacity: .55; font-size: 1.5rem; }

/* ---------- CLIENT LOGOS ---------- */
.ab-logos { padding: 5rem 0 5.5rem; border-top: 1px solid var(--line); overflow: hidden; }
.ab-logos .ab-kicker { max-width: 1600px; margin: 0 auto 2.6rem; padding: 0 clamp(24px,6vw,96px); }
.ab-marquee-mask { position: relative; }
.ab-marquee-mask::before, .ab-marquee-mask::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; }
.ab-marquee-mask::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.ab-marquee-mask::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.ab-marquee { display: flex; gap: 2rem; width: max-content; animation: ab-scroll 38s linear infinite; }
.ab-marquee:hover { animation-play-state: paused; }
.ab-logo-item { display: flex; align-items: center; justify-content: center; gap: .7rem; height: 66px; min-width: 180px; padding: 0 1.7rem; border: 1px solid rgba(214,208,193,.22); border-radius: 7px; color: #cfc8b8; opacity: .72; white-space: nowrap; transition: color .3s, opacity .3s, border-color .3s; }
.ab-logo-item .ab-mark { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 5px; flex: none; }
.ab-logo-item b { font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; }
.ab-logo-item:hover { color: var(--gold); opacity: 1; border-color: rgba(251,192,0,.5); }
@keyframes ab-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .ab-hero { padding: 6rem 0 3.5rem; }
  .ab-sec { grid-template-columns: 1fr; row-gap: 2rem; }
  /* grid-column:1/2 from the desktop rules above must be reset too — otherwise
     .ab-content's explicit grid-column:2 forces an implicit second column back
     into existence even though grid-template-columns is now a single 1fr track. */
  .ab-sec h2, .ab-content { grid-column: auto; }
  .ab-sec h2 { position: static; top: auto; }
  .ab-content { max-width: none; }
}