/*
Theme Name: Soft Landings
Theme URI: https://bitbucket.org/workcentral/llyod-soft-landings
Description: Child theme of Hello Elementor for the Soft Landings marketing site. Header, footer and navigation are theme templates; page content is built in Elementor.
Author: Work Central
Template: hello-elementor
Version: 1.4.1
Requires PHP: 8.0
Text Domain: soft-landings
*/

/*
 * Both families are variable fonts, so one file per subset covers every weight the design
 * uses. Bricolage Grotesque also carries an optical size axis, which is why the design's
 * "Bricolage Grotesque" and "Bricolage Grotesque 24pt" resolve to the same file. The
 * weight ranges below are the axis ranges reported by the files themselves. Licences are
 * in assets/fonts.
 */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * The design's palette and layout constants. Elementor holds the same values as global
 * colours and Site Settings for page content; these exist because the header and footer
 * are theme templates and never pass through Elementor.
 */
:root {
	--softlandings-primary: #0fa99a;
	--softlandings-secondary: #0c2b3b;
	--softlandings-text: #3c5a69;
	--softlandings-mint: #9fe8dd;
	--softlandings-accent: #086f66;
	--softlandings-surface: #fbfaf6;
	--softlandings-hairline: #dee6e4;
	--softlandings-content: 1320px;
	--softlandings-gutter: 40px;
	--softlandings-header-height: 80px;
	--softlandings-hero-scrim: linear-gradient(180deg, rgb(12 43 59 / 0%) 0%, rgb(12 43 59 / 45%) 38%, rgb(12 43 59 / 62%) 100%);
}

body.home {
	--softlandings-hero-scrim:
		linear-gradient(95deg, rgb(12 43 59 / 85%) 0%, rgb(12 43 59 / 68%) 50%, rgb(12 43 59 / 0%) 62%),
		linear-gradient(180deg, rgb(12 43 59 / 0%) 0%, rgb(12 43 59 / 18%) 55%, rgb(12 43 59 / 42%) 100%);
}

/*
 * On a phone the hero text runs the full width, so darkening from the left misses most of
 * it — measured 1.26:1 on the heading. Below the tablet breakpoint the home page goes back
 * to a vertical scrim, heavier than the other pages use because this photograph is the
 * brightest on the site.
 */
@media (max-width: 767px) {
	body.home {
		--softlandings-hero-scrim: linear-gradient(180deg, rgb(12 43 59 / 35%) 0%, rgb(12 43 59 / 62%) 45%, rgb(12 43 59 / 78%) 100%);
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The skip link carries its own hidden state rather than the shared .screen-reader-text:
 * the parent theme declares that class with position: absolute !important, which wins over
 * the fixed position the focused link needs and leaves it above the viewport whenever the
 * page is scrolled.
 */
.softlandings-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.softlandings-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip-path: none;
	background: #fff;
	color: var(--softlandings-secondary);
}

/* Header */

.softlandings-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--softlandings-hairline);
	background: rgb(251 250 246 / 90%);

	/* Safari only dropped the prefix in 18.0, so iOS 17 and earlier need this line. */
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.softlandings-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 49px;
	max-width: calc(var(--softlandings-content) + var(--softlandings-gutter) * 2);
	min-height: var(--softlandings-header-height);
	margin: 0 auto;
	padding: 17px var(--softlandings-gutter);
}

.softlandings-header__brand img,
.softlandings-footer__brand img {
	display: block;
	width: 173px;
	height: auto;
}

/*
 * The header falls back to a text link when no logo image is set, in
 * softlandings_the_logo(). Nothing on the built site matches this, and it still has to look
 * right the moment someone clears the logo in the Customizer.
 */
.softlandings-logo-text {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--softlandings-secondary);
	text-decoration: none;
}

.softlandings-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.softlandings-nav__list a {
	display: block;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.21;
	color: var(--softlandings-text);
	text-decoration: none;
}

.softlandings-nav__list .current-menu-item > a {
	color: var(--softlandings-secondary);
}

.softlandings-nav__list .current-menu-item > a,
.softlandings-nav__list a:hover,
.softlandings-nav__list a:focus-visible {
	border-bottom-color: var(--softlandings-primary);
}

