/* Technologies — page-specific styles (technologies.html).
   New classes are prefixed .tp- so nothing collides with sitewide styles.css
   or other pages' own page CSS. Ported (structure + interaction, not raw
   CSS) from the client-supplied reference page's technology browser, onto
   TechHive's own design tokens (Inter, --ink/--paper/--bone/--yellow). */

.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ----------------------- hero (tighter first screen) -----------------------
   The shared .page-hero system pins the hero to ~74% of the viewport height
   (--hero-band, see styles.css) so every inner page opens on a full "first
   screen" regardless of copy length. With the shorter hero copy on this page
   that leaves a lot of visible empty space above/below the heading and the
   word-cloud visual. Scoped down just for this page (this stylesheet only
   loads on technologies.html) so other "page-hero" pages are untouched. */
.page-hero{--hero-min:560px;--viz-h:380px}
.page-hero .hero-copy,
.page-hero .hero-copy h1{text-align:left}
@media(max-width:1100px){
  .page-hero{padding-top:88px}
}

/* Section heading stretched wider than the sitewide 720px .section-head cap
   (see #retail-sectors / #technology-ecosystem in industries-page.css for the
   same pattern) so the manually two-lined heading fills the width instead of
   looking squeezed into a narrow column; lead paragraph stays narrower for
   readability. */
#technology-browser .section-head{max-width:960px}
#technology-browser .section-head .lead{max-width:640px}

/* ----------------------- technology ecosystem (logo row) ----------------------- */
.tp-ecosystem-heading{margin:0 0 20px;font-size:1.08rem}
.tp-platform-row{
  background:var(--bone);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 40px;
}
.tp-platforms{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:28px 40px;
}
.tp-platform-logo{display:flex;align-items:center;gap:11px;min-width:0;color:var(--ink)}
.tp-platform-logo svg{display:block;flex:0 0 auto;width:34px;height:34px}
.tp-platform-logo--aws svg{width:68px;height:34px}
.tp-platform-word{font-size:clamp(1rem,1.6vw,1.2rem);font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.tp-ecosystem-assurance{margin:18px 0 0;color:var(--mut);font-size:.82rem;line-height:1.6}
@media(max-width:700px){
  .tp-platform-row{padding:26px 22px}
  .tp-platforms{justify-content:center;gap:24px 32px}
}

/* ----------------------- tabs shell ----------------------- */
.tp-tabs{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  min-height:620px;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
}
.tp-tablist{display:flex;flex-direction:column;background:var(--bone);border-right:1px solid var(--line)}
.tp-tab{
  position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;
  align-items:center;flex:1 1 0;min-height:60px;padding:11px 20px;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);cursor:pointer;text-align:left;font-family:inherit;
  transition:background .15s ease;
}
.tp-tab:last-child{border-bottom:0}
.tp-tab:hover{background:var(--paper)}
.tp-tab[aria-selected="true"]{background:var(--paper)}
.tp-tab[aria-selected="true"]::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--yellow);
}
.tp-tab:focus-visible{z-index:1;outline:2px solid var(--ink);outline-offset:-2px}
.tp-tab-num{color:var(--mut);font-size:.68rem;font-weight:800;letter-spacing:.04em}
.tp-tab-label{font-size:.86rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}

.tp-panels{min-width:0}
.tp-panel{min-height:100%;padding:38px 40px 30px}
.tp-panel-head{max-width:880px}
.tp-panel-head h3{margin:0 0 12px;font-size:clamp(1.3rem,2.3vw,1.6rem);font-weight:750;line-height:1.2;letter-spacing:-.02em}
.tp-panel-head p{margin:0;max-width:820px;color:var(--mut);font-size:.9rem;line-height:1.6}

.tp-subgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.tp-subcard{display:flex;flex-direction:column;min-height:0;padding:20px;background:var(--bone);border:1px solid var(--line);border-radius:12px}
.tp-subcard h4{margin:0 0 9px;font-size:.96rem;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.tp-subcard>p{margin:0;color:var(--mut);font-size:.8rem;line-height:1.55}
.tp-pill-list{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-start;margin-top:auto;padding-top:18px}
.tp-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font-size:.7rem;font-weight:700;line-height:1.2;
}
.tp-pill::before{content:"";width:6px;height:6px;flex:0 0 auto;background:var(--yellow);border-radius:50%}

.tp-note{margin:22px 0 0;color:var(--mut);font-size:.78rem;line-height:1.6}

/* ----------------------- recent work (case carousel) -----------------------
   Ported from the Industries / Retail Data & AI "Recent works" carousel (see
   .ind-case-* in assets/industries-page.css) — same component, renamed .tp-
   so it stays scoped to this page's own stylesheet. */
.tp-case-carousel{position:relative;margin-top:8px}
.tp-case-track{margin:0}
.tp-case-arrow{position:absolute;top:36%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:background .15s ease,border-color .15s ease,transform .15s ease;color:var(--ink)}
.tp-case-arrow:hover{background:var(--bone);border-color:var(--ink)}
.tp-case-arrow-left{left:-23px}
.tp-case-arrow-right{right:-23px}
.tp-case-dots{display:flex;justify-content:center;gap:10px;margin-top:32px}
.tp-case-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease}
.tp-case-dot.active{background:var(--yellow);transform:scale(1.25)}
@media(max-width:900px){
  .tp-case-arrow{display:none}
}

