/* ════════════════════════════════════════════════════════════════
   TAGGIFY — Component Styles
   Aesthetic: Sowieso Wero Neo-Brutalist
   Hard borders, offset shadows, no blur, no gradients
   ════════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
    display:inline-flex; align-items:center; gap:var(--space-3);
    font-family:var(--font-primary); font-weight:700;
    font-size:var(--text-base); letter-spacing:-0.2px;
    text-transform:uppercase; padding:14px 32px;
    border-radius:var(--radius-pill);
    border:var(--border-ink-2);
    box-shadow:var(--shadow-hard-md);
    transition:all 0.15s var(--ease-smooth);
    position:relative; cursor:pointer;
}
.btn--primary {
    background:var(--yellow);
    color:var(--ink);
}
.btn--primary:hover {
    transform:translate(4px,4px);
    box-shadow:none;
}
.btn--outline {
    background:transparent;
    color:var(--ink);
    border:var(--border-ink-2);
}
.btn--outline:hover {
    background:var(--ink);
    color:var(--yellow);
    transform:translate(4px,4px);
    box-shadow:none;
}
.section--black .btn--outline {
    color:var(--white);
    border-color:var(--white);
    box-shadow:6px 6px 0 rgba(255,255,255,0.4);
}
.section--black .btn--outline:hover {
    background:var(--white);
    color:var(--ink);
    box-shadow:none;
    transform:translate(4px,4px);
}
.btn--lg  { padding:18px 40px; font-size:var(--text-lg) }
.btn--xl  { padding:22px 52px; font-size:var(--text-xl) }
.btn i { transition:transform var(--duration-normal) var(--ease-smooth) }
.btn:hover i { transform:translateX(4px) }

/* ── Section Header ── */
.section-header { margin-bottom:var(--space-20) }
.section-label {
    display:inline-block;
    font-family:var(--font-primary);
    font-size:var(--text-sm); font-weight:700;
    letter-spacing:2px; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:var(--space-6);
}
.section--black .section-label { color:rgba(255,255,255,0.75) }

/* ── Pills ── */
.pill {
    display:inline-flex; align-items:center; gap:var(--space-2);
    padding:10px 24px; border-radius:var(--radius-pill);
    border:var(--border-ink); font-family:var(--font-primary);
    font-size:var(--text-sm); font-weight:600;
    background:var(--white);
    box-shadow:var(--shadow-hard-sm);
    transition:all 0.15s var(--ease-smooth);
    cursor:default;
}
.pill:hover {
    background:var(--yellow);
    transform:translate(3px,3px);
    box-shadow:none;
}

/* ── Navbar ── */
.navbar {
    position:fixed; top:0; left:0; width:100%; z-index:9999;
    padding:var(--space-4) 0;
    transition:all var(--duration-slow) var(--ease-smooth);
}
.navbar.scrolled {
    border-bottom:0.7px solid var(--ink);
    background:rgba(245,240,232,0.92);
    backdrop-filter:blur(2px);
    padding:var(--space-2) 0;
}
.navbar__inner { display:flex; align-items:center; justify-content:space-between }
.navbar__logo  { display:flex; align-items:center }
.navbar__logo-text {
    font-family:var(--font-primary);
    font-size:var(--text-2xl); font-weight:800;
    letter-spacing:-1.5px; color:var(--ink);
}
.navbar__logo-dot { color:var(--yellow-dark); font-size:var(--text-3xl); line-height:0 }
.navbar__links { display:flex; align-items:center; gap:var(--space-10) }
.navbar__link {
    font-family:var(--font-primary);
    font-size:var(--text-sm); font-weight:600;
    letter-spacing:0.5px; text-transform:uppercase;
    position:relative; padding:var(--space-2) 0;
    color:var(--ink);
}
.navbar__link::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:2px; background:var(--ink);
    transition:width var(--duration-normal) var(--ease-smooth);
}
.navbar__link:hover::after, .navbar__link.active::after { width:100% }
.navbar__cta { font-size:var(--text-xs)!important; padding:10px 24px!important }
.navbar__toggle { display:none; flex-direction:column; gap:5px; padding:4px }
.navbar__toggle span { width:24px; height:2.5px; background:var(--ink); transition:all var(--duration-normal) var(--ease-smooth) }