/*
 * Focus outlines on the light grounds use the accent rather than the brand teal: the teal
 * measures 2.9:1 against them, under the 3:1 a focus indicator needs. On the navy footer
 * they use the mint.
 */
.softlandings-nav__list a:focus-visible {
	outline: 2px solid var(--softlandings-accent);
	outline-offset: 4px;
}

/*
 * The parent theme gives every plain button a placeholder style — a magenta outline that
 * fills on hover and focus. The toggle declares its own resting and hover appearance so
 * that never shows.
 */
.softlandings-nav-toggle,
.softlandings-nav-toggle:hover,
.softlandings-nav-toggle:focus {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}

.softlandings-nav-toggle:focus-visible {
	outline: 2px solid var(--softlandings-accent);
	outline-offset: 2px;
}

/*
 * The three bars are one element: the middle bar is the element's own background and the
 * outer two are its before and after, so the button needs no extra markup.
 */
.softlandings-nav-toggle__bars,
.softlandings-nav-toggle__bars::before,
.softlandings-nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--softlandings-secondary);
}

.softlandings-nav-toggle__bars {
	position: relative;
	margin: 0 auto;
}

.softlandings-nav-toggle__bars::before,
.softlandings-nav-toggle__bars::after {
	position: absolute;
	left: 0;
	content: "";
}

.softlandings-nav-toggle__bars::before {
	top: -7px;
}

.softlandings-nav-toggle__bars::after {
	top: 7px;
}

/* Footer */

.softlandings-footer {
	padding: 72px 0 0;
	background: var(--softlandings-secondary);
	color: #fff;
}

.softlandings-footer__inner,
.softlandings-footer__bar {
	max-width: calc(var(--softlandings-content) + var(--softlandings-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--softlandings-gutter);
}

.softlandings-footer__inner {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	padding-bottom: 62px;
}

/*
 * The file groups the logo with its text 16 apart and sets the social row 24 below that
 * pair. The text sits in a box taller than its two lines, centred, so the 63px box and the
 * centring are both kept: without them the social row and everything under it ride up.
 */
.softlandings-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 389px;
}

.softlandings-footer__description {
	display: grid;
	align-content: center;
	min-height: 63px;
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: rgb(255 255 255 / 62%);
}

.softlandings-social {
	display: flex;
	gap: 11px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.softlandings-social__link {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 50%;
	color: #fff;
}

.softlandings-social__link svg {
	width: 15px;
	height: 15px;
}

.softlandings-social__link:hover,
.softlandings-social__link:focus-visible {
	border-color: var(--softlandings-mint);
	color: var(--softlandings-mint);
}

/*
 * The footer menu is rendered two levels deep: a top-level item becomes a column heading
 * and its children become that column's links. The nav and its list step out of the box
 * tree so those columns sit in the footer row itself, which is what spaces them evenly
 * across the content width alongside the brand and contact columns.
 */
.softlandings-footer__nav,
.softlandings-footer__menu {
	display: contents;
}

.softlandings-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.softlandings-footer__menu .sub-menu {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.softlandings-footer__menu .sub-menu li + li {
	margin-top: 16px;
}

.softlandings-footer__menu > li > a,
.softlandings-footer__heading {
	margin: 0;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	display: block;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
}

.softlandings-footer__menu .sub-menu a,
.softlandings-contact,
.softlandings-contact a {
	display: block;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.21;
	color: rgb(255 255 255 / 62%);
	text-decoration: none;
}

.softlandings-contact,
.softlandings-contact a {
	line-height: 1.71;
}

.softlandings-contact {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.softlandings-contact__item + .softlandings-contact__item {
	margin-top: 16px;
}

.softlandings-footer__menu .sub-menu a:hover,
.softlandings-footer__menu .sub-menu a:focus-visible,
.softlandings-contact a:hover,
.softlandings-contact a:focus-visible,
.softlandings-footer__legal-list a:hover,
.softlandings-footer__legal-list a:focus-visible {
	color: #fff;
}

.softlandings-footer a:focus-visible {
	outline: 2px solid var(--softlandings-mint);
	outline-offset: 3px;
}

/*
 * The bar's rule spans the content column, not the gutter either side of it, so it is
 * drawn inside the bar rather than as its border.
 */
.softlandings-footer__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 24px;
	padding-bottom: 24px;
	line-height: 1.21;
}

.softlandings-footer__bar::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: var(--softlandings-gutter);
	border-top: 1px solid rgb(255 255 255 / 10%);
}

.softlandings-footer__copyright,
.softlandings-footer__legal-list a {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.21;
	color: rgb(255 255 255 / 50%);
	text-decoration: none;
}

.softlandings-footer__legal-list {
	display: flex;
	gap: 29px;
	margin: 0;
	font-size: 12px;
	line-height: 1.21;
	padding: 0;
	list-style: none;
}

/*
 * Search, 404 and any future archive route render through index.php rather than Elementor,
 * so their type and rhythm come from here. Values are the site's own: the 1320 column, the
 * body face, and the button shape the design uses everywhere else.
 */
.softlandings-page {
	max-width: calc(var(--softlandings-content) + var(--softlandings-gutter) * 2);
	margin: 0 auto;
	padding: 120px var(--softlandings-gutter);
}

.softlandings-page__title {
	margin: 0 0 24px;
	max-width: 20ch;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--softlandings-secondary);
}

