/* ============================================================
   About Us — VERBATIM copy of the <style> block in the export's
   ui_kits/about-us/index.html (lines 16-126). Do not hand-edit:
   keep it diffable against a future export.
   ============================================================ */
/* About page body — layered on the shared homepage/site CSS. Uses only existing
   tokens (colours, fonts, weights); adds NO header/footer/button styles.
   Yellow on this page is #FCEB4E (brief), not the --fa-yellow token. */
a{color:var(--fa-purple)}a:hover{color:var(--fa-ink)}

/* 1 — Hero — full viewport height, header (fixed 80px) sits above it */
.ab-hero{position:relative;min-height:100vh;background:var(--fa-white);overflow:hidden;padding:120px 0 40px;display:flex;flex-direction:column}
.ab-hero.is-interactive{cursor:none}
.ab-hero__inner{flex:1;display:flex;flex-direction:column}
.ab-hero__title{margin:0;white-space:nowrap;padding:0 40px;font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:100px;line-height:.9;letter-spacing:-.03em;color:var(--fa-ink)}
.ab-hero__sub{max-width:690px;margin:auto auto 0;padding-top:48px;text-align:center;font-family:var(--font-body);font-weight:var(--fw-kraftig);font-size:20px;line-height:1.4;letter-spacing:-.02em;color:var(--fa-ink)}
/* cursor dot + spawned image trail (desktop, hover) */
.ab-hero__dot{position:fixed;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--fa-pink);pointer-events:none;transform-origin:center;z-index:90;will-change:left,top,transform}
.ab-spawn-layer{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.ab-spawn{position:absolute;transform-origin:center;width:280px;height:280px;object-fit:cover;object-position:center top;border-radius:0;pointer-events:none;z-index:2}
/* tablet/mobile hero → flow grid, static (fade-up via .reveal) */
.ab-hero__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1000px;margin:48px auto 0}
.ab-hero:not(.is-interactive){min-height:auto}
.ab-hero__grid img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center top;border-radius:0;display:block}
.ab-hero__grid[hidden]{display:none}

/* 2 — Who we are */
.ab-who{padding:120px 0}
.ab-who__body{max-width:700px;margin:0 auto;text-align:center;font-family:"Epilogue",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;font-size:32px;line-height:1.3;letter-spacing:-.96px;color:var(--fa-ink)}
.ab-who__body p{margin:0}.ab-who__body p+p{margin-top:1.3em}
.ab-who__body strong{font-weight:600}

/* 3 — Stat band: 2×2 solid colour blocks, no section background */
.ab-stats{padding:0 0 120px}
.ab-stats__grid{display:flex;flex-direction:column;gap:20px}
.ab-stats__row{display:flex;gap:20px}
.ab-stat{padding:24px;display:flex;flex-direction:column;gap:120px}
.ab-stat--a{flex:0 0 453px;background:var(--fa-mint);color:var(--fa-ink)}
.ab-stat--b{flex:1;background:var(--fa-pink);color:var(--fa-ink)}
.ab-stat--c{flex:0 0 806px;background:var(--fa-ink);color:var(--fa-white)}
.ab-stat--d{flex:1;background:#FCEB4E;color:var(--fa-ink)}
.ab-stat__num{font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:60px;line-height:1;letter-spacing:-1.8px;color:inherit}
.ab-stat__label{font-family:"Epilogue",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;font-size:20px;line-height:1.1;letter-spacing:-.6px;color:inherit}

/* 4 — How we work */
.ab-hww{padding:120px 0}
.ab-hww__inner{display:grid;grid-template-columns:335px 1fr;gap:120px;align-items:start}
.ab-hww__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.03em;color:var(--fa-ink)}
.ab-hww__list{display:flex;flex-direction:column}
.ab-principle{display:grid;grid-template-columns:1fr 333px;gap:80px;align-items:start;padding:0 0 32px;border-bottom:1px solid rgba(5,14,30,.1)}
.ab-principle+.ab-principle{padding-top:32px}
.ab-principle__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:24px;line-height:1.2;color:var(--fa-ink)}
.ab-principle__body{margin:0;font-family:var(--font-body);font-weight:var(--fw-buch);font-size:16px;line-height:1.5;color:var(--fa-ink)}

/* 5 — Image band — full-bleed, edge to edge */
.ab-band{padding:0}
.ab-band__img{display:block;width:100%;height:960px;object-fit:cover}

