/* =====================================================================
   Admentus brand layer — loaded LAST, on top of the Aivons template.
   Scope: COLOR + FONT variable overrides only. No block/layout changes.
   Reference: live admentus.com + _shared/visual-identity.md
   Navy (#052777) bookend placement (footer / CTA / dark sections) is
   tuned in the section-by-section pass — not applied globally here.
   ===================================================================== */

:root {
    /* Interactive accent — Cobalt Blue (buttons, links, active states) */
    --thm-primary: #1338b3;
    --thm-primary-rgb: 19, 56, 179;

    /* Type — Roboto Condensed headings + Roboto body (matches live site) */
    --thm-font: 'Roboto', sans-serif;
    --thm-font-2: 'Roboto Condensed', sans-serif;

    /* Admentus color palette */
    --thm-admentus-blue: #052777;
    --thm-cobalt-blue: #1338b3;
    --thm-dark-blue: #010818;
    --thm-eerie-black: #1b1b1b;
    --thm-royal-blue: #5a74ca;
    --thm-powder-blue: #a1afe1;
    --thm-ghost-white: #e7ebf7;
    --thm-dark-gray: #575757;
    --thm-light-gray: #838383;

    /* Global settings */
    --thm-color-primary: #1338B3;
    --thm-color-secondary: #5A74CA;
    --thm-color-text: #828282;
    --thm-color-accent: #A1AFE1;
    --thm-typography-primary-font-family: "Montserrat";
    --thm-typography-primary-font-size: 15px;
    --thm-typography-primary-font-weight: 400;
    --thm-typography-primary-line-height: 1em;
    --thm-typography-secondary-font-family: "Montserrat";
    --thm-typography-secondary-font-size: 15px;
    --thm-typography-secondary-font-weight: 400;
    --thm-typography-secondary-line-height: 2em;
    --thm-typography-text-font-family: "Roboto";
    --thm-typography-text-font-size: 15px;
    --thm-typography-text-font-weight: 400;
    --thm-typography-text-line-height: 2em;
    --thm-typography-accent-font-family: "Roboto";
    --thm-typography-accent-font-size: 15px;
    --thm-typography-accent-font-weight: 500;
    --thm-typography-accent-line-height: 2em;

    --thm-gray: #828282;
    --thm-black: #1b1b1b;

    /* Heading scale -- centralized so page/section headings stay consistent
       by construction instead of drifting per-page. Before this, the
       "main heading" landed at three different sizes across three pages
       (Home's hero 45px, Privacy's hardcoded 40px, Contact's hardcoded
       30px) purely because each was set inline with no shared reference.
       --thm-heading-page matches the type system already documented
       against the live site (see TYPE SYSTEM note further down) but that
       note's rule block was commented out, so nothing was actually
       enforcing it. Home's hero H2 is a deliberately distinct, larger
       treatment (its own UI role, not a page banner) and keeps its own
       value rather than using this scale. */
    --thm-heading-page-size: 40px;
    --thm-heading-page-line-height: 1.2;
    --thm-heading-section-size: 28px;
    --thm-heading-section-line-height: 1.3;
}

/* Headings run in Roboto Condensed per the live site */
h1, h2, h3, h4, h5, h6,
.section-title__title,
.main-slider__content h2,
.welcome-one__title,
.real-world__title,
.our-mission__title,
.two-boxes__title,
.cta-one__title,
.footer-widget__title {
    font-family: 'Roboto Condensed', sans-serif;
}

p {
    color: var(--thm-color-text);
    font-family: var(--thm-typography-text-font-family), Sans-serif;
    font-size: var(--thm-typography-text-font-size);
    font-weight: var(--thm-typography-text-font-weight);
    line-height: var(--thm-typography-text-line-height);
    margin-top: 0;
    margin-bottom: 1.5em;
}

p.accent-grey {
    color: var(--thm-dark-gray);
    font-weight: var(--thm-typography-accent-font-weight);
}

/* .cta-one-bg (the diagonal shape backdrop) is position:absolute and covers
   the whole section -- positioned elements always paint above static ones
   in the same stacking context, regardless of DOM order. Without this, the
   row's content (h2 in particular -- plain text has no positioning of its
   own) renders BEHIND the background image, not just uncentered. The
   button survives that on its own only by coincidence (.thm-btn sets its
   own position:relative for hover transitions). */
.cta-one__row {
    position: relative;
}


/* Logo sizing — the Admentus wordmark PNGs are large-intrinsic; the template's
   logo slots don't cap them, so constrain to fit the header/footer/mobile nav. */
.main-menu-wrapper__logo img,
.stricky-header .main-menu-wrapper__logo img {
    height: 46px;
    width: auto;
}
.footer-widget__about-logo img {
    max-height: 44px;
    width: auto;
}

/* Footer "anchor" column gets a larger, centered logo -- see the FOOTER
   REBUILD block below for why. */
.footer-widget__about--anchor {
    text-align: center;
}

.footer-widget__about--anchor .footer-widget__about-logo {
    display: inline-block;
}