.softlandings-page__text {
	margin: 0 0 32px;
	max-width: 62ch;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--softlandings-text);
}

.softlandings-page__action {
	display: inline-block;
	min-height: 50px;
	padding: 15px 27px;
	border-radius: 100px;
	background: var(--softlandings-primary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 20px;
	color: var(--softlandings-secondary);
	text-decoration: none;
	transition: background-color 300ms ease-out, color 300ms ease-out;
}

/*
 * The label on the teal is navy: white measures 2.93:1 there, under the 4.5:1 text needs.
 * The hover fill is the accent, which carries white at 6.04:1.
 */
.softlandings-page__action:hover,
.softlandings-page__action:focus-visible {
	background: var(--softlandings-accent);
	color: #fff;
}

.softlandings-page__action:focus-visible {
	outline: 2px solid var(--softlandings-accent);
	outline-offset: 3px;
}

.softlandings-results {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.softlandings-results__item + .softlandings-results__item {
	margin-top: 32px;
}

.softlandings-results__link {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--softlandings-secondary);
	text-decoration: none;
}

.softlandings-results__link:hover,
.softlandings-results__link:focus-visible {
	color: var(--softlandings-accent);
	text-decoration: underline;
}

.softlandings-results__excerpt {
	margin: 6px 0 0;
	max-width: 62ch;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--softlandings-text);
}

.softlandings-page .search-form {
	display: flex;
	gap: 12px;
	max-width: 460px;
}

.softlandings-page .search-form label {
	flex: 1;
}

.softlandings-page .search-field,
.softlandings-page .search-field:hover {
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	padding: 14px 16px;
	border: 1px solid var(--softlandings-hairline);
	border-radius: 8px;
	background: #fff;
	font-family: Inter, system-ui, sans-serif;

	/* 16px, not the design's 14: below 16 iOS Safari zooms the page in on focus and
	   never zooms back out. See the same note on the form fields below. */
	font-size: 16px;
	color: var(--softlandings-secondary);
}

/*
 * The search button states are declared for the same reason as the menu toggle's: the
 * parent theme gives every plain button a magenta placeholder fill on hover, and this was
 * the one button on the site still showing it.
 */
