/* =============================================================
   BYTESPARK DIGITAL - Company pages theme (about.php, portfolio.php)
   Light blue-tint theme with navy accent bands. Scoped to .page-company.
   Builds on tokens from theme.css. Loaded after style.css.
   ============================================================= */

/* ---------- Section rhythm ---------- */
.page-company .ab-mv-section--mission,
.page-company .ab-process-section,
.page-company .ab-expertise-section,
.page-company .pf-filter-section,
.page-company .pf-grid-section { background: var(--hp-tint); }
.page-company .ab-who-section,
.page-company .ab-mv-section--vision,
.page-company .ab-services-section,
.page-company .ab-values-section { background: var(--hp-bg-2); }
.page-company .wd-cta-section { background: var(--hp-tint); }

.page-company .ab-who-section,
.page-company .ab-mv-section,
.page-company .ab-process-section,
.page-company .ab-expertise-section,
.page-company .ab-services-section,
.page-company .ab-values-section { padding: 3rem 0; }
.page-company .wd-cta-section { padding: 3rem 0; border-top: 0; }
.page-company .pf-filter-section { padding: 2rem 0 1.25rem; }
.page-company .pf-grid-section { padding: 0 0 3rem; }

/* ---------- Eyebrow, titles, lead ---------- */
.page-company .section-label,
.page-company .section-label-chip,
.page-company .pf-title-tag {
    display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
    padding: .35rem .85rem; border-radius: 999px;
    border: 1px solid var(--hp-border); background: var(--hp-surface);
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: none;
    color: var(--hp-accent); margin-bottom: .8rem;
}
.page-company .wd-section-header { max-width: 46rem; margin: 0 auto 2rem; }
.page-company .wd-section-title,
.page-company .ab-who-heading,
.page-company .ab-mv-title,
.page-company .wd-cta-title {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15;
    letter-spacing: -.02em; color: var(--hp-heading); margin: 0 0 1rem;
}
.page-company .wd-section-sub,
.page-company .ab-who-lead,
.page-company .ab-who-body,
.page-company .ab-mv-body,
.page-company .wd-cta-sub {
    font-size: 1rem; line-height: 1.6; font-weight: 400;
    color: var(--hp-muted); margin: 0;
}
.page-company .ab-who-left { gap: 1rem; }
.page-company .ab-who-left .section-label-chip { margin-bottom: 0; }
.page-company .ab-who-heading { margin: 0; }