/* ── Bottom Pill Nav (Wero signature) ── */
.bottom-nav {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
    z-index:9998;
    display:flex; align-items:center; gap:0;
    background:var(--ink); color:var(--white);
    border-radius:var(--radius-pill);
    border:var(--border-ink-2);
    box-shadow:var(--shadow-hard-md);
    overflow:hidden;
    opacity:0; pointer-events:none;
    transition:opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
    transform:translateX(-50%) translateY(20px);
}
.bottom-nav.visible {
    opacity:1; pointer-events:all;
    transform:translateX(-50%) translateY(0);
}
.bottom-nav__link {
    font-family:var(--font-primary);
    font-size:var(--text-sm); font-weight:600;
    letter-spacing:0.5px; text-transform:uppercase;
    color:rgba(255,255,255,0.85);
    padding:14px 28px;
    transition:color 0.2s, background 0.2s;
    white-space:nowrap;
}
.bottom-nav__link:hover { color:var(--yellow); background:rgba(255,255,255,0.05) }
.bottom-nav__divider { width:1px; height:20px; background:rgba(255,255,255,0.35) }

/* ── Mobile Menu ── */
.mobile-menu {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:var(--yellow); z-index:99998;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity var(--duration-slow) var(--ease-smooth);
}
.mobile-menu.open { opacity:1; pointer-events:all }
.mobile-menu__inner { text-align:center }
.mobile-menu__link {
    display:block;
    font-family:var(--font-primary);
    font-size:clamp(2rem,8vw,4.5rem);
    font-weight:800; color:var(--ink);
    padding:var(--space-3) 0;
    transition:opacity 0.2s;
    opacity:0; transform:translateY(30px);
    text-transform:uppercase; letter-spacing:-1.5px;
}
.mobile-menu.open .mobile-menu__link { opacity:1; transform:translateY(0) }
.mobile-menu__link:hover { opacity:0.7 }
.mobile-menu__footer { margin-top:var(--space-12); color:var(--ink-soft); font-size:var(--text-sm) }
.mobile-menu__footer a { color:var(--ink); font-weight:700 }

/* ── Accordion ── */
.accordion { display:flex; flex-direction:column; gap:0; margin-top:var(--space-16) }
.accordion__item {
    border:var(--border-ink);
    border-top:none;
}
.accordion__item:first-child { border-top:var(--border-ink); border-radius:var(--radius-sm) var(--radius-sm) 0 0 }
.accordion__item:last-child  { border-radius:0 0 var(--radius-sm) var(--radius-sm) }
.accordion__header {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:var(--space-8) var(--space-8); cursor:pointer;
    transition:background 0.2s;
}
.accordion__header:hover { background:var(--yellow) }
.accordion__item.active .accordion__header { background:var(--yellow) }
.accordion__title { margin: 0;
    font-family:var(--font-primary);
    font-size:clamp(1.25rem,2.5vw,var(--text-3xl));
    font-weight:700; letter-spacing:-0.5px;
    color:var(--ink);
}
.accordion__icon {
    width:44px; height:44px;
    border-radius:var(--radius-circle);
    border:var(--border-ink);
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; font-size:var(--text-sm);
    flex-shrink:0;
    box-shadow:var(--shadow-hard-sm);
}
.accordion__item.active .accordion__icon {
    background:var(--ink); color:var(--yellow);
    transform:translate(2px,2px); box-shadow:none;
}
.accordion__body { max-height:0; overflow:hidden; transition:max-height var(--duration-slower) var(--ease-out-expo) }
.accordion__item.active .accordion__body { max-height:600px }
.accordion__content {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12);
    padding:var(--space-6) var(--space-8) var(--space-12);
    opacity:0; transform:translateY(10px);
    transition:all var(--duration-slow) var(--ease-smooth) 0.1s;
    border-top:var(--border-ink);
}
.accordion__item.active .accordion__content { opacity:1; transform:translateY(0) }
.accordion__col h4 { font-family:var(--font-primary); font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-4); color:var(--ink) }
.accordion__col p  { color:var(--text-muted); line-height:1.6 }
.accordion__col ul { display:flex; flex-direction:column; gap:var(--space-3) }
.accordion__col li { position:relative; padding-left:var(--space-6); color:var(--text-muted); line-height:1.6 }
.accordion__col li::before { content:'→'; position:absolute; left:0; color:var(--ink); font-weight:700 }

