/* ---------------------------------------------------------------------------
   HubSpot embedded form — house styling
   Pastel #163. Design: Figma 10539:4808 ("Form Wrap", 800 wide inside the
   1400 content frame on the Contact page).

   WHY THIS FILE EXISTS AND WHY EVERY DECLARATION IS !important
   ------------------------------------------------------------
   Three stylesheets fight over this form, and the winner is decided by
   CASCADE LAYERS, not by specificity:

     1. theme.css/forms.css      layer(layout), heavy !important
     2. HubSpot's injected CSS   an inline <style>, UNLAYERED, no !important,
                                 scoped by a per-pageload instance class
                                 (.hs-form-<id>_<uuid>) that cannot be
                                 targeted from a static file
     3. this file

   For NORMAL declarations unlayered beats every layer, so HubSpot's inline
   block outranks anything layered we write. For !important the order
   INVERTS: earlier layers win, and unlayered is the WEAKEST tier of all.
   So the only rule that beats both opponents is one that is inside
   `layer(layout)` AND carries !important — layered-important outranks
   HubSpot's unlayered-normal, and being later in the same layer as
   forms.css settles that tie on source order. An unlayered !important here
   would lose to forms.css; a layered non-important one would lose to
   HubSpot. Do not "clean up" either half.

   The form is scoped by .hbspt-form (HubSpot's own wrapper), not by the
   instance class, so this travels to any HubSpot embed on the site.

   GEOMETRY is read off the 800-wide frame: 60px input rows on a 1px
   hairline, 10px between fields, 50px before the textarea section, a
   130px bordered textarea with a 20px inset, and a full-width 94px pill
   in --Neutral-100. Type is the frame's "Paragraph - Large" (20/30,
   letter-spacing 1% = 0.2px). Colours are snapped to the nearest design
   system tokens; the frame binds no colour variables of its own.
   -------------------------------------------------------------------------- */

