/* about.html — page-specific styles only.
New classes are prefixed .ab- (or reuse established, already-shared
component classes .facts/.facts-grid/.fact and .ind-expert-* verbatim)
so nothing collides with sitewide assets/styles.css or other pages'
own page CSS. */
/* ------------------------------------------------------------
"Why TechHive" — stretched from the sitewide 4-column .grid-4 to
3 columns just on this section, so each card is wider and the
copy wraps onto fewer lines (shorter / less "long" tiles). Scoped
to #why only so the sitewide .grid-4 (used on other pages) is
untouched.
------------------------------------------------------------ */
#why .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){#why .grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){#why .grid-4{grid-template-columns:1fr}}
/* ------------------------------------------------------------
"Responsible Growth Through Practical Action" (#esg) — widened
past the sitewide 720px .section-head cap so the heading fits on
a single line; lead paragraph stays at its narrower readable width.
------------------------------------------------------------ */
#esg .section-head{max-width:1060px}
#esg .section-head .lead{max-width:640px}
/* ------------------------------------------------------------
"TechHive in Numbers" — reuses the sitewide .facts/.facts-grid/.fact
component as-is (same component used on the homepage's "Verified
facts" strip), just with 8 cells instead of 4. The border-left on
each .fact (sitewide rule) is the "thin, neat, barely-visible line
between cells"; this modifier only adds the row-divider for the
second row and the 2-column tablet/mobile reflow. The 5th cell
(first cell of row 2, "91%") has its left divider removed on
request, since it sits at the start of its own row.
------------------------------------------------------------ */
.ab-stats-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ab-stats-section .facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-stats-section .fact:nth-child(5){border-left:0}
@media(min-width:821px){.ab-stats-section .fact:nth-child(n+5){border-top:1px solid var(--line)}}
@media(max-width:820px){
.ab-stats-section .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ab-stats-section .fact:nth-child(n+3){border-top:1px solid var(--line)}
}
/* ------------------------------------------------------------
Leadership — two cards, one unified style: photo, name/title,
LinkedIn link. Ported from the client reference (geography/
leadership section), onto our own tokens.
------------------------------------------------------------ */
.leadership-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.leadership-card{border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:18px;background:var(--paper)}
.leadership-card .lc-top{display:flex;gap:18px;align-items:center}
.leadership-card img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none}
.leadership-card .lc-name b{display:block;font-size:1.1rem}
.leadership-card .lc-name span{display:block;margin-top:2px;color:var(--mut);font-size:.85rem}
.leadership-card a{font-size:.78rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media(max-width:820px){.leadership-grid{grid-template-columns:1fr}}
/* ------------------------------------------------------------
"People Behind the Work" — ported verbatim (markup, CSS, JS, and
the same 6-person roster/photos) from industries.html's own
.ind-expert-* carousel, per instruction. Kept under its original
class names rather than renamed, since this is meant to be the
same component, not a new one.
------------------------------------------------------------ */
.ind-expert-carousel{position:relative;margin-top:44px;display:flex;align-items:center;gap:0}
.ind-expert-track{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;min-width:0}
.ind-expert-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--paper);display:flex;flex-direction:column;height:100%;min-width:0}
.ind-expert-photo{display:block;width:140px;max-width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-sm);background:var(--bone);margin:0 auto 18px}
.ind-expert-card h3{font-size:1.12rem;font-weight:750;margin:0 0 4px;letter-spacing:-.01em}
.ind-expert-role{font-size:.88rem;color:var(--mut);margin:0 0 14px}
.ind-expert-card .verify{display:inline-flex;white-space:normal;text-align:left;margin-bottom:12px}
.ind-expert-card a{margin-top:auto;font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.ind-expert-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .15s var(--ease),transform .15s var(--ease);z-index:2}
.ind-expert-arrow:hover{background:var(--bone);transform:translateY(-2px)}
.ind-expert-arrow.left{margin-right:-26px}
.ind-expert-arrow.right{margin-left:-26px}
.ind-expert-arrow svg{width:16px;height:16px;color:var(--ink)}
.ind-expert-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:36px}
.ind-expert-dots button{width:9px;height:9px;border-radius:50%;background:var(--line);padding:0;border:0;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease)}
.ind-expert-dots button.active{background:var(--yellow);transform:scale(1.25)}
@media(max-width:1024px){
.ind-expert-track{grid-template-columns:repeat(2,minmax(0,1fr))}
.ind-expert-arrow.left{margin-right:0}
.ind-expert-arrow.right{margin-left:0}
}
@media(max-width:640px){
.ind-expert-track{grid-template-columns:1fr}
}
/* ------------------------------------------------------------
"Names You'll Recognise" — scattered, non-overlapping client-name
text cloud (same fade-in/out cycling pattern as the reference),
sized down from the reference's 420/520/640px so it takes up
noticeably less of the screen.
------------------------------------------------------------ */
.client-cloud{position:relative;height:170px;margin-top:8px}
.cw{position:absolute;white-space:nowrap;letter-spacing:-.01em;font-weight:700;opacity:0;will-change:opacity,transform;animation:cwCycle var(--dur,7s) ease-in-out var(--del,0s) infinite}
.cw.t1{font-size:18px;color:var(--ink)}
.cw.t2{font-size:13px;color:var(--mut)}
@keyframes cwCycle{0%,100%{opacity:0;transform:translateY(5px)}8%,78%{opacity:1;transform:none}90%{opacity:0;transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.cw{animation:none;opacity:1}}
@media(max-width:900px){.client-cloud{height:210px}}
@media(max-width:600px){.client-cloud{height:250px}}
/* ------------------------------------------------------------
"Vilnius is home" — map image kept as-is (not altered). Laid out
side by side: heading + lead on the left, the (smaller) map frame
on the right, so the map no longer sits full-width below the copy.
------------------------------------------------------------ */
.ab-geo-section .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:center}
.ab-geo-section .section-head{max-width:none;margin-bottom:0}
.geo-map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bone)}
.geo-map-frame img{width:100%;height:auto;display:block}
@media(max-width:900px){
.ab-geo-section .wrap{grid-template-columns:1fr;gap:28px}
.geo-map-frame{max-width:640px;margin:0 auto}
}
@media(max-width:700px){.geo-map-frame{max-width:100%}}
/* Founding and History: founder card (1/3) + clickable yellow timeline (2/3) */
.history-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;margin-top:36px;align-items:start}
.history-founder{display:flex;flex-direction:column;gap:16px}
.history-founder .btn{width:100%;justify-content:center}
.history-timeline{list-style:none;margin:0;padding:0}
.history-item{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:24px;align-items:start;padding:6px 0}
.history-item:not(:last-child):before{content:"";position:absolute;left:calc(44px - 1.5px);top:28px;bottom:-28px;width:3px;background:var(--yellow)}
.history-date{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:88px;height:44px;border-radius:999px;border:3px solid var(--yellow);background:var(--paper);font:inherit;font-weight:750;font-size:.95rem;letter-spacing:.01em;color:var(--ink);cursor:pointer;transition:background .15s,box-shadow .15s}
.history-date:hover{background:var(--yellow)}
.history-date:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.history-date[aria-expanded="true"]{background:var(--yellow)}
.history-date-icon{position:relative;width:11px;height:11px;flex:none}
.history-date-icon:before,.history-date-icon:after{content:"";position:absolute;left:0;top:50%;width:11px;height:2px;margin-top:-1px;background:var(--ink);transition:transform .2s}
.history-date-icon:after{transform:rotate(90deg)}
.history-date[aria-expanded="true"] .history-date-icon:after{transform:rotate(0)}
.history-body{padding:8px 0 20px;max-width:640px;animation:histIn .28s ease}
.history-body[hidden]{display:none}
.history-body .h3{margin:0 0 8px}
.history-body p{margin:0;color:var(--mut);line-height:1.65}
@keyframes histIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.history-body{animation:none}}
@media(max-width:820px){.history-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:480px){.history-item{grid-template-columns:76px minmax(0,1fr);column-gap:16px}.history-date{width:76px;font-size:.88rem}.history-item:not(:last-child):before{left:calc(38px - 1.5px)}}
/* history: dark, compact */
.history-section{padding:64px 0}
.history-section .section-head{max-width:none;margin-bottom:0}
.history-section .section-head .lead{max-width:none;margin-top:12px}
.history-section .history-grid{margin-top:32px;gap:40px}
.history-section .leadership-card{background:#141412;border-color:#3a3a37;color:var(--paper);padding:26px}
.history-section .leadership-card .lc-name span{color:var(--mut-dark)}
.history-section .leadership-card a{color:var(--paper)}
.history-section .history-date{background:var(--ink);color:var(--paper)}
.history-section .history-date:hover,.history-section .history-date[aria-expanded="true"]{background:var(--yellow);color:var(--ink)}
.history-section .history-date:focus-visible{outline-color:var(--paper)}
.history-section .history-date-icon:before,.history-section .history-date-icon:after{background:currentColor}
.history-section .history-item{padding:4px 0}
.history-section .history-body{padding:6px 0 14px}
.history-section .history-body p{color:var(--mut-dark)}
.history-section .history-body .h3{color:var(--paper)}
@media(min-width:821px){.history-section .section-head .lead{white-space:nowrap}}
@media(max-width:820px){.history-section{padding:48px 0}}
/* founder plaque: large portrait */
.history-section .leadership-card{padding:0;gap:0;overflow:hidden}
.history-section .leadership-card .lc-top{flex-direction:column;align-items:stretch;gap:0}
.history-section .leadership-card .lc-top img{width:100%;height:auto;aspect-ratio:800/729;border-radius:0;object-fit:cover}
.history-section .leadership-card .lc-name{padding:20px 26px 6px}
.history-section .leadership-card .lc-name b{font-size:1.3rem}
.history-section .leadership-card>a{align-self:flex-start;margin:6px 26px 24px}
/* founder portrait: slightly smaller (inset) */
.history-section .leadership-card .lc-top{padding:18px 18px 0}
.history-section .leadership-card .lc-top img{border-radius:var(--radius-sm,10px)}
.history-section .leadership-card .lc-name{padding:18px 26px 6px}
.history-section .leadership-card .lc-name{padding:18px 8px 6px}