/* 1/5 variables: every token lives here. Responsive changes redeclare tokens
   inside the media queries at the bottom; components are not restyled. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }

:root {
	/* Colour */
	--c-primary: #153D3A;
	--c-accent: #C1F26E;
	--c-teal: #178F8A;
	--c-light-green: #85CD78;
	--c-bg: #F5F3ED;
	--c-white: #FFFFFF;
	--c-black: #000000;
	--c-body: #333333;
	--c-faq-title: #1F2124;
	--c-line: #E5E7EB;

	/* Service card palette (static fallback cards) */
	--c-svc-ink: #0E1726;
	--c-svc-green: #1A7F5A;
	--c-svc-text: #374151;
	--c-svc-muted: #9CA3AF;
	--c-svc-tint: #F0FAF5;
	--c-svc-mint: #D1FAE5;
	--c-whatsapp: #25D366;

	/* Gradients */
	--g-button: linear-gradient(208deg, #C1F26E 9%, #178F8A 79%);
	--g-video: linear-gradient(46deg, #178F8A 17%, #C1F26E 78%);
	--g-hero: radial-gradient(70% 90% at 62% 38%, #2F6F45 0%, #1D4F41 42%, #123936 100%);

	/* Type */
	--f-head: "Poppins", system-ui, sans-serif;
	--f-body: "Nunito", system-ui, sans-serif;
	--f-btn: "Roboto", system-ui, sans-serif;

	--fs-h1: 45px;          /* hero heading */
	--fs-hero-sub: 35px;    /* hero green line */
	--fs-hero-lead: 20px;
	--lh-hero-lead: 30px;
	--fs-h2: 45px;          /* section headings */
	--fs-video-title: 32px;
	--fs-body: 16px;
	--lh-body: 24px;
	--fs-copy: 16px;        /* about / video / faq body copy */
	--lh-copy: 1.5;
	--fs-nav: 16px;
	--fs-btn: 15px;
	--fs-faq-q: 16px;
	--fs-footer-line: 30px;
	--lh-footer-line: 45px;
	--fs-footer-nav: 14px;

	/* Layout */
	--container: 1300px;
	--container-narrow: 900px;
	--gutter: 10px;          /* page side padding */
	--gap: 20px;             /* standard gap between blocks */
	--section-y: 50px;       /* section top/bottom padding */
	--col-pad: 10px;         /* inner padding of two-column halves */

	--header-h: 131px;       /* logo 91 + 2 x 20. Must stay >= --logo-size + 20px */
	--logo-size: 91px;
	--logo-box: 168px;       /* logo sits centred in this width, as in the design */
	--nav-pad: 13px 20px;

	--hero-h: 514px;         /* must stay taller than --hero-img-w (portrait is ~1:1) */
	--hero-y: 30px;
	--hero-pad-left: 30px;
	--hero-img-w: 350px;

	--video-h: 338px;        /* 600 x 338 = 16:9 */
	--faq-list-w: 768px;
	--faq-gap: 24px;
	--faq-pad: 20px;

	--testi-cols: 4;         /* slides visible per row */
	--testi-speed: 40s;      /* one full loop of 5 slides */

	/* Radius */
	--r-card: 10px;
	--r-pill: 25px;
	--r-panel: 25px;
	--r-faq: 20px;
	--r-img: 16px;

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--t-fast: 0.2s;
	--t-reveal: 0.7s;

	--shadow-header: 0 10px 30px rgba(0, 0, 0, 0.08);
	--shadow-img: 0 4px 24px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
	:root {
		--fs-h1: 36px;
		--fs-hero-sub: 28px;
		--fs-hero-lead: 18px;
		--lh-hero-lead: 27px;
		--fs-h2: 36px;
		--fs-video-title: 28px;
		--fs-nav: 15px;
		--nav-pad: 13px 12px;
		--hero-img-w: 300px;
		--hero-h: 440px;     /* still taller than --hero-img-w */
		--testi-cols: 2;
		--fs-footer-line: 24px;
		--lh-footer-line: 36px;
	}
}

@media (max-width: 767px) {
	:root {
		--fs-h1: 25px;
		--fs-hero-sub: 18px;
		--fs-hero-lead: 16px;
		--lh-hero-lead: 24px;
		--fs-h2: 25px;
		--fs-video-title: 25px;
		--fs-copy: 14px;
		--lh-copy: 1.2;
		--fs-btn: 14px;
		--fs-faq-q: 14px;
		--fs-footer-line: 16px;
		--lh-footer-line: 24px;
		--header-h: 86px;    /* logo 65 + 2 x 10.5. Must stay >= --logo-size + 20px */
		--logo-size: 65px;
		--logo-box: 76px;
		--hero-y: 0px;
		--hero-pad-left: 0px;
		--hero-h: auto;
		--hero-img-w: 280px;
		--col-pad: 0px;
		--faq-pad: 15px;
		--faq-gap: 16px;
		--testi-cols: 1;
		--testi-speed: 30s;
	}
}