/**
 * Design tokens - the single source of truth for every colour, type step,
 * space and radius on this site.
 *
 * Every value here was measured out of the supplied Adobe XD artboard
 * ("Web 1920 - 5", 1920 x 3720). Where a token is fluid, the comment gives the
 * phone value and the artboard value it resolves to at 1920px, and the vw
 * coefficient is chosen so that the clamp lands exactly on the artboard number
 * at 1920. That is why the coefficients look arbitrary - they are derived, not
 * picked.
 *
 * Fluid values interpolate between a 375px and a 1920px viewport.
 *
 * If you find a hex value outside this file, that is a bug.
 */

:root {
	/* ---- Colour: sampled from the artboard ---------------------------------- */
	--lg-blue-deep: #1e2b97;   /* about-section ground, header + submit button fill */
	--lg-blue-mid: #2d60c4;    /* CONTACT US heading, form labels, contact details */
	--lg-red: #d40119;         /* card headings and all three card icons */
	--lg-grey-light: #efefef;  /* header bar, contact section ground, hero button fill */
	--lg-white: #ffffff;       /* cards, hero copy, button labels on blue */
	--lg-rule: #707070;        /* form field underlines, 1px */

	/* Hero photograph overlay. Artboard: linear #c1c1c1 -> #00308e at 74.1%
	 * opacity, painted over the full-bleed photo. */
	--lg-overlay-from: #c1c1c1;
	--lg-overlay-to: #00308e;
	--lg-overlay-opacity: 0.741;

	/* ---- Semantic colour ---------------------------------------------------
	 * Components reference these, never the brand values above, so a section
	 * can be re-themed by reassigning one custom property. */
	--lg-bg: var(--lg-white);
	--lg-fg: var(--lg-blue-deep);
	--lg-bg-muted: var(--lg-grey-light);
	--lg-bg-inverse: var(--lg-blue-deep);
	--lg-fg-inverse: var(--lg-white);
	--lg-accent: var(--lg-red);

	/* Focus rings are NOT in the artboard. Added because the design would
	 * otherwise be unusable by keyboard. Deep blue on light grounds, white on
	 * the blue ground and over the hero photograph. */
	--lg-focus: var(--lg-blue-deep);
	--lg-focus-inverse: var(--lg-white);
	--lg-focus-width: 3px;
	--lg-focus-offset: 3px;
	--lg-target-min: 44px;

	/* ---- Type families -----------------------------------------------------
	 * Novecento sans wide (Synthview, commercial) is the artboard's display
	 * face. No licence or webfont files were supplied, so it is named first and
	 * falls through to Montserrat until the .woff2 files are dropped into
	 * assets/fonts/ and the @font-face rule in base.css is uncommented.
	 *
	 * Noto Sans (button labels in the artboard) is likewise not present yet and
	 * falls through to Montserrat. Both substitutions are listed in
	 * BUILD-REPORT.md as unverified type. */
	--lg-font-display: "Novecento sans wide", "Montserrat", ui-sans-serif, system-ui, sans-serif;
	--lg-font-body: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	--lg-font-ui: "Noto Sans", "Montserrat", ui-sans-serif, system-ui, sans-serif;

	/* ---- Type scale (fluid, largest first) ---------------------------------- */
	--lg-step-display: clamp(2.25rem, 1.5825rem + 2.8479vw, 5rem);       /*  36 ->  80px  H1, CONTACT US */
	--lg-step-card: clamp(1.25rem, 1.0983rem + 0.6472vw, 1.875rem);      /*  20 ->  30px  card headings */
	--lg-step-eyebrow: clamp(1rem, 0.7876rem + 0.9061vw, 1.875rem);      /*  16 ->  30px  hero eyebrow, ABOUT US */
	--lg-step-body: clamp(1.0625rem, 0.8653rem + 0.8414vw, 1.875rem);    /*  17 ->  30px  about copy */
	--lg-step-detail: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);        /*  16 ->  20px  phone and email */
	--lg-step-label: clamp(0.9375rem, 0.8616rem + 0.3236vw, 1.25rem);    /*  15 ->  20px  form labels */
	--lg-step-button-lg: clamp(1rem, 0.909rem + 0.3883vw, 1.375rem);     /*  16 ->  22px  hero button */
	--lg-step-button: 1rem;                                              /*        16px  header + submit button */

	/* Leading, read off the artboard's baseline positions */
	--lg-leading-display: 1.2;   /*  96 on  80px */
	--lg-leading-card: 1.2;      /*  36 on  30px */
	--lg-leading-body: 1.2333;   /*  37 on  30px */
	--lg-leading-tight: 1;

	--lg-tracking-display: 0;
	--lg-tracking-eyebrow: 0.02em;

	/* ---- Layout -------------------------------------------------------------
	 * The artboard's own layout grid: 1920 wide, 12 columns, 140px margins,
	 * 16px gutter. Content actually sits at x=142..1778, so the real content
	 * width is 1636 with a 142px side margin. */
	--lg-content: 1636px;

	/*
	 * The side margin. 142 at 1920 is the artboard's own figure; 15 on phones is
	 * a client instruction, and it holds for every phone width rather than only
	 * at one - the floor takes over at and below 480, so 320, 375 and 414 all
	 * land on exactly 15. Between 480 and 1920 it ramps smoothly, so there is no
	 * jump at any breakpoint. The coefficient is derived from those two anchors:
	 * (142 - 15) / (1920 - 480) = 8.819vw, offset by -27.33 to pass through 15
	 * at 480.
	 */
	--lg-gutter: clamp(15px, -27.33px + 8.819vw, 142px);   /*  15 ->  142px */
	--lg-grid-columns: 12;

	/* ---- Spacing ------------------------------------------------------------ */
	--lg-space-3xs: 4px;
	--lg-space-2xs: 8px;
	--lg-space-xs: 12px;
	--lg-space-sm: 16px;
	--lg-space-md: 24px;
	--lg-space-lg: 32px;
	--lg-space-xl: 48px;
	--lg-space-2xl: 64px;
	--lg-space-3xl: 80px;

	/* ---- Radii --------------------------------------------------------------
	 * The artboard uses a single large 55px radius on every card and photo, and
	 * a small radius on buttons equal to one tenth of the button height. */
	--lg-radius-lg: clamp(20px, 2.8646vw, 55px);   /*  20 ->  55px */
	--lg-radius-btn: 5px;
	--lg-radius-btn-lg: 6px;

	/* ---- Header ------------------------------------------------------------- */
	--lg-header-height: clamp(76px, 6.5625vw, 126px);   /*  76 ->  126px */
	/*
	 * 301 is the artboard's header logo width. The lower bound is set by what
	 * fits beside the Contact Us button at 375: 130 logo + 16 gap + 155 button
	 * is 301 of the 319 available.
	 */
	--lg-logo-width: clamp(130px, 15.677vw, 301px);     /* 130 ->  301px */
	--lg-logo-width-footer: clamp(200px, 21.615vw, 415px); /* 200 -> 415px */

	/* ---- Buttons ------------------------------------------------------------
	 * The XD Button component: 46px tall, 4.6px radius, 16px left / 17px right /
	 * 12px vertical padding, label then a 27px arrow. */
	--lg-btn-height: 46px;
	--lg-btn-pad-inline-start: 16px;
	--lg-btn-pad-inline-end: 17px;
	/*
	 * The arrow renders at 1:1 with the artboard, so these are its exact drawn
	 * size there: a 16.866 shaft plus 1.5 of stroke. One arrow in all three
	 * buttons - see the note on liveguard_arrow() in inc/svg.php about the hero
	 * instance's stretched shaft.
	 */
	--lg-btn-arrow-gap: 10.5px;
	--lg-btn-arrow-width: 18.366px;
	--lg-btn-arrow-height: 12.849px;
	--lg-btn-border-width: 2px;   /* appears on hover only, per the component */

	/* The hero instance is the same component scaled: 183.6 x 63, radius 6.3. */
	--lg-btn-lg-height: clamp(52px, 3.281vw, 63px);
	--lg-btn-lg-pad-inline-start: 22px;
	--lg-btn-lg-pad-inline-end: 23px;

	/* ---- Hero ---------------------------------------------------------------
	 * Photograph runs 126..1080 on the artboard but the blue about ground is
	 * painted over its last 178px, so the visible hero is 126..902 = 776 tall. */
	--lg-hero-height: clamp(480px, 40.417vw, 776px);    /* 480 -> 776px */
	--lg-hero-copy-width: 716px;
	/*
	 * The hero copy sits outside the container, so its own inset has to be told
	 * about the 15px phone margin separately or the hero text would not line up
	 * with everything below it.
	 */
	--lg-hero-copy-offset: clamp(15px, 2.8125vw, 54px); /*  15 ->  54px */
	--lg-hero-eyebrow-gap: clamp(8px, 0.573vw, 11px);   /*   8 ->  11px */
	--lg-hero-button-gap: clamp(16px, 1.615vw, 31px);   /*  16 ->  31px */

	/* ---- Feature cards -----------------------------------------------------
	 * Three 527 x 166 cards at y=816..982, straddling the hero/about boundary
	 * at y=902. Their vertical centre (899) sits on that boundary, which is why
	 * they are pulled up by half their own height rather than a magic number. */
	--lg-card-height: clamp(96px, 8.646vw, 166px);      /*  96 ->  166px */

	/*
	 * The artboard's three cards are 527 + 526 + 526 with 34 and 36 gaps, which
	 * totals 1649 - thirteen pixels wider than its own 1636 container, and the
	 * third card's right edge does sit 14px past the others. Rather than
	 * reproduce that overhang, the gap absorbs it: at 28 the cards come out at
	 * 526.7 each, which is the artboard's own card width, and the heading gets
	 * exactly the 313 the artboard gives it.
	 */
	--lg-card-gap: clamp(14px, 1.458vw, 28px);          /*  14 ->  28px */

	/* Asymmetric, as drawn: icon 55 in from the left, heading 36 off the right. */
	--lg-card-pad-start: clamp(20px, 2.865vw, 55px);    /*  20 ->  55px */
	--lg-card-pad-end: clamp(16px, 1.875vw, 36px);      /*  16 ->  36px */
	--lg-card-icon-gap: clamp(14px, 1.406vw, 27px);     /*  14 ->  27px */

	/*
	 * The three supplied icons are 96x96, 110x84 and 58x59. The artboard places
	 * them at natural size, so this is a ceiling rather than a slot width -
	 * forcing them to a common box would distort the cross.
	 */
	--lg-card-icon-max: clamp(48px, 5.729vw, 110px);    /*  48 ->  110px */

	/* ---- About section ------------------------------------------------------
	 * Blue ground 902..2355. ABOUT US label at 1159, so 257px of clearance from
	 * the boundary - which is exactly half a card (83) plus the 174px gap below
	 * the cards. Copy column 553, gap 91, collage 990: 1634 of the 1636. */
	--lg-about-pad-top: clamp(48px, 13.385vw, 257px);   /*  48 ->  257px */
	--lg-about-pad-bottom: clamp(48px, 5.469vw, 105px); /*  48 ->  105px */
	--lg-about-column-gap: clamp(32px, 4.7396vw, 91px); /*  32 ->  91px */
	--lg-about-label-gap: clamp(16px, 1.771vw, 34px);   /*  16 ->  34px */
	--lg-about-copy-column: 553fr;
	--lg-about-collage-column: 990fr;

	/* Collage: four photographs in a 990 x 1091 box, positions as percentages of
	 * that box so the whole thing scales as one unit. Measured from the artboard,
	 * origin (787,1159). */
	--lg-collage-ratio: 990 / 1091;

	/* ---- Gallery strip -----------------------------------------------------
	 * Three 895 x 598 photographs at y=2413, the centre one centred on the page
	 * and the outer two bleeding 453px off each edge, with 71px gaps. Rebuilt as
	 * a slick carousel in centre mode: the slide box is 895 + 71 = 966 wide, so
	 * the padding either side is (1920 - 966) / 2 = 477 = 24.84%. */
	--lg-strip-pad-top: clamp(32px, 3.021vw, 58px);     /*  32 ->  58px */
	--lg-strip-pad-bottom: clamp(32px, 3.49vw, 67px);   /*  32 ->  67px */
	--lg-strip-slide-ratio: 895 / 598;
	--lg-strip-gap: clamp(12px, 3.698vw, 71px);         /*  12 ->  71px */

	/*
	 * The centre padding either side of the current slide, and the slide box
	 * that leaves. The second is always 100 minus twice the first - keep them
	 * in step.
	 *
	 * These same three pairs are repeated in assets/js/carousel.js, because
	 * slick needs its whole responsive table up front and can only read the one
	 * custom property that is live at init. If you change a value here, change
	 * it there. Nothing enforces that, which is why it is written down.
	 */
	--lg-strip-centre-padding: 24.84%;
	--lg-strip-slide: 50.32vw;

	/* ---- Contact ------------------------------------------------------------
	 * Grey ground 3078..3732. Heading at 3144, first field label at 3333, field
	 * pitch 97, rule 783 wide, submit 35px below the last rule. */
	--lg-contact-pad-top: clamp(40px, 3.4375vw, 66px);  /*  40 ->  66px */
	--lg-contact-pad-bottom: clamp(40px, 3.646vw, 70px);/*  40 ->  70px */
	--lg-contact-heading-gap: clamp(40px, 5.573vw, 107px); /* 40 -> 107px */
	--lg-contact-form-column: 783fr;
	--lg-contact-aside-column: 853fr;
	/*
	 * Field pitch on the artboard is 97: a 24 label box, 14 to the control, a
	 * 31 control with its 1px rule, then 28 to the next label.
	 */
	--lg-field-gap: clamp(16px, 1.458vw, 28px);         /*  16 ->  28px */
	--lg-field-label-gap: clamp(8px, 0.729vw, 14px);    /*   8 ->  14px */
	--lg-field-height: clamp(28px, 1.615vw, 31px);      /*  28 ->  31px */
	--lg-field-border-width: 1px;
	--lg-submit-gap: clamp(24px, 1.823vw, 35px);        /*  24 ->  35px */
	--lg-contact-detail-gap: clamp(12px, 1.615vw, 31px);/*  12 ->  31px */

	/* ---- Motion -------------------------------------------------------------
	 * 300ms ease-out is the button component's own hover transition, read out of
	 * the XD interaction record. Everything else reuses it. */
	--lg-transition: 300ms ease-out;

	/* ---- Breakpoints (documented only; media queries cannot read custom
	 * properties)
	 *   phone   : up to 767px   - the base, built first
	 *   tablet  : 768px - 1023px
	 *   desktop : 1024px and up - where the artboard's two-column layouts and
	 *             the straddling cards switch on
	 */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--lg-transition: 0ms;
	}
}

/* The carousel's two responsive steps. See the note on the tokens above. */
@media (max-width: 1023px) {
	:root {
		--lg-strip-centre-padding: 8%;
		--lg-strip-slide: 84vw;
	}
}

@media (max-width: 767px) {
	:root {
		--lg-strip-centre-padding: 5%;
		--lg-strip-slide: 90vw;
	}
}