/* ============================================================================
   Home Team Construction — design tokens
   ----------------------------------------------------------------------------
   Single source of truth.

   In the review artifacts this same set was redeclared inside all 29 component
   <style> blocks, on the section class rather than :root, so a block pasted
   into an Elementor HTML widget could not leak variables into the page around
   it. That constraint is gone: this is a theme, the stylesheet is ours, and the
   tokens are declared once here.

   Values are unchanged from the artifacts. Two inconsistencies are resolved
   below, both noted where they occur.
   ========================================================================== */

:root {

	/* ---- Brand ----
	   The red is the CTA colour and the blue is secondary. Both come from the
	   live Elementor global kit, so they match the existing site exactly. */
	--htc-red:        #E63946;
	--htc-blue:       #457B9D;
	--htc-blue-dark:  #005F9A;
	--htc-blue-light: #D6F3FF;

	/* ---- Neutrals ---- */
	--htc-black:     #101010;
	--htc-text:      #4C4B48;
	--htc-grey-dark: #201E1D;
	--htc-grey-mid:  #3F3B3A;
	--htc-bg-light:  #F6F6F4;
	--htc-white:     #FFFFFF;
	--htc-border:    #BABABA;
	--htc-divider:   #DEDEDE;
	/* Links carry the body-copy black, not a link blue. The site's own colour
	   for "clickable" is the red CTA, and a second accent competing with it in
	   running text reads as a different site. Underlines do the work of
	   signalling a link instead. */
	--htc-link:      #101010;

	/* ---- Type families ----
	   RESOLVED: the artifacts carried two forms of --htc-font-display — a bare
	   "'Maven Pro', sans-serif" in four components and the full stack in the
	   header and footer. The full stack wins because it is a superset: a bare
	   sans-serif fallback hands a Maven Pro load failure to whatever the
	   browser defaults to, which on Windows is not a match for Inter. */
	--htc-font-display: 'Maven Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--htc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* ---- Type scale ----
	   Fluid. The live site steps 55/44/35/28 with nothing between h4 and body;
	   these clamp between a mobile floor and those desktop values, and add the
	   two intermediate steps the old scale was missing. */
	--htc-h1:      clamp(2.25rem,  4.5vw, 3.4375rem);   /* → 55px */
	--htc-h2:      clamp(1.875rem, 3.5vw, 2.75rem);     /* → 44px */
	--htc-h3:      clamp(1.5rem,   2.5vw, 2.1875rem);   /* → 35px */
	--htc-h4:      clamp(1.25rem,  2vw,   1.75rem);     /* → 28px */
	--htc-h5:      1.25rem;
	--htc-lead:    1.125rem;
	--htc-body:    1rem;
	--htc-small:   0.875rem;
	--htc-eyebrow: 0.8125rem;

	/* ---- Spacing ---- */
	--htc-s1: 0.5rem;
	--htc-s2: 1rem;
	--htc-s3: 1.5rem;
	--htc-s4: 2rem;
	--htc-s5: 3rem;
	--htc-s6: 4rem;
	--htc-s7: 6rem;

	/* ---- Layout ----
	   RESOLVED: --htc-measure appeared as 68ch in thirteen components and 52ch
	   in the two outcomes blocks. Both are deliberate — 68ch is a prose measure,
	   52ch is a tighter one for stacked benefit copy. 68ch is the default here
	   and the outcomes components keep their own 52ch declaration. */
	--htc-container: 1400px;
	--htc-measure:   68ch;
	--htc-radius:    0;      /* square buttons throughout, from the Elementor kit */


	/* ---- Sticky header ----
	   The logo governs the row height, so sizing the logo sizes the header.
	   Anchor scrolling and the mobile menu's scroll cap both need that height
	   as a number, and deriving it from these two beats hand-maintaining a
	   third value: the header is the logo, its padding, and the 1px border.
	   base.css scales the logo down at the tablet and phone breakpoints and
	   --htc-header-h follows on its own; the padding is the same at every
	   width, so the bar's proportions stay recognisably the same bar. */
	--htc-logo-h:      54px;
	--htc-header-pad:  var(--htc-s2);

	/* How far an open nav panel hangs below the bar's bottom edge. Both the
	   Services mega panel and the plain dropdowns read it, as does the strip
	   that keeps the pointer's path to them alive, so the gap is set here once
	   rather than in three places that have to agree. */
	--htc-panel-drop:  var(--htc-s1);
	--htc-header-h:    calc(max(var(--htc-logo-h), 44px) + var(--htc-header-pad) * 2 + 1px);
}

/* Custom tablet breakpoint carried over from the live Elementor kit: tablet is
   max-width 1150px, desktop min-width 1151px. Unusual, and load-bearing — the
   old site shifts layout at iPad width. Components use it directly; it cannot
   live in a custom property because @media cannot read one. */