.footer-widget__about--anchor .footer-widget__about-logo img {
    max-height: 64px;
}

.footer-widget__about--anchor .footer-widget__text {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.mobile-nav__content .logo-box img {
    max-height: 40px;
    width: auto;
}

/* Page preloader still showed the Aivons template's stock loader.png icon. */
.preloader__image {
    background-image: url(../images/brand/admentus-icon-white.png);
}

/* ---------------------------------------------------------------------------
   SUB-PAGE SHELL — the locked shared banner for every inner page (Contact,
   About, Partners, How It Works, Privacy Policy). Built on the vendor's
   .page-header component (breadcrumb + H2), now a photo banner (tinted per
   Jeff's Canva recipe) instead of a flat navy fill.
   --------------------------------------------------------------------------- */

/* No override needed for .main-header here: the vendor default is already
   position:absolute/background:transparent (aivons.css), which is exactly
   right now that every sub-page has a dark photo banner directly under the
   nav -- same mechanism as Home's hero. The header goes solid on scroll via
   the site-wide .stricky-header clone (aivons.js), unrelated to this rule
   and unaffected by it. An earlier version of this rule forced the header
   solid at all times, written back when the banner was still a flat navy
   fill with no image behind it to sit on transparently -- removed once the
   banner became a photo.

   body.page--no-hero still marks sub-pages for the one thing that IS
   page-specific: swapping the floating Tarvi launcher in for
   .scroll-to-top (below). */

/* Sub-pages use the floating Tarvi launcher (tarvi-widget.css / modal.js)
   in the bottom-right corner instead of the #tarvi inline section Home has
   -- hide the vendor's scroll-to-top button there so the two don't stack. */
body.page--no-hero .scroll-to-top {
    display: none !important;
}

.page-header {
    position: relative;
    padding: 180px 0 70px;
    background: var(--thm-dark-blue);
    overflow: hidden;
}

/* Photo banner -- CSS approximation of Jeff's Canva tint recipe (Slate
   filter, brightness -40/contrast +30/shadows +15/blacks -15, then a flat
   #052777 @ 20% overlay). The overlay opacity/color map exactly; the
   Slate/tonal-range adjustments are approximated with grayscale + a slight
   blue hue-rotate + brightness/contrast. Vendor's own .page-header__bg sets
   background-blend-mode:luminosity against a black background-color --
   same grayscale-crushing gotcha already hit on the hero and
   our-mission-bg, neutralized the same way. */
.page-header__bg {
    display: block;
    /*background-image: url(../images/backgrounds/page-header-contact.jpg);*/
    background-image: url(../images/backgrounds/page-header-03.webp);
    background-size: cover;
    background-position: center 30%;
    background-color: transparent;
    background-blend-mode: normal;
    filter: grayscale(0.75) sepia(0.15) hue-rotate(180deg) brightness(0.85) contrast(1.15);
    opacity: 1;
}

.page-header__bg.page-about {
    background-image: url(../images/backgrounds/page-header-09.webp);
}

.page-header__bg.page-contact {
    background-image: url(../images/backgrounds/page-header-12.webp);
    filter: grayscale(0.75) sepia(0.15) hue-rotate(180deg) brightness(0.65) contrast(1.15);
}

.page-header__bg.page-how-it-works {
    background-image: url(../images/backgrounds/page-header-07.webp);
}

.page-header__bg.page-partners {
    background-image: url(../images/backgrounds/page-header-01.webp);
}

.page-header__bg.page-privacy-policy {
    background-image: url(../images/backgrounds/page-header-03.webp);
}

.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 39, 119, 0.2);
    z-index: 2;
}

.page-header__inner {
    position: relative;
    z-index: 3;
}

.page-header__inner h2 {
    font-size: var(--thm-heading-page-size);
    line-height: var(--thm-heading-page-line-height);
}

.page-header-shape-1,
.page-header-shape-2,
.page-header-shape-3 {
    display: none;
}

.thm-breadcrumb li,
.thm-breadcrumb li a {
    color: var(--thm-cobalt-blue);
}

.thm-breadcrumb li:hover a {
    color: var(--thm-dark-blue);
}

.thm-breadcrumb li:last-child {
    color: var(--thm-base);
}

/* ---------------------------------------------------------------------------
   CONTACT PAGE
   --------------------------------------------------------------------------- */

/* Two-column, full container width -- matches Home's layout language
   (paired columns filling the ~1170px container) rather than a single
   narrow centered block, which read cramped next to the rest of the site. */
.contact-page {
    background-color: var(--thm-light);
    padding: 100px 0;
}

/* Matches the Aivons template's own contact.html pattern: the banner H2 and
   the content H2 run at nearly the same large size (50px/48px there) --
   both read as "the main heading," not a big-title-then-small-subhead
   hierarchy. Uses --thm-heading-page-size, the same variable as the banner,
   rather than the smaller --thm-heading-section-size. */
.contact-page__intro h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: var(--thm-heading-page-size);
    line-height: var(--thm-heading-page-line-height);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--thm-black);
    margin-bottom: 10px;
}

