/* ==========================================================================
   variables.css — every token lives here. Responsive overrides redeclare
   tokens inside media queries; components are never restyled per breakpoint.
   ========================================================================== */
:root {
	/* Brand */
	--c-brand:   #7458D7;
	--c-brand-2: #5F44C2;   /* hover */
	--c-ink:     #2F2F2F;
	--c-surface: #F3F3F3;
	--c-white:   #FFFFFF;
	--c-tint:    #EFE9FC;
	--c-forest:  #0A211F;
	--c-line:    #DFDFDF;
	--c-muted:   #8D8D8D;

	/* Pastels (stats, cards, numerals) */
	--c-pink:   #F1B1E0;
	--c-yellow: #F4DE78;
	--c-blue:   #BCC9EB;
	--c-green:  #D3E1A9;
	--c-lilac:  #EFE9FC;
	--c-cream:  #FAF2E7;
	--c-dash:   #828282;   /* dashed frames and the hand-drawn arrows */
	--c-orange: #FFAC4B;
	--c-pink-2: #EFB6E3;

	/* Type */
	--f-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
	--f-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

	--fs-hero:   clamp(2.5rem, 3.7vw, 4rem);      /* 64 */
	--fs-h2:     clamp(2.25rem, 3.7vw, 4rem);     /* 64 */
	--fs-h3:     clamp(1.75rem, 2.8vw, 3rem);     /* 48 */
	--fs-band:   clamp(1.5rem, 2.3vw, 2.5rem);    /* 40 */
	--fs-card:   clamp(1.5rem, 1.85vw, 2rem);     /* 32 */
	--fs-lead:   clamp(1.25rem, 1.85vw, 2rem);    /* 32 Lato */
	--fs-kicker: clamp(1.25rem, 1.85vw, 2rem);
	--fs-body-l: clamp(1.125rem, 1.4vw, 1.5rem);  /* 24 */
	--fs-body:   1.125rem;                        /* 18 */
	--fs-small:  0.95rem;
	--fs-stat:   clamp(3.5rem, 5.5vw, 6rem);      /* 96 */
	--fs-digit:  clamp(6rem, 11.5vw, 12.5rem);    /* 200 */
	--fs-footer: clamp(2.5rem, 4.75vw, 5.125rem); /* 82 */

	--lh-tight: 1.05;
	--lh-head:  1.2;
	--lh-hero:  1.29;
	--lh-body:  1.45;

	/* Spacing scale */
	--s-1: 0.5rem;
	--s-2: 1rem;
	--s-3: 1.5rem;
	--s-4: 2rem;
	--s-5: 3rem;
	--s-6: 4.5rem;
	--s-7: 6rem;
	--s-8: 8rem;

	--section-pad: clamp(4rem, 7vw, 7.5rem);
	--gutter: clamp(1.25rem, 4vw, 4.375rem);   /* 70 at 1728 */
	--container: 1728px;
	--container-narrow: 900px;

	/* Radii */
	--r-sm: 10px;
	--r-md: 20px;
	--r-lg: 40px;
	--r-pill: 999px;

	/* Layout heights */
	--header-h: 61px;
	--header-top: 59px;        /* Figma: nav pill Y=59 */
	--nav-pill-h: 61px;        /* must be >= .nav__link height + padding */
	--hero-min-h: 100svh;

	/* Motion */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
	--dur-fast: .25s;
	--dur: .6s;
	--dur-slow: 1s;

	/* Cards */
	--card-bar-h: 73px;
	--stat-h: 209px;
	--brand-tile-h: 250px;
	--case-card-h: 516px;
	--service-tall-h: 882px;
}

@media (max-width: 1280px) {
	:root {
		--service-tall-h: 720px;
		--case-card-h: 460px;
		--stat-h: 190px;
		--brand-tile-h: 200px;
	}
}
@media (max-width: 1024px) {
	:root {
		--header-top: 1.5rem;
		--section-pad: clamp(3rem, 8vw, 5rem);
		--service-tall-h: 600px;
	}
}
/* Phones: the clamp minimums above are desktop-sized, so headlines run past the
   screen edge. Everything in the type scale drops a step here. */
@media (max-width: 640px) {
	:root {
		--fs-hero:   clamp(1.85rem, 8.4vw, 2.5rem);
		--fs-h2:     clamp(1.7rem, 7.8vw, 2.25rem);
		--fs-h3:     clamp(1.45rem, 6.4vw, 1.75rem);
		--fs-band:   clamp(1.25rem, 5.6vw, 1.5rem);
		--fs-card:   clamp(1.2rem, 5.2vw, 1.5rem);
		--fs-lead:   1.05rem;
		--fs-kicker: 1.05rem;
		--fs-body-l: 1rem;
		--fs-stat:   clamp(2.5rem, 13vw, 3.5rem);
		--fs-digit:  clamp(3.5rem, 20vw, 6rem);
		--fs-footer: clamp(1.8rem, 8.5vw, 2.5rem);
		--s-6: 3rem;
		--s-7: 3.75rem;
		--s-8: 4.5rem;
	}
}

@media (max-width: 768px) {
	:root {
		--hero-min-h: auto;
		--stat-h: 170px;
		--brand-tile-h: 150px;
		--case-card-h: 420px;
		--service-tall-h: 520px;
		--card-bar-h: 64px;
		--fs-body: 1rem;
	}
}