/* ---------------------------------------------------------------------------
   Components added in the 2026 positioning refresh.

   Loaded AFTER custom.css so it can override without editing 3,500 lines of
   existing rules. Everything here reuses the brand tokens already declared in
   custom.css :root - no new colours are introduced.
   --------------------------------------------------------------------------- */

/* --- Hero artwork ------------------------------------------------------- */

.hero-visual {
    width: 100%;
    height: auto;
    max-width: 640px;
    display: block;
    margin-inline: auto;
    /* The drop-shadow filters inside the SVG need room; without this the
       dashboard card's shadow gets clipped at the viewBox edge. */
    overflow: visible;
}

/* --- Image placeholders ------------------------------------------------- */

.img-placeholder {
    aspect-ratio: var(--ph-ratio, 16 / 9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.25rem;
    text-align: center;

    border: 2px dashed rgba(13, 105, 134, 0.32);
    border-radius: 14px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(13, 105, 134, 0.035) 0 10px,
            transparent 10px 20px
        ),
        var(--light-bg, #f8fafb);
    color: var(--primary-color, #0d6986);
}

.img-placeholder--accent {
    border-color: rgba(255, 149, 0, 0.45);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 149, 0, 0.05) 0 10px,
            transparent 10px 20px
        ),
        #fffaf3;
    color: var(--accent-dark, #e68600);
}

.img-placeholder__icon {
    width: 30px;
    height: 30px;
    opacity: 0.65;
    margin-bottom: 0.15rem;
}

.img-placeholder__label {
    font-weight: 650;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
}

.img-placeholder__spec {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.img-placeholder__note {
    font-size: 0.76rem;
    line-height: 1.4;
    max-width: 30ch;
    opacity: 0.72;
}

/* Small placeholders (logo slots) drop the descriptive text - at that size it
   only produces a smear of unreadable type. */
.img-placeholder--sm {
    padding: 0.6rem;
    border-radius: 10px;
}

.img-placeholder--sm .img-placeholder__icon,
.img-placeholder--sm .img-placeholder__note {
    display: none;
}

.img-placeholder--sm .img-placeholder__label {
    font-size: 0.74rem;
}

/* --- Eyebrow / section rhythm ------------------------------------------- */

.eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary-color, #2aa5c1);
    margin-bottom: 0.85rem;
}

/* --- Proof strip (client logos / named brands) -------------------------- */

.proof-strip {
    border-block: 1px solid rgba(13, 105, 134, 0.1);
    background: var(--white, #fff);
}

.proof-strip__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-light, #6b7280);
}

.proof-strip__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
}

.proof-strip__items img {
    height: 34px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    /* Mixed-quality client logos look like a jumble sale in full colour;
       desaturating them reads as a considered logo wall instead. */
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.proof-strip__items img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Text variant, used where naming clients is not permitted: the sector still
   signals who we work with without identifying anyone. */
.proof-strip__items--text {
    gap: 0.6rem 1.1rem;
}

.proof-strip__items--text span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-dark, #0a5570);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(13, 105, 134, 0.06);
}

/* --- Capability cards --------------------------------------------------- */

.cap-card {
    height: 100%;
    padding: 1.75rem 1.6rem;
    border: 1px solid rgba(13, 105, 134, 0.12);
    border-radius: 16px;
    background: var(--white, #fff);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cap-card:hover {
    transform: translateY(-4px);
    border-color: rgba(42, 165, 193, 0.45);
    box-shadow: var(--shadow-lg, 0 8px 16px rgba(13, 105, 134, 0.15));
}

.cap-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(42, 165, 193, 0.12);
    color: var(--primary-color, #0d6986);
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.cap-card h3 {
    font-size: 1.08rem;
    font-weight: 680;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.cap-card p {
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--text-light, #6b7280);
    margin-bottom: 0.9rem;
}

.cap-card__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cap-card__stack span {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(13, 105, 134, 0.07);
    color: var(--primary-dark, #0a5570);
}

@media (max-width: 991.98px) {
    .hero-visual { max-width: 520px; margin-top: 2.5rem; }
    .proof-strip__items { gap: 1.5rem; }
}

/* --- Testimonial stars --------------------------------------------------- */
/* Replaces the avatar, which used to be the client's logo and so had to go
   along with the name. */
.testimonial-stars {
    color: var(--accent-color, #ff9500);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
}

/* --- Service cards (services page) -------------------------------------- */

.svc-card {
    height: 100%;
    padding: 1.9rem 1.75rem;
    border: 1px solid rgba(13, 105, 134, 0.12);
    border-radius: 18px;
    background: var(--white, #fff);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.svc-card:hover {
    border-color: rgba(42, 165, 193, 0.45);
    box-shadow: var(--shadow-lg, 0 8px 16px rgba(13, 105, 134, 0.15));
}

.svc-card__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.svc-card__head .cap-card__icon { margin-bottom: 0; flex: 0 0 auto; }

.svc-card__step {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--secondary-color, #2aa5c1);
}

.svc-card__step::before { content: "STEP "; }

.svc-card__head h3 {
    font-size: 1.2rem;
    font-weight: 680;
    margin: 0.15rem 0 0;
    letter-spacing: -0.01em;
}

.svc-card__lead {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-light, #6b7280);
}

.svc-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
}

.svc-card__list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Inline SVG tick as a background image: no icon-font dependency, and it
   stays crisp if Font Awesome fails to load. */
.svc-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 0.95rem;
    height: 0.95rem;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232aa5c1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}

/* --- Technology groups --------------------------------------------------- */

.tech-group {
    height: 100%;
    padding: 1.4rem 1.3rem;
    border-radius: 14px;
    background: var(--white, #fff);
    border: 1px solid rgba(13, 105, 134, 0.1);
}

.tech-group h3 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light, #6b7280);
    margin-bottom: 0.85rem;
}

.tech-note {
    max-width: 60ch;
    margin-inline: auto;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-light, #6b7280);
}

/* --- About: the arc of the practice ------------------------------------- */

.arc-step {
    height: 100%;
    padding: 1.7rem 1.5rem;
    border-radius: 16px;
    background: var(--white, #fff);
    border: 1px solid rgba(13, 105, 134, 0.1);
}

/* The present is where we want the eye to land, so only it gets the accent. */
.arc-step--now {
    border-color: rgba(255, 149, 0, 0.4);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(13, 105, 134, 0.1));
}

.arc-step__years {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--secondary-color, #2aa5c1);
    margin-bottom: 0.5rem;
}

.arc-step--now .arc-step__years { color: var(--accent-dark, #e68600); }

.arc-step h3 {
    font-size: 1.12rem;
    font-weight: 680;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.arc-step p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-light, #6b7280);
    margin: 0;
}