.softlandings-page .search-submit,
.softlandings-page .search-submit:hover,
.softlandings-page .search-submit:focus {
	min-height: 54px;
	padding: 15px 27px;
	border: 0;
	border-radius: 100px;
	background: var(--softlandings-secondary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 20px;
	color: #fff;
	cursor: pointer;
}

.softlandings-page .search-submit:hover {
	background: var(--softlandings-accent);
}

.softlandings-page .search-submit:focus-visible {
	outline: 2px solid var(--softlandings-accent);
	outline-offset: 3px;
}

/*
 * WPForms Lite exposes no styling controls, so the form's appearance is set here. Its own
 * stylesheet is switched off in the plugin's settings (Include Form Styling: None), which
 * is what lets these rules describe the form outright rather than override it. Values are
 * the file's: fields 61 tall, radius 8, 1px #DEE6E4, 16 padding, 16 between fields, 48
 * above the button.
 */
.softlandings-main .wpforms-field {
	padding: 0;
}

.softlandings-main .wpforms-field-label.wpforms-label-hide {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * The sum question from inc/contact-form.php sits between the fields and the button. Its
 * label stays visible, because the question is the label.
 */
/*
 * WPForms renders the sum question inside the submit container, not the field container,
 * so the 16px flex gap below never reached it and the button sat flush against the input.
 */
.softlandings-main .wpforms-submit-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 32px;
}

.softlandings-main .softlandings-sum .wpforms-field-label {
	display: block;
	margin-bottom: 8px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.21;
	color: var(--softlandings-secondary);
}

/*
 * The gap is flex rather than a margin on each following field. The anti-spam fields are
 * inserted at random and absolutely positioned; a sibling margin counted one as the field
 * before "Name" whenever it landed first, and pushed the form 16px down. Absolutely
 * positioned children take no part in flex layout, so the gap only ever falls between the
 * visible fields.
 */
.softlandings-main .wpforms-field-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.softlandings-main .wpforms-field input[type="text"],
.softlandings-main .wpforms-field input[type="email"],
.softlandings-main .wpforms-field input[type="tel"],
.softlandings-main .wpforms-field textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 61px;
	padding: 16px;
	border: 1px solid var(--softlandings-hairline);
	border-radius: 8px;
	background: #fff;
	font-family: Inter, system-ui, sans-serif;

	/*
	 * The design says 14px. Mobile Safari zooms the whole page in whenever a focused text
	 * input is under 16px, and it does not zoom back out on blur — so a visitor filling
	 * this form on an iPhone finishes it on a zoomed, side-scrolling page. This is the
	 * site's only enquiry route, so the two pixels go to the visitor.
	 */
	font-size: 16px;
	line-height: 1.65;
	color: var(--softlandings-secondary);
}

.softlandings-main .wpforms-field textarea {
	display: block;
	min-height: 132px;
	resize: vertical;
}

.softlandings-main .wpforms-field ::placeholder {
	color: var(--softlandings-text);
	opacity: 1;
}

.softlandings-main .wpforms-field :focus-visible {
	border-color: var(--softlandings-accent);
	outline: 2px solid var(--softlandings-accent);
	outline-offset: 1px;
}

.softlandings-main .wpforms-submit {
	width: 100%;
	min-height: 50px;
	padding: 15px 27px;
	border: 0;
	border-radius: 100px;
	background: var(--softlandings-primary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 20px;
	color: var(--softlandings-secondary);
	cursor: pointer;
	transition: background-color 300ms ease-out, color 300ms ease-out;
}

.softlandings-main .wpforms-submit:hover,
.softlandings-main .wpforms-submit:focus-visible {
	background: var(--softlandings-accent);
	color: #fff;
}

.softlandings-main .wpforms-error,
.softlandings-main .wpforms-error-container {
	margin-top: 8px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	color: #c0392b;
}

.softlandings-main .wpforms-field input.wpforms-error,
.softlandings-main .wpforms-field textarea.wpforms-error {
	margin-top: 0;
	border-color: #c0392b;
	color: var(--softlandings-secondary);
}

.softlandings-main .wpforms-confirmation-container,
.softlandings-main .wpforms-confirmation-container-full {
	padding: 24px;
	border: 1px solid var(--softlandings-hairline);
	border-radius: 8px;
	background: var(--softlandings-surface);
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--softlandings-secondary);
}

.softlandings-main .wpforms-confirmation-container p:last-child {
	margin-bottom: 0;
}

/*
 * The star row is five icons on one 16px line; the icon wrapper's line box would
 * otherwise make the row taller than the file's.
 */
.elementor-widget-icon .elementor-icon-wrapper,
.elementor-widget-icon .elementor-icon {
	line-height: 0;
}

.elementor-widget-icon svg {
	display: block;
}