.tp-case-link{color:inherit;text-decoration:none}
.tp-case-link .case-metric{
  position:relative;overflow:hidden;isolation:isolate;
  height:144px;display:flex;flex-direction:column;justify-content:center;
}
.tp-case-link .case-metric-visual{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.22;
}
.tp-case-link .case-metric b{
  position:relative;z-index:1;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tp-case-link .case-metric-industry{position:relative;z-index:1;margin-top:8px;display:block}

@media(max-width:1180px){
  .tp-tabs{grid-template-columns:1fr}
  .tp-tablist{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}
  .tp-tab{flex:1 1 220px;border-bottom:1px solid var(--line)}
  .tp-tab[aria-selected="true"]::before{top:auto;bottom:0;left:12px;right:12px;width:auto;height:3px}
  .tp-subgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .tp-panel{padding:28px 22px 24px}
  .tp-subgrid{grid-template-columns:1fr}
  .tp-tab{flex:1 1 100%}
}

/* Specialists with Real Production Experience */
.specialists-section{background:#FFF4CC}
.specialists-section .section-head{max-width:820px;margin-bottom:44px}
.sp-carousel{position:relative;display:flex;align-items:center}
.sp-track{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.sp-card[hidden]{display:none}
.sp-photo{position:relative;aspect-ratio:5/7;container-type:inline-size;border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.sp-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .28s ease}
.sp-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:18px 18px 16px;opacity:0;pointer-events:none;transition:opacity .28s ease;overflow:auto}
.sp-facts{margin:0;display:grid;gap:11px}
.sp-facts div{display:grid;gap:2px}
.sp-facts dt{font-size:.66rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.sp-facts dd{margin:0;font-size:.8rem;line-height:1.4;font-weight:560;color:var(--ink)}
.sp-cv{align-self:flex-start;padding:10px 18px;font-size:.82rem;flex:none}
.sp-card:focus-within .sp-photo img,.sp-card.is-open .sp-photo img{opacity:.08}
.sp-card:focus-within .sp-overlay,.sp-card.is-open .sp-overlay{opacity:1;pointer-events:auto}
@media(hover:hover){.sp-card:hover .sp-photo img{opacity:.08}.sp-card:hover .sp-overlay{opacity:1;pointer-events:auto}}
.sp-name{font-size:1.12rem;font-weight:750;margin:16px 0 4px;letter-spacing:-.01em}
.sp-role{margin:0;font-size:.88rem;color:var(--mut)}
.sp-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;color:var(--ink);align-self:flex-start;margin-top:140px}
.sp-arrow:hover{background:var(--bone);transform:translateY(-2px)}
.sp-arrow.left{margin-right:-26px}.sp-arrow.right{margin-left:-26px}
.sp-arrow[hidden],.sp-dots[hidden]{display:none}
.sp-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:36px}
.sp-dots button{width:9px;height:9px;border-radius:50%;background:rgba(2,2,2,.2);padding:0;border:0;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease)}
.sp-dots button.active{background:var(--ink);transform:scale(1.25)}
@media(max-width:1024px){.sp-track{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-arrow.left{margin-right:0}.sp-arrow.right{margin-left:0}.sp-arrow{margin-top:120px}}
@media(max-width:640px){.sp-track{grid-template-columns:1fr}.sp-arrow{width:44px;height:44px;margin-top:110px}.sp-arrow.left{margin-right:-8px}.sp-arrow.right{margin-left:-8px}.sp-photo{aspect-ratio:3/4}}
@media(prefers-reduced-motion:reduce){.sp-photo img,.sp-overlay{transition:none}}
.specialists-section .section-head{max-width:none}
.specialists-section .section-head .lead{max-width:none;font-size:1.02rem;line-height:1.55}
@media(min-width:821px){.specialists-section .section-head .lead .sp-l{display:block}}
@media(min-width:821px){.specialists-section .section-head .lead{font-size:clamp(.82rem,1.38vw,1.02rem)}}

.sp-overlay{padding:6.5cqw 6.5cqw 6cqw;gap:3cqw}
.sp-facts{gap:3.4cqw}
.sp-facts dt{font-size:clamp(8.5px,3.2cqw,10.5px)}
.sp-facts dd{font-size:clamp(10.5px,4.5cqw,12.8px);line-height:1.35}
@media(min-width:1025px){.sp-overlay{padding-left:max(18px,12.5cqw);padding-right:max(18px,12.5cqw)}}

/* Specialists: sliding carousel */
.sp-viewport{flex:1;min-width:0;overflow:hidden;border-radius:var(--radius)}
.sp-track{--per:4;--gap:20px;--start:0;display:flex;gap:var(--gap);transform:translateX(calc(-1 * var(--start) * (100% + var(--gap)) / var(--per)));transition:transform .45s cubic-bezier(.25,.8,.25,1);will-change:transform}
.sp-track>.sp-card{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));min-width:0}
@media(max-width:1024px){.sp-track{--per:2}}
@media(max-width:640px){.sp-track{--per:1}}
@media(prefers-reduced-motion:reduce){.sp-track{transition:none}}