/* ── Network Cards ── */
.network--horizontal { overflow:visible }
.network--horizontal .section-header { margin-bottom:var(--space-6) }
.network__scroll-wrapper { width:100%; overflow:hidden; padding-left:var(--container-padding); display:flex; align-items:center; }
.network__scroll-track { display:flex; gap:var(--space-6); padding-right:var(--space-8); will-change:transform }
.network__scroll-track .network-card { flex:0 0 320px; min-width:320px }

.network-card {
    background:var(--canvas);
    border:var(--border-ink); border-radius:var(--radius-md);
    box-shadow:var(--shadow-hard-md);
    padding:var(--space-10);
    transition:all 0.15s var(--ease-smooth);
    position:relative; overflow:hidden;
}
.network-card:hover { transform:translate(4px,4px); box-shadow:none }
.network-card__icon  { font-size:var(--text-3xl); margin-bottom:var(--space-6) }
.network-card__name  { font-family:var(--font-primary); font-size:var(--text-xl); font-weight:700; margin-bottom:var(--space-2) }
.network-card__count { font-size:var(--text-sm); color:var(--text-muted) }
.network-card__bar   { height:4px; background:rgba(29,28,28,0.1); border-radius:2px; margin-top:var(--space-8); overflow:hidden }
.network-card__fill  { height:100%; width:var(--fill); background:var(--yellow-dark); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-out-expo) }
.network-card.animated .network-card__fill { transform:scaleX(1) }

/* ── Brand Logos ── */
.brands--pinned { padding:0; overflow:visible }
.brands__pinned-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:var(--space-20) var(--container-padding) }
.brands__header { text-align:center; margin-bottom:var(--space-16) }
.brands__viewport { width:100%; max-width:900px; height:320px; overflow:hidden; position:relative; mask-image:linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%) }
.brands__swipe-track { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); will-change:transform }
.brand-logo {
    display:flex; align-items:center; justify-content:center;
    padding:var(--space-8) var(--space-4);
    border:var(--border-ink); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-hard-sm);
    font-family:var(--font-primary); font-weight:700;
    font-size:var(--text-base); color:var(--ink);
    text-transform:uppercase; letter-spacing:1px;
    background:var(--white);
    transition:all 0.15s var(--ease-smooth);
}
.brand-logo:hover { background:var(--yellow); transform:translate(3px,3px); box-shadow:none }

/* ── Team Cards ── */
.team__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-6); margin-top:var(--space-16) }
.team-card {
    text-align:center; padding:var(--space-10) var(--space-6);
    border:var(--border-ink); border-radius:var(--radius-md);
    box-shadow:var(--shadow-hard-md);
    background:var(--canvas);
    transition:all 0.15s var(--ease-smooth);
}
.team-card:hover { transform:translate(4px,4px); box-shadow:none; background:var(--yellow) }
.team-card__avatar {
    width:80px; height:80px; border-radius:var(--radius-circle);
    margin:0 auto var(--space-6);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-primary); font-weight:800; font-size:var(--text-2xl);
    color:var(--ink); background:var(--yellow);
    border:var(--border-ink); box-shadow:var(--shadow-hard-sm);
}
.team-card__name { font-family:var(--font-primary); font-weight:700; font-size:var(--text-lg); margin-bottom:var(--space-2) }
.team-card__role { font-size:var(--text-sm); color:var(--text-muted); font-weight:600 }