@media (max-width: 1024px) {
	:root {
		--softlandings-header-height: 64px;
	}

	.softlandings-nav-toggle,
	.softlandings-nav-toggle:hover,
	.softlandings-nav-toggle:focus {
		display: block;
		order: 2;
	}

	.softlandings-nav {
		display: none;
		order: 3;
		width: 100%;
	}

	.softlandings-nav-open .softlandings-nav {
		display: block;
	}

	/* The panel pushes the page down, so the document behind it is held still. */
	.softlandings-nav-open {
		overflow: hidden;
	}

	.softlandings-header__inner {
		flex-wrap: wrap;
		gap: 0;
	}

	.softlandings-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 12px;
	}

	.softlandings-nav__list a {
		padding: 12px 0;
		border-bottom: 0;
	}

	.softlandings-nav__list .current-menu-item > a {
		color: var(--softlandings-primary);
	}

	.softlandings-footer__inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	.softlandings-footer__brand {
		grid-column: 1 / -1;
	}

	.softlandings-scroll-hint {
		display: none;
	}
}

@media (max-width: 767px) {
	:root {
		--softlandings-gutter: 20px;
	}

	/*
	 * The design's hard line breaks are placed for the 1320 column; at phone widths they
	 * would split lines that are already short. Scoped to the blocks that carry one.
	 */
	.softlandings-hard-break br {
		display: none;
	}

	.softlandings-footer {
		padding-top: 56px;
	}

	.softlandings-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.softlandings-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.softlandings-footer__legal-list {
		flex-wrap: wrap;
		gap: 20px;
	}

	/*
	 * Footer links are the only touch targets on the site under the 44px a finger needs:
	 * the column links draw 17px tall and "Terms" only 35x15. The padding grows the tap
	 * area without moving the text, so the footer reads exactly as it does now.
	 */
	.softlandings-footer__menu .sub-menu a,
	.softlandings-footer__legal-list a,
	.softlandings-contact a {
		padding-block: 12px;
	}

	.softlandings-footer__menu .sub-menu li + li {
		margin-top: 0;
	}
}

/*
 * The FAQ accordion.
 *
 * The widget is deprecated in this Elementor version and registers no style controls at
 * all — not typography, colour, border or spacing — so its rows keep Elementor's own
 * #D5D8DC grey and have no hover, on the one page whose whole content is a list of things
 * to click. These two rules put the row on the palette hairline and give the question the
 * same 200ms feedback the rest of the site uses.
 */
.softlandings-main .elementor-accordion .elementor-accordion-item {
	border-color: var(--softlandings-hairline);
}

.softlandings-main .elementor-accordion .elementor-tab-title {
	transition: background-color 200ms ease-out;
}

.softlandings-main .elementor-accordion .elementor-tab-title:hover {
	background-color: rgb(159 232 221 / 10%);
}

/*
 * A question is not a section heading. Elementor styles the accordion title with the
 * Primary heading token, so all fifteen questions were set at 36px - the same size as
 * "Questions we hear often" above them. The card title token is the one that fits: it is
 * what "Getting around" and "Convenience" use, and it carries its own smaller value at
 * each breakpoint, so this needs no media query of its own. The plus and minus take the
 * same token: left alone they are drawn from the row's own 28px and end up larger than the
 * question they belong to.
 */
.softlandings-main .elementor-accordion .elementor-accordion-title,
.softlandings-main .elementor-accordion .elementor-accordion-icon {
	font-size: var(--e-global-typography-softlandings_card_title-font-size);
	line-height: var(--e-global-typography-softlandings_card_title-line-height);
}

/*
 * Images fade in as they decode. Width and height attributes are always present, so this
 * changes opacity only and cannot move the layout.
 */
.softlandings-main img {
	animation: softlandings-image-in 400ms ease-out both;
}

@keyframes softlandings-image-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.softlandings-main img,
	.elementor-invisible {
		animation: none;
		opacity: 1;
	}
}

/*
 * Section entrance animations. The hidden state is scoped to a class the script adds, so
 * without JavaScript nothing is hidden. The script also opts out entirely for
 * reduced-motion and inside the Elementor editor.
 */
.softlandings-reveal-ready .softlandings-reveal {
	opacity: 0;
	transform: translateY(16px);
}

.softlandings-reveal-ready .softlandings-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.softlandings-reveal-ready .softlandings-reveal--d1.is-visible {
	transition-delay: 80ms;
}

.softlandings-reveal-ready .softlandings-reveal--d2.is-visible {
	transition-delay: 160ms;
}