/* Was a second sentence force-broken onto its own line inside the h3 --
   at the bigger heading size that produced an awkward 3-line wrap (the
   first sentence alone already wraps to 2 lines). Split into a proper
   headline + smaller supporting line instead, echoing the Aivons
   template's own pattern of a big heading followed by a smaller line
   ("Trusted by more than 4,200 customers" on its contact.html). */
.contact-page__intro-sub {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: var(--thm-heading-section-size);
    line-height: var(--thm-heading-section-line-height);
    font-weight: 500;
    color: var(--thm-dark-gray);
    margin-bottom: 20px;
}

.contact-page__intro p {
    font-size: 15px;
    line-height: 30px;
    color: var(--thm-color-text);
}

.contact-page__intro p strong {
    color: var(--thm-black);
}

.contact-page__intro a {
    color: var(--thm-cobalt-blue);
    text-decoration: underline;
}

.contact-form {
    background-color: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 8px;
    padding: 40px;
}

.contact-form__row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* Flex items don't collapse margins with their container the way block
   children do -- .contact-form__field's own margin-bottom (below) was
   stacking on top of .contact-form__row's, doubling the gap after the
   Name/Email row (~40px) versus every other field-to-field gap (~20px). */
.contact-form__row .contact-form__field {
    flex: 1;
    margin-bottom: 0;
}

.contact-form__field {
    margin-bottom: 20px;
}

.contact-form__field:last-of-type {
    margin-bottom: 0;
}

.contact-form label {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--thm-black);
    margin-bottom: 8px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    font-family: var(--thm-typography-text-font-family), sans-serif;
    font-size: 15px;
    color: var(--thm-black);
    background-color: var(--thm-light);
    border: 1px solid #e6e9ef;
    border-radius: 5px;
    padding: 14px 16px;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form__submit {
    margin-top: 8px;
}

.contact-form__fineprint {
    font-size: 13px;
    font-style: italic;
    color: var(--thm-dark-gray);
    margin-top: 16px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .page-header {
        padding: 140px 0 50px;
    }

    .contact-page {
        padding: 60px 0;
    }

    .contact-form {
        padding: 28px 20px;
    }

    .contact-form__row {
        flex-direction: column;
        gap: 0;
    }
}

/* ---------------------------------------------------------------------------
   PRIVACY POLICY PAGE
   --------------------------------------------------------------------------- */

.legal-page {
    background-color: var(--thm-light);
    padding: 100px 0;
}

.legal-page__updated {
    font-size: 14px;
    font-style: italic;
    color: var(--thm-dark-gray);
    margin-bottom: 40px;
}

.legal-page__body h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--thm-black);
    margin-top: 40px;
    margin-bottom: 14px;
}

.legal-page__body p,
.legal-page__body li {
    font-size: 15px;
    line-height: 30px;
    color: var(--thm-color-text);
    font-weight: var(--thm-typography-text-font-weight);
}

.legal-page__body ul {
    margin-bottom: 20px;
}

.legal-page__body a {
    color: var(--thm-cobalt-blue);
    text-decoration: underline;
}

.legal-page__toc {
    background-color: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 5px;
    padding: 30px 40px;
    margin-bottom: 40px;
}

.legal-page__toc h4 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--thm-black);
    margin-bottom: 14px;
}

.legal-page__toc ol {
    padding-left: 20px;
    margin: 0;
}

.legal-page__toc li {
    font-size: 14px;
    line-height: 26px;
}

.legal-page__toc a {
    color: var(--thm-color-text);
}

.legal-page__toc a:hover {
    color: var(--thm-cobalt-blue);
}

/* ---------------------------------------------------------------------------
   INTERIOR PAGE SECTIONS — shared building blocks for every sub-page's
   content (Contact, Privacy, Diagnostic, How It Works, and whatever's next).
   Extracted 2026-08-11 from what was originally page-specific "diagnostic-*"
   CSS: building a fresh one-off naming scheme per page turned out to be
   exactly the "reinventing styles with each new page" problem being fixed.
   Pattern: .welcome-one__eyebrow (small label) + .welcome-one__title.page-
   section-heading (real 40px heading) together, every section, full
   container width -- never a narrow centered column, never a small label
   standing in alone as if it were the heading.
   --------------------------------------------------------------------------- */

/* Every interior-page section heading uses this instead of the vendor's
   bare 50px .welcome-one__title default -- matches the 40px scale already
   locked on contact.html/privacy-policy.html (--thm-heading-page-size).
   Applied directly on the heading element (class="welcome-one__title
   page-section-heading") rather than scoped by ancestor section class, so
   new pages don't require a new CSS selector every time. Home's own
   .welcome-one__title instances are untouched -- they never carry this
   class, by design; that page's headings stay at their existing size. */
.page-section-heading {
    font-size: var(--thm-heading-page-size);
    line-height: var(--thm-heading-page-line-height);
}

/* Lede -- plain body copy at full container width. No special narrow/
   centered treatment; an earlier version's max-width:760px + centered text
   was the same "narrow centered column" problem already fixed once on
   contact.html. */
