.elementor-kit-3{--e-global-color-primary:#1C4F31;--e-global-color-secondary:#0A1310;--e-global-color-text:#1F2A22;--e-global-color-accent:#C7A143;--e-global-color-24a6ee72:#F4F0E8;--e-global-color-0e105f2a:#E1D9C7;--e-global-color-d265db73:#4B5547;--e-global-color-cc265fb5:#5B7D4A;--e-global-color-9d4fd50d:#A48433;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:#1F2A22;font-family:"Inter", Sans-serif;font-size:17px;font-weight:400;line-height:1.65em;}.elementor-kit-3 a{color:#143A22;}.elementor-kit-3 a:hover{color:#1C4F31;}.elementor-kit-3 h1{color:#0A1310;font-family:"Archivo", Sans-serif;font-size:60px;font-weight:800;line-height:1.08em;letter-spacing:-0.5px;}.elementor-kit-3 h2{color:#0A1310;font-family:"Archivo", Sans-serif;font-size:44px;font-weight:800;line-height:1.08em;letter-spacing:-0.5px;}.elementor-kit-3 h3{color:#0A1310;font-family:"Archivo", Sans-serif;font-size:28px;font-weight:800;line-height:1.08em;letter-spacing:-0.5px;}.elementor-kit-3 h4{color:#0A1310;font-family:"Inter", Sans-serif;font-size:22px;font-weight:700;line-height:1.4em;}.elementor-kit-3 h5{color:#0A1310;font-family:"Inter", Sans-serif;font-size:18px;font-weight:700;line-height:1.4em;}.elementor-kit-3 h6{color:#0A1310;font-family:"Inter", Sans-serif;font-size:16px;font-weight:700;line-height:1.4em;}.elementor-kit-3 button,.elementor-kit-3 input[type="button"],.elementor-kit-3 input[type="submit"],.elementor-kit-3 .elementor-button{font-family:"Inter", Sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#FFFFFF;background-color:#1C4F31;border-radius:4px 4px 4px 4px;padding:16px 32px 16px 32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-3 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-3{font-size:16px;}.elementor-kit-3 h1{font-size:36px;}.elementor-kit-3 h2{font-size:26px;}.elementor-kit-3 h3{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

html { scroll-behavior: smooth; }
body {
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}

/* The global heading override defaults H1+H2+H3 to Archivo Black/800 with
   tight tracking — matches the data-product look and feel. Per-widget
   typography_font_family overrides still win. */

/* Header layout overrides (per playbook). Logo left, nav middle, CTA right. */
#site-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px;
    padding-left: 24px !important;
    padding-right: 24px !important;
    background: #FFFFFF;
    border-bottom: 1px solid #E1D9C7;
}
#site-header > * {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}
#site-header > .elementor-widget-button { margin-left: auto; }

@media (min-width: 1025px) {
    #site-header .elementor-nav-menu--main,
    #site-header .elementor-nav-menu--main ul.elementor-nav-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }
}

#site-header .elementor-nav-menu--main a {
    color: #0A1310 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
}
#site-header .elementor-nav-menu--main a:hover,
#site-header .elementor-nav-menu--main .current-menu-item > a {
    color: #1C4F31 !important;
}

/* Footer */
#site-footer { background: #0A1310; color: #FFFFFF; }
#site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
#site-footer a:hover { color: #C7A143; }

/* Mobile header pattern — logo | CTA | burger */
@media (max-width: 1024px) {
    #site-header {
        gap: 10px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    #site-header .elementor-widget-nav-menu { order: 3; flex: 0 0 auto !important; margin-left: 0 !important; }
    #site-header .elementor-widget-button { order: 2; margin-left: auto !important; }
    #site-header > .elementor-widget-image { order: 1; }

    #site-header .elementor-menu-toggle {
        color: #0A1310 !important;
        background: #0A1310 !important;
        border-radius: 8px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: none !important;
        transition: background 0.2s ease;
    }
    #site-header .elementor-menu-toggle i,
    #site-header .elementor-menu-toggle svg { color: #FFFFFF !important; fill: #FFFFFF !important; font-size: 18px !important; }
    #site-header .elementor-menu-toggle:hover,
    #site-header .elementor-menu-toggle.elementor-active {
        background: #1C4F31 !important;
    }

    #site-header .elementor-nav-menu--dropdown {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-top: 14px !important;
    }
}
@media (max-width: 720px) {
    #site-header > .elementor-widget-button .elementor-button {
        padding: 10px 16px !important;
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }
    #site-header { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
    #site-header > .elementor-widget-image img { max-width: 52px !important; height: auto !important; }
    #site-header .elementor-menu-toggle { width: 40px !important; height: 40px !important; }
}