/* ── Contact ── */
.contact__grid { display:grid; grid-template-columns:1.3fr 0.7fr; gap:var(--space-20); margin-top:var(--space-16) }
.contact-form { display:flex; flex-direction:column; gap:var(--space-5) }
.contact-form__row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5) }
.form-group input,.form-group textarea,.form-group select {
    width:100%; padding:16px 20px;
    border:var(--border-ink-2);
    border-radius:var(--radius-sm);
    font-size:var(--text-base);
    background:var(--white);
    box-shadow:var(--shadow-hard-sm);
    transition:all 0.15s var(--ease-smooth);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
    outline:none;
    transform:translate(2px,2px);
    box-shadow:none;
}
.form-group textarea { resize:vertical; min-height:120px }
.contact-info {
    padding:var(--space-12);
    background:var(--yellow);
    border:var(--border-ink-2);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-hard-md);
}
.contact-info__item { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-6); font-size:var(--text-base); color:var(--ink) }
.contact-info__item i { width:20px; color:var(--ink) }
.contact-info__item a:hover { opacity:0.6 }
.contact-info__social { display:flex; gap:var(--space-4); margin-top:var(--space-12) }
.contact-info__social a {
    width:44px; height:44px; border-radius:var(--radius-circle);
    border:var(--border-ink); box-shadow:var(--shadow-hard-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--text-lg); background:var(--white);
    transition:all 0.15s var(--ease-smooth);
}
.contact-info__social a:hover { background:var(--ink); color:var(--yellow); transform:translate(3px,3px); box-shadow:none }

/* ── Footer ── */
.footer__inner { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-12) }
.footer__links { display:flex; gap:var(--space-8) }
.footer__links a {
    font-family:var(--font-primary); font-size:var(--text-sm); font-weight:600;
    text-transform:uppercase; letter-spacing:0.5px;
    color:rgba(255,255,255,0.8);
    transition:color var(--duration-normal);
}
.footer__links a:hover { color:var(--yellow) }
.footer__social { display:flex; gap:var(--space-4) }
.footer__social a {
    width:44px; height:44px; border-radius:var(--radius-circle);
    border:1.5px solid rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--text-lg); color:rgba(255,255,255,0.8);
    transition:all 0.15s var(--ease-smooth);
}
.footer__social a:hover { background:var(--yellow); border-color:var(--yellow); color:var(--ink) }
.footer__bottom {
    display:flex; align-items:center; justify-content:space-between;
    margin-top:var(--space-20); padding-top:var(--space-10);
    border-top:1.5px solid rgba(255,255,255,0.2);
    color:rgba(255,255,255,0.7);
}
.back-to-top {
    width:48px; height:48px; border-radius:var(--radius-circle);
    border:var(--border-ink-2); box-shadow:var(--shadow-hard-sm);
    background:var(--yellow); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s var(--ease-smooth);
}
.back-to-top:hover { transform:translate(3px,3px); box-shadow:none }