.page-lede {
    font-size: 15px;
    line-height: 30px;
    color: var(--thm-color-text);
    text-align: center;
}

/* Stacked full-width prose section, alternating white/light backgrounds for
   rhythm down a long page. Body copy runs at full container width (col-12),
   matching the Tarvi intro section's own established pattern instead of an
   artificially narrowed column. */
.page-body {
    background-color: #fff;
    padding: 60px 0;
}

.page-body--alt {
    background-color: var(--thm-light);
}

/* Same tint recipe as .page-header__bg -- but that banner gets its final
   branded navy look from TWO layers together: the filter below AND a flat
   rgba(5, 39, 119, 0.2) overlay via .page-header::after. The filter alone
   just desaturates/blue-shifts a photo; the overlay is what pulls it to
   the actual navy cast. Reproduced here the same way, via ::after on this
   container, since an <img> can't take a background overlay directly. */
.page-split__img {
    position: relative;
    background: var(--thm-dark-blue);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 20px;
}
.page-split__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 39, 119, 0.2);
}
.page-split__img img {
    background-color: transparent;
    background-blend-mode: normal;
    filter: grayscale(1) sepia(0.15) hue-rotate(180deg) brightness(0.85) contrast(1.15);
    opacity: 1;
    width: 100%;
    display: block;
}

@media (max-width: 991px) {
    .page-split__img img {
        margin-bottom: 30px;
    }
}

.page-body p {
    font-size: 15px;
    line-height: 30px;
    color: var(--thm-color-text);
    margin-bottom: 20px;
}

/* Labeled bullet list ("Agent Name — does the thing") used inside a
   .page-body section for a worked example/breakdown. */
.page-agent-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0 0 0 20px;
}

.page-agent-list li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 30px;
    color: var(--thm-color-text);
    margin-bottom: 14px;
}

.page-agent-list li:last-child {
    margin-bottom: 0;
}

.page-agent-list li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--thm-cobalt-blue);
}

.page-agent-list strong {
    color: var(--thm-black);
}

/* Two side-by-side choice cards, each with its own CTA -- e.g. "Talk to
   Tarvi" vs. "Book the diagnostic directly." */
.page-choice {
    background-color: #fff;
    padding: 70px 0;
}

/* .page-body/.page-body--alt alternate white/light automatically as they
   repeat, but .page-choice always closes the page and is hardcoded white --
   on a page with an odd number of .page-body sections before it, that
   lands two white sections back to back with no visible boundary between
   them. Apply this modifier whenever the section directly above a
   .page-choice is already white. */
.page-choice--alt {
    background-color: var(--thm-light);
}

/* .page-choice__col defaults to the same light gray as .page-body--alt --
   fine against a white .page-choice section, but invisible (just its
   border) against .page-choice--alt's matching gray. Flip the cards to
   white so they still read as cards, not just an outline. */
.page-choice--alt .page-choice__col {
    background-color: #fff;
}

.page-choice__col {
    height: 100%;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #e6e9ef;
    background-color: var(--thm-light);
    margin-bottom: 24px;
    text-align: center;
}

.page-choice__col h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--thm-black);
    margin-bottom: 14px;
}

.page-choice__col p {
    font-size: 15px;
    line-height: 26px;
    color: var(--thm-color-text);
    margin-bottom: 24px;
}

/* Blockquote-style recognition list -- for genuinely quote-shaped content
   ("things you'd hear a client say"), distinct from a plain bulleted list. */
.page-quote-list {
    list-style: none;
    margin: 30px 0;
    padding: 0;
}

.page-quote-list li {
    position: relative;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--thm-cobalt-blue);
    font-size: 17px;
    font-style: italic;
    line-height: 1.6;
    color: var(--thm-black);
    margin-bottom: 16px;
    margin-left: 2em;
}

.page-quote-list li:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   HOW IT WORKS PAGE — /how-it-works.html.
   --------------------------------------------------------------------------- */

/* Spacing before the .two-boxes cards row -- the vendor's own .two-boxes
   .section-title has a margin-bottom:40px for this same purpose, but this
   page uses the shared eyebrow+heading pattern instead of .section-title. */
.how-it-works__phases-title {
    margin-bottom: 40px;
}

/* ---------------------------------------------------------------------------
   DIAGNOSTIC PAGE — /diagnostic, the $2,500 System Diagnostic product page.
   Sections below are specific to this page's own content (investment card,
   fit columns, About photo layout) -- the generic prose/heading pieces
   above are shared with every other interior page.
   --------------------------------------------------------------------------- */

.diagnostic-investment {
    background: linear-gradient(135deg, var(--thm-admentus-blue) 0%, var(--thm-dark-blue) 100%);
    padding: 70px 0;
}

.diagnostic-investment__card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

/* .welcome-one__eyebrow/.welcome-one__title default to cobalt/dark text,
   right for every other section on this page (light backgrounds) but
   invisible against this section's navy fill. */