/* Sample report tables on the Sample page: keep them inside the frame on mobile */
.ph-sample__body table,
.ph-viewer__inner table {
    font-size: 13px !important;
    word-break: break-word;
}
@media (max-width: 720px) {
    .ph-sample__body table,
    .ph-viewer__inner table {
        font-size: 12px !important;
    }
    .ph-sample__body table th,
    .ph-sample__body table td,
    .ph-viewer__inner table th,
    .ph-viewer__inner table td {
        padding: 6px 4px !important;
    }
}

/* Constrain section content padding on mobile so 100%-width containers
   never push past the viewport. */
@media (max-width: 768px) {
    .elementor-element { max-width: 100%; }
    .elementor-widget img { max-width: 100% !important; height: auto !important; }
    .elementor-widget-html { max-width: 100% !important; }
    .elementor-widget-html * { max-width: 100% !important; }
}

/* Better-looking form inputs */
.elementor-field-group select,
.elementor-field-group textarea,
.elementor-field-group input[type=text],
.elementor-field-group input[type=email],
.elementor-field-group input[type=tel] {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
}

/* Hero viewer: stack columns on tablet/mobile so the report frame never
   overflows. Hero copy first, then the viewer. */
@media (max-width: 1024px) {
    #home-hero .elementor-container,
    #home-hero .e-con-inner {
        flex-direction: column !important;
    }
    #home-hero .e-con-inner > .e-con,
    #home-hero .e-con-inner > .elementor-element {
        width: 100% !important;
    }
}

/* =====================================================================
 * Home hero background graphic: a layered 'data field' aesthetic — base
 * deep-green wash, gold radial warm spots, faint dot grid for data
 * points, topographic contour lines (nod to OH/MI map coverage), and a
 * subtle ascending chart polyline anchored to the lower-left to suggest
 * price movement. Intentionally distinct from tagestry's screenshot
 * tile-strip pattern.
 * =================================================================== */
