/* =========================================================
   BYTECLIC WORK CSS
   File: public/css/work.css
   Includes:
   01 Shared
   02 Work Listing Page
   03 Work Detail Page
   04 Sidebar
   05 CTA
   06 Responsive
========================================================= */


/* =========================================================
   01. Shared
========================================================= */

.bc-work-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.bc-work-eyebrow {
    margin: 0 0 18px;
    color: #e8342f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9990;
    width: 100%;
    height: 92px;
    background: linear-gradient(90deg, #e9342f 0%, #d9232d 48%, #b8142c 100%);
    pointer-events: none;
}


/* =========================================================
   02. Work Listing Page
========================================================= */

.bc-work-hero {
    position: relative;
    padding: 160px 0 96px;
    overflow: hidden;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, #f0443a 0%, #e8342f 48%, #bd1630 100%);
}

.bc-work-hero::before {
    content: "";
    position: absolute;
    left: -12%;
    top: 38%;
    width: 128%;
    height: 260px;
    background: linear-gradient(
        90deg,
        rgba(255, 130, 96, 0.34),
        rgba(255, 74, 58, 0.16)
    );
    transform: rotate(-11deg);
    pointer-events: none;
}

.bc-work-hero::after {
    content: "";
    position: absolute;
    right: -260px;
    bottom: -300px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80, 0, 0, 0.20), transparent 68%);
    pointer-events: none;
}

.bc-work-hero .bc-work-container {
    position: relative;
    z-index: 2;
}

.bc-work-hero .bc-work-eyebrow {
    color: rgba(255, 255, 255, 0.88);
}

.bc-work-hero h1 {
    max-width: 820px;
    margin: 0 auto;
    color: #ffffff;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 750;
}

.bc-work-hero p {
    max-width: 640px;
    margin: 24px auto 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    line-height: 1.65;
}

.bc-work-list-section {
    padding: 96px 0 110px;
    background: #ffffff;
}

.bc-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.bc-work-card {
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.045);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.bc-work-card:hover {
    transform: translateY(-6px);
    border-color: rgba(232, 52, 47, 0.18);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.10);
}

.bc-work-card:first-child {
    grid-column: span 2;
}

.bc-work-card-image {
    display: block;
    height: 250px;
    overflow: hidden;
    background: #f5f5f3;
    text-decoration: none;
}

.bc-work-card:first-child .bc-work-card-image {
    height: 360px;
}

.bc-work-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.bc-work-card:hover .bc-work-card-image img {
    transform: scale(1.025);
    filter: saturate(1.04) contrast(1.02);
}

.bc-work-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #e8342f 0%, #bd1630 100%);
}

.bc-work-card-placeholder span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.bc-work-card-body {
    padding: 24px 26px 28px;
}

.bc-work-card:first-child .bc-work-card-body {
    padding: 30px 32px;
}

.bc-work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.bc-work-meta span {
    color: #9a9a9a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.bc-work-card h2 {
    margin: 0;
    color: #171717;
    font-size: 20px;
    line-height: 1.22;
    letter-spacing: -0.02em;
    font-weight: 500;
}

.bc-work-card:first-child h2 {
    max-width: 720px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
}

.bc-work-card h2 a {
    color: inherit;
    text-decoration: none;
}

.bc-work-card h2 a:hover {
    color: #e8342f;
}

.bc-work-empty {
    padding: 76px 40px;
    border-radius: 28px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.05);
}

.bc-work-empty h2 {
    margin: 0;
    color: #151515;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 600;
}

.bc-work-empty p {
    max-width: 560px;
    margin: 18px auto 0;
    color: rgba(20, 20, 20, 0.62);
    font-size: 17px;
    line-height: 1.6;
}

.bc-work-pagination {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}

.bc-work-pagination nav {
    width: 100%;
}

.bc-work-pagination > nav > div:first-child,
.bc-work-pagination p {
    display: none !important;
}

.bc-work-pagination > nav > div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bc-work-pagination span,
.bc-work-pagination a {
    text-decoration: none !important;
}

.bc-work-pagination a,
.bc-work-pagination span[aria-current="page"] > span,
.bc-work-pagination span[aria-disabled="true"] > span {
    min-width: 42px;
    height: 42px;
    padding: 0 15px;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    transition: all .2s ease;
}