.diagnostic-investment__eyebrow {
    color: var(--thm-powder-blue);
    text-align: center;
}

.diagnostic-investment__title {
    color: var(--thm-base);
    text-align: center;
    font-size: 56px;
    margin-bottom: 20px;
}

.diagnostic-investment__card p {
    color: var(--thm-powder-blue);
    font-size: 16px;
    line-height: 28px;
}

.diagnostic-fit {
    background-color: #fff;
    padding: 70px 0;
}

.diagnostic-fit .welcome-one__title {
    margin-bottom: 40px;
}

.diagnostic-fit__col {
    height: 100%;
    padding: 34px;
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid #e6e9ef;
}

.diagnostic-fit__col--yes {
    background-color: var(--thm-light);
}

.diagnostic-fit__col--no {
    background-color: #fff;
}

.diagnostic-fit__col h5 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--thm-black);
    margin-bottom: 16px;
}

.diagnostic-fit__col ul {
    margin: 0;
    padding-left: 20px;
}

.diagnostic-fit__col li {
    font-size: 15px;
    line-height: 26px;
    color: var(--thm-color-text);
    margin-bottom: 10px;
}

.diagnostic-fit__col li:last-child {
    margin-bottom: 0;
}

.diagnostic-fit__close {
    max-width: 700px;
    margin: 10px auto 0;
    text-align: center;
    font-size: 15px;
    font-style: italic;
    color: var(--thm-dark-gray);
}

.diagnostic-about {
    background-color: var(--thm-light);
    padding: 70px 0;
}

.diagnostic-about__img img {
    width: 100%;
    border-radius: 8px;
    display: block;
    margin: 20px auto;
}

.diagnostic-about p {
    font-size: 15px;
    line-height: 30px;
    color: var(--thm-color-text);
    margin-bottom: 16px;
}

.diagnostic-about p:last-child {
    margin-bottom: 0;
}

.diagnostic-faq {
    background-color: #fff;
    padding-top: 70px;
    padding-bottom: 70px;
}

.diagnostic-book {
    background-color: var(--thm-light);
    padding: 70px 0;
}

.diagnostic-book__head {
    max-width: 640px;
    margin: 0 auto 30px;
    text-align: center;
}

.diagnostic-book__say {
    font-size: 15px;
    color: var(--thm-color-text);
    margin-top: 12px;
}

.diagnostic-book .calendly-inline-widget {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    min-height: 700px;
}

.diagnostic-book__reassure {
    text-align: center;
    color: var(--thm-dark-gray);
    font-size: 14px;
    margin-top: 20px;
}

