:root {
    --ink: #171b1f;
    --ink-soft: #454c54;
    --paper: #faf9f7;
    --surface: #ffffff;
    --border: #e4e2de;
    --accent: #c8352e;
    --accent-dark: #a02821;
    /* Used by .feature-icon since that rule was written and never actually defined, so every
       icon tile on every page has had a transparent background. A 10% tint of the accent. */
    --accent-soft: #f9e9e8;
    --accent-ink: #ffffff;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, Segoe UI, sans-serif;
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
    text-wrap: balance;
    margin: 0;
}

p {
    color: var(--ink-soft);
    margin: 0 0 0.5rem;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Header */

.site-header {
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-header-top {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    font-weight: 700;
    margin-right: auto;
}

.brand-logo {
    display: block;
    height: 40px;
    width: auto;
}

/* ImproveBuild's lockup is a 2:1 badge where ClientManager's is a 5.4:1 wordmark, so the same
   height gives them very different presence - 215px of logo against 80px. Each brand gets the
   height that matches the OTHER's weight, not the other's number. Same fix, same reasoning as the
   application's own side menu, 2026-10-06. A third brand needs its own line; there is no formula,
   because visual weight is not area. */
.brand-logo-ib {
    height: 62px;
}

.brand-text {
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.brand-text-small {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.brand-text strong {
    font-weight: 800;
}

.site-nav {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem 0.85rem;
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.site-nav a {
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.site-nav a:hover {
    color: var(--accent);
}

/* A nav item that is a call to action rather than a destination. As a fifth identical grey link it
   was invisible, and the nav is currently the only route into that page. Outlined, not filled:
   Schedule a Demo in the row above stays the header's only solid red element, so this lifts out of
   the nav without setting up a second focal point competing with it. */
.site-nav a.nav-highlight {
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.15rem 0.85rem;
    margin-top: -0.2rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav a.nav-highlight:hover {
    background: var(--accent);
    color: var(--accent-ink);
}

.site-header-cta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

/* Buttons */

.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-lg {
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.btn-primary:hover {
    background: var(--accent-dark);
}

.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--ink);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Light blue - matches the icon treatment on reyesco.com/clientmanager.html, used for links
   that lead off to REYESCO's shared Resources/Guides content rather than the site's own CTAs. */
.btn-info {
    background: #dbe9ff;
    color: #0b5acf;
}

.btn-info:hover {
    background: #c7ddff;
}

/* Hero */

.hero {
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    padding: 5rem 1.5rem 5.5rem;
}

.hero-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}


.hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.1rem);
    color: var(--ink);
    margin-bottom: 1.1rem;
}

.hero-sub {
    color: var(--ink-soft);
    font-size: 1.08rem;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.hero-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.hero-note {
    color: var(--ink-soft);
    opacity: 0.75;
    font-size: 0.85rem;
    max-width: 520px;
    margin: 0 auto;
}

/* Compact page-header hero (Features/Pricing/Who We Serve/About/Contact) - tighter than
   Home's full flagship hero, and its eyebrow reads larger since there's no h1/hero-sub
   competing for attention above it the way Home's pillars section does. */
.hero-compact {
    padding: 1.75rem 1.5rem 1.5rem;
}

.hero-compact .eyebrow {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}

.hero-compact + section > .section-inner {
    padding-top: 1.5rem;
}

.hero-compact .hero-inner {
    max-width: 920px;
}

.hero-compact h1 {
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    white-space: nowrap;
}

/* The homepage borrows hero-compact for its SIZE but not its nowrap. That rule suits the short
   headlines on the inner pages; the homepage line is a full sentence and would run off the side
   of a phone. Same class for the type scale, wrapping restored. */
.hero-compact.hero-home h1 {
    white-space: normal;
}

/* ...and not its oversized eyebrow either. The 1.3rem above is justified on the inner pages
   because nothing competes with it; the homepage has BOTH an h1 and a hero-sub, so at phone
   width the red all-caps label came out at 20.8px against a 22.4px headline and read as the
   loudest thing on the page. An eyebrow is a label. */
.hero-compact.hero-home .eyebrow {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.hero-compact .hero-sub {
    max-width: 920px;
}

@media (max-width: 720px) {
    /* The floor was 1.4rem, which put the h1 at 22.4px on a 375px phone - SMALLER than the
       section headings further down the page at ~24.6px, so the page title was outranked by
       its own subheadings. 1.65rem puts it back on top without crowding the screen. */
    .hero-compact h1 {
        white-space: normal;
        font-size: clamp(1.65rem, 5.2vw, 1.9rem);
    }
}

/* Sections */

.section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.section-title {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Pillars */

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.pillar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
}

.pillar-index {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

.pillar-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.pillar-card p {
    font-size: 0.92rem;
    margin: 0;
}

/* Verticals */

.verticals {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.vertical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.vertical-card {
    text-align: center;
    padding: 1.4rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
}

.vertical-banner {
    background: var(--accent);
    border-radius: 14px;
    padding: 1.5rem 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vertical-banner strong {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
}

.vertical-banner span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

/* Footer */

.site-footer {
    background: var(--surface);
    color: var(--ink-soft);
    border-top: 1px solid var(--border);
}

.site-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem;
    text-align: center;
    font-size: 0.85rem;
}

/* Social row. Rendered only for accounts that actually exist - see MainLayout. Sized for a
   thumb (44px) rather than a mouse pointer, because the footer is where phone users land. */
.site-social {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.site-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 1.15rem;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.site-social-link:hover,
.site-social-link:focus-visible {
    color: var(--accent, #2b5f8a);
    border-color: currentColor;
    background: var(--surface-2, rgba(0, 0, 0, 0.03));
}

@media (max-width: 480px) {
    /* Below 480px the top row's brand text and CTA buttons get tight - drop the small
       "REYESCO ClientManager" wordmark text (logo image alone still identifies the brand)
       and shrink the CTA buttons' padding, matching this site's existing preference for a
       plain CSS/no-JS mobile treatment over a hamburger toggle. */
    .site-header-top {
        flex-wrap: wrap;
        row-gap: 0.6rem;
        gap: 0.75rem;
    }
    .brand-text {
        display: none;
    }
    .brand-logo {
        height: 32px;
    }

    .brand-logo-ib {
        height: 50px;
    }
    .site-header-cta {
        gap: 0.4rem;
    }
    .site-header-cta .btn {
        padding: 0.5rem 0.7rem;
        font-size: 0.82rem;
        white-space: nowrap;
    }
    .site-nav {
        gap: 0.9rem 1.1rem;
    }
}

/* Language picker -------------------------------------------------------------
   A <details> element, not a scripted menu: it works before the Blazor circuit
   connects and needs no JavaScript of its own. */
.lang-picker { position: relative; }

.lang-picker > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: .875rem;
    font-weight: 600;
    color: #12243a;
    background: #fff;
    white-space: nowrap;
}

.lang-picker > summary::-webkit-details-marker { display: none; }
.lang-picker > summary:hover { border-color: #94a3b8; }
.lang-caret { color: #94a3b8; font-size: .7rem; }

.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    min-width: 11rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
    overflow: hidden;
}

.lang-menu a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .8rem;
    font-size: .875rem;
    color: #334155;
    text-decoration: none;
}

.lang-menu a:hover { background: #f8fafc; }
.lang-menu a.is-current { background: #f1f5f9; font-weight: 700; color: #12243a; }


/* ================================================================================================
   FORMS - shared by every page with one on it.

   These lived inside Contact.razor's <style> block, which looks scoped and is not: a <style> in a
   page's markup is injected into the DOM only while THAT page is rendered, so any other page using
   the same class names silently got nothing. The Introduce page did exactly that - it reused
   .text-input and .field-row and rendered raw, unstyled browser inputs, with the textarea stuck at
   its default 20-character width instead of filling the form.

   They belong here, once, where both pages can reach them and the next form does not repeat it.
   ================================================================================================ */
    .contact-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 2rem;
        align-items: start;
    }

    @media (max-width: 800px) {
        .contact-inner {
            grid-template-columns: 1fr;
        }
    }

    .contact-form-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 2rem;
    }

    .field {
        margin-bottom: 1.1rem;
    }

    .field-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1.1rem;
        /* Bottom-align, so a label that wraps to two lines does not drop its input below the
           boxes beside it. "Contact phone (optional)" wraps in a narrow column while "Contact
           name" does not, and without this the row reads as three stray fields, not a row. */
        align-items: end;
    }

    .field label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 0.35rem;
    }

    .text-input {
        width: 100%;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        color: var(--ink);
        background: var(--paper);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.65rem 0.8rem;
        transition: border-color 0.15s ease;
    }

    .text-input:focus {
        outline: none;
        border-color: var(--accent);
    }

    textarea.text-input {
        resize: vertical;
        min-height: 5rem;
    }

    .contact-submit {
        width: 100%;
        margin-top: 0.4rem;
    }

    .contact-success h2 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .contact-success p {
        margin: 0;
    }

    .contact-side {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .contact-note {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 1.1rem;
    }

    .contact-note h3 {
        font-size: 0.92rem;
        margin-bottom: 0.4rem;
    }

    .contact-note p {
        font-size: 0.85rem;
        margin: 0;
    }

/* Required-field marker and validation summary, shared by every form.

   The asterisk is aria-hidden: it is a visual convention, and reading "asterisk" aloud before every
   other label helps nobody. The message under the form says what it means, and the validation
   summary names the fields in words when something is missing. */
.req {
    color: #c0392b;
    margin-left: 0.15rem;
    font-weight: 700;
}

.req-note {
    font-size: 0.8rem;
    color: var(--ink-soft, #667);
    margin: 0 0 0.9rem;
}

/* ValidationSummary puts the class on the <ul> ITSELF, not a wrapper - so a ".form-errors ul"
   selector matches nothing and the list renders unstyled. The original ".intro-errors ul" had the
   same flaw, which is why validation errors were never actually red. */
ul.form-errors {
    margin: 0 0 1.1rem;
    padding-left: 1.1rem;
    color: #b5460c;
    font-size: 0.88rem;
}

/* FIELD WIDTHS BY CONTENT, not equal columns.

   An email address is long and gets truncated in a third of a row; a phone number is short and
   wastes half of one. The default .field-row shares the width equally, which is right when the
   fields are comparable and wrong as soon as an email sits beside a phone.

   Ratios, not fixed widths, so the row still stretches with the card. */
.field-row.cols-name-email-phone {
    grid-template-columns: 1fr 1.4fr 0.75fr;
}

.field-row.cols-name-email {
    grid-template-columns: 1fr 1.4fr;
}

.field-row.cols-phone-company {
    grid-template-columns: 0.75fr 1.4fr;
}

.field-row.cols-company-phone {
    grid-template-columns: 1.4fr 0.75fr;
}

/* A website needs more room than a company name - "northernvirginiaremodeling.com" beside
   "Acme Remodeling" is the usual pairing, not the reverse. */
.field-row.cols-company-website {
    grid-template-columns: 1fr 1.4fr;
}

/* On a phone every row is one column. Written with the same compound specificity as the rules
   above, or they would win regardless of the media query. */
@media (max-width: 640px) {
    .field-row.cols-name-email-phone,
    .field-row.cols-name-email,
    .field-row.cols-phone-company,
    .field-row.cols-company-phone,
    .field-row.cols-company-website {
        grid-template-columns: 1fr;
    }
}

/* A form that could not be saved. Deliberately louder than a validation message: nothing the
   visitor can correct caused it, so it has to read as "us, not you" and invite a retry. */
.form-failed {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    border-radius: 8px;
    color: #8f2d24;
    font-size: 0.9rem;
    padding: 0.75rem 0.9rem;
    margin: 0 0 1.1rem;
}

/* Feature groups and feature lists ------------------------------------------------------------
   MOVED here from Features.razor's own <style> block on 2026-09-29. It had never been anywhere
   else, which meant Home and all four vertical landing pages - which use exactly these classes -
   rendered them with NO styling at all: .feature-group-title fell back to the browser's default
   h2 at 24.6px, the item h3s to 23px, and the icon tiles lost their background entirely.

   On a phone that read as "huge fonts", and it was happening on the four pages we are asking
   Google to index. A style block inside one page is scoped to that page in practice, because it
   only reaches the document when that page renders. Shared classes belong in the stylesheet. */
.category-tag {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--accent);
    color: var(--accent);
    white-space: nowrap;
}

.category-lead {
    margin: -0.5rem 0 1.25rem;
    font-size: 0.95rem;
}

@media (max-width: 576px) {
    .feature-group-title { flex-wrap: wrap; }
    .category-tag { margin-left: 0; }
}

.feature-group {
    margin-bottom: 3rem;
}

.feature-group:last-child {
    margin-bottom: 0;
}

.feature-group-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--accent);
}

.feature-group-title i {
    color: var(--accent);
    font-size: 1.05rem;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.feature-item {
    position: relative;
    padding-left: 2.9rem;
}

.feature-icon {
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.feature-item h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.feature-item p {
    font-size: 0.9rem;
    margin: 0;
}

/* Who-we-serve banner and cards ---------------------------------------------------------------
   MOVED here from WhoWeServe.razor on 2026-09-29, for the same reason as the feature groups
   above: .who-banner is used by Home AND by all four vertical landing pages, but was defined
   only inside the page it was written for. Everywhere else its h2 fell back to the browser
   default at 24.6px with no card, no border and no centring. */
/* The accent carries the TITLE and nothing else. A solid red panel this size dominated the
   page and fought the calm white cards beneath it; a red edge was only a smaller version of
   the same problem. The banner keeps its prominence through size and centring. */
.who-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.who-banner h2 {
    color: var(--accent);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.who-banner p {
    color: var(--ink-soft);
    font-size: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.who-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.who-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
}

.who-card h2 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
    color: var(--accent);
}

.who-card p {
    font-size: 0.94rem;
    margin: 0;
}

/* Four of these audiences have their own landing page. Those pages were reachable only from
   a block on the home page, which left them looking peripheral - to a reader who never found
   them, and to a crawler deciding what is worth fetching. Three of the four were still sitting
   at "Discovered - currently not indexed" in Search Console. */
.who-more {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.who-more:hover {
    text-decoration: underline;
}

/* The who-banner h2 is 1.75rem, which is right on Who We Serve where it is the page's own
   flagship. On a phone that is 28px - ABOVE the 26.4px h1 - so on Home and the landing pages,
   which borrow the banner, it outranked the page title. Step it down with the viewport, and
   tighten the padding while we are here: 2.5rem of it is a lot of a 375px screen. */
@media (max-width: 720px) {
    .who-banner {
        padding: 1.5rem 1.25rem;
    }

    .who-banner h2 {
        font-size: 1.35rem;
    }
}

/* The 1.3rem eyebrow is defensible on a wide screen. On a phone it wraps to three lines of red
   capitals above the headline and becomes the loudest thing on the page - the same complaint the
   home page drew. An eyebrow is a label at every width. */
@media (max-width: 720px) {
    .hero-compact .eyebrow {
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
    }
}

/* Honeypot field on the contact form. Added 2026-10-10 after a bot filled the demo form.

   NOT display:none, and not type="hidden". The bots worth stopping skip both - they are the
   first things a form-filler checks. Moving it off-screen leaves a real, visible-to-code input
   that a script will happily complete and a person can never reach: it is out of the tab order
   (tabindex="-1") and out of the accessibility tree (aria-hidden), so nobody using a keyboard or
   a screen reader meets it either.

   If this ever needs debugging, comment out the position line rather than the whole rule - the
   field should still be a normal input, just somewhere you can see it. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}