#home-hero {
    background:
        radial-gradient(ellipse 720px 480px at 88% 18%, rgba(199,161,67,0.18) 0%, rgba(199,161,67,0) 65%),
        radial-gradient(ellipse 640px 420px at 4% 92%, rgba(91,125,74,0.18) 0%, rgba(91,125,74,0) 70%),
        linear-gradient(180deg, #0A1310 0%, #102619 55%, #143A22 100%) !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Dot grid + topographic contours layered behind content. */
#home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(199,161,67,0.18) 1px, transparent 1.5px),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 720' preserveAspectRatio='none'><g fill='none' stroke='%23C7A143' stroke-width='1.1' opacity='0.10' stroke-linecap='round'><path d='M-50,640 C200,600 400,620 720,580 C1000,550 1200,580 1490,540'/><path d='M-50,560 C200,520 400,540 720,500 C1000,470 1200,500 1490,460'/><path d='M-50,480 C200,440 400,460 720,420 C1000,390 1200,420 1490,380'/><path d='M-50,400 C200,360 400,380 720,340 C1000,310 1200,340 1490,300'/><path d='M-50,320 C200,280 400,300 720,260 C1000,230 1200,260 1490,220'/><path d='M-50,240 C200,200 400,220 720,180 C1000,150 1200,180 1490,140'/><path d='M-50,160 C200,120 400,140 720,100 C1000,70 1200,100 1490,60'/></g></svg>");
    background-size: 28px 28px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: repeat, no-repeat;
    opacity: 1;
}
/* Ascending chart-line motif + subtle vignette mask. */
#home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 720' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%23C7A143' stop-opacity='0'/><stop offset='0.2' stop-color='%23C7A143' stop-opacity='0.55'/><stop offset='1' stop-color='%23C7A143' stop-opacity='0.95'/></linearGradient><linearGradient id='gf' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23C7A143' stop-opacity='0.18'/><stop offset='1' stop-color='%23C7A143' stop-opacity='0'/></linearGradient></defs><path d='M0,680 L60,650 L120,665 L180,610 L240,628 L300,560 L360,590 L420,520 L480,540 L540,470 L600,495 L660,420 L720,455 L780,380 L840,395 L900,330 L960,355 L1020,290 L1080,310 L1140,250 L1200,275 L1260,210 L1320,235 L1380,170 L1440,140 L1440,720 L0,720 Z' fill='url(%23gf)'/><path d='M0,680 L60,650 L120,665 L180,610 L240,628 L300,560 L360,590 L420,520 L480,540 L540,470 L600,495 L660,420 L720,455 L780,380 L840,395 L900,330 L960,355 L1020,290 L1080,310 L1140,250 L1200,275 L1260,210 L1320,235 L1380,170 L1440,140' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round' opacity='0.7'/><circle cx='540' cy='470' r='4' fill='%23C7A143' opacity='0.85'/><circle cx='840' cy='395' r='4' fill='%23C7A143' opacity='0.85'/><circle cx='1140' cy='250' r='4' fill='%23C7A143' opacity='0.85'/></svg>"),
        radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
    background-size: 100% 100%, 100% 100%;
    background-position: bottom left, center;
    background-repeat: no-repeat, no-repeat;
    opacity: 1;
}
/* Lift hero content above the background layers. */
#home-hero > .e-con-inner,
#home-hero .e-con-inner {
    position: relative;
    z-index: 1;
}

/* Tablet (<=1024): the topographic contours SVG is drawn for a 1440x720
   viewBox with preserveAspectRatio='none', so at narrower widths it
   squishes badly. Scale it 2x and let the right edge clip. Also drop
   the chart line opacity since it competes with the stacked hero copy. */
@media (max-width: 1024px) {
    #home-hero::before {
        background-size: 24px 24px, 200% 100%;
        background-position: 0 0, left bottom;
    }
    #home-hero::after {
        background-size: 200% 100%, 100% 100%;
        background-position: left bottom, center;
        opacity: 0.5;
    }
}

/* Mobile (<=767): drop both SVG layers entirely. They were drawn for
   wide viewBoxes and either look stretched (topographic) or get lost at
   the bottom of the fold (chart line). Keep just the radial gold/leaf
   glows + dot grid + a single subtle vignette for texture. */
