/* ==========================================================================
   Astra Child – Construction  |  custom.css
   Sections: 1 Tokens · 2 Typography · 3 Header · 4 Hero slider · 5 Layout
             6 Buttons · 7 Cards · 8 How We Work · 9 Stats · 10 Forms · 11 Footer
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--cs-ink: #0C2340;
	--cs-ink-soft: #163559;
	--cs-slate: #2B3A4A;
	--cs-concrete: #ECEEF0;
	--cs-line: #D5DADF;
	--cs-yellow: #F5B800;
	--cs-yellow-dk: #D99E00;
	--cs-text: #1D2A38;
	--cs-font: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
	--cs-gutter: clamp(20px, 5vw, 64px);
	--cs-header-h: 84px;
	--cs-delay: 7s;
}

/* 2. Typography – one family everywhere ------------------------------------ */
body,
body :where(p, span, a, li, h1, h2, h3, h4, h5, h6, button, input, textarea, select, label, div, td, th):not([class*="fa-"]):not([class*="eicon"]) {
	font-family: var(--cs-font) !important;
}
body { color: var(--cs-text); font-size: 17px; line-height: 1.65; background: #fff; }
h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; color: var(--cs-ink); }
h1, h1.elementor-heading-title { font-size: clamp(2.3rem, 5vw, 4rem); }
h2, h2.elementor-heading-title { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
h3, h3.elementor-heading-title { font-size: clamp(1.2rem, 1.8vw, 1.4rem); }
.elementor-widget-text-editor { font-size: 1.0625rem; line-height: 1.7; }
.elementor-widget-text-editor p { max-width: 68ch; }
a { transition: color .2s ease; }

/* Astra page chrome off for Elementor pages */
.ast-page-builder-template .site-content > .ast-container { max-width: 100% !important; padding: 0 !important; }
.ast-page-builder-template .entry-header { display: none; }

/* 3. Header: fixed + transparent, solid after scroll (Astra Pro features, done free) */
#masthead { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 9999; transition: background-color .3s ease, box-shadow .3s ease; }
body.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar #masthead { top: 46px; } }
#masthead .main-header-bar,
#masthead .ast-primary-header-bar,
#masthead .ast-above-header-bar,
#masthead .ast-below-header-bar,
#masthead .ast-mobile-header-wrap .main-header-bar {
	background: transparent !important; border: 0 !important; box-shadow: none !important; transition: background-color .3s ease;
}
#masthead .main-header-bar { min-height: var(--cs-header-h); }
#masthead.cs-scrolled .main-header-bar,
#masthead.cs-scrolled .ast-primary-header-bar {
	background: rgba(12, 35, 64, .96) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ast-main-header-nav-open #masthead .main-header-bar { background: var(--cs-ink) !important; }