.softlandings-reveal-ready .softlandings-reveal--d3.is-visible {
	transition-delay: 240ms;
}

.softlandings-reveal-ready .softlandings-reveal--d4.is-visible {
	transition-delay: 320ms;
}

/*
 * The hero's vertical caption. Elementor has no rotation control, and the rule beneath it
 * is part of the same element in the design.
 */
.softlandings-scroll-hint {
	position: absolute;
	right: 36px;
	bottom: 36px;
}

/*
 * The scroll hint stands at the right edge of the hero, which on the home page is open sky
 * in the client's photograph — 2.68:1 against the white text. It is one decorative line, so
 * it takes the same shadow as the hero eyebrow rather than dragging the scrim across the
 * part of the picture the photograph was chosen for.
 */
.softlandings-scroll-hint .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	writing-mode: vertical-rl;
	text-shadow: 0 1px 3px rgb(12 43 59 / 90%);
}

.softlandings-scroll-hint .elementor-heading-title::after {
	width: 1px;
	height: 44px;
	background: rgb(255 255 255 / 50%);
	content: "";
}

/*
 * An inline svg sits on the text baseline, which adds a few pixels to the icon column and
 * pushes the label off the design's measurement. Making it a block removes that.
 */
/*
 * A text editor's last paragraph carries the theme's bottom margin, which adds ~14px
 * below every block and pushes everything after it down. The design measures each text
 * box to its own lines, so the trailing margin goes; spacing between blocks is the
 * container gap.
 */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/*
 * Bricolage Grotesque carries an optical size axis, and the design is composed from two of
 * its named instances: the family default, which the file reports as opsz 14, and the 24pt
 * instance. Left alone the browser derives the optical size from the font size, so a 36px
 * heading would set at opsz 36 and run wider than the design. The axis is pinned to the
 * family default for the document and raised on the elements drawn from the 24pt instance.
 * Inter has no optical size axis, so the document value does not reach it.
 */
body {
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
}

.softlandings-opsz-24,
.softlandings-footer__menu > li > a,
.softlandings-footer__heading {
	font-variation-settings: "opsz" 24;
}

/*
 * The icon list widget's Gap control sets the icon's trailing padding, but the icon also
 * carries a quarter-em margin and the text a fixed 5px inset, so the drawn distance is
 * always larger than the control's value. Both are cleared so the control alone decides it.
 */
.elementor-icon-list-icon {
	--e-icon-list-icon-margin: 0;
}

.elementor-icon-list-icon + .elementor-icon-list-text {
	padding-inline-start: 0;
}

.elementor-icon-list-icon svg {
	display: block;
}


@media (prefers-reduced-motion: reduce) {
	.softlandings-reveal-ready .softlandings-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * The gutter between 1025px and 1400px.
 *
 * Elementor drops the tablet padding at 1025px, and the desktop sections carry none of
 * their own, so from 1025 to about 1400 the content box is the whole viewport and every
 * line of text runs into both window edges. 1280x800 and 1366x768 are the two commonest
 * laptop screens, so this is most of the laptops that will ever see the site. Above 1400
 * the 1320px content box wins on its own and this rule changes nothing.
 */
@media (min-width: 1025px) and (max-width: 1400px) {
	.softlandings-main .elementor > .e-con {
		padding-inline: var(--softlandings-gutter);
	}
}

/*
 * Hero legibility.
 *
 * The client asked for the photographs to be brighter, and they are — but white text over
 * a white Bermuda rooftop or a turquoise shallow fails WCAG AA in exactly those bright
 * patches, even where the average of the image is comfortable. A flat darkener would undo
 * the brightening the client asked for, so the scrim is a gradient: the sky and the top of
 * the image keep their new brightness, and the weight falls where the words are.
 *
 * Elementor's own overlay is ::before, so this takes ::after and the content is lifted
 * above both.
 *
 * The home page carries its own value for the gradient rather than a second rule: the
 * client chose a photograph of a Bermuda house for that hero, and its bright sky and white
 * roof sit centre and right while the heading sits lower left. A vertical scrim heavy
 * enough for that text would flatten the sunshine they picked it for, so home darkens from
 * the left instead and leaves the right of the picture alone.
 *
 * Selected structurally rather than by class: this Elementor version stores a container's
 * CSS Classes but never prints them, and offers no container render hook to put them back
 * (only elementor/frontend/widget/*). The hero is the first container inside main on all
 * ten pages, which was verified page by page.
 */
.softlandings-main .elementor > .e-con:first-of-type::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--softlandings-hero-scrim);
	pointer-events: none;
}