/* 6 — Vision / purpose / values (sticky-scroll) */
.ab-vpv{display:grid;grid-template-columns:1fr 1fr}
.ab-vpv__left{position:sticky;top:80px;height:calc(100vh - 80px);background:#FCEB4E;display:flex;align-items:center;justify-content:center;padding:64px 40px;align-self:start;transition:background .3s ease}
.ab-vpv__title{margin:0;text-align:center;font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:40px;line-height:1.2;color:var(--fa-ink);transition:color .3s ease}
/* header stays transparent on every section — shared chrome governs nav/logo colour + invert; no background fill */
.ab-vpv__right{min-width:0}
.ab-vpv__block{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px clamp(40px,6vw,120px);border-bottom:1px solid rgba(0,0,0,.1)}
.ab-vpv__text{margin:0;max-width:640px;text-align:center;margin-inline:auto;font-family:var(--font-body);font-weight:var(--fw-kraftig);font-size:clamp(20px,2vw,24px);line-height:1.3;letter-spacing:-.01em;color:var(--fa-ink)}
.ab-vpv__mtitle{display:none}
.ab-values{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px}
.ab-value{background:var(--fa-grey-95);border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:16px;min-height:200px}
.ab-value__no{font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:14px;letter-spacing:.02em;color:var(--fa-purple)}
.ab-value__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:20px;line-height:1.2;color:var(--fa-ink)}
.ab-value__body{margin:auto 0 0;font-family:var(--font-body);font-weight:var(--fw-buch);font-size:16px;line-height:1.4;color:var(--fa-ink)}

/* 7 — Meet the team */
.ab-team{padding:120px 0;text-align:center}
.ab-team__title{margin:0 auto 60px;font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-.03em;color:var(--fa-ink)}
.ab-pile{display:flex;justify-content:center;margin:0 auto 60px}
.ab-pile__card{width:200px;height:200px;border-radius:0;background-size:cover;background-position:center top;background-repeat:no-repeat;transition:transform .5s cubic-bezier(.2,.7,.2,1),margin .5s cubic-bezier(.2,.7,.2,1)}
.ab-pile__card:nth-child(1){transform:rotate(-2deg);z-index:1}
.ab-pile__card:nth-child(2){margin-left:-100px;transform:rotate(2deg);z-index:2}
.ab-pile__card:nth-child(3){margin-left:-100px;transform:rotate(5deg);z-index:3}
.ab-pile:hover .ab-pile__card{transform:rotate(0)}
.ab-pile:hover .ab-pile__card:nth-child(2),.ab-pile:hover .ab-pile__card:nth-child(3){margin-left:24px}
.ab-team__ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- Tablet 600–1199 ---------- */
@media (max-width:1199px){
  .ab-hero{padding:112px 0 40px}
  .ab-hero__title{padding:0 24px}
  .ab-hero__grid{display:grid}
  .ab-who,.ab-hww,.ab-team{padding:80px 0}
  .ab-stats{padding:0 0 80px}
  .ab-who__body{font-size:26px;letter-spacing:-.78px}
  .ab-stat--a,.ab-stat--c{flex:1 1 0}
  .ab-band__img{height:560px}
  .ab-hww__inner{grid-template-columns:1fr;gap:40px}
  /* section 6 → single column, per-block titles, no sticky */
  .ab-vpv{grid-template-columns:1fr}
  .ab-vpv__left{display:none}
  .ab-vpv__block{min-height:auto;justify-content:flex-start;padding:64px clamp(24px,5vw,80px)}
  .ab-vpv__mtitle{display:block;margin:0 0 28px;text-align:center;font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:clamp(28px,4vw,40px);line-height:1.2;color:var(--fa-ink)}
}
/* ---------- Mobile <600 ---------- */
@media (max-width:599px){
  .ab-hero{padding:100px 0 40px}
  .ab-hero__title{padding:0 16px}
  .ab-hero__grid{grid-template-columns:repeat(2,1fr)}
  .ab-who,.ab-hww,.ab-team{padding:60px 0}
  .ab-stats{padding:0 0 60px}
  .ab-who__body{font-size:22px;letter-spacing:-.66px}
  .ab-stats__row{flex-direction:column}
  .ab-band__img{height:380px}
  .ab-principle{grid-template-columns:1fr;gap:12px}
  .ab-values{grid-template-columns:1fr}
  .ab-pile__card{width:150px;height:150px}
  .ab-pile__card:nth-child(2),.ab-pile__card:nth-child(3){margin-left:-75px}
  .ab-team__ctas{flex-direction:column;align-items:stretch}
}

/* WordPress gallery images can have large intrinsic widths. Give the static
   touch/tablet hero a definite container width and shrinkable grid tracks,
   rather than letting auto margins size the collage from those images. */
@media (max-width:1199px){
  .ab-hero__title{width:100%;min-width:0}
  .ab-hero__inner{min-width:0}
  .ab-hero__sub{width:100%;min-width:0}
  .ab-hero__grid{width:100%;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr))}
  .ab-hero__grid img{min-width:0}
}
@media (max-width:599px){
  .ab-hero__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}