/* Brainy Content global UI components
   Shared visual language for section kickers and service/capability tiles. */

.bc-kicker {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 30px;
    color: var(--bc-yellow, #ffd200);
    font-family: var(--bc-font-display, "Barlow Condensed", sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(255, 210, 0, .18);
}
.bc-kicker::after {
    content: "";
    width: clamp(70px, 8vw, 150px);
    height: 1px;
    background: linear-gradient(90deg, rgba(255,210,0,.95), rgba(255,210,0,.08));
    box-shadow: 0 0 12px rgba(255,210,0,.16);
}
.bc-kicker::before {
    content: "»»";
    order: 1;
    margin-left: 2px;
    color: var(--bc-yellow, #ffd200);
    letter-spacing: -.06em;
}
.bc-kicker::after { order: 2; }

.bc-service-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--bc-white, #fffaf0);
    text-decoration: none;
    border: 1px solid rgba(255,210,0,.38);
    background: linear-gradient(145deg, rgba(255,210,0,.035), rgba(255,255,255,.008) 45%, rgba(0,0,0,.18));
    box-shadow: inset 0 0 0 5px rgba(255,210,0,.025), 0 0 0 rgba(255,210,0,0);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bc-service-tile::before {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    border: 1px solid rgba(255,210,0,.11);
}
.bc-service-tile:hover,
.bc-service-tile:focus-visible {
    color: var(--bc-white, #fffaf0);
    border-color: rgba(255,210,0,.88);
    background: linear-gradient(145deg, rgba(255,210,0,.09), rgba(255,255,255,.012) 48%, rgba(0,0,0,.2));
    box-shadow: inset 0 0 0 5px rgba(255,210,0,.035), 0 0 28px rgba(255,210,0,.13);
    transform: translateY(-2px);
}
.bc-service-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    color: var(--bc-yellow, #ffd200);
    border: 1px solid rgba(255,210,0,.28);
    background: rgba(255,210,0,.035);
    box-shadow: inset 0 0 16px rgba(255,210,0,.035);
    font-size: 22px;
}
.bc-service-tile:hover .bc-service-tile__icon,
.bc-service-tile:focus-visible .bc-service-tile__icon {
    border-color: rgba(255,210,0,.7);
    box-shadow: 0 0 20px rgba(255,210,0,.14), inset 0 0 18px rgba(255,210,0,.06);
}
.bc-service-tile strong,
.bc-service-tile h3 {
    color: var(--bc-white, #fffaf0);
    font-family: var(--bc-font-display, "Barlow Condensed", sans-serif);
    font-weight: 800;
    text-transform: uppercase;
}
.bc-service-tile__copy {
    color: rgba(255,250,240,.62);
    font-family: var(--bc-font-body, Inter, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}
.bc-service-tile__arrow {
    margin-top: auto;
    color: var(--bc-yellow, #ffd200);
    font-family: var(--bc-font-display, "Barlow Condensed", sans-serif);
    font-size: 22px;
}

/* One CTA treatment for every service-card layout. Section styles may alter
   spacing, but never typography, weight, tracking or colour. */
.bc-service-tile .bc-service-tile__cta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: auto;
    padding-top: 20px;
    color: var(--bc-yellow, #ffd200) !important;
    font-family: var(--bc-font-display, "Barlow Condensed", sans-serif) !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
}

@media (max-width: 700px) {
    .bc-kicker { font-size: 16px; gap: 12px; }
    .bc-kicker::after { width: 46px; }
}


/* v30: component hardening
   Keep icon presentation identical regardless of legacy section selectors. */
.bc-service-tile .bc-service-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    margin-top: 0;
    color: var(--bc-yellow, #ffd200);
    border: 1px solid rgba(255,210,0,.28);
    background: rgba(255,210,0,.035);
    box-shadow: inset 0 0 16px rgba(255,210,0,.035);
    font-family: "Font Awesome 6 Free";
    font-size: 22px;
    line-height: 1;
}
.bc-service-tile .bc-service-tile__icon > i {
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

/* v32: shared clickable-card design tokens.
   Change --bc-card-radius to 0px (or 2px) to return to the sharper treatment
   across every tile/card using the global component. */
:root {
    --bc-card-radius: 4px;
    --bc-card-bg: linear-gradient(145deg, #0b0d0e 0%, #07090a 58%, #050607 100%);
    --bc-card-border: rgba(255, 210, 0, .22);
    --bc-card-border-hover: rgba(255, 210, 0, .72);
    --bc-card-hover-glow: 0 0 30px rgba(255, 210, 0, .09);
}

.bc-service-tile {
    border-radius: var(--bc-card-radius) !important;
    border-color: var(--bc-card-border) !important;
    background: var(--bc-card-bg) !important;
    overflow: hidden;
}
.bc-service-tile::before {
    border-radius: max(0px, calc(var(--bc-card-radius) - 1px));
}
.bc-service-tile:hover,
.bc-service-tile:focus-visible {
    border-color: var(--bc-card-border-hover) !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,210,0,.11), transparent 34%),
        var(--bc-card-bg) !important;
    box-shadow: var(--bc-card-hover-glow), inset 0 0 28px rgba(255,210,0,.025) !important;
}

/* All clickable service-card headings use the brighter Brainy yellow on interaction. */
.bc-service-tile:hover strong,
.bc-service-tile:focus-visible strong,
.bc-service-tile:hover h3,
.bc-service-tile:focus-visible h3 {
    color: var(--bc-yellow, #ffd200) !important;
}
/* Case studies use the global Brainy system without page-builder rules. */
.bc-work-card--case{overflow:hidden}.bc-work-card__media{display:block;margin:-1px -1px 24px;aspect-ratio:16/10;overflow:hidden}.bc-work-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.bc-work-card--case:hover .bc-work-card__media img{transform:scale(1.025)}
.bc-case-study{background:#050708;color:#fffaf0}.bc-case-study__hero{padding:clamp(130px,14vw,230px) 0 clamp(80px,8vw,130px);border-bottom:1px solid rgba(255,210,0,.18);background:radial-gradient(circle at 78% 26%,rgba(255,210,0,.08),transparent 30%),#050708}.bc-case-study__hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);gap:clamp(50px,8vw,140px);align-items:center}.bc-case-study__intro h1{margin:0;color:#fffaf0;font:700 clamp(54px,6vw,100px)/.92 var(--bc-font-display);text-transform:uppercase}.bc-case-study__lead{max-width:720px;margin-top:28px;color:rgba(255,250,240,.72);font-size:20px;line-height:1.6}.bc-case-study__image{position:relative;overflow:hidden;border:1px solid rgba(255,210,0,.36);border-radius:6px;box-shadow:0 22px 65px rgba(0,0,0,.34)}.bc-case-study__image::after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,210,0,.1);pointer-events:none}.bc-case-study__image img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.bc-case-study__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.bc-case-study__tags span{padding:8px 11px;color:#ffd200;border:1px solid rgba(255,210,0,.25);font-size:11px;letter-spacing:.07em;text-transform:uppercase}.bc-case-study__body{display:grid;grid-template-columns:260px minmax(0,780px);justify-content:center;gap:clamp(50px,8vw,130px)}.bc-case-study__details{display:flex;flex-direction:column;gap:28px}.bc-case-study__details small,.bc-case-study__details strong{display:block}.bc-case-study__details small{margin-bottom:7px;color:#ffd200;font-size:11px;letter-spacing:.09em;text-transform:uppercase}.bc-case-study__details strong{font-family:var(--bc-font-display);font-size:22px;text-transform:uppercase}.bc-case-study .bc-content{color:rgba(255,250,240,.76)}.bc-case-study .bc-content h2,.bc-case-study .bc-content h3{color:#fffaf0;font-family:var(--bc-font-display);text-transform:uppercase}
@media(max-width:900px){.bc-case-study__hero-grid,.bc-case-study__body{grid-template-columns:1fr}.bc-case-study__image{order:-1}.bc-case-study__body{justify-content:stretch}.bc-case-study__details{flex-direction:row;flex-wrap:wrap;align-items:center}}