/**
 * Design tokens, taken from the Figma file "Suprathera New".
 * Desktop reference canvas: 1440 wide, 1200 content container.
 */

:root {
	/* ---- Brand colours ---- */
	--c-cyan:       #5ED9F8;
	--c-blue:       #0077C3;
	--c-blue-deep:  #00488F;
	--c-blue-700:   #004487;
	--c-navy:       #001739;
	--c-navy-deep:  #01183A;
	--c-orange:     #EE742E;
	--c-rule:       rgba(0, 119, 195, 0.5); /* table + divider rules */
	--c-white:      #FFFFFF;

	/* ---- Semantic roles ---- */
	--c-bg:            var(--c-navy);
	--c-text:          var(--c-white);
	--c-text-muted:    rgba(255, 255, 255, 0.82);
	--c-heading:       var(--c-cyan);
	--c-accent:        var(--c-orange);
	--c-link:          var(--c-cyan);
	--c-link-hover:    var(--c-white);

	/* ---- Gradients lifted from the design ---- */
	/* Every stop is absolute, matching the design's 3409px band. Percentages
	   float with content height, and our sections run taller than the design's,
	   which stretched the fade so Pipeline and Team were still blue instead of
	   navy. Past the last stop the gradient holds #001739, which is what the
	   design's tail is anyway. */
	--g-page:        linear-gradient(180deg, #001739 170px, #0176C1 989px, #001739 3307px);
	--g-hero-veil:   linear-gradient(180deg, rgba(5, 35, 89, 0) 25%, rgba(1, 24, 58, 1) 79%);
	--g-card:        linear-gradient(90deg, rgba(3, 51, 98, 0.2) 0%, rgba(1, 111, 218, 0.49) 62%);
	--g-card-mobile: linear-gradient(0deg, rgba(0, 74, 146, 0.2) 0%, rgba(1, 111, 218, 0.49) 62%);
	--g-card-veil:   linear-gradient(90deg, rgba(1, 70, 124, 0) 12%, rgba(1, 51, 97, 0.95) 45%);
	/* The two dividers are translucent overlays that fade IN downward and then
	   stop square - that hard bottom edge is what separates the sections. */
	--g-divider-1:   linear-gradient(180deg, rgba(5, 35, 89, 0) 25%, rgba(0, 94, 154, 0.6) 100%);
	--g-divider-2:   linear-gradient(180deg, rgba(5, 35, 89, 0) 25%, rgba(0, 119, 195, 0.27) 100%);
	/* #5:298 remapped from its 81.73px-offset rect to the full card width. */
	--g-indication:  linear-gradient(90deg, rgba(1, 70, 124, 0) 18%, rgba(1, 51, 97, 0.95) 48.8%);

	/* ---- Typography ----
	   Avenir LT Pro is served by the client's Adobe Fonts web project, enqueued in
	   inc/enqueue.php. Kit weights: 200, 300, 400, 500, 700, 800 (normal only). */
	--font-sans: "avenir-lt-pro", "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fw-light:  300;
	--fw-book:   400;
	--fw-heavy:  800;

	/* Fluid scale: min is the ~375px value, max is the Figma desktop value. */
	--fs-display: clamp(2rem,   1.06rem + 4.17vw, 3.4375rem);  /* 55px */
	--fs-h2:      clamp(1.875rem, 1.09rem + 3.47vw, 3.125rem); /* 50px */
	--fs-h3:      clamp(1.375rem, 0.98rem + 1.74vw, 2.25rem);  /* 36px */
	--fs-h4:      clamp(1.75rem,  1.706rem + 0.188vw, 1.875rem);/* 30px, flat in the design */
	--fs-body-lg: clamp(1.125rem, 0.949rem + 0.751vw, 1.625rem);/* 26px */
	--fs-body:    clamp(1.3125rem, 1.29rem + 0.094vw, 1.375rem);/* 22px, flat in the design */
	--fs-body-sm: clamp(1rem,     0.89rem + 0.47vw, 1.3125rem); /* 21px */
	--fs-label:   clamp(1.125rem, 0.993rem + 0.563vw, 1.5rem); /* 24px */
	--fs-hero:    clamp(2.25rem,  1.13rem + 4.86vw, 4.0625rem);/* 65px */
	--fs-nav:     clamp(1rem,     0.912rem + 0.376vw, 1.25rem);/* 20px */
	--fs-nav-mob: clamp(2rem,     1.5rem + 2.9vw, 2.25rem);    /* 36px, open menu */
	--fs-kicker:  clamp(1.75rem,  1.57rem + 0.79vw, 2.25rem);  /* 28px -> 36px */

	--lh-hero:   1.231; /* 80/65 */
	--lh-tight:  1.1;
	--lh-snug:   1.27;
	--lh-normal: 1.4;
	--lh-loose:  1.6;

	/* ---- Layout ---- */
	--container:      1200px;
	/* 30px mobile -> 120px at 1440. The floor is the mobile frame's own gutter:
	   its content blocks are 361 wide on a 421 canvas (client QA 2026-09-08,
	   mobile #1 - the site was running 24px, so everything sat wider than the
	   design). */
	--gutter:         clamp(1.875rem, 0.5rem + 3.3vw, 7.5rem);
	--radius:         20px;
	--radius-sm:      12px;
	--header-h:       clamp(64px, 6.25vw, 90px);   /* 90px in the design */
	/* One footer row plus its padding. Used to land the bottom photo exactly on
	   the page's last pixel instead of hanging past it. */
	--footer-pad:     clamp(2rem, 4vw, 58px);
	--footer-h:       calc(50px + 2 * var(--footer-pad));
	/* Stacked footer: logo 50 + 25 + menu 78 + 25 + credit 30 = ~209px of
	   content. Kept here so the padding and the bottom photo's offset are
	   driven by the same numbers and cannot drift apart. */
	--footer-narrow-pad-t: clamp(48px, 16vw, 70px);
	--footer-narrow-pad-b: clamp(28px, 9vw, 36px);
	--footer-narrow-h: calc(var(--footer-narrow-pad-t) + 209px + var(--footer-narrow-pad-b));

	/* ---- Spacing ---- */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4rem;
	--sp-7: 6rem;
	/* A section's trailing space: 75px at the 1440 canvas. */
	--section-y: clamp(2.5rem, 1.73rem + 3.29vw, 4.6875rem);
	/* And its leading space, up to its heading. Client QA 2026-09-08 #3 asks
	   every strip to repeat one gap from the end of the previous one to its
	   own title; the About -> Amyloid aggregation pair is the reference, at
	   123 + 75 = 198px. Desktop redefines this below; on mobile the frame has
	   its own rhythm, so the two halves stay equal. */
	--section-y-top: var(--section-y);

	/* ---- Motion ---- */
	--ease:       cubic-bezier(0.4, 0, 0.2, 1);
	--dur:        240ms;
	--z-header:   100;
}

/* Client QA 2026-09-08 #3. 95px at 1440, so every strip runs 95 + 75 = 170px
   from the end of the previous one to its title. The reference pair the client
   picked came to 198px, which read too loose once all six matched it. */
@media (min-width: 901px) {
	:root {
		--section-y-top: clamp(3.6875rem, 6.6vw, 5.9375rem);
	}
}