#masthead .site-title a, #masthead .site-description { color: #fff !important; font-weight: 700; }
#masthead .site-logo-img img, #masthead .custom-logo { max-height: 48px; width: auto; }
#masthead .menu-link, #masthead .ast-builder-menu .menu-item > .menu-link {
	color: #fff !important; font-weight: 500; font-size: .98rem; letter-spacing: .01em;
}
#masthead .menu-item:hover > .menu-link,
#masthead .current-menu-item > .menu-link,
#masthead .current-menu-ancestor > .menu-link { color: var(--cs-yellow) !important; }
#masthead .sub-menu { background: var(--cs-ink) !important; border: 0 !important; border-top: 3px solid var(--cs-yellow) !important; min-width: 260px; }
#masthead .sub-menu .menu-link { border: 0 !important; padding: 12px 20px; }
#masthead .menu-toggle, #masthead .ast-mobile-menu-buttons .menu-toggle { color: #fff !important; }
#masthead .ast-mobile-svg { fill: #fff !important; }
.ast-mobile-header-content, .ast-mobile-popup-drawer .ast-mobile-popup-inner { background: var(--cs-ink) !important; }
.ast-mobile-header-content .menu-link { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
#masthead .main-header-bar-navigation .menu-item .ast-menu-toggle { color: #fff; }

/* 4. Hero slider ------------------------------------------------------------ */
.cs-hero { position: relative; width: 100%; height: 100vh; height: 100svh; max-height: 1100px; min-height: 0; padding: 0 !important; overflow: hidden; background: var(--cs-ink); --padding-top: 0px; --padding-bottom: 0px; }
.cs-hero > .e-con-inner { height: 100%; max-width: none; padding: 0; }
.cs-slide { position: absolute !important; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
	padding: calc(var(--cs-header-h) + 24px) var(--cs-gutter) 132px !important; }
.cs-slide::before { content: ''; position: absolute; inset: -4%; background-size: cover; background-position: center; z-index: 0; transform: scale(1.02); }
.cs-slide::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12,35,64,.86) 0%, rgba(12,35,64,.55) 48%, rgba(12,35,64,.12) 100%), linear-gradient(0deg, rgba(12,35,64,.7) 0%, rgba(12,35,64,0) 38%); }
.cs-slide--1::before { background-image: url(../img/hero-1.svg); }
.cs-slide--2::before { background-image: url(../img/hero-2.svg); }
.cs-slide--3::before { background-image: url(../img/hero-3.svg); }
.cs-slide > .e-con-inner, .cs-slide > .elementor-widget { position: relative; z-index: 2; }
.cs-slide .elementor-heading-title { color: #fff; font-size: clamp(2.2rem, 6.2vw, 5.1rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; }
.cs-slide .elementor-widget-text-editor, .cs-slide .elementor-widget-text-editor p { color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 52ch; }
.cs-slide .cs-slide__actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

/* JS-driven behaviour (without JS the first slide simply shows) */
.cs-hero:not(.cs-js) .cs-slide:not(:first-child) { display: none !important; }
.cs-hero.cs-js .cs-slide { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.cs-hero.cs-js .cs-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.cs-hero.cs-js .cs-slide.is-active::before { animation: cs-zoom 12s ease-out forwards; }
.cs-hero.cs-js .cs-slide.is-active .elementor-widget,
.cs-hero.cs-js .cs-slide.is-active .cs-slide__actions { animation: cs-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.cs-hero.cs-js .cs-slide.is-active .elementor-widget:nth-child(2) { animation-delay: .12s; }
.cs-hero.cs-js .cs-slide.is-active .cs-slide__actions { animation-delay: .24s; }
@keyframes cs-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes cs-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Controls: lines + arrows, pinned to the bottom of the viewport-height hero */
.cs-hero__ui { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: clamp(16px, 4vw, 48px);
	padding: 0 var(--cs-gutter) calc(28px + env(safe-area-inset-bottom, 0px)); }
.cs-hero__lines { display: flex; flex: 1; gap: 10px; max-width: 640px; }
.cs-hero__line { flex: 1; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.cs-hero__line::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: rgba(255,255,255,.35); }
.cs-hero__line i { position: absolute; left: 0; top: 12px; height: 4px; width: 0; background: var(--cs-yellow); }
.cs-hero__line.is-active i { animation: cs-fill var(--cs-delay) linear forwards; }
.cs-hero__line.is-done i { width: 100%; }
.cs-hero.is-paused .cs-hero__line.is-active i { animation-play-state: paused; }
@keyframes cs-fill { from { width: 0; } to { width: 100%; } }
.cs-hero__arrows { display: flex; gap: 10px; margin-left: auto; }
.cs-hero__arrow { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(12,35,64,.35); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .2s, color .2s, border-color .2s; }
.cs-hero__arrow:hover, .cs-hero__arrow:focus-visible { background: var(--cs-yellow); border-color: var(--cs-yellow); color: var(--cs-ink); }
.cs-hero__arrow svg { width: 20px; height: 20px; }
.cs-hero button:focus-visible, .cs-btn a:focus-visible { outline: 3px solid var(--cs-yellow); outline-offset: 3px; }

/* Short screens (phones in landscape): everything must fit without scrolling */
@media (max-height: 560px) {
	.cs-slide { padding-top: 64px !important; padding-bottom: 84px !important; }
	.cs-slide .elementor-heading-title { font-size: clamp(1.5rem, 5vw, 2.3rem); }
	.cs-slide .elementor-widget-text-editor { display: none; }
	.cs-hero__ui { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
	.cs-hero__arrow { width: 40px; height: 40px; }
	:root { --cs-header-h: 60px; }
}
@media (max-width: 480px) {
	.cs-hero__arrow { width: 42px; height: 42px; }
	.cs-slide { padding-bottom: 116px !important; }
}
/* In the Elementor editor, show every slide stacked so each can be edited */
body.elementor-editor-active .cs-hero { height: auto; max-height: none; }
body.elementor-editor-active .cs-slide { position: relative !important; opacity: 1 !important; visibility: visible !important; min-height: 420px; }
body.elementor-editor-active .cs-hero:not(.cs-js) .cs-slide:not(:first-child) { display: flex !important; }

/* 5. Layout ------------------------------------------------------------------ */
.cs-section { padding-top: clamp(56px, 8vw, 112px) !important; padding-bottom: clamp(56px, 8vw, 112px) !important; }
.cs-band { background: var(--cs-concrete); }
.cs-dark { background: var(--cs-ink); }
.cs-dark .elementor-heading-title, .cs-dark h2, .cs-dark h3 { color: #fff; }
.cs-dark .elementor-widget-text-editor, .cs-dark p { color: rgba(255,255,255,.82); }
.cs-page-hero { background: linear-gradient(135deg, var(--cs-ink) 0%, var(--cs-ink-soft) 100%); padding-top: calc(var(--cs-header-h) + 72px) !important; padding-bottom: 72px !important; }
.cs-page-hero .elementor-heading-title { color: #fff; }
.cs-page-hero .elementor-widget-text-editor, .cs-page-hero p { color: rgba(255,255,255,.85); font-size: 1.2rem; }
.cs-cta { padding-top: 72px !important; padding-bottom: 72px !important; }
.cs-lead .elementor-widget-text-editor { font-size: 1.2rem; }
.cs-media img { width: 100%; height: auto; display: block; border-radius: 2px; }

/* 6. Buttons ----------------------------------------------------------------- */
.cs-btn .elementor-button { background: var(--cs-yellow); color: var(--cs-ink); border-radius: 2px; padding: 16px 30px; font-weight: 600; font-size: 1rem; line-height: 1; border: 2px solid var(--cs-yellow); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.cs-btn .elementor-button:hover { background: #fff; border-color: #fff; color: var(--cs-ink); transform: translateY(-2px); }
.cs-btn--outline .elementor-button { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.cs-btn--outline .elementor-button:hover { background: var(--cs-yellow); border-color: var(--cs-yellow); color: var(--cs-ink); }
.cs-btn--ink .elementor-button { background: var(--cs-ink); border-color: var(--cs-ink); color: #fff; }
.cs-btn--ink .elementor-button:hover { background: var(--cs-yellow); border-color: var(--cs-yellow); color: var(--cs-ink); }

/* 7. Cards ------------------------------------------------------------------- */
.cs-card { background: #fff; border: 1px solid var(--cs-line); border-bottom: 4px solid var(--cs-line); transition: border-color .25s, transform .25s; overflow: hidden; }
.cs-card:hover { border-bottom-color: var(--cs-yellow); transform: translateY(-4px); }
.cs-card .elementor-image-box-img img { width: 100%; height: auto; display: block; }
.cs-card .elementor-image-box-content { padding: 24px 24px 28px; }
.cs-card .elementor-image-box-title { margin: 0 0 8px; font-size: 1.3rem; }
.cs-card .elementor-image-box-title a { color: var(--cs-ink); }
.cs-card .elementor-image-box-title a:hover { color: var(--cs-yellow-dk); }
.cs-card .elementor-image-box-description { margin: 0; color: #4A5868; font-size: 1rem; }
.cs-icon .elementor-icon-box-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
.cs-icon .elementor-icon { background: var(--cs-ink); color: var(--cs-yellow); width: 56px; height: 56px; display: grid; place-items: center; font-size: 24px; border-radius: 2px; }
.cs-icon .elementor-icon svg { fill: var(--cs-yellow); width: 24px; height: 24px; }
.cs-icon .elementor-icon-box-title { margin: 0 0 6px; font-size: 1.25rem; }
.cs-icon .elementor-icon-box-description { margin: 0; color: #4A5868; }
.cs-ticks .elementor-icon-list-icon i { color: var(--cs-yellow-dk); }
.cs-ticks .elementor-icon-list-text { font-size: 1.05rem; }
.elementor-widget-testimonial .elementor-testimonial-content { font-size: 1.3rem; line-height: 1.55; color: var(--cs-ink); }
.elementor-widget-testimonial .elementor-testimonial-name { font-weight: 700; }

/* 8. How We Work – numbered, joined steps ---------------------------------- */
.cs-steps { counter-reset: cs-step; }
.cs-step { counter-increment: cs-step; position: relative; padding-top: 72px !important; }
.cs-step::before { content: counter(cs-step); position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--cs-yellow); color: var(--cs-ink); font-weight: 700; font-size: 1.15rem; display: grid; place-items: center; z-index: 2; font-family: var(--cs-font); }
.cs-step:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: 60px; right: -8px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 8px, transparent 8px 14px); }
.cs-step .elementor-heading-title { font-size: 1.3rem; margin-bottom: 4px; }
.cs-step .elementor-widget-text-editor, .cs-step p { font-size: 1rem; color: rgba(255,255,255,.8); }
@media (max-width: 1024px) {
	.cs-step:not(:last-child)::after { display: none; }
}
@media (max-width: 767px) {
	.cs-step { padding-top: 0 !important; padding-left: 72px !important; min-height: 72px; }
	.cs-step:not(:last-child)::after { display: block; top: 52px; bottom: -28px; left: 23px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 8px, transparent 8px 14px); }
}

/* 9. Stats ------------------------------------------------------------------- */
.cs-stats .elementor-counter-number-wrapper { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 700; color: var(--cs-yellow); line-height: 1; }
.cs-stats .elementor-counter-title { color: rgba(255,255,255,.85); font-size: 1.05rem; margin-top: 8px; }
.cs-stats .elementor-counter { text-align: left; }

/* 10. Forms (Fluent Forms) ---------------------------------------------------- */
.fluentform .ff-el-form-control { border: 1px solid #B9C1CA; border-radius: 2px; padding: 14px 16px; font-size: 1rem; background: #fff; }
.fluentform .ff-el-form-control:focus { border-color: var(--cs-ink); box-shadow: 0 0 0 3px rgba(245,184,0,.45); outline: 0; }
.fluentform .ff-el-input--label label { font-weight: 600; color: var(--cs-ink); }
.fluentform .ff-btn-submit { background: var(--cs-yellow) !important; color: var(--cs-ink) !important; border-radius: 2px; font-weight: 600; padding: 16px 32px; border: 0; }
.fluentform .ff-btn-submit:hover { background: var(--cs-ink) !important; color: #fff !important; }

/* 11. Footer ------------------------------------------------------------------ */
.cs-footer-social { background: var(--cs-ink-soft); border-top: 4px solid var(--cs-yellow); }
.cs-footer-social__inner { max-width: 1240px; margin: 0 auto; padding: 22px var(--cs-gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cs-footer-social__label { color: #fff; font-weight: 600; font-size: 1.05rem; }
.cs-social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.cs-social a { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); display: grid; place-items: center; color: #fff; transition: background .2s, color .2s, border-color .2s; }
.cs-social a:hover, .cs-social a:focus-visible { background: var(--cs-yellow); border-color: var(--cs-yellow); color: var(--cs-ink); }
.site-footer, .site-footer .ast-builder-grid-row, .site-footer .site-primary-footer-wrap, .site-footer .site-below-footer-wrap { background: var(--cs-ink) !important; color: rgba(255,255,255,.8); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--cs-yellow); }
.site-footer .widget-title, .site-footer h2, .site-footer h3 { color: #fff; }
.site-below-footer-wrap { border-top: 1px solid rgba(255,255,255,.12) !important; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
	.cs-hero.cs-js .cs-slide, .cs-hero.cs-js .cs-slide.is-active { transition: none; }
	.cs-hero.cs-js .cs-slide.is-active::before, .cs-hero.cs-js .cs-slide.is-active .elementor-widget, .cs-hero.cs-js .cs-slide.is-active .cs-slide__actions, .cs-hero__line.is-active i { animation: none; }
	.cs-hero__line.is-active i { width: 100%; }
	.cs-btn .elementor-button:hover, .cs-card:hover { transform: none; }
}