@media (max-width: 767px) {
    #home-hero {
        background:
            radial-gradient(ellipse 420px 320px at 90% 12%, rgba(199,161,67,0.22) 0%, rgba(199,161,67,0) 70%),
            radial-gradient(ellipse 380px 300px at 0% 95%, rgba(91,125,74,0.20) 0%, rgba(91,125,74,0) 75%),
            linear-gradient(180deg, #0A1310 0%, #102619 60%, #143A22 100%) !important;
    }
    #home-hero::before {
        background-image:
            radial-gradient(circle at 1px 1px, rgba(199,161,67,0.22) 1px, transparent 1.5px);
        background-size: 22px 22px;
        background-position: 0 0;
        background-repeat: repeat;
        opacity: 1;
    }
    #home-hero::after {
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'><defs><linearGradient id='gA' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%23C7A143' stop-opacity='0'/><stop offset='0.25' stop-color='%23C7A143' stop-opacity='0.55'/><stop offset='1' stop-color='%23C7A143' stop-opacity='0.95'/></linearGradient><linearGradient id='gB' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%235B7D4A' stop-opacity='0'/><stop offset='0.4' stop-color='%235B7D4A' stop-opacity='0.45'/><stop offset='1' stop-color='%235B7D4A' stop-opacity='0.7'/></linearGradient></defs><path d='M-20,150 L40,138 L80,144 L120,116 L160,126 L200,98 L240,108 L280,82 L320,90 L360,66 L420,60' fill='none' stroke='%23C7A143' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.14'/><path d='M-20,310 L40,300 L80,308 L120,278 L160,290 L200,262 L240,276 L280,246 L320,260 L360,230 L420,240' fill='none' stroke='%23C7A143' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.22'/><path d='M-20,510 L40,486 L80,496 L120,460 L160,476 L200,436 L240,456 L280,412 L320,430 L360,390 L420,372' fill='none' stroke='url(%23gA)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'/><path d='M-20,650 L40,634 L80,642 L120,612 L160,624 L200,598 L240,608 L280,580 L320,590 L360,562 L420,554' fill='none' stroke='url(%23gB)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'/><path d='M-20,770 L40,758 L80,764 L120,738 L160,748 L200,724 L240,734 L280,708 L320,718 L360,690 L420,696' fill='none' stroke='%23C7A143' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.16'/><circle cx='200' cy='436' r='3' fill='%23C7A143' opacity='0.9'/><circle cx='280' cy='412' r='3' fill='%23C7A143' opacity='0.9'/><circle cx='360' cy='390' r='3' fill='%23C7A143' opacity='0.9'/></svg>"),
            radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.30) 100%);
        background-size: 100% 100%, 100% 100%;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
        opacity: 1;
    }
}

/* Report viewer hardening — keep all inline-styled inner content from
   pushing the document scrollWidth past the viewport. */
.ph-viewer, .ph-sample { max-width: 100%; }
.ph-viewer__stage, .ph-viewer__inner, .ph-sample__body {
    max-width: 100% !important;
    box-sizing: border-box;
}
.ph-viewer__inner *, .ph-sample__body * {
    max-width: 100% !important;
    box-sizing: border-box;
}
.ph-viewer__inner table, .ph-sample__body table {
    table-layout: fixed;
    word-break: break-word;
}

/* Mobile/tablet: hide ONLY the horizontal desktop nav so its bbox does
   not push past the viewport. The mobile dropdown panel
   (.elementor-nav-menu--dropdown) must remain free to expand when the
   burger toggle opens it. */
@media (max-width: 1024px) {
    #site-header .elementor-nav-menu--main.elementor-nav-menu--layout-horizontal,
    #site-header nav.elementor-nav-menu--layout-horizontal {
        display: none !important;
    }
}

/* Platform grid: ensure 3-up on desktop, 2-up on tablet, 1-up on phone. */
.hp-platform-grid {
    flex-wrap: wrap !important;
}
.hp-platform-grid > * {
    flex: 1 1 calc(33.333% - 12px) !important;
    min-width: 200px;
}
@media (max-width: 768px) {
    .hp-platform-grid > * { flex: 1 1 calc(50% - 8px) !important; }
}
@media (max-width: 480px) {
    .hp-platform-grid > * { flex: 1 1 100% !important; }
}

/* On tablet/mobile, every container that had width_pct on desktop should
   stretch to full width. Elementor preserves the inline width:50% / 33%
   below the breakpoint, which causes overflow when nested grids inside
   are still rendered with the desktop column count. Force 100% widths. */
@media (max-width: 1024px) {
    .elementor .e-con > .e-con-inner > .e-con,
    .elementor .e-con > .e-con-inner > .e-con-full,
    .elementor .e-con-inner > .e-con,
    .elementor .e-con-inner > .e-con-full {
        width: 100% !important;
    }
}

/* Final-CTA button: full-width and breakable on tiny phones so long
   email-link buttons cannot overflow the viewport. */
@media (max-width: 420px) {
    .elementor-widget-button .elementor-button {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
    .elementor-widget-button .elementor-button-text {
        white-space: normal;
        word-break: break-word;
    }
}

/* Icon-list text: break long emails / URLs anywhere. Prevents the
   footer email link 'sales@kawaconnect.com' and similar from pushing
   the document scrollWidth past the viewport. */
.elementor-icon-list-text {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}
.elementor-icon-list-item {
    min-width: 0;
}/* End custom CSS */