/* ==========================================================================
   Brewbyte — signature theme for inner pages
   Loaded after theme.css on public inner pages. The goal is a single visual
   language: warm paper, ink, electric blue, lime, serif accents and mono labels.
   ========================================================================== */

body.signature-inner {
    --ink: var(--sig-ink);
    --ink-2: var(--sig-ink-soft);
    --ink-soft: var(--sig-muted);
    --muted: var(--sig-muted);
    --paper: var(--sig-paper);
    --paper-warm: var(--sig-paper-2);
    --white: var(--sig-white);
    --violet: var(--sig-blue);
    --violet-dark: var(--sig-blue-dark);
    --violet-soft: #e4e9ff;
    --mint: #0f8a63;
    --mint-soft: #d9f7e7;
    --sky: #0e7490;
    --sky-soft: #e0f2fe;
    --peach: #b45309;
    --peach-soft: #fef3c7;
    --rose: #be123c;
    --rose-soft: #ffe4e6;
    --line: var(--sig-line);
    --line-dark: rgba(255, 255, 255, 0.14);
    --blue-700: var(--sig-blue-dark);
    --blue-600: var(--sig-blue);
    --cyan-600: var(--sig-blue);
    --cyan-500: var(--sig-blue);
    --teal-600: #0f766e;
    --teal-500: #14b8a6;
    --slate-50: var(--sig-paper);
    --slate-100: var(--sig-paper-2);
    --slate-200: var(--sig-line);

    background: var(--sig-paper);
    color: var(--sig-ink);
}

body.signature-inner .sig-header-availability {
    display: none;
}

body.signature-inner p {
    color: var(--sig-muted);
}

body.signature-inner h1,
body.signature-inner h2,
body.signature-inner h3,
body.signature-inner h4 {
    color: var(--sig-ink);
}

body.signature-inner h1 em,
body.signature-inner h2 em,
body.signature-inner h3 em,
body.signature-inner .gradient-heading em {
    font-family: var(--sig-serif);
    font-style: italic;
    font-weight: 400;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--sig-blue);
    -webkit-text-fill-color: currentColor;
}

body.signature-inner .gradient-heading {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--sig-ink);
    -webkit-text-fill-color: currentColor;
}

body.signature-inner .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sig-blue);
    font-family: var(--sig-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    line-height: 1.4;
    text-transform: uppercase;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}

body.signature-inner .eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    flex: none;
    background: currentColor;
}

body.signature-inner .eyebrow-light {
    color: var(--sig-lime);
}

body.signature-inner .lede,
body.signature-inner .section-heading p,
body.signature-inner .section-heading-split > p,
body.signature-inner .faq-intro p {
    color: var(--sig-muted);
}

body.signature-inner .text-link,
body.signature-inner .card-link {
    color: var(--sig-blue);
}

body.signature-inner .text-link:hover,
body.signature-inner .card-link:hover {
    color: var(--sig-ink);
}

/* --------------------------------------------------------------------------
   Inner heroes
   -------------------------------------------------------------------------- */

body.signature-inner .inner-hero,
body.signature-inner .contact-hero,
body.signature-inner .article-header {
    border-bottom: 1px solid var(--sig-line);
    background:
        radial-gradient(circle at 88% 0%, rgba(31, 75, 255, 0.09), transparent 38%),
        var(--sig-paper);
    color: var(--sig-ink);
}

body.signature-inner .inner-hero {
    padding-top: calc(var(--header-h) + clamp(44px, 6vw, 78px));
}

body.signature-inner .inner-hero::after {
    background-image:
        linear-gradient(rgba(11, 13, 15, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 13, 15, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%);
    opacity: 0.65;
}

body.signature-inner .inner-hero h1,
body.signature-inner .inner-hero h2 {
    color: var(--sig-ink);
}

body.signature-inner .inner-hero h1 em,
body.signature-inner .inner-hero h2 em {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--sig-blue);
    -webkit-text-fill-color: currentColor;
}