.bc-work-pagination a:hover {
    transform: translateY(-1px);
    border-color: rgba(232, 52, 47, 0.3) !important;
    color: #e8342f !important;
}

.bc-work-pagination span[aria-current="page"] > span {
    background: #e8342f !important;
    color: #ffffff !important;
    border-color: #e8342f !important;
}


/* =========================================================
   02B. Work Discovery & Multi-dimensional Case Library
========================================================= */

.bc-work-hero-refined { text-align: left; background: #141414; }
.bc-work-hero-refined h1, .bc-work-hero-refined p { margin-left: 0; margin-right: 0; }
.bc-work-hero-refined h1 { max-width: 930px; }

.bc-work-discovery { padding: 105px 0 120px; background: #f7f5f2; }
.bc-work-discovery-head { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 70px; align-items: end; margin-bottom: 50px; }
.bc-work-discovery-head h2 { max-width: 720px; margin: 12px 0 0; color: #171717; font-size: clamp(46px, 5vw, 70px); line-height: .98; letter-spacing: -.055em; }
.bc-work-discovery-head > p { margin: 0; color: #696969; font-size: 16px; line-height: 1.75; }

.bc-case-search-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; margin-bottom: 18px; }
.bc-case-search { display: flex; align-items: center; min-height: 62px; padding: 0 20px; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; background: #fff; box-shadow: 0 12px 35px rgba(0,0,0,.035); }
.bc-case-search span { margin-right: 12px; color: #e8342f; font-size: 26px; line-height: 1; }
.bc-case-search input { width: 100%; border: 0; outline: 0; color: #171717; background: transparent; font-size: 16px; }
.bc-case-search input::placeholder { color: #9b9b9b; }
.bc-case-clear { min-width: 138px; padding: 0 20px; border: 0; border-radius: 16px; color: #fff; background: #171717; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.bc-case-clear:disabled { cursor: default; color: #aaa; background: #e8e5e1; }

.bc-case-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.bc-case-dimension { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; background: rgba(255,255,255,.75); }
.bc-case-dimension summary { display: flex; gap: 13px; align-items: center; min-height: 56px; padding: 0 18px; cursor: pointer; color: #242424; font-size: 13px; font-weight: 850; list-style: none; }
.bc-case-dimension summary::-webkit-details-marker { display: none; }
.bc-case-dimension summary span { color: #e8342f; font-size: 10px; }
.bc-case-dimension summary b { display: grid; min-width: 26px; height: 26px; margin-left: auto; place-items: center; border-radius: 50%; color: #777; background: #efedea; font-size: 10px; }
.bc-case-filter-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.bc-case-filter-options button, .bc-case-card-tags button, #case-active-filters button { border: 1px solid rgba(0,0,0,.09); border-radius: 999px; color: #5c5c5c; background: #fff; font-size: 11px; font-weight: 720; transition: .2s ease; }
.bc-case-filter-options button { min-height: 34px; padding: 7px 13px; }
.bc-case-filter-options button:hover, .bc-case-filter-options button.is-active { color: #fff; border-color: #e8342f; background: #e8342f; }

.bc-service-filter-panel { padding: 22px; border: 1px solid rgba(0,0,0,.075); border-radius: 24px; background: rgba(255,255,255,.86); box-shadow: 0 18px 55px rgba(0,0,0,.045); }
.bc-service-filter-heading { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 2px 4px 20px; }
.bc-service-filter-heading > div { display: flex; gap: 12px; align-items: center; }
.bc-service-filter-heading span { color: #e8342f; font-size: 10px; font-weight: 900; }
.bc-service-filter-heading strong { color: #191919; font-size: 15px; }
.bc-service-filter-heading p { margin: 0; color: #94908c; font-size: 11px; }
.bc-service-filter-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.bc-service-filter-options button { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; min-height: 76px; padding: 15px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; color: #2f2f2f; background: #fff; text-align: left; transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.bc-service-filter-options button i { color: #e8342f; font-size: 9px; font-style: normal; font-weight: 900; }
.bc-service-filter-options button span { position: relative; z-index: 1; font-size: 12px; font-weight: 820; line-height: 1.25; }
.bc-service-filter-options button b { display: grid; min-width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #777; background: #f2f0ed; font-size: 9px; }
.bc-service-filter-options button:hover { border-color: rgba(232,52,47,.3); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.06); }
.bc-service-filter-options button.is-active { color: #fff; border-color: #171717; background: #171717; box-shadow: 0 14px 30px rgba(0,0,0,.13); }
.bc-service-filter-options button.is-active i { color: #ff554d; }
.bc-service-filter-options button.is-active b { color: #fff; background: #e8342f; }

.bc-case-results-bar { display: flex; gap: 20px; align-items: center; justify-content: space-between; min-height: 62px; margin: 40px 0 22px; border-bottom: 1px solid rgba(0,0,0,.1); }
.bc-case-results-bar p { color: #757575; font-size: 13px; }
.bc-case-results-bar strong { color: #171717; font-size: 22px; }
#case-active-filters { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
#case-active-filters button { padding: 6px 10px; color: #9e2824; background: #fff3f2; }
#case-active-service { padding: 7px 12px; border-radius: 999px; color: #9e2824; background: #fff; font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }

.bc-case-library { gap: 22px; }
.bc-case-library .bc-work-card:first-child { grid-column: auto; }
.bc-case-library .bc-work-card-image, .bc-case-library .bc-work-card:first-child .bc-work-card-image { position: relative; height: 245px; }
.bc-case-library .bc-work-card-body, .bc-case-library .bc-work-card:first-child .bc-work-card-body { padding: 24px 25px 27px; }
.bc-case-library .bc-work-card h2, .bc-case-library .bc-work-card:first-child h2 { font-size: 22px; font-weight: 700; line-height: 1.12; }
.bc-case-library-card { display: flex; flex-direction: column; min-width: 0; }
.bc-case-library-card.is-filtered-out { display: none; }
.bc-work-card-image i { position: absolute; right: 14px; bottom: 14px; padding: 8px 11px; border-radius: 999px; color: #171717; background: rgba(255,255,255,.92); font-size: 10px; font-style: normal; font-weight: 850; opacity: 0; transform: translateY(6px); transition: .25s ease; }
.bc-work-card:hover .bc-work-card-image i { opacity: 1; transform: none; }
.bc-case-card-summary { margin: 14px 0 18px; color: #686868; font-size: 14px; line-height: 1.65; }
.bc-case-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.bc-case-card-tags button { padding: 5px 9px; font-size: 9px; cursor: pointer; }
.bc-case-card-tags button:hover { color: #fff; border-color: #171717; background: #171717; }
.bc-case-no-results { padding: 70px 25px; text-align: center; }
.bc-case-no-results h2 { margin: 10px auto 25px; font-size: 34px; }
.bc-case-no-results button { padding: 13px 20px; border: 0; border-radius: 999px; color: #fff; background: #171717; font-weight: 800; }

@media (max-width: 900px) {
    .bc-work-discovery-head { grid-template-columns: 1fr; gap: 22px; }
    .bc-case-dimensions { grid-template-columns: 1fr; }
    .bc-service-filter-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
    .bc-work-discovery { padding: 76px 0 90px; }
    .bc-work-discovery-head h2 { font-size: 42px; }
    .bc-case-search-row { grid-template-columns: 1fr; }
    .bc-case-clear { min-height: 48px; }
    .bc-case-results-bar { align-items: flex-start; flex-direction: column; padding: 15px 0; }
    #case-active-filters { justify-content: flex-start; }
    .bc-case-library .bc-work-card-image, .bc-case-library .bc-work-card:first-child .bc-work-card-image { height: 230px; }
    .bc-service-filter-panel { padding: 14px; border-radius: 18px; }
    .bc-service-filter-heading { align-items: flex-start; flex-direction: column; gap: 6px; padding: 4px 3px 14px; }
    .bc-service-filter-options { grid-template-columns: 1fr; gap: 8px; }
    .bc-service-filter-options button { min-height: 60px; padding: 12px 14px; }
}

@media (min-width: 901px) and (max-width: 1120px) {
    .bc-service-filter-options { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* =========================================================
   03. Work Detail Page
========================================================= */

.bc-work-detail-hero-clean {
    padding: 155px 0 92px;
    background:
        radial-gradient(circle at 12% 18%, rgba(232, 52, 47, 0.07), transparent 32%),
        radial-gradient(circle at 88% 22%, rgba(232, 52, 47, 0.045), transparent 34%),
        linear-gradient(180deg, #fffdfc 0%, #ffffff 82%);
}

.bc-back-link {
    display: inline-flex;
    margin-bottom: 38px;
    color: #111111;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.bc-back-link:hover {
    color: #e8342f;
}

.bc-work-detail-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

.bc-work-detail-hero-clean h1 {
    max-width: 940px;
    margin: 0;
    color: #111111;
    font-size: clamp(42px, 5.6vw, 78px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 650;
}

.bc-work-detail-lead {
    max-width: 760px;
    margin: 28px 0 0;
    color: #4b5563;
    font-size: 18px;
    line-height: 1.75;
}

.bc-work-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.bc-work-detail-tags a { padding: 7px 11px; border: 1px solid rgba(0,0,0,.09); border-radius: 999px; color: #676767; background: #fff; font-size: 10px; font-weight: 750; text-decoration: none; }
.bc-work-detail-tags a:hover { color: #fff; border-color: #e8342f; background: #e8342f; }

.bc-work-detail-main-clean {
    padding: 56px 0;
    background: #ffffff;
}

.bc-work-detail-layout-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 34px;
    align-items: start;
}

.bc-work-detail-content {
    padding: 56px;
    border-radius: 34px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.07);
    box-shadow: 0 26px 80px rgba(15, 23, 42, 0.06);
}

.bc-work-detail-content h2 {
    margin: 0 0 32px;
    color: #111111;
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 650;
}

.bc-work-detail-content h3 {
    margin: 48px 0 18px;
    color: #111111;
    font-size: 26px;
    line-height: 1.18;
    letter-spacing: -0.03em;
    font-weight: 650;
}

.bc-work-detail-content p {
    margin: 0 0 24px;
    color: #4b5563;
    font-size: 18px;
    line-height: 1.85;
}

.bc-work-detail-content ul,
.bc-work-detail-content ol {
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

.bc-work-detail-content li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 28px;
    color: #4b5563;
    font-size: 18px;
    line-height: 1.75;
}

.bc-work-detail-content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8342f;
}

.bc-work-detail-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 36px auto;
    border-radius: 24px;
}

.bc-imported-case-image {
    margin: 34px 0 42px;
}

.bc-imported-case-image img {
    width: 100%;
    max-width: 860px;
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.bc-project-dossier {
    margin-bottom: 54px;
    padding: 0;
}

.bc-project-dossier-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin-bottom: 28px;
    color: #171717;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.bc-project-dossier-heading b {
    color: #e8342f;
    font: inherit;
}

.bc-project-info-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(34px, 6vw, 76px);
    row-gap: 30px;
    margin: 0;
}

.bc-project-info-row div {
    min-width: 0;
    padding: 0;
}

.bc-project-info-row div:nth-child(even) {
    padding-left: 0;
    border-left: 0;
}

.bc-project-info-row .bc-project-info-wide {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
}

.bc-project-info-row dt {
    display: block;
    margin-bottom: 10px;
    color: #e8342f;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.bc-project-info-row dd {
    display: block;
    margin: 0;
    color: #111111;
    font-size: clamp(17px, 1.55vw, 21px);
    line-height: 1.28;
    letter-spacing: -.025em;
    font-weight: 560;
}


/* =========================================================
   04. Sidebar
========================================================= */

.bc-work-related-sidebar {
    position: sticky;
    top: 120px;
    display: grid;
    gap: 18px;
}

.bc-work-sidebar-card {
    padding: 24px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.05);
}

.bc-work-sidebar-card span {
    display: block;
    margin-bottom: 16px;
    color: #e8342f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.bc-work-sidebar-card a {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    color: #1f2937;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(17, 24, 39, 0.07);
}

.bc-work-sidebar-card a::after {
    content: "→";
    color: #e8342f;
}

.bc-work-sidebar-card a:last-child {
    border-bottom: 0;
}

.bc-work-sidebar-card a:hover {
    color: #e8342f;
}

.bc-work-sidebar-related {
    border-top: 3px solid #e8342f;
}

.bc-work-sidebar-ad {
    padding: 28px;
    border-radius: 26px;
    color: #ffffff;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .18), transparent 32%),
        linear-gradient(135deg, #e8342f 0%, #b8142c 100%);
    box-shadow: 0 26px 80px rgba(120, 0, 0, 0.16);
}

.bc-work-sidebar-ad p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.5;
}

.bc-work-sidebar-ad h3 {
    margin: 0;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 650;
}

.bc-work-sidebar-ad a {
    margin-top: 22px;
    min-height: 42px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #111111;
    background: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}


/* =========================================================
   05. CTA
========================================================= */

.bc-work-cta-section {
    padding: 48px 0 72px;
    background: #ffffff;
}

.bc-work-cta-box {
    padding: 46px 56px;
    border-radius: 30px;
    color: #ffffff;
    background: linear-gradient(135deg, #f0443a 0%, #c9142d 100%);
    box-shadow: 0 24px 70px rgba(120, 0, 0, .14);
}

.bc-work-cta-box p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.bc-work-cta-box h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1;
    font-weight: 650;
    letter-spacing: -.04em;
}

.bc-work-cta-box span {
    display: block;
    max-width: 560px;
    margin-top: 18px;
    color: rgba(255, 255, 255, .86);
    font-size: 16px;
    line-height: 1.6;
}

.bc-work-cta-actions {
    display: flex;
    gap: 14px;
    margin-top: 26px;
}

.bc-work-cta-actions a {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .38);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

.bc-work-cta-actions a:first-child {
    background: rgba(255, 255, 255, .14);
}

.bc-work-cta-actions a:hover {
    background: rgba(255, 255, 255, .22);
}


/* =========================================================
   06. Responsive
========================================================= */

@media (max-width: 1024px) {
    .bc-work-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bc-work-card:first-child {
        grid-column: span 2;
    }

    .bc-work-detail-layout-with-sidebar {
        grid-template-columns: 1fr;
    }

    .bc-work-related-sidebar {
        position: static;
        grid-template-columns: repeat(2, 1fr);
    }

    .bc-work-sidebar-ad {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .bc-project-info-row {
        grid-template-columns: 1fr;
    }

    .bc-project-info-row div,
    .bc-project-info-row div:nth-child(even),
    .bc-project-info-row .bc-project-info-wide {
        grid-column: auto;
        padding: 0;
        border-left: 0;
    }
}

@media (max-width: 680px) {
    .bc-work-container {
        width: min(100% - 28px, 1180px);
    }

    .bc-work-hero {
        padding: 140px 0 78px;
    }

    .bc-work-hero h1,
    .bc-work-detail-hero-clean h1 {
        font-size: 42px;
    }

    .bc-work-list-section {
        padding: 72px 0 88px;
    }

    .bc-work-grid {
        grid-template-columns: 1fr;
    }

    .bc-work-card:first-child {
        grid-column: span 1;
    }

    .bc-work-card-image,
    .bc-work-card:first-child .bc-work-card-image {
        height: 230px;
    }

    .bc-work-card h2,
    .bc-work-card:first-child h2 {
        font-size: 20px;
        line-height: 1.22;
    }

    .bc-work-card-body,
    .bc-work-card:first-child .bc-work-card-body {
        padding: 22px;
    }

    .bc-work-detail-hero-clean {
        padding: 130px 0 64px;
    }

    .bc-work-detail-main-clean {
        padding-top: 36px;
        padding-bottom: 44px;
    }

    .bc-work-detail-content {
        padding: 30px 22px;
        border-radius: 26px;
    }

    .bc-work-detail-content h2 {
        font-size: 30px;
    }

    .bc-work-detail-content h3 {
        font-size: 22px;
    }

    .bc-work-detail-content p,
    .bc-work-detail-content li {
        font-size: 16px;
    }

    .bc-work-related-sidebar {
        grid-template-columns: 1fr;
    }

    .bc-work-sidebar-ad {
        grid-column: span 1;
    }

    .bc-work-cta-box {
        padding: 38px 26px;
    }

    .bc-work-cta-actions {
        flex-direction: column;
    }

    .bc-work-cta-actions a {
        width: 100%;
    }
}

.bc-work-detail-content hr {
    margin: 46px 0 34px;
    border: 0;
    height: 1px;
    background: rgba(17, 24, 39, 0.07);
}