@media (max-width: 767px) {
    .page-body,
    .diagnostic-investment,
    .diagnostic-fit,
    .diagnostic-about,
    .diagnostic-faq,
    .diagnostic-book,
    .page-choice {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .diagnostic-about__img img {
        margin-bottom: 30px;
    }

    .diagnostic-book .calendly-inline-widget {
        min-height: 900px;
    }
}

/* ---------------------------------------------------------------------------
   HERO — matched to admentus.com (photo behind a navy overlay, tighter type).
   --------------------------------------------------------------------------- */

.main-slider {
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

/* Photo behind a navy overlay — gradient darker on the left (text side) so the
   headline stays readable and the subject stays visible on the right. */
.main-slider .image-layer {
    background-image: linear-gradient(to right, rgba(5, 39, 119, 0.90) 0%, rgba(5, 39, 119, 0.45) 50%, rgba(5, 39, 119, 0) 100%),
                      url(../images/hero-jeff.jpg) !important;
    background-blend-mode: normal !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Drop the template's decorative diagonal shapes — the live hero is a clean
   photo + overlay, no geometric overlays. */
.main-slider [class^="main-slider-shape"] {
    display: none;
}

/* Eyebrow / pre-header — semi-transparent box spanning the full content width
   (matches the live site). */
.main-slider__content .main-slider__eyebrow {
    display: block;
    background: rgba(0, 0, 0, 0.28);
    padding: 11px 25px;
    margin-bottom: 14px;
    margin-left: -25px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

/* Heading — 40px per the live site (was oversized). */
.main-slider__content h2 {
    font-size: 45px;
    line-height: 1.2em;
    letter-spacing: 1px;
    font-weight: 500;
    padding-top: 8px;
    margin-bottom: 16px;
}

/* Subhead — sentence case (not all-caps), Ghost White, readable. No box. */
.main-slider__content .main-slider__text {
    text-transform: none;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: normal;
    color: #e7ebf7;
    background: none;
    padding: 0;
    margin-bottom: 25px;
}

/* Fine-print line under the hero CTA (supports the button, like the live site). */
.main-slider__content .main-slider__finetext {
    display: block;
    margin-top: 18px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    letter-spacing: normal;
    color: #a1afe1;
    background: none;
    padding: 0;
}

/* Reliability — the template gates content behind WOW scroll animations that
   aren't firing here, leaving whole sections invisible. Content must never
   depend on JS to render, so show it always (drops the fade-in animations). */
.wow {
    visibility: visible !important;
    animation: none !important;
}

/* Buttons — match the live admentus.com CTA styling
   (cobalt bg via --thm-primary + Roboto 500 / 15px / uppercase / 5px radius). */
.thm-btn {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: normal;
    text-transform: uppercase;
    padding: 18px 50px;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

/* ---------------------------------------------------------------------------
   TARVI WELCOME
   --------------------------------------------------------------------------- */

/* Every "Start the conversation" CTA on the page (9 of them) jumps here via
   #tarvi. The sticky header is fixed/127px tall, so without this the anchor
   lands the heading half-hidden underneath it. */
#tarvi {
    scroll-margin-top: 140px;
}

.tarvi-panel-wrap {
    margin-top: 30px;
    margin-bottom: 50px;
}

/* ---------------------------------------------------------------------------
   TYPE SYSTEM — matched directly to the live admentus.com (confirmed via
   computed styles, 2026-08-06): H2 headings run 40px/900/uppercase Roboto
   Condensed; body copy is uniformly 15px/400 Roboto at 30px line-height;
   one accent style (26px/500 Roboto Condensed, Admentus Blue) is used
   sparingly for single emphasis lines — never for whole paragraphs. The
   template's own .welcome-one__title/__text/__text-two defaults (50px
   heading, 18px/26px body split across paragraphs) never matched this and
   is what created visibly inconsistent type within a single section.
   --------------------------------------------------------------------------- */

.tarvi-intro.welcome-one {
    background-color: var(--thm-light);
}

/**
.welcome-one__title {
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -1px;
}

.welcome-one__text,
.welcome-one__text-two {
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
    color: #828282;
}
**/

/* Accent — for a single emphasis line, not a paragraph style. Color assumes
   a light background; dark-panel contexts (e.g. the Tarvi widget) need a
   light override since Admentus Blue disappears on navy. */
/**
.welcome-one__text-accent {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
    color: #052777;
    margin: 0;
}
**/

/* ---------------------------------------------------------------------------
   REAL-WORLD (SECTION 3) — the template's own icon color (--thm-primary,
   #1338b3 at Admentus's brand value) reads too dark against the near-black
   cards to carry the section on its own — the original Aivons template
   compensated with a much brighter, off-brand blue (#3c72fc). Instead of
   brightening --thm-primary site-wide, icons sit on a navy->royal-blue
   gradient badge (both already-defined brand colors) so contrast comes from
   the badge shape, not a second blue. Background texture (real-world-shape.png,
   already in the repo, previously unused) is layered back in for depth.
   --------------------------------------------------------------------------- */

.real-world {
    overflow: hidden;
    background-color: var(--thm-admentus-blue);
}

.real-world__lead {
    margin: 16px auto 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #a8a6b8;
}

.real-world__single {
    height: 100%;
    background-color: var(--thm-dark-blue);
    border-radius: 12px;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.4);
}

.real-world__desc {
    font-size: var(--thm-typography-text-font-size);
    font-weight: var(--thm-typography-text-font-weight);
    line-height: var(--thm-typography-text-line-height);
    color: #a8a6b8;
    margin-bottom: 3em;
}

.real-world-shape {
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.10;
}

.real-world__icon-box {
    bottom: 54px;
    right: 54px;
}

.real-world__icon-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--thm-cobalt-blue) 0%, var(--thm-royal-blue) 100%);
    color: #fff;
    font-size: 34px;
    line-height: 1;
}

.real-world__single:hover {
    background-color: #06050c;
}