/* ── Case Study Components ── */
.cs-placeholder {
    width:100%; min-height:200px;
    background:rgba(255,255,255,0.08);
    border:var(--border-ink); border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-primary); font-weight:800;
    font-size:var(--text-3xl); color:rgba(255,255,255,0.15);
    text-transform:uppercase; letter-spacing:4px;
}
.cs-placeholder--lg { min-height:400px; font-size:var(--text-5xl) }
.cs-featured__card  { border:var(--border-ink); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-hard-lg); background:var(--canvas) }
.cs-featured__badge {
    position:absolute; top:var(--space-6); left:var(--space-6);
    background:var(--yellow); color:var(--ink);
    border:var(--border-ink); box-shadow:var(--shadow-hard-sm);
    padding:6px 16px; border-radius:var(--radius-pill);
    font-family:var(--font-primary); font-size:var(--text-xs); font-weight:700; z-index:2;
}
.cs-featured__grid { display:grid; grid-template-columns:1fr 1fr; gap:0 }
.cs-featured__visual { padding:var(--space-10) }
.cs-featured__content { padding:var(--space-12) }
.cs-featured__type { display:inline-block; font-size:var(--text-sm); color:var(--yellow-dark); font-weight:600; margin-bottom:var(--space-4) }
.cs-list { display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-4) }
.cs-list li { padding-left:var(--space-6); position:relative; color:var(--text-muted); line-height:1.6; font-size:var(--text-sm) }
.cs-list li::before { content:'→'; position:absolute; left:0; color:var(--ink) }
.cs-stats { display:flex; gap:var(--space-16); margin-top:var(--space-12); padding-top:var(--space-10); border-top:var(--border-ink) }
.cs-stat__number { font-family:var(--font-primary); font-size:var(--text-3xl); font-weight:800; color:var(--yellow-dark); letter-spacing:-1px }
.cs-stat__label  { display:block; font-size:var(--text-sm); color:var(--text-muted); margin-top:var(--space-1) }
.cs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:var(--space-8); margin-top:var(--space-16) }
.cs-card {
    background:var(--white); border:var(--border-ink); border-radius:var(--radius-md);
    overflow:hidden; box-shadow:var(--shadow-hard-md);
    transition:all 0.15s var(--ease-smooth);
}
.cs-card:hover { transform:translate(4px,4px); box-shadow:none }
.cs-card__visual { overflow:hidden }
.cs-card__visual .cs-placeholder { min-height:180px; border-radius:0; transition:transform var(--duration-slower) var(--ease-smooth) }
.cs-card:hover .cs-card__visual .cs-placeholder { transform:scale(1.03) }
.cs-card__body { padding:var(--space-10) }
.cs-card__type  { font-size:var(--text-xs); color:var(--yellow-dark); font-weight:700; text-transform:uppercase; letter-spacing:1px }
.cs-card__title { font-family:var(--font-primary); font-size:var(--text-xl); font-weight:700; margin:var(--space-3) 0 var(--space-4); letter-spacing:-0.3px }
.cs-card__desc  { font-size:var(--text-sm); color:var(--text-muted); line-height:1.6; margin-bottom:var(--space-8) }
.cs-card__stats { display:flex; gap:var(--space-8); padding-top:var(--space-6); border-top:var(--border-ink); font-size:var(--text-sm); color:var(--text-muted) }
.cs-card__stats strong { color:var(--yellow-dark); font-weight:700 }

/* ── Services section override (dark bg) ── */
.section--black .stroke-text {
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.4);
    color: transparent;
}
.section--black .pill {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 4px 4px 0 rgba(255,255,255,0.15);
}
.section--black .pill:hover {
    background: var(--yellow);
    color: var(--ink);
    border-color: var(--ink);
    box-shadow: none;
}
.section--black .accordion__title { margin: 0; color: var(--white) }
.section--black .accordion__header:hover { background: rgba(255,244,141,0.12) }
.section--black .accordion__item.active .accordion__header { background: var(--yellow) }
.section--black .accordion__item.active .accordion__title { margin: 0; color: var(--ink) }
.section--black .accordion__item.active .accordion__icon { background: var(--ink); color: var(--yellow) }
.section--black .accordion__item { border-color: rgba(255,255,255,0.15) }
.section--black .accordion__item:first-child { border-top-color: rgba(255,255,255,0.15) }
.section--black .accordion__content { border-top-color: rgba(255,255,255,0.12) }
.section--black .accordion__col h4 { color: var(--yellow) }
.section--black .accordion__col p,
.section--black .accordion__col li { color: rgba(255,255,255,0.82) }
.section--black .accordion__col li::before { color: var(--yellow) }

/* ── Social icon visibility fixes ── */
/* Contact info is yellow bg — icons must be dark */
.contact-info__social a { color:var(--ink) }
.contact-info__social a:hover { color:var(--yellow) }
/* Footer social — always visible */
.footer__social a { color:rgba(255,255,255,0.7) }
.footer__social a:hover { color:var(--ink) }


/* ── Mobile OVERRIDE ── */
@media (max-width: 900px) {
  .bottom-nav {
    width: 94vw !important;
    left: 3vw !important;
    transform: translateY(20px) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-pill) !important;
    justify-content: flex-start !important;
  }
  .bottom-nav.visible {
    transform: translateY(0) !important;
  }
  .bottom-nav::-webkit-scrollbar { display: none; }
  .bottom-nav__link { padding: 12px 18px; }
  .btn--lg, .btn--xl { padding: 12px 24px !important; font-size: var(--text-base) !important; }
  .hero__big-number { font-size: 6rem !important; }
}

/* ── Footer logo contrast fix ── */
.footer .navbar__logo-text { color: var(--white); }
.footer .navbar__logo-dot  { color: var(--yellow); }