/*
 * The home hero's coordinates line is 14px, sits a quarter of the way down the photograph
 * and lands on its brightest cloud — measured at 3.82:1 even in white, where 4.5 is
 * needed, and no bottom-weighted scrim reaches that high. A shadow closes the gap without
 * darkening the picture. Applied to every hero eyebrow so the ten pages match.
 */
.softlandings-hero-eyebrow .elementor-heading-title {
	text-shadow: 0 1px 3px rgb(12 43 59 / 90%);
}

.softlandings-main .elementor > .e-con:first-of-type > .e-con-inner {
	position: relative;
	z-index: 1;
}

/*
 * The approved card hover (deviation 6, 11 September) by element id.
 *
 * It was written against .softlandings-card, which is in the page data, in the seed files
 * and in the rule below — and has never once appeared in the browser, because Elementor
 * does not print a container's CSS Classes and gives no hook to add them. The class stays
 * in the data in case a later version honours it; the ids are what actually work today.
 * Home: the two package cards and the three testimonial cards. Then the two team cards
 * and the three testimonial cards on their own pages.
 */
.softlandings-card,
.elementor-element-1000050,
.elementor-element-100005e,
.elementor-element-1000098,
.elementor-element-10000a0,
.elementor-element-10000a8,
.elementor-element-1200b2d,
.elementor-element-1200b33,
.elementor-element-12191cf,
.elementor-element-12191d7,
.elementor-element-12191df {
	transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.elementor-element-1000050:hover,
.elementor-element-100005e:hover,
.elementor-element-1000098:hover,
.elementor-element-10000a0:hover,
.elementor-element-10000a8:hover,
.elementor-element-1200b2d:hover,
.elementor-element-1200b33:hover,
.elementor-element-12191cf:hover,
.elementor-element-12191d7:hover,
.elementor-element-12191df:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgb(12 43 59 / 35%);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element-1000050,
	.elementor-element-100005e,
	.elementor-element-1000098,
	.elementor-element-10000a0,
	.elementor-element-10000a8,
	.elementor-element-1200b2d,
	.elementor-element-1200b33,
	.elementor-element-12191cf,
	.elementor-element-12191d7,
	.elementor-element-12191df {
		transition: none;
	}

	.elementor-element-1000050:hover,
	.elementor-element-100005e:hover,
	.elementor-element-1000098:hover,
	.elementor-element-10000a0:hover,
	.elementor-element-10000a8:hover,
	.elementor-element-1200b2d:hover,
	.elementor-element-1200b33:hover,
	.elementor-element-12191cf:hover,
	.elementor-element-12191d7:hover,
	.elementor-element-12191df:hover {
		transform: none;
	}
}

/**
 * One button height, outlined or filled.
 *
 * An outlined button carries a 1px border, which sits outside its padding and made it 2px
 * taller than the filled button next to it - visible in the hero, where the two sit side by
 * side. A transparent border of the same width on every button settles it without changing
 * how either one looks.
 */
.softlandings-main .elementor-button,
.softlandings-main .wpforms-submit {
	border: 1px solid transparent;
}

/**
 * A tick belongs to the first line of its item.
 *
 * Elementor centres the marker against the whole item, so an item that wraps to two lines
 * ends with its tick floating in the middle of the text. "Acclimation Check-In (Day 1, Day 7,
 * Day 30)" on Services is the one that shows it.
 *
 * Set through Elementor's own variable rather than by overriding align-items: its rule is
 * `.elementor-widget .elementor-icon-list-item`, which carries the same specificity as
 * anything scoped to the main element and wins on order.
 */
.softlandings-main .elementor-widget-icon-list {
	--icon-vertical-align: flex-start;
}

.softlandings-main .elementor-icon-list-icon {
	margin-top: 0.15em;
}