/* =============================================================
   design.css — Visual refinements inspired by kimjeske.com
   =============================================================
   Accent colour override (#78b7cc) · tight heading tracking ·
   hero eyebrow · proof strip · offer grids · card hover lifts ·
   pill CTAs · tighter section spacing.
   ============================================================= */

/* ---- Accent colour: #78b7cc (light) / #94c8d8 (dark) ---- */

html .bg-light-primary {
    background-color: #78b7cc;
}

html .text-light-primary {
    color: #78b7cc;
}

html .border-light-primary {
    border-color: #78b7cc;
}

html .hover\:text-light-primary:hover {
    color: #78b7cc;
}

html .max-w-6xl {
    max-width: 72rem;
}

html .group:hover .group-hover\:text-light-primary {
    color: #78b7cc;
}

html .dark\:bg-dark-primary:is(.dark *) {
    background-color: #94c8d8;
}

html .dark\:text-dark-primary:is(.dark *) {
    color: #94c8d8;
}

html .dark\:border-dark-primary:is(.dark *) {
    border-color: #94c8d8;
}

html .dark\:hover\:text-dark-primary:hover:is(.dark *) {
    color: #94c8d8;
}

html .group:hover .dark\:group-hover\:text-dark-primary:is(.dark *) {
    color: #94c8d8;
}

/* Buttons with the new accent need dark text for contrast */
html a.bg-light-primary,
html button.bg-light-primary {
    color: #1c3d4f;
}

html a.dark\:bg-dark-primary:is(.dark *),
html button.dark\:bg-dark-primary:is(.dark *) {
    color: #0f2a35;
}

/* ---- Heading letter-spacing (Roboto with tight tracking) ---- */

h1, h2, h3 {
    letter-spacing: 0;
}

/* ---- Hero eyebrow ---- */

.hero-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1.25rem;
    color: #6b7280;
}

html.dark .hero-eyebrow {
    color: #9ca3af;
}

.section-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    color: #6b7280;
}

html.dark .section-eyebrow {
    color: #9ca3af;
}

/* ---- Social proof strip ---- */

.social-proof-strip {
    background-color: #ffffff;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 2rem 0;
}

html.dark .social-proof-strip {
    background-color: rgb(52 58 64);
    border-color: rgb(73 80 87);
}

.sp-label {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9ca3af;
    margin: 0 0 1.25rem;
}

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

.sp-item {
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

html.dark .sp-item {
    color: #d1d5db;
}

.sp-item::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #78b7cc;
    border-radius: 50%;
    flex-shrink: 0;
}

html.dark .sp-item::before {
    background-color: #94c8d8;
}

/* ---- Homepage grids ---- */

.services-grid,
.case-grid {
    display: grid;
    gap: 1.5rem;
}

.case-metric {
    display: inline-block;
    color: #1c3d4f;
    background: rgba(120, 183, 204, 0.2);
    border: 1px solid rgba(120, 183, 204, 0.45);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

html.dark .case-metric {
    color: #d8f0f7;
    background: rgba(148, 200, 216, 0.16);
    border-color: rgba(148, 200, 216, 0.38);
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Card hover lift ---- */

.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

html.dark .card-hover:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* ---- Pill-shaped CTA buttons ---- */

.btn-pill {
    border-radius: 999px !important;
}

/* ---- Interest cards: compact square tiles ---- */

section#interests .card-hover {
    max-width: 160px !important;
    width: 160px;
    aspect-ratio: 1;
    padding: 1rem;
    justify-content: center;
    gap: 0.375rem;
}

section#interests .card-hover svg {
    margin-bottom: 0;
    flex-shrink: 0;
}

section#interests .card-hover h3 {
    font-size: 0.875rem;
    line-height: 1.3;
    margin: 0;
}

section#interests .mt-16 {
    margin-top: 2rem;
}

/* ---- Tighter section padding ---- */

section#services,
section#case-studies,
section#blog,
section#about,
section#contact {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    section#services,
    section#case-studies,
    section#blog,
    section#about,
    section#contact {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}