/* ============================================================
   TOONIES — About page (260904++)
   Loaded after style.css + pages.css.
   Class names are prefixed (ab-, tlx-, of-, vl-, cert) to stay clear
   of Bootstrap's utility namespace.
   Hero / CTA photo backgrounds are applied inline in the template via
   {$STATIC_HOST} so they resolve on both local dev and the CDN.
   ============================================================ */

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.ab-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff;
  padding:clamp(34px,6vw,72px);isolation:isolate;background-size:cover;background-position:center}
.ab-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(11,18,27,.95) 30%,rgba(11,18,27,.72) 60%,rgba(185,31,66,.45))}
.ab-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);border-radius:20px;padding:6px 14px;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px}
.ab-hero h1{color:#fff;font-size:clamp(28px,4.6vw,50px);line-height:1.14;margin-bottom:16px;max-width:760px}
.ab-hero p{color:rgba(255,255,255,.86);font-size:clamp(15px,1.6vw,18px);max-width:620px;margin:0}
.ab-hero .hl{color:#eaa3b1}

.ab-figures{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,54px);margin-top:34px;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.ab-fig .n{font-size:clamp(24px,3.4vw,36px);font-weight:800;color:#fff;line-height:1}
.ab-fig .l{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:5px}

/* ------------------------------------------------------------
   STORY / IMAGE COLLAGE
   ------------------------------------------------------------ */
.ab-lead{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--ink);font-weight:600;margin-bottom:16px}
.ab-body p{font-size:15px;line-height:1.75;margin-bottom:14px}
.ab-sign{display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line)}
.ab-sign .tm-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:15px;background:var(--brand);flex:none}
.ab-sign .who strong{display:block;font-size:14px;color:var(--ink);line-height:1.3}
.ab-sign .who span{font-size:12.5px;color:var(--muted)}

.collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block}
.collage .tall{grid-row:span 2;aspect-ratio:3/5}
.collage .sq{aspect-ratio:1/1}
.collage figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius)}
.collage figure img{transition:transform .5s ease}
.collage figure:hover img{transform:scale(1.05)}
.collage-badge{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);
  color:var(--ink);font-size:11.5px;font-weight:700;border-radius:20px;padding:5px 12px;
  box-shadow:var(--shadow-sm)}

/* ------------------------------------------------------------
   TIMELINE — animated year stepper (8 milestones, 2015→2026)
   ------------------------------------------------------------ */
.tlx{--steps:8}

/* ---------- the rail ---------- */
.tlx-rail{position:relative;display:flex;padding:6px 0 0;margin-bottom:26px}
.tlx-line{position:absolute;left:calc(50% / var(--steps));right:calc(50% / var(--steps));
  top:25px;height:2px;background:var(--line);border-radius:2px}
.tlx-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--brand),#dd5070);
  border-radius:2px;transition:width .55s cubic-bezier(.4,0,.2,1)}

.tlx-step{flex:1;position:relative;border:0;background:transparent;padding:0 2px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:inherit}
.tlx-dot{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--line);
  color:var(--muted);display:grid;place-items:center;font-size:15px;position:relative;z-index:1;
  transition:transform .38s cubic-bezier(.34,1.4,.5,1),background .3s,border-color .3s,color .3s,box-shadow .3s}
.tlx-lbl{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:-.01em;white-space:nowrap;
  transition:color .3s,transform .3s}

.tlx-step:hover .tlx-dot{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.tlx-step:hover .tlx-lbl{color:var(--ink)}
.tlx-step:focus-visible{outline:0}
.tlx-step:focus-visible .tlx-dot{box-shadow:0 0 0 4px rgba(185,31,66,.35)}

/* steps already passed */
.tlx-step.done .tlx-dot{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.tlx-step.done .tlx-lbl{color:var(--body)}

/* the active step */
.tlx-step.on .tlx-dot{background:var(--brand);border-color:var(--brand);color:#fff;
  transform:scale(1.22);box-shadow:0 0 0 6px var(--brand-soft),0 8px 18px rgba(185,31,66,.35)}
.tlx-step.on .tlx-lbl{color:var(--brand);font-size:14px;transform:translateY(1px)}

/* ---------- the stage: panels stack in one grid cell so height never jumps ---------- */
.tlx-stage{display:grid}
.tlx-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(16px) scale(.99);
  transition:opacity .45s ease,transform .45s cubic-bezier(.4,0,.2,1),visibility .45s}
.tlx-panel.on{opacity:1;visibility:visible;transform:none}

.tlx-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;min-height:250px}
.tlx-text{padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;justify-content:center}
.tlx-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.05em;
  border-radius:20px;padding:6px 13px;margin-bottom:13px}
.tlx-card h4{font-size:clamp(18px,2.4vw,24px);margin:0 0 11px;line-height:1.25}
.tlx-card p{font-size:15px;line-height:1.7;margin:0;max-width:56ch}
.tlx-metric{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:rgba(18,183,106,.10);color:#0b7a48;font-size:12.5px;font-weight:700;
  border-radius:8px;padding:7px 13px;margin-top:16px}