@layer layout {

	/* --- Container ---------------------------------------------------------
	   HubSpot's inline block caps its own fieldsets at 500px. The frame's
	   form is the full 800 of its column, so that cap goes. */
	.hbspt-form .hs-form fieldset {
		max-width: none !important;
		margin: 0 0 10px !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.hbspt-form .hs-form fieldset:last-of-type {
		margin-bottom: 0 !important;
	}

	/* --- Field rows --------------------------------------------------------
	   HubSpot floats the columns of a .form-columns-2 row; flex gives the
	   10px gutter the frame's two-up rows use and drops the clearfix. */
	.hbspt-form .hs-form .form-columns-2 {
		display: flex !important;
		gap: 10px !important;
	}

	.hbspt-form .hs-form .form-columns-2 .hs-form-field {
		flex: 1 1 0 !important;
		float: none !important;
		width: auto !important;
	}

	.hbspt-form .hs-form .hs-form-field {
		float: none !important;
	}

	/* HubSpot wraps every control in a plain .input div. That class name is
	   also in forms.css's own input selector list, so the wrapper was being
	   painted as a field in its own right — a white box with a 6px radius
	   and the theme's 9px/13px --input-padding, which inset every control
	   13px from the form's left edge instead of the frame's flush 0. */
	.hbspt-form .hs-form .input {
		margin: 0 !important;
		padding: 0 !important;
		background-color: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* --- Labels ------------------------------------------------------------
	   The frame has no visible per-field labels — the field name IS the
	   placeholder. Hiding them visually rather than removing them keeps the
	   accessible name (and the required-field asterisk) intact for screen
	   readers, so this matches the design without costing the label. */
	.hbspt-form .hs-form > fieldset .hs-form-field > label {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* --- Text inputs and selects -------------------------------------------
	   Frame: a 60px row whose only chrome is a 1px hairline under it. No
	   box, no fill, no radius, no horizontal inset — the placeholder starts
	   on the form's own left edge. */
	.hbspt-form .hs-form input[type="text"],
	.hbspt-form .hs-form input[type="email"],
	.hbspt-form .hs-form input[type="tel"],
	.hbspt-form .hs-form input[type="number"],
	.hbspt-form .hs-form input[type="url"],
	.hbspt-form .hs-form select.hs-input {
		width: 100% !important;
		height: 60px !important;
		/* forms.css ships `margin: 0 0 7px` on every input; the frame's rows
		   are a flat 10px apart, owned by the fieldset below. */
		margin: 0 !important;
		padding: 0 !important;
		background-color: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid var(--Neutral-20) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		font-family: var(--body-font) !important;
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 30px !important;
		letter-spacing: 0.2px !important;
		color: var(--Neutral-100) !important;
		-webkit-text-fill-color: var(--Neutral-100) !important;
		transition: var(--button-easing) !important;   /* BARE */
	}

	/* The frame draws no chevron of its own beyond a 16px mark at the row's
	   right end; a background-image keeps it on the select without markup. */
	.hbspt-form .hs-form select.hs-input {
		appearance: none !important;
		-webkit-appearance: none !important;
		padding-right: 26px !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6L8 11L13 6' stroke='%230f0f0f' stroke-width='1.5'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: right center !important;
	}

	/* --- Textarea ----------------------------------------------------------
	   The one boxed control in the frame: 130 tall, a hairline all the way
	   round, and a 20px inset on every side. */
	.hbspt-form .hs-form textarea.hs-input {
		width: 100% !important;
		height: 130px !important;
		min-height: 130px !important;
		margin: 0 !important;
		padding: 20px !important;
		background-color: transparent !important;
		border: 1px solid var(--Neutral-20) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		font-family: var(--body-font) !important;
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 30px !important;
		letter-spacing: 0.2px !important;
		color: var(--Neutral-100) !important;
		-webkit-text-fill-color: var(--Neutral-100) !important;
		resize: vertical !important;
		transition: var(--button-easing) !important;   /* BARE */
	}

	/* The textarea is the frame's own second section, which sits 50px below
	   the block of text fields rather than sharing their 10px rhythm. */
	.hbspt-form .hs-form fieldset:has(textarea.hs-input) {
		margin-top: 50px !important;
	}

	.hbspt-form .hs-form ::placeholder {
		color: var(--Neutral-50) !important;
		-webkit-text-fill-color: var(--Neutral-50) !important;
		opacity: 1 !important;
	}

	/* --- Focus -------------------------------------------------------------
	   The frame specifies no focus state. The hairline darkening to the text
	   colour is the quietest reading of it that still shows focus; the
	   outline is kept on top of that for WCAG 2.4.7, since a 1px colour
	   shift alone is not a reliable focus indicator. */
	.hbspt-form .hs-form .hs-input:focus {
		border-color: var(--Neutral-100) !important;
		background-color: transparent !important;
		box-shadow: none !important;
	}

	.hbspt-form .hs-form .hs-input:focus-visible {
		outline: 2px solid var(--Primary-90) !important;
		outline-offset: 3px !important;
	}

	/* --- Radios and checkboxes ---------------------------------------------
	   Not in the live HubSpot form yet — the frame's "What type of services
	   are you looking for?" group is. Styled here so the list lands correct
	   the day those fields are added rather than needing a second pass:
	   an 18px control, 28px from control edge to label, 20px between rows. */
	.hbspt-form .hs-form .inputs-list {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.hbspt-form .hs-form .inputs-list > li {
		margin: 0 0 20px !important;
	}

	.hbspt-form .hs-form .inputs-list > li:last-child {
		margin-bottom: 0 !important;
	}

	.hbspt-form .hs-form .inputs-list label {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		font-family: var(--body-font) !important;
		font-size: 20px !important;
		line-height: 30px !important;
		letter-spacing: 0.2px !important;
		color: var(--Neutral-100) !important;
		cursor: pointer !important;
	}

	.hbspt-form .hs-form .inputs-list input[type="checkbox"],
	.hbspt-form .hs-form .inputs-list input[type="radio"] {
		flex: 0 0 auto !important;
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		accent-color: var(--Neutral-100) !important;
	}

	/* --- Submit ------------------------------------------------------------
	   Frame node 10539:5821 — a full-width 94px pill, 48px clear of the form
	   above it.

	   COLOUR IS NOT SPECIFIED HERE. It reads from --Light-button-Filled-*,
	   the same token set theme.css's `.btn` consumes, so a change to the
	   system moves this button with it. (The legacy --hover-button-* tokens
	   are NOT the button system — nothing in .btn reads them.)

	   Only the RESTING trio is overridden, to the black `.btn.btn-secondary`
	   uses (theme.css:23829-23841), because that is what the frame draws.
	   Hover, focus, pressed and disabled are deliberately NOT overridden:
	   they fall through to the global tokens, which is the MAIN button's
	   behaviour — hover is --Primary-Alt-50-Base (#af85ec) under
	   --Primary-90 text, per Figma 10409:3889. Re-declaring the secondary
	   button's own hover here would have made this the only pill on the site
	   that hovers to dark purple.

	   Only the token VALUES are mirrored, not .btn itself: the class also
	   carries --button-padding, --button-font-size and a fit-content min-width
	   that would fight the frame's fixed 94px full-width pill. */
	.hbspt-form .hs-form .hs_submit {
		margin-top: 48px !important;
	}

	.hbspt-form .hs-form .hs-button.primary,
	.hbspt-form .hs-form input[type="submit"].hs-button {
		/* Resting state only — the frame's black pill, the same three values
		   `.btn.btn-secondary` sets. Every other state is left to the global
		   tokens on purpose; see the block comment above. */
		--Light-button-Filled-Color: #fff;
		--Light-button-Filled-Fill: #0f0f0f;
		--Light-button-Filled-Outline: #0f0f0f;

		display: block !important;
		width: 100% !important;
		height: 94px !important;
		padding: 0 24px !important;
		color: var(--Light-button-Filled-Color) !important;
		background-color: var(--Light-button-Filled-Fill) !important;
		border: var(--button-border-width) var(--button-border-style) var(--Light-button-Filled-Outline) !important;
		border-radius: 9999px !important;
		box-shadow: none !important;
		font-family: var(--body-font) !important;
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 30px !important;
		letter-spacing: 0.2px !important;
		text-align: center !important;
		cursor: pointer !important;
		transition: var(--button-easing) !important;   /* BARE */
	}

	.hbspt-form .hs-form .hs-button.primary:hover {
		color: var(--Light-button-Filled-Hover-Color) !important;
		background-color: var(--Light-button-Filled-Hover) !important;
		border-color: var(--Light-button-Filled-Hover-Outline) !important;
	}

	/* .btn drops the UA outline on focus and carries the state in the fill and
	   the ring-coloured border instead — same here, so the two cannot diverge. */
	.hbspt-form .hs-form .hs-button.primary:focus-visible {
		outline: none !important;
		color: var(--Light-button-Filled-Focused-Color) !important;
		background-color: var(--Light-button-Filled-Focused) !important;
		border-color: var(--Light-button-Filled-Focused-Outline) !important;
	}

	.hbspt-form .hs-form .hs-button.primary:active {
		color: var(--Light-button-Filled-Pressed-Color) !important;
		background-color: var(--Light-button-Filled-Pressed) !important;
		border-color: var(--Light-button-Filled-Pressed-Outline) !important;
	}

	.hbspt-form .hs-form .hs-button.primary:disabled,
	.hbspt-form .hs-form .hs-button.primary.disabled {
		opacity: var(--Light-button-Filled-Disabled-Opacity) !important;
		color: var(--Light-button-Filled-Disabled-Color) !important;
		background-color: var(--Light-button-Filled-Disabled) !important;
		border-color: var(--Light-button-Filled-Disabled-Outline) !important;
		cursor: not-allowed !important;
	}

	/* --- Validation --------------------------------------------------------
	   No error state in the frame. Kept deliberately quiet — the message
	   sits under the rule it belongs to, at the small end of the type scale,
	   and the field's own hairline carries the colour. */
	.hbspt-form .hs-form .hs-error-msgs {
		margin: 6px 0 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.hbspt-form .hs-form .hs-error-msg,
	.hbspt-form .hs-form .hs-error-msgs label {
		font-family: var(--body-font) !important;
		font-size: 14px !important;
		line-height: 23.55px !important;
		letter-spacing: 0.14px !important;
		color: #b3261e !important;    /* FLAG: no error token in the system */
	}

	.hbspt-form .hs-form .hs-input.invalid {
		border-color: #b3261e !important;
	}

	/* reCAPTCHA — Google already hides the badge itself (it computes
	   `opacity: 0`; this is the invisible variant), but HubSpot's wrapper was
	   still holding a 60px box in the flow, which pushed the pill 108px below
	   the textarea instead of the frame's 48. Taking the wrapper out of flow
	   collapses that without touching the widget: it still renders and still
	   executes. `pointer-events: none` matters — an opacity-0 element is
	   still clickable, and out of flow this one lands over the submit pill.
	   The form is given a containing block so it cannot escape the section.

	   NOT display:none, and the badge's own opacity is not touched: hiding a
	   reCAPTCHA badge outright carries an attribution requirement, and that
	   is HubSpot's call to make in the form's own settings, not a styling
	   decision to take here. */
	.hbspt-form .hs-form {
		position: relative !important;
	}

	.hbspt-form .hs-form .hs_recaptcha {
		position: absolute !important;
		margin: 0 !important;
		pointer-events: none !important;
	}

	/* --- Below 600 ---------------------------------------------------------
	   DERIVED, not measured — the Figma page carries a 1440 frame only. The
	   two-up name row stacks, and the row/pill heights come down so a 94px
	   slab and a 60px field do not dominate a 375 screen. Type stays on the
	   20/30 body scale. */
	@media (max-width: 599.98px) {

		.hbspt-form .hs-form .form-columns-2 {
			display: block !important;
		}

		.hbspt-form .hs-form .form-columns-2 .hs-form-field + .hs-form-field {
			margin-top: 10px !important;
		}

		.hbspt-form .hs-form input[type="text"],
		.hbspt-form .hs-form input[type="email"],
		.hbspt-form .hs-form input[type="tel"],
		.hbspt-form .hs-form input[type="number"],
		.hbspt-form .hs-form input[type="url"],
		.hbspt-form .hs-form select.hs-input {
			height: 52px !important;
		}

		.hbspt-form .hs-form textarea.hs-input {
			height: 120px !important;
			min-height: 120px !important;
			padding: 16px !important;
		}

		.hbspt-form .hs-form fieldset:has(textarea.hs-input) {
			margin-top: 36px !important;
		}

		.hbspt-form .hs-form .hs_submit {
			margin-top: 36px !important;
		}

		.hbspt-form .hs-form .hs-button.primary,
		.hbspt-form .hs-form input[type="submit"].hs-button {
			height: 72px !important;
		}
	}
}