/* ---------- Hero / title sections ---------- */
.page-company .ab-title-section,
.page-company .pf-title-section {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 1.5rem 0 3rem; background: transparent;
}
.page-company .ab-title-section::before,
.page-company .pf-title-section::before {
    content: ""; position: absolute; z-index: -2; top: -14rem; right: -22rem; left: auto;
    width: 60rem; height: 60rem; border-radius: 50%;
    background: repeating-radial-gradient(circle at center, transparent 0 4.2rem, rgba(111, 92, 240, .2) 4.2rem calc(4.2rem + 1px));
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
    mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
}
.page-company .ab-title-section::after,
.page-company .pf-title-section::after {
    content: ""; position: absolute; inset: 0; z-index: -3;
    background:
        radial-gradient(28rem 28rem at 0% 0%, rgba(99, 206, 24, .18), transparent 70%),
        radial-gradient(26rem 26rem at 100% 20%, rgba(139, 124, 255, .20), transparent 70%),
        radial-gradient(20rem 20rem at 45% 110%, rgba(224, 68, 156, .08), transparent 70%),
        linear-gradient(180deg, #FAFCFF 0%, #F2F7FF 100%);
}
.page-company .ab-title-layout,
.page-company .pf-title-layout { gap: 2.5rem; align-items: center; }
.page-company .ab-title-inner { gap: 1rem; }
.page-company .wd-breadcrumb ol { margin-bottom: .5rem; color: var(--hp-muted); }
.page-company .wd-breadcrumb a { color: var(--hp-muted); }
.page-company .wd-breadcrumb a:hover { color: var(--hp-accent); }
.page-company .wd-breadcrumb [aria-current="page"] { color: var(--hp-heading); }
.page-company .ab-title-tags { margin: 0 0 1.1rem; }
.page-company .ab-title-tags span {
    background: var(--hp-surface); border: 1px solid var(--hp-border);
    color: var(--hp-muted); font-size: .78rem;
}
.page-company .ab-title-tags span i { color: var(--hp-accent); }

.page-company .ab-title-name,
.page-company .pf-title-name {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.08;
    letter-spacing: -.03em; margin: 0; gap: .25em;
}
.page-company .pf-title-name { margin-bottom: 1rem; }
.page-company .ab-title-word--dark,
.page-company .pf-title-word--dark { color: var(--hp-heading); }
.page-company .ab-title-word--brand,
.page-company .pf-title-word--brand {
    background: linear-gradient(90deg, var(--hp-grad-a), var(--hp-grad-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-company .ab-title-tagline {
    font-size: 1.05rem; font-weight: 600; color: var(--hp-heading);
    margin: 0; border-left: 3px solid var(--hp-green); padding-left: .85rem;
}
.page-company .ab-title-sub,
.page-company .pf-title-sub { font-size: 1rem; line-height: 1.6; color: var(--hp-muted); max-width: 36rem; margin: 0; }
.page-company .ab-title-bottom { margin-top: .25rem; }

/* ---------- Images ---------- */
.page-company .ab-title-img-frame,
.page-company .ab-who-img-frame,
.page-company .ab-ci-image {
    border-radius: 1.1rem; border: 1px solid var(--hp-border); box-shadow: none;
}
.page-company .ab-title-img-frame img { height: 22rem; }
.page-company .ab-who-img-frame img { height: 26rem; }
.page-company .ab-ci-image img { height: 18rem; }
.page-company .pf-title-img-wrap { border-radius: 1.1rem; }
.page-company .pf-title-img-wrap img {
    height: 20rem; border-radius: 1.1rem; border: 1px solid var(--hp-border); box-shadow: none;
}

/* ---------- Buttons ---------- */
.page-company .btn-primary-brand {
    min-height: 3rem; padding: .8rem 1.5rem; border-radius: 999px;
    background: var(--hp-green); color: #07120A; font-weight: 700; font-size: .975rem;
    box-shadow: none; justify-content: center;
}
.page-company .btn-primary-brand:hover,
.page-company .btn-primary-brand:focus-visible {
    background: var(--hp-green-2); color: #07120A; box-shadow: none; transform: translateY(-2px);
}
.page-company .btn-primary-brand:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 3px; }
.page-company .wd-cta-phone {
    min-height: 3rem; border-radius: 999px; background: var(--hp-surface);
    border: 1px solid var(--hp-border); color: var(--hp-heading); font-size: .975rem;
}
.page-company .wd-cta-phone .bi { color: var(--hp-green); }
.page-company .wd-cta-phone:hover { background: var(--hp-surface-2); border-color: var(--hp-green); color: var(--hp-heading); }
.page-company .wd-cta-phone:hover .bi { color: var(--hp-green); }

/* ---------- Who we are ---------- */
.page-company .ab-who-layout { gap: 3rem; margin-bottom: 0; }
.page-company .ab-who-list { gap: 1rem; border-top: 1px solid var(--hp-border); padding-top: 1.25rem; }
.page-company .ab-who-list-num { color: var(--hp-accent); }
.page-company .ab-who-list-item strong { color: var(--hp-heading); }
.page-company .ab-who-list-item p { color: var(--hp-muted); font-size: .9rem; line-height: 1.55; }
.page-company .ab-who-cta { color: var(--hp-heading); border-bottom-color: var(--hp-green); }
.page-company .ab-who-cta:hover { color: var(--hp-accent); }

/* ---------- Mission / Vision ---------- */
.page-company .ab-ci-grid { gap: 3rem; }
.page-company .ab-ci-content { gap: 0; }
.page-company .ab-ci-watermark {
    display: inline-flex; align-items: center; width: fit-content;
    font-size: .8rem; font-weight: 600; letter-spacing: .12em; line-height: 1;
    padding: .35rem .85rem; margin: 0 0 .8rem; border-radius: 999px;
    border: 1px solid var(--hp-border); background: var(--hp-surface);
    color: var(--hp-accent); opacity: 1;
}
.page-company .ab-mv-title { margin: 0 0 1rem; }

/* ---------- Stats bands (dark accent) ---------- */
.page-company .ab-stats-section,
.page-company .pf-stats-section { padding: 2.5rem 0; background: var(--hp-bg); }
.page-company .ab-stats-section::before {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(139, 124, 255, .18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 50%, rgba(99, 206, 24, .10) 0%, transparent 55%);
}
.page-company .ab-stat-item { padding: .5rem 1rem; }
.page-company .ab-stat-item + .ab-stat-item::before { top: 15%; bottom: 15%; background: var(--hp-border); }
.page-company .pf-stats-grid { gap: 1.5rem; }
.page-company .ab-stat-num,
.page-company .pf-stat-num {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1;
    background: linear-gradient(90deg, var(--hp-grad-a), var(--hp-grad-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    width: fit-content; margin: 0 auto;
}
.page-company .ab-stat-lbl,
.page-company .pf-stat-lbl { color: var(--hp-muted); font-size: .9rem; margin-top: .35rem; }

/* ---------- Process ---------- */
.page-company .ab-process-grid { margin-top: 0; align-items: stretch; }
.page-company .ab-process-card {
    background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem;
    padding: 1.5rem 1.25rem; box-shadow: none;
    transition: border-color .2s ease, transform .2s ease;
}
.page-company .ab-process-card:hover {
    border-color: var(--hp-green); box-shadow: none; transform: translateY(-3px);
}
.page-company .ab-process-icon { width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; background: var(--hp-tag); border-radius: .75rem; }
.page-company .ab-process-icon i { color: var(--hp-accent); font-size: 1.25rem; }
.page-company .ab-process-num { font-size: 1.5rem; color: var(--hp-heading); opacity: .18; margin-bottom: .25rem; }
.page-company .ab-process-title { color: var(--hp-heading); font-size: 1.05rem; }
.page-company .ab-process-desc { color: var(--hp-muted); font-size: .9rem; line-height: 1.55; }
.page-company .ab-process-connector { color: var(--hp-accent); font-size: 1.1rem; }


/* ---------- Portfolio filters + grid ---------- */
.page-company .pf-filter-bar { gap: .5rem; }
.page-company .pf-filter-btn {
    min-height: 2.5rem; padding: .45rem 1.15rem; border-radius: 999px;
    border: 1px solid var(--hp-border); background: var(--hp-surface);
    color: var(--hp-heading); font-size: .9rem; font-weight: 600;
    transition: border-color .2s ease, background .2s ease;
}
.page-company .pf-filter-btn:hover { border-color: var(--hp-green); color: var(--hp-heading); background: var(--hp-surface-2); }
.page-company .pf-filter-btn:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 2px; }
.page-company .pf-filter-btn.active { background: var(--hp-green); border-color: var(--hp-green); color: #07120A; }
.page-company .pf-grid { gap: 1.25rem; }
.page-company .pf-card {
    background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem;
    box-shadow: none; transition: border-color .2s ease, transform .2s ease;
}
.page-company .pf-card:hover { border-color: var(--hp-green); box-shadow: none; transform: translateY(-3px); }
.page-company .pf-card-img { border-radius: 0; background: var(--hp-media); }
.page-company .pf-card-overlay { padding: 1.25rem; }
.page-company .pf-card-cat { background: var(--hp-green); color: #07120A; letter-spacing: .08em; }
.page-company .pf-card-link { color: var(--hp-green-2); }
.page-company .pf-no-results { color: var(--hp-muted); }

/* ---------- CTA panel (navy accent inside tint section) ---------- */
.page-company .wd-cta-inner {
    max-width: none; padding: 2.5rem 1.5rem; border-radius: 1.1rem;
    background: var(--hp-bg); border: 1px solid var(--hp-border);
    position: relative; overflow: hidden; isolation: isolate;
}
.page-company .wd-cta-inner::before {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background:
        radial-gradient(22rem 22rem at 0% 0%, rgba(99, 206, 24, .14), transparent 70%),
        radial-gradient(22rem 22rem at 100% 100%, rgba(139, 124, 255, .20), transparent 70%);
}
.page-company .wd-cta-inner > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
.page-company .wd-cta-inner .section-label { margin-left: auto; margin-right: auto; }
.page-company .wd-cta-sub { margin-bottom: 1.5rem; }
.page-company .wd-cta-actions { gap: 1rem; max-width: none; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .page-company .ab-title-layout,
    .page-company .pf-title-layout { gap: 2rem; }
    .page-company .ab-who-layout,
    .page-company .ab-ci-grid,
    .page-company .ab-ci-grid--reverse { gap: 1.75rem; }
    .page-company .ab-title-img-frame img,
    .page-company .pf-title-img-wrap img { height: 16rem; }
    .page-company .ab-who-img-frame img { height: 20rem; }
    .page-company .ab-ci-image img { height: 15rem; }
    .page-company .ab-stats-inner { grid-template-columns: repeat(2, 1fr); }
    .page-company .ab-stat-item:nth-child(3)::before { display: none; }
}
@media (max-width: 767px) {
    .page-company .ab-who-section,
    .page-company .ab-mv-section,
    .page-company .ab-process-section,
    .page-company .ab-expertise-section,
    .page-company .ab-services-section,
    .page-company .ab-values-section,
    .page-company .wd-cta-section { padding: 2.5rem 0; }
    .page-company .pf-grid-section { padding-bottom: 2.5rem; }
    .page-company .ab-stats-section,
    .page-company .pf-stats-section { padding: 2rem 0; }
    .page-company .ab-title-section,
    .page-company .pf-title-section { padding: 1rem 0 2.5rem; }
    .page-company .ab-title-img-frame img,
    .page-company .pf-title-img-wrap img { height: 13.5rem; }
    .page-company .ab-who-img-frame img { height: 16rem; }
    .page-company .ab-ci-image img { height: 12.5rem; }
    .page-company .ab-process-card { flex: 0 0 100%; margin-bottom: .75rem; }
    .page-company .ab-process-grid { gap: 0; }
    .page-company .pf-title-name { font-size: clamp(2rem, 9vw, 2.4rem); }
    .page-company .wd-cta-inner { padding: 2rem 1.25rem; }
}

/* ---------- Service + value cards ---------- */
.page-company .ab-card {
    display: flex; flex-direction: column; height: 100%; padding: 1.5rem;
    background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem;
    text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.page-company .ab-card:hover { border-color: var(--hp-green); transform: translateY(-3px); }
.page-company .ab-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
    background: var(--hp-tag); border-radius: .75rem; color: var(--hp-accent); font-size: 1.25rem;
}
.page-company .ab-card-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--hp-heading); margin: 0 0 .5rem; }
.page-company .ab-card-desc { font-size: .9rem; line-height: 1.55; color: var(--hp-muted); margin: 0; }
.page-company .ab-card-more { margin-top: auto; padding-top: 1rem; font-size: .85rem; font-weight: 600; color: var(--hp-accent); }

/* ---------- Portfolio certifications ---------- */
.page-company .pf-trust-section { padding: 3rem 0; background: var(--hp-tint); }
.page-company .pf-clients-section { padding: 3rem 0; background: var(--hp-bg-2); }
.page-company .pf-trust-card {
    display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1.1rem 1.25rem;
    background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem;
    transition: border-color .2s ease, transform .2s ease;
}
.page-company .pf-trust-card:hover { border-color: var(--hp-green); transform: translateY(-3px); }
.page-company .pf-trust-card img { flex: none; width: 4rem; height: 4rem; object-fit: contain; background: #fff; border: 1px solid var(--hp-border); border-radius: .75rem; padding: .35rem; }
.page-company .pf-trust-card h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--hp-heading); margin: 0 0 .15rem; }
.page-company .pf-trust-card p { font-size: .88rem; color: var(--hp-muted); margin: 0; }
@media (max-width: 767px) { .page-company .pf-trust-section { padding: 2.5rem 0; } }

/* ---------- GST page ---------- */
.page-company .gst-section { padding: 1.5rem 0 3.5rem; background: var(--hp-tint); min-height: 60vh; }
.page-company .gst-card {
    max-width: 44rem; margin: 1.5rem auto 0; padding: 2rem;
    background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.25rem;
}
.page-company .gst-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.7rem, 3.5vw, 2.3rem); letter-spacing: -.02em; color: var(--hp-heading); margin: 0 0 .5rem; }
.page-company .gst-lead { color: var(--hp-muted); margin: 0 0 1.5rem; }
.page-company .gst-list { margin: 0 0 1.5rem; border-top: 1px solid var(--hp-border); }
.page-company .gst-row { display: grid; grid-template-columns: 10rem 1fr; gap: .5rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--hp-border); }
.page-company .gst-row dt { font-size: .85rem; font-weight: 600; color: var(--hp-muted); }
.page-company .gst-row dd { margin: 0; color: var(--hp-heading); font-weight: 500; }
.page-company .gst-number-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.page-company .gst-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; color: var(--hp-heading); user-select: all; }
.page-company .gst-copy {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .3rem .8rem;
    font: inherit; font-size: .82rem; font-weight: 600; color: var(--hp-heading);
    background: var(--hp-tag); border: 1px solid var(--hp-border); border-radius: 999px; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.page-company .gst-copy:hover { border-color: var(--hp-green); }
.page-company .gst-copy:focus-visible { outline: 2px solid var(--hp-green); outline-offset: 2px; }
.page-company .gst-copy.is-copied { background: var(--hp-green); border-color: var(--hp-green); color: #07120A; }
.page-company .gst-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.page-company .gst-mail { color: var(--hp-heading); font-weight: 600; text-decoration: none; }
.page-company .gst-mail i { color: var(--hp-accent); margin-right: .25rem; }
@media (max-width: 575px) {
    .page-company .gst-card { padding: 1.25rem; }
    .page-company .gst-row { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- Portfolio clients ---------- */
.page-company .pf-client {
    display: flex; align-items: flex-start; gap: .9rem; height: 100%; padding: 1rem 1.1rem;
    background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1rem;
    transition: border-color .2s ease, transform .2s ease;
}
.page-company .pf-client:hover { border-color: var(--hp-green); transform: translateY(-2px); }
.page-company .pf-client-ic { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--hp-tag); border-radius: .7rem; color: var(--hp-accent); font-size: 1.15rem; }
.page-company .pf-client h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--hp-heading); margin: 0 0 .15rem; }
.page-company .pf-client p { font-size: .85rem; line-height: 1.5; color: var(--hp-muted); margin: 0; }
.page-company .pf-client-more { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.page-company .pf-client-more li { padding: .4rem .9rem; font-size: .85rem; font-weight: 600; color: var(--hp-heading); background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 999px; }
.page-company .pf-client-more .pf-client-more-note { color: var(--hp-muted); background: transparent; border-style: dashed; font-weight: 500; }
@media (max-width: 767px) { .page-company .pf-clients-section { padding: 2.5rem 0; } }