/**
 * Fractal — fluid viewport-scaling layer (owner layer; design CSS stays pristine).
 * ---------------------------------------------------------------------------
 * Goal: from 1440px up to 4K (3840px) the composition scales proportionally to
 * fill the viewport — a 1440 view and a 3840 view are identical, just larger,
 * with no growing side gutters. Below 1440px, nothing here changes behaviour.
 *
 * How: scale the root font-size linearly with the viewport above 1440px, so every
 * rem/clamp value (type, spacing, converted widths) grows as one unit. BASE = 16px
 * (the measured effective root), so at <=1440 the render is pixel-identical to
 * before. The fixed-px design tokens are re-declared here in rem (÷16, lossless at
 * 1440) instead of editing the verbatim design CSS.
 *
 * Loaded after the design CSS so these :root values win.
 */

/* --- Fluid root font-size: constant to 1440, scale 1440->3840, then hold ----- */
html {
	font-size: 16px; /* BASE — unchanged at/below 1440px */
}
@media (min-width: 1440px) {
	/* BASE (16) is unitless here: number x length / number = length. Using 16px
	   would be length x length, which calc() forbids (declaration dropped). */
	html {
		font-size: calc(16 * min(100vw, 3840px) / 1440);
	}
}

/* --- Fixed-px sizing tokens re-expressed as rem (÷16 BASE; identical at 1440) - */
:root {
	--space-1: 0.25rem;   /* 4px   */
	--space-2: 0.5rem;    /* 8px   */
	--space-3: 0.75rem;   /* 12px  */
	--space-4: 1rem;      /* 16px  */
	--space-5: 1.5rem;    /* 24px  */
	--space-6: 2rem;      /* 32px  */
	--space-7: 3rem;      /* 48px  */
	--space-8: 4rem;      /* 64px  */
	--space-9: 6rem;      /* 96px  */
	--space-10: 8rem;     /* 128px */

	--container-max: 82.5rem; /* 1320px */

	--radius-sm: 0.375rem;    /* 6px   */
	--radius-md: 0.625rem;    /* 10px  */
	--radius-lg: 1rem;        /* 16px  */
	--radius-pill: 62.4375rem;/* 999px */
}

/* --- Inline SVG icon sizes ---------------------------------------------------
 * Their width/height attributes are fixed px (user units) and don't scale, so
 * size them here in rem (lossless at 1440) to track the fluid root. */
svg.fr-btn-arrow           { width: 1.25rem;  height: 1.25rem;  } /* 20px hero button arrow */
.fr-svc-more svg           { width: 1rem;     height: 1rem;     } /* 16px "Learn more" arrow */
.home-testi-arrow svg      { width: 1.375rem; height: 1.375rem; } /* 22px slider arrows */
[data-testi-quote] svg     { width: 1.125rem; height: 1.125rem; } /* 18px stars */
.fr-social svg             { width: 1.125rem; height: 1.125rem; } /* 18px social icons */
[data-faq-icon] svg        { width: 1.125rem; height: 1.125rem; } /* 18px FAQ +/x */
.fr-select-caret svg       { width: 1rem;     height: 1rem;     } /* 16px select chevron */
.fr-check-box svg          { width: 0.8125rem; height: 0.8125rem; } /* 13px checkbox tick */
.fr-slnav svg              { width: 1.375rem; height: 1.375rem; } /* 22px portfolio slider arrows */