.tlx-media{position:relative;overflow:hidden;background:var(--bg-soft);min-height:250px}
.tlx-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tlx-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.9),rgba(255,255,255,0) 42%)}
/* the image drifts in as the panel becomes active */
.tlx-panel.on .tlx-media img{animation:tlxKen 7s ease-out both}
@keyframes tlxKen{from{transform:scale(1.11)}to{transform:scale(1)}}

/* ---------- footer controls ---------- */
.tlx-foot{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.tlx-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--ink);display:grid;place-items:center;font-size:15px;cursor:pointer;flex:none;transition:.2s}
.tlx-btn:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff}
.tlx-btn:disabled{opacity:.35;cursor:default}
.tlx-count{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tlx-count span{color:var(--muted);font-weight:500}
.tlx-auto{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--muted);border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:6px 13px;cursor:pointer;transition:.2s}
.tlx-auto:hover{border-color:var(--brand);color:var(--brand)}
/* thin bar that drains while autoplay runs */
.tlx-tick{position:relative;width:52px;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.tlx-tick i{position:absolute;inset:0 auto 0 0;width:0;background:var(--brand);border-radius:3px}
.tlx.playing .tlx-tick i{animation:tlxTick 6s linear infinite}
@keyframes tlxTick{from{width:0}to{width:100%}}

/* ---------- responsive ---------- */
@media(max-width:991px){
  .tlx-card{grid-template-columns:1fr;min-height:0}
  .tlx-media{min-height:0;aspect-ratio:16/7;order:-1}
  .tlx-media::after{background:linear-gradient(to top,rgba(255,255,255,.85),rgba(255,255,255,0) 55%)}
}
@media(max-width:767px){
  .tlx-rail{margin-bottom:20px;padding-top:4px}
  .tlx-step{padding:0 1px}
  .tlx-dot{width:32px;height:32px;font-size:13px;border-width:1.5px}
  .tlx-step.on .tlx-dot{transform:scale(1.16);box-shadow:0 0 0 4px var(--brand-soft)}
  .tlx-line{top:20px}
  .tlx-lbl{font-size:11px}
  .tlx-card p{font-size:14px}
  .tlx-auto{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .tlx-panel{transition:opacity .01ms}
  .tlx-panel.on .tlx-media img{animation:none}
  .tlx.playing .tlx-tick i{animation:none;width:100%}
}

/* ------------------------------------------------------------
   VALUES — how we work
   ------------------------------------------------------------ */
.vl{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;height:100%;
  transition:.25s ease;position:relative;overflow:hidden}
.vl::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:.3s ease}
.vl:hover{box-shadow:var(--shadow-md);border-color:transparent;transform:translateY(-3px)}
.vl:hover::after{transform:scaleX(1)}
.vl-ico{width:50px;height:50px;border-radius:14px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:21px;margin-bottom:14px}
.vl h4{font-size:16px;margin:0 0 8px}
.vl p{font-size:14px;margin:0;line-height:1.65}

/* ------------------------------------------------------------
   OFFICES — where we are
   ------------------------------------------------------------ */
.of{position:relative;border-radius:var(--radius-lg);overflow:hidden;height:100%;min-height:210px;
  display:block;transition:.25s ease}
.of:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.of img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.of:hover img{transform:scale(1.06)}
.of .shade{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,18,27,.93) 12%,rgba(11,18,27,.42) 55%,rgba(11,18,27,.1))}
.of .txt{position:relative;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:210px;color:#fff}
.of .city{font-size:17px;font-weight:700;color:#fff;line-height:1.2}
.of .kind{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#eaa3b1;margin-bottom:5px}
.of .det{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:5px}

/* ------------------------------------------------------------
   CERTIFICATIONS
   ------------------------------------------------------------ */
.cert{display:flex;align-items:center;gap:12px;background:var(--bg-soft);border-radius:var(--radius);
  padding:14px 16px;height:100%}
.cert i{font-size:24px;color:var(--brand);flex:none}
.cert strong{display:block;font-size:13.5px;color:var(--ink);line-height:1.3}
.cert span{font-size:12px;color:var(--muted)}

/* ------------------------------------------------------------
   CLOSING CTA
   ------------------------------------------------------------ */
.ab-cta{position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff;
  padding:clamp(28px,5vw,52px);isolation:isolate;background-size:cover;background-position:center}
.ab-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(185,31,66,.95) 25%,rgba(154,22,54,.82))}
.ab-cta h2{color:#fff;font-size:clamp(22px,3.2vw,34px);margin-bottom:10px}
.ab-cta p{color:rgba(255,255,255,.9);font-size:15.5px;max-width:560px;margin:0}
.ab-cta-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
@media(min-width:992px){.ab-cta-btns{justify-content:flex-end}}

@media(max-width:767px){
  .collage .tall{grid-row:auto;aspect-ratio:1/1}
  .ab-figures{gap:18px 28px}
}