body.signature-inner .inner-hero .lede,
body.signature-inner .inner-hero p {
    color: var(--sig-muted);
}

body.signature-inner .inner-hero .eyebrow {
    color: var(--sig-blue);
}

body.signature-inner .inner-hero .breadcrumb,
body.signature-inner .contact-hero .breadcrumb,
body.signature-inner .article-header .breadcrumb {
    color: var(--sig-muted);
    font-family: var(--sig-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.signature-inner .inner-hero .breadcrumb a,
body.signature-inner .contact-hero .breadcrumb a {
    color: var(--sig-muted);
}

body.signature-inner .inner-hero .breadcrumb a:hover,
body.signature-inner .contact-hero .breadcrumb a:hover {
    color: var(--sig-blue);
}

body.signature-inner .inner-hero .breadcrumb i,
body.signature-inner .contact-hero .breadcrumb i {
    color: var(--sig-line-strong);
}

body.signature-inner .inner-hero .case-meta {
    border-color: var(--sig-line);
}

body.signature-inner .inner-hero .case-meta dt {
    color: var(--sig-muted);
}

body.signature-inner .inner-hero .case-meta dd {
    color: var(--sig-ink);
}

body.signature-inner .inner-hero .page-updated {
    color: var(--sig-muted);
}

body.signature-inner .inner-hero .feature-list li,
body.signature-inner .inner-hero .service-includes {
    border-color: var(--sig-line);
    background: var(--sig-paper-2);
    color: var(--sig-ink);
}

body.signature-inner .inner-hero .feature-list i {
    color: var(--sig-blue);
}

body.signature-inner .inner-hero .service-icon {
    border-color: var(--sig-line);
    background: var(--sig-paper-2);
    color: var(--sig-blue);
}

body.signature-inner .inner-hero .service-price {
    color: var(--sig-blue);
}

body.signature-inner .inner-hero-media {
    border: 1px solid var(--sig-line);
    box-shadow: var(--sig-shadow);
}



body.signature-inner .contact-intro h1 {
    color: var(--sig-ink);
}

body.signature-inner .contact-intro h1 em {
    color: var(--sig-blue);
}

body.signature-inner .contact-intro .lede {
    color: var(--sig-muted);
}

body.signature-inner .article-header h1 {
    color: var(--sig-ink);
}

/* --------------------------------------------------------------------------
   Sections and headings
   -------------------------------------------------------------------------- */

body.signature-inner .section {
    background: transparent;
}

body.signature-inner .services-tabs-section,
body.signature-inner .work-section,
body.signature-inner .testimonials-section,
body.signature-inner .insights-section,
body.signature-inner .work-section {
    background: var(--sig-paper);
}

body.signature-inner .process-section,
body.signature-inner .faq-section,
body.signature-inner .about-band {
    background: var(--sig-paper-2);
    border-color: var(--sig-line);
}

body.signature-inner .section-heading h2,
body.signature-inner .section-heading-split h2 {
    color: var(--sig-ink);
}

body.signature-inner .section-heading p,
body.signature-inner .section-heading-split > p {
    color: var(--sig-muted);
}

/* --------------------------------------------------------------------------
   Buttons, chips and links
   -------------------------------------------------------------------------- */

body.signature-inner .button {
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid var(--sig-ink);
    border-radius: 999px;
    background: var(--sig-ink);
    color: var(--sig-paper);
    font-weight: 700;
}

body.signature-inner .button:hover {
    border-color: var(--sig-blue);
    background: var(--sig-blue);
    color: var(--sig-white);
    box-shadow: 0 18px 38px -22px rgba(31, 75, 255, 0.75);
}

body.signature-inner .button i {
    font-size: 0.82rem;
}

body.signature-inner .button-ghost {
    border-color: var(--sig-line-strong);
    background: transparent;
    color: var(--sig-ink);
}

body.signature-inner .button-ghost:hover {
    border-color: var(--sig-ink);
    background: var(--sig-ink);
    color: var(--sig-paper);
}

body.signature-inner .button-light {
    border-color: var(--sig-paper);
    background: var(--sig-paper);
    color: var(--sig-ink);
}

body.signature-inner .button-light:hover {
    border-color: var(--sig-lime);
    background: var(--sig-lime);
    color: var(--sig-ink);
}

body.signature-inner .inner-hero .button {
    border-color: var(--sig-ink);
    background: var(--sig-ink);
    color: var(--sig-paper);
}

body.signature-inner .inner-hero .button:hover {
    border-color: var(--sig-blue);
    background: var(--sig-blue);
    color: var(--sig-white);
}

body.signature-inner .inner-hero .button-ghost {
    border-color: var(--sig-line-strong);
    background: transparent;
    color: var(--sig-ink);
}

body.signature-inner .inner-hero .button-ghost:hover {
    border-color: var(--sig-ink);
    background: var(--sig-ink);
    color: var(--sig-paper);
}

body.signature-inner .inner-hero .text-link,
body.signature-inner .inner-hero a:not(.button) {
    color: var(--sig-ink);
}

body.signature-inner .inner-hero .text-link:hover,
body.signature-inner .inner-hero a:not(.button):hover {
    color: var(--sig-blue);
}

body.signature-inner .chip {
    border-color: var(--sig-line);
    background: transparent;
    color: var(--sig-muted);
}

body.signature-inner .chip:hover {
    border-color: var(--sig-ink);
    color: var(--sig-ink);
}

body.signature-inner .chip.is-active {
    border-color: var(--sig-ink);
    background: var(--sig-ink);
    color: var(--sig-paper);
}

body.signature-inner .filter-bar {
    border-color: var(--sig-line);
}

/* --------------------------------------------------------------------------
   Surfaces and cards
   -------------------------------------------------------------------------- */

body.signature-inner .work-card,
body.signature-inner .post-card,
body.signature-inner .testimonial-card,
body.signature-inner .faq-item,
body.signature-inner .aside-card,
body.signature-inner .contact-detail,
body.signature-inner .studio-card,
body.signature-inner .contact-form-wrap,
body.signature-inner .app-card {
    border-color: var(--sig-line);
    background: var(--sig-white);
    border-radius: 20px;
}

body.signature-inner .work-card:hover,
body.signature-inner .post-card:hover {
    border-color: var(--sig-line-strong);
    box-shadow: 0 30px 66px -46px rgba(11, 13, 15, 0.5);
}

body.signature-inner .work-media,
body.signature-inner .post-media,
body.signature-inner .media-placeholder {
    background: var(--sig-paper-2);
}

body.signature-inner .media-placeholder {
    color: var(--sig-muted);
}

body.signature-inner .work-tag,
body.signature-inner .post-category {
    background: rgba(243, 240, 232, 0.92);
    color: var(--sig-ink);
}

body.signature-inner .work-copy h2,
body.signature-inner .work-copy h3,
body.signature-inner .post-copy h3,
body.signature-inner .testimonial-card blockquote {
    color: var(--sig-ink);
}

body.signature-inner .work-meta,
body.signature-inner .post-meta,
body.signature-inner .post-read {
    color: var(--sig-muted);
}

body.signature-inner .work-copy p,
body.signature-inner .post-copy p,
body.signature-inner .testimonial-card figcaption small {
    color: var(--sig-muted);
}

body.signature-inner .work-copy .card-link,
body.signature-inner .post-copy .card-link,
body.signature-inner .post-read {
    color: var(--sig-blue);
}

body.signature-inner .service-row {
    border-color: var(--sig-line);
    border-radius: 0;
    background: transparent;
}

body.signature-inner .service-row:hover {
    background: var(--sig-white);
}

body.signature-inner .service-row-number,
body.signature-inner .step-number,
body.signature-inner .post-meta,
body.signature-inner .work-meta {
    color: var(--sig-muted);
}

body.signature-inner .service-row-icon {
    background: var(--sig-paper-2);
    color: var(--sig-blue);
}

body.signature-inner .service-row-link {
    border-color: var(--sig-line);
    color: var(--sig-ink);
}

body.signature-inner .service-row-link:hover {
    border-color: var(--sig-lime);
    background: var(--sig-lime);
    color: var(--sig-ink);
}

body.signature-inner .process-step {
    border-color: var(--sig-line);
    border-radius: 18px;
    background: var(--sig-white);
}

body.signature-inner .faq-item {
    border-radius: 14px;
}

body.signature-inner .faq-item summary {
    color: var(--sig-ink);
}

body.signature-inner .faq-item summary i {
    color: var(--sig-blue);
}

body.signature-inner .faq-answer {
    color: var(--sig-muted);
}

body.signature-inner .testimonial-card {
    box-shadow: none;
}

body.signature-inner .stars {
    color: var(--sig-blue);
}

body.signature-inner .empty-state {
    border-color: var(--sig-line);
    background: var(--sig-paper-2);
}

body.signature-inner .empty-state h2 {
    color: var(--sig-ink);
}

/* --------------------------------------------------------------------------
   Contact and forms
   -------------------------------------------------------------------------- */

body.signature-inner .contact-detail:hover {
    border-color: var(--sig-blue);
    background: var(--sig-white);
}

body.signature-inner .contact-detail-icon {
    background: var(--sig-paper-2);
    color: var(--sig-blue);
}

body.signature-inner .contact-detail small,
body.signature-inner .studio-card-top .mono,
body.signature-inner .studio-card-bottom small {
    color: var(--sig-muted);
}

body.signature-inner .contact-detail strong,
body.signature-inner .studio-card-bottom strong {
    color: var(--sig-ink);
}

body.signature-inner .studio-status {
    color: #0f8a63;
}

body.signature-inner .contact-form-head .eyebrow {
    color: var(--sig-blue);
}

body.signature-inner .contact-form-head h2 {
    color: var(--sig-ink);
}

body.signature-inner .contact-form-head p {
    color: var(--sig-muted);
}

body.signature-inner .form-field label {
    color: var(--sig-muted);
    font-family: var(--sig-mono);
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.signature-inner .form-field label span {
    color: var(--sig-blue);
}

body.signature-inner .form-field input,
body.signature-inner .form-field textarea,
body.signature-inner .form-field select {
    border-color: var(--sig-line);
    border-radius: 10px;
    background: #fbf9f3;
    color: var(--sig-ink);
}

body.signature-inner .form-field input:focus,
body.signature-inner .form-field textarea:focus,
body.signature-inner .form-field select:focus {
    border-color: var(--sig-blue);
    background: var(--sig-white);
    box-shadow: 0 0 0 3px rgba(31, 75, 255, 0.12);
}

body.signature-inner .contact-form .button-submit {
    border-color: var(--sig-ink);
    background: var(--sig-ink);
    color: var(--sig-paper);
}

body.signature-inner .contact-form .button-submit:hover {
    border-color: var(--sig-blue);
    background: var(--sig-blue);
    color: var(--sig-white);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

body.signature-inner .cta-band {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 88% 10%, rgba(216, 255, 79, 0.18) 0%, rgba(216, 255, 79, 0) 36%),
        var(--sig-blue);
    color: var(--sig-paper);
}

body.signature-inner .cta-band h2,
body.signature-inner .cta-copy h2 {
    color: var(--sig-paper);
}

body.signature-inner .cta-band h2 em,
body.signature-inner .cta-copy h2 em {
    color: var(--sig-lime);
}

body.signature-inner .cta-band p,
body.signature-inner .cta-copy p {
    color: rgba(243, 240, 232, 0.84);
}

body.signature-inner .cta-band .eyebrow {
    color: var(--sig-lime);
}

body.signature-inner .cta-band .button-light {
    border-color: var(--sig-paper);
    background: var(--sig-paper);
    color: var(--sig-ink);
}

body.signature-inner .cta-band .button-light:hover {
    border-color: var(--sig-lime);
    background: var(--sig-lime);
}

/* --------------------------------------------------------------------------
   Prose, case studies and articles
   -------------------------------------------------------------------------- */

body.signature-inner .prose {
    color: var(--sig-muted);
}

body.signature-inner .prose h2,
body.signature-inner .prose h3,
body.signature-inner .prose h4 {
    color: var(--sig-ink);
}

body.signature-inner .prose a {
    color: var(--sig-blue);
}

body.signature-inner .prose blockquote {
    border-color: var(--sig-blue);
    background: var(--sig-paper-2);
    color: var(--sig-ink);
}

body.signature-inner .prose code {
    border-color: var(--sig-line);
    background: var(--sig-paper-2);
}

body.signature-inner .prose table th {
    background: var(--sig-paper-2);
    color: var(--sig-ink);
}

body.signature-inner .prose table td,
body.signature-inner .prose table th {
    border-color: var(--sig-line);
}

body.signature-inner .case-aside .aside-card,
body.signature-inner .page-aside .aside-card {
    background: var(--sig-paper-2);
}

body.signature-inner .article-share a,
body.signature-inner .article-author-card,
body.signature-inner .article-nav a {
    border-color: var(--sig-line);
    background: var(--sig-white);
    color: var(--sig-ink);
}

body.signature-inner .article-share a:hover,
body.signature-inner .article-nav a:hover {
    border-color: var(--sig-blue);
    color: var(--sig-blue);
}

body.signature-inner .article-meta,
body.signature-inner .article-share > span {
    color: var(--sig-muted);
}

/* --------------------------------------------------------------------------
   Downloads
   -------------------------------------------------------------------------- */

body.signature-inner .downloads-note {
    border-color: var(--sig-line);
    background: var(--sig-paper-2);
    color: var(--sig-muted);
}

body.signature-inner .downloads-note i {
    color: var(--sig-blue);
}

body.signature-inner .app-card {
    box-shadow: 0 24px 60px -50px rgba(11, 13, 15, 0.45);
}

body.signature-inner .app-icon {
    background: var(--sig-paper-2);
    color: var(--sig-blue);
}

body.signature-inner .app-card-head p,
body.signature-inner .app-meta,
body.signature-inner .downloads-empty,
body.signature-inner .downloads-foot p {
    color: var(--sig-muted);
}

body.signature-inner .app-hash {
    color: var(--sig-muted);
}

body.signature-inner .downloads-foot {
    border-color: var(--sig-line);
}

body.signature-inner .app-download {
    border-color: var(--sig-ink);
    background: var(--sig-ink);
    color: var(--sig-paper);
}

body.signature-inner .app-download:hover {
    border-color: var(--sig-blue);
    background: var(--sig-blue);
    color: var(--sig-white);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

body.signature-inner .pagination a,
body.signature-inner .pagination span {
    border-color: var(--sig-line);
    background: var(--sig-white);
    color: var(--sig-ink);
}

body.signature-inner .pagination a:hover,
body.signature-inner .pagination .is-current,
body.signature-inner .pagination .is-active {
    border-color: var(--sig-ink);
    background: var(--sig-ink);
    color: var(--sig-paper);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    body.signature-inner .inner-hero {
        padding-top: calc(96px + clamp(24px, 5vw, 48px));
    }
}

@media (max-width: 760px) {
    body.signature-inner .inner-hero {
        padding-top: calc(88px + 30px);
    }

    body.signature-inner .section-heading-split {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    body.signature-inner .cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    body.signature-inner .contact-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.signature-inner .button:hover,
    body.signature-inner .work-card:hover,
    body.signature-inner .post-card:hover {
        transform: none;
    }
}