.real-world__single:hover .real-world__icon-box span {
    transform: scale(1.06);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   TWO-BOXES (SECTION 5) — extended from a 2-column "either door" layout to a
   3-step SB7 Plan (Talk to Tarvi -> Book the Diagnostic -> Unlock the
   constraint). Step 1 is the preferred/pre-selling path; the skip-ahead link
   on step 2 stays deliberately de-emphasized (plain text, not a button) so
   it doesn't compete with the step-1 CTA below the cards.
   --------------------------------------------------------------------------- */

.two-boxes {
    padding: 120px 0 90px;
}

.two-boxes .section-title {
    margin-bottom: 40px;
}

.two-boxes__single {
    height: 100%;
    padding: 60px 60px 52px
}

.two-boxes__single-content {
    padding-left: 0;
}

.two-boxes__content {
    margin-left: 0;
}

.two-boxes__count {
    position: relative;
    top: 0;
    margin: 0 auto 30px;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.two-boxes__title {
    text-align: center;
}

.two-boxes__link {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: var(--thm-dark-gray);
    text-decoration: underline;
}

.two-boxes__link:hover {
    color: var(--thm-cobalt-blue);
}

.two-boxes__footer {
    margin-top: 50px;
}

.two-boxes__footer-text {
    font-style: italic;
    font-size: 15px;
    color: var(--thm-dark-gray);
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   WELCOME-ONE IMG-2 (SECTION 7 foreground photo) — the template's own CSS
   never gives this a width, only __img-1 gets width:100%. That leaves the
   foreground photo rendering at its raw pixel size regardless of the
   column's actual width, which overflows on narrower viewports/columns.
   --------------------------------------------------------------------------- */
  
.welcome-one {
    background-color: var(--thm-light);
}

.welcome-one__img-1>img,
.welcome-one__img-2>img {
    mix-blend-mode: normal;
}

.welcome-one__img-2 {
    border-top: 20px solid var(--thm-light);
    border-left: 20px solid var(--thm-light);
}

.welcome-one__img-2 img {
    max-width: 100%;
    height: auto;
}

.welcome-one__title {
    text-align: center;
}

/* ---------------------------------------------------------------------------
   OUR-MISSION BG — using a pre-tinted image file directly, not a CSS blend.
   Two separate vendor rules force grayscale regardless of the source image:
   background-blend-mode:luminosity on the div itself, and a second filter:
   grayscale(100%) on the nested divs Jarallax.js generates for the scroll
   effect. Both need neutralizing or the pre-tinted file gets desaturated
   right back to gray.
   --------------------------------------------------------------------------- */

.our-mission-bg {
    background-blend-mode: normal;
}

.our-mission-bg.jarallax div div {
    -webkit-filter: none;
    filter: none;
}

/* ---------------------------------------------------------------------------
   FAQ (SECTION 8.5) — each answer closes with a soft nudge back to Tarvi,
   styled as a secondary link so it doesn't compete with the answer itself.
   --------------------------------------------------------------------------- */

.faq-one__left {
    padding-right: 30px;
}

.faq-one-accrodion .accrodion-content p {
    font-size: var(--thm-typography-primary-font-size);
    margin-bottom: 1.5em;
}

.faq-one-accrodion .accrodion-content p a {
    color: var(--thm-cobalt-blue);
    text-decoration: underline;
    font-style: italic;
}

.faq-one-accrodion .accrodion-content .faq-one__tarvi-link {
    font-style: italic;
    margin-bottom: 0;
}

.faq-one-accrodion .accrodion-content .faq-one__tarvi-link a:hover {
    color: var(--thm-royal-blue);
}

.faq-one__cta {
    margin-top: 2em;
    text-align: center;
}

.faq-one__cta-finetext {
    display: block;
    margin-top: 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: var(--thm-dark-gray);
    background: none;
    padding: 0;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   TESTIMONIALS — the decorative quote mark is absolutely positioned at a
   fixed bottom/right offset regardless of client-title length. Short titles
   ("Client") clear it; longer ones ("Founder & President, Clarity Connect,
   Inc.") wrap into its zone and get clipped behind it. Clearance matches the
   quote graphic's own footprint (99px wide + 50px right inset).
   --------------------------------------------------------------------------- */

.page-home .testimonials-one {
    padding-top: 0;
}

.testimonials-one .section-title__title {
    margin-top: 15px;
    font-size: 2.3em;
    line-height: 1.3em;
}

.testimonials-one__client-info {
    max-width: calc(100% - 90px);
}

.testimonials-one__single {
    min-height: 20em;
}

/* Owl Carousel's generic .owl-carousel .owl-item img { width:100% } rule
   outranks aivons.css's own .testimonials-one__client-img > img { width:77px }
   on specificity (two classes beats one), so once the carousel wraps each
   slide in .owl-item the avatar stretches to the photo's natural size. Never
   visible with the 77x77 placeholder (which happened to render ~77px anyway)
   -- only surfaced once real, larger client photos went in. */
.testimonials-one__carousel .testimonials-one__client-img img {
    width: 77px;
    height: 77px;
    object-fit: cover;
    filter: none;
}

/* ---------------------------------------------------------------------------
   SECTION 7 EYEBROW — signposts the voice switch from Tarvi (narrating in
   Sections 2-5) to Jeff speaking in his own first-person voice (Sections
   7-8). Same "small label above the headline" device as the hero eyebrow,
   adapted for a light background instead of a dark photo (no box needed,
   just a colored label).
   --------------------------------------------------------------------------- */

p.welcome-one__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: var(--thm-typography-text-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--thm-color-text);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   FOOTER REBUILD — 60/40 two-column (was 3 thin columns with no visual
   anchor). Logo centered/enlarged in the left column so it functions as the
   footer's focal point; CTA button repeated per StoryBrand's "repeat the
   Direct CTA down the page"; nav trimmed to a small curated row (not a full
   copy of the main nav) plus Privacy Policy; "Newsletter" label dropped
   (added no value); name fields added as optional personalization, not
   required for signup.
   --------------------------------------------------------------------------- */

.footer-widget__cta {
    display: block;
    width: fit-content;
    margin: 20px auto;
}

/* The vendor's contact-list is inline-block at this breakpoint, which put
   it floating beside the CTA button instead of stacked cleanly below it. */
.footer-widget__about--anchor .footer-widget__contact-list {
    border-top: none;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Vendor's .footer-widget__explore-list is float:left (shrink-to-fit width),
   which broke justify-content:center below since the flex container itself
   never spanned the column. */
.footer-widget__explore-list--inline {
    display: flex;
    float: none;
    width: 100%;
    justify-content: center;
    gap: 24px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

/* Vendor's li+li margin-top:4px was written for the original stacked list;
   in this flex row it pushes every item but the first 4px lower, misaligning
   "About" against "Contact"/"Privacy Policy". Selector matches the vendor
   rule's shape (two type selectors) to win on specificity, not just source order. */
.footer-widget__explore-list--inline li + li {
    margin-top: 0;
}

.footer-widget__explore-list--inline a {
    font-size: 14px;
    color: #8f8da0;
    transition: color 500ms ease;
}

.footer-widget__explore-list--inline a:hover {
    color: var(--thm-base);
}

.footer-widget__newsletter-heading {
    color: #8f8da0;
    font-size: 1.2em;
    font-weight: var(--thm-typography-accent-font-weight);
    line-height: var(--thm-typography-accent-line-height);
    text-align: center;
}

.footer-widget__newsletter-text {
    font-size: var(--thm-typography-text-font-size);
    text-align: center;
}

.footer-widget__newsletter-input-box input[type="text"],
.footer-widget__newsletter-input-box input[type="email"] {
    height: 55px;
    width: 100%;
    font-size: 14px;
    color: var(--thm-gray);
    font-weight: 500;
    padding-left: 30px;
    margin-bottom: 12px;
    background-color: #06050c;
    border: 1px solid rgba(255, 255, 255, .07);
}

/* The vendor button is absolutely positioned to float inside the email
   field -- a single-field layout. With three stacked fields now, it needs
   to be a normal block sitting below them instead. */
.footer-widget__newsletter-input-box .footer-widget__newsletter-btn {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    padding: 18px 20px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   ABOUT PAGE — /about.html, the founder narrative page.
   --------------------------------------------------------------------------- */

/* Label + sentence pairs (Section C "Operating beliefs", Section D "What
   it's like to work together") -- a 2x2 grid of parallel principles, not
   numbered steps like .two-boxes (which implies a sequence these aren't). */
.page-belief-grid {
    row-gap: 48px;
    margin-top: 8px;
}

.page-belief {
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--thm-cobalt-blue);
}

.page-belief h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--thm-black);
    margin-bottom: 12px;
}

.page-belief p {
    font-size: 15px;
    line-height: 27px;
    color: var(--thm-color-text);
    margin-bottom: 0;
}

/* Section E reuses the vendor's testimonials-one component verbatim as-is --
   its default var(--thm-light) background is correct here given the section
   order on this page (Section D directly above is white). No override
   needed; see the "no two adjacent sections share a color" rule this page's
   section order was built around. */

/* Section F "a personal note" -- the verse. Deliberately NOT the
   eyebrow+H2 pattern used elsewhere on this page; a quiet closing note
   that shouldn't compete visually with Sections A-D. White background:
   Section E (testimonials) directly above is var(--thm-light). */
.page-personal-note {
    position: relative;
    background-color: var(--thm-admentus-blue);
    overflow: hidden;
    padding: 60px 0;
    text-align: center;
}

.page-personal-note-shape {
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.10;
    position: absolute;
    top: 0;
    left: 0;
    width: 610px;
    height: 595px;
}

.page-personal-note p {
    max-width: 640px;
    margin: 0 auto;
    font-style: italic;
    line-height: 1.7;
    position: relative;
    color: var(--thm-ghost-white);
    display: inline-block;
    font-size: 18px;
    align-items: center;
}

.page-personal-note cite {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--thm-ghost-white);
}

/* ---------------------------------------------------------------------------
   MOBILE (matches the vendor's own 767px breakpoint in aivons-responsive.css)
   --------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    /* Hero h2 is a flat 45px with no responsive step-down of its own, so on a
       375px viewport it wraps to 4-5 lines and pushes the CTA off-screen. */
    .main-slider__content h2 {
        font-size: 30px;
        line-height: 1.3em;
    }

    /* The vendor's floating scroll-to-top button has no mobile sizing --
       at right:40px/bottom:40px on a narrow viewport it lands on top of
       body copy (and, worse, the FAQ accordion's toggle icon) instead of
       tucked into open corner space like it is on desktop. */
    .scroll-to-top {
        width: 36px;
        height: 36px;
        bottom: 16px;
        right: 16px;
    }

    .scroll-to-top i {
        line-height: 36px;
        font-size: 15px;
    }
}

/* --------------------------------------------------------------------------
   404 page
   The whole job of this page is getting someone back on track, so its recovery
   links have to read as links. Scoped to .page-404 on purpose: inline links in
   .page-body inherit the gray body-text color everywhere on the site, and
   changing that globally is a design decision across locked pages, not a fix
   that belongs to the 404 work.
   -------------------------------------------------------------------------- */
.page-404 .page-agent-list a {
    color: var(--thm-cobalt-blue);
    font-weight: 500;
}

.page-404 .page-agent-list a:hover,
.page-404 .page-agent-list a:focus {
    text-decoration: underline;
}