/*
Theme Name: Lagoon
Theme URI: https://colorlib.com/wp/themes/lagoon/
Author: Colorlib
Author URI: https://colorlib.com/
Description: A block theme for freight forwarders, logistics and transport companies. Road, sea and air services on a navy band, a tabbed freight quote request and an ask-about-a-shipment form that need no plugin, counters over a dotted world map, client testimonials, a blog and a contact page with a map — eight colour palettes, five type pairings, visitor dark mode and WooCommerce support. Full site editing throughout.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Update URI: https://updates.colorlib.com/theme/lagoon.json
Text Domain: lagoon
Tags: blog, portfolio, full-site-editing, block-patterns, block-styles, template-editing, wide-blocks, accessibility-ready, translation-ready, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, one-column, two-columns, right-sidebar, rtl-language-support, sticky-post, theme-options

Lagoon WordPress Theme, (C) 2026 Colorlib.
Lagoon is distributed under the terms of the GNU GPL v2 or later.

Lagoon bundles the following third-party resources:

Roboto Condensed and Archivo
License: SIL Open Font License 1.1, https://openfontlicense.org/
Source: https://fontsource.org/

Tabler Icons
License: MIT, https://github.com/tabler/tabler-icons/blob/main/LICENSE
Source: https://tabler.io/icons

World map dots
Drawn from Natural Earth 1:110m land (public domain), via world-atlas (ISC)
Source: https://www.naturalearthdata.com/

Photographs
License: Pexels License
Source: Pexels; readme.txt lists each photograph's page
*/

/*
 * A block theme styles itself from theme.json. What lives here is what
 * theme.json cannot express: the component styles behind the block style
 * variations registered in functions.php, the header's layout and sticky
 * behaviour, the icons, the hover states and the few layout corrections a
 * full-width design needs.
 *
 * This file is also the editor stylesheet (add_editor_style), so a card, a
 * counter or an icon looks the same while it is being edited.
 *
 * Every colour is a palette variable, which is what lets all eight palettes,
 * and dark mode, restyle every component.
 */

:root {
	/* The quote card's tab row, which overlaps the navy band above it. */
	--lagoon-tab-height: 2.75rem;
}

/* ==========================================================================
   Screen reader text
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	height: auto;
	left: 6px;
	padding: 15px 23px 14px;
	top: 7px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Layout rhythm

   WordPress separates the top-level pieces of a page — header, main, footer —
   and every full-width section inside a page's content with the root block
   gap. On a design built from bands, that gap is a strip of bare page between
   every pair of sections. Sections carry their own padding, so they meet edge
   to edge instead.
   ========================================================================== */

.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/*
 * A page built from sections needs no padding of its own. A page of ordinary
 * paragraphs still needs room to breathe, so the page templates pad their
 * content only where it does not start or end with a full-width section.
 */
.lagoon-page-content:not(:has(> .alignfull:first-child)) {
	padding-top: var(--wp--preset--spacing--80);
}

.lagoon-page-content:not(:has(> .alignfull:last-child)) {
	padding-bottom: var(--wp--preset--spacing--80);
}

/* An in-page link (the hero's "Request a quote" to #quote) lands clear of
   the sticky header. */
main [id] {
	scroll-margin-top: 8.5rem;
}

/* An <iframe> is inline, and auto margins do not centre an inline box. */
.lagoon-map {
	display: block;
}

@media (max-width: 781px) {
	.lagoon-map {
		height: 20rem !important;
	}
}

a {
	text-underline-offset: 0.18em;
}

/* ==========================================================================
   Header

   Two rows, as the template has it: a navy bar with the social links on the
   left and the phone and email on the right, then the pale row with the logo
   and the navigation. The whole header stays at the top of the screen and
   gains a shadow once the page scrolls (assets/js/interactions.js adds
   `is-scrolled`).
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Below 600px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.lagoon-header {
	position: relative;
	transition: box-shadow 0.4s ease;
}

.lagoon-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--header);
}

.lagoon-header > *,
.lagoon-header__bar {
	margin-block: 0;
	/* A group with a background gets core's 1.25em of padding; the rows
	   carry their own height. */
	padding-top: 0;
	padding-bottom: 0;
}

.lagoon-topbar {
	padding-top: 0;
	padding-bottom: 0;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
}

.lagoon-topbar__row {
	min-height: 2.5rem;
}

.lagoon-topbar__contacts {
	margin: 0;
	white-space: nowrap;
}

.lagoon-topbar__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.lagoon-topbar__contacts a + a {
	margin-left: 1.875rem;
}

/* The template's small red line icons before the phone and the email. */
.lagoon-topbar__contacts a::before {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background-color: var(--wp--preset--color--brand-on-dark);
	-webkit-mask: var(--lagoon-icon) center / contain no-repeat;
	mask: var(--lagoon-icon) center / contain no-repeat;
}

.lagoon-topbar__contacts a:hover,
.lagoon-topbar__contacts a:focus-visible {
	color: var(--wp--preset--color--brand-on-dark);
}

/* The template hides its top bar below 992px. */
@media (max-width: 991px) {
	.lagoon-header > .lagoon-topbar {
		display: none;
	}
}

.lagoon-header__bar {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--divider) 60%, transparent);
}

.lagoon-header__main {
	min-height: 5rem;
}

.lagoon-header__brand {
	flex: none;
}

/*
 * The site title carries the firm's mark: a rounded square in the brand
 * colour, as the template's logo, drawn as a mask so it follows the palette.
 * The name sets on two lines beside it. A site with its own logo uploaded
 * shows the logo and drops the name, as the template's single logo image does.
 */
.lagoon-header .wp-block-site-title {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
}

.lagoon-header .wp-block-site-title::before {
	content: "";
	flex: none;
	width: 3.125rem;
	height: 3.125rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url("assets/icons/mark.svg") center / contain no-repeat;
	mask: url("assets/icons/mark.svg") center / contain no-repeat;
}

.lagoon-header .wp-block-site-title a {
	display: block;
	max-width: 5.5em;
	text-decoration: none;
}

.lagoon-header .wp-block-site-logo:has(img) ~ .wp-block-site-title {
	display: none;
}

.lagoon-header .wp-block-navigation__container {
	gap: 0.25rem 2.8125rem;
}

.lagoon-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.25s ease;
}

.lagoon-header .wp-block-navigation a.wp-block-navigation-item__content:hover,
.lagoon-header .wp-block-navigation a.wp-block-navigation-item__content:focus-visible,
.lagoon-header .wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.lagoon-header .wp-block-navigation__submenu-container {
	border: 0;
	box-shadow: 0 10px 30px rgb(38 37 51 / 0.12);
	padding: 0;
	min-width: 12.5rem;
}

.lagoon-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.75rem 1.875rem;
}

/*
 * Core switches the navigation to its menu button below 600px; the template
 * collapses at 992px, where the links and the logo stop fitting on one row.
 */
@media (max-width: 991px) {
	.lagoon-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.lagoon-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.lagoon-header .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--contrast);
	}

	.lagoon-header .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}

	.lagoon-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 0.9375rem;
		padding: 0.35rem 0;
	}
}

/* ==========================================================================
   The dark-mode switch (inc/scheme.php). Here rather than in scheme.css so
   the editor, which loads this file, draws it as the icon it is.
   ========================================================================== */

.wp-block-button.lagoon-scheme-toggle > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	width: 44px;
	height: 44px;
	min-width: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.lagoon-scheme-toggle > .wp-block-button__link:hover,
.wp-block-button.lagoon-scheme-toggle > .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.lagoon-scheme-toggle > .wp-block-button__link::before {
	content: "";
	position: static;
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
	border: 0;
	background-color: currentColor;
	/* A moon, and a sun in dark mode, masked so they take the button's colour. */
	-webkit-mask: var(--lagoon-scheme-icon) center / contain no-repeat;
	mask: var(--lagoon-scheme-icon) center / contain no-repeat;
	--lagoon-scheme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
}

.wp-block-button.lagoon-scheme-toggle > .wp-block-button__link::after {
	content: none;
}

/* ==========================================================================
   Icons

   Tabler Icons, used as masks: the SVG supplies the shape and the element's
   own colour fills it, so an icon takes whatever palette is active and turns
   over in dark mode with no extra files. Each name sets --lagoon-icon, so
   the class can sit on a paragraph block without masking the paragraph; the
   component that carries it draws the icon on its ::before.
   ========================================================================== */

.lagoon-icon--message-question { --lagoon-icon: url("assets/icons/message-question.svg"); }
.lagoon-icon--phone { --lagoon-icon: url("assets/icons/phone.svg"); }
.lagoon-icon--file-invoice { --lagoon-icon: url("assets/icons/file-invoice.svg"); }
.lagoon-icon--file-certificate { --lagoon-icon: url("assets/icons/file-certificate.svg"); }
.lagoon-icon--snowflake { --lagoon-icon: url("assets/icons/snowflake.svg"); }
.lagoon-icon--plant-2 { --lagoon-icon: url("assets/icons/plant-2.svg"); }
.lagoon-icon--pill { --lagoon-icon: url("assets/icons/pill.svg"); }
.lagoon-icon--shopping-cart { --lagoon-icon: url("assets/icons/shopping-cart.svg"); }
.lagoon-icon--tool { --lagoon-icon: url("assets/icons/tool.svg"); }
.lagoon-icon--building-store { --lagoon-icon: url("assets/icons/building-store.svg"); }
.lagoon-icon--package { --lagoon-icon: url("assets/icons/package.svg"); }
.lagoon-icon--users { --lagoon-icon: url("assets/icons/users.svg"); }
.lagoon-icon--world { --lagoon-icon: url("assets/icons/world.svg"); }
.lagoon-icon--weight { --lagoon-icon: url("assets/icons/weight.svg"); }
.lagoon-icon--mail { --lagoon-icon: url("assets/icons/mail.svg"); }
.lagoon-icon--home { --lagoon-icon: url("assets/icons/home.svg"); }

/* ==========================================================================
   Type details
   ========================================================================== */

/* Kicker (block style: paragraph › Kicker): the small spaced capitals the
   template sets above every section title. */
.is-style-lagoon-kicker {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.is-style-lagoon-kicker:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

/* The template's bold line between a heading and its copy. */
.lagoon-lede {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	line-height: 1.6;
}

.lagoon-section-head {
	margin-bottom: var(--wp--preset--spacing--70);
}

.lagoon-section-head > * {
	margin-block: 0;
}

.lagoon-section-head > .is-style-lagoon-kicker {
	margin-bottom: 1.5625rem;
}

.lagoon-section-head .wp-block-heading,
.lagoon-about__title {
	text-transform: uppercase;
}

/* The template drops its forced line breaks below 992px. */
@media (max-width: 991px) {
	.lagoon-section-head .wp-block-heading br,
	.lagoon-about__title br,
	.lagoon-service__title br {
		display: none;
	}
}

/* Accent bar (block style: separator › Accent bar). */
.wp-block-separator.is-style-lagoon-bar:not(.is-style-wide):not(.is-style-dots) {
	width: 2.5rem;
	margin-left: 0;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--brand);
	opacity: 1;
}

.wp-block-separator.is-style-lagoon-bar.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* The template's bold capital link under a card: a red bar slides in before
   it when the card is hovered. */
.lagoon-more {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.6;
	text-transform: uppercase;
}

.lagoon-more a {
	position: relative;
	display: inline-block;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: padding 0.3s ease, color 0.3s ease;
}

.lagoon-more a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2.5rem;
	height: 3px;
	margin-top: -1.5px;
	background: var(--wp--preset--color--brand);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.lagoon-feature:hover .lagoon-more a,
.lagoon-service:hover .lagoon-more a,
.lagoon-more a:focus-visible {
	padding-left: 3.75rem;
}

.lagoon-feature:hover .lagoon-more a::before,
.lagoon-service:hover .lagoon-more a::before,
.lagoon-more a:focus-visible::before {
	opacity: 1;
}

/* ==========================================================================
   Buttons

   The template's square button: a fill, a hairline 5px inside it and a small
   triangle in the bottom-right corner, drawn by ::before and ::after so the
   label stays the block's own editable text. On hover the inside turns white
   and the fill stays as a 5px frame, the words and the triangle take the
   fill's colour — all measured, in every palette.
   ========================================================================== */

.wp-block-button:not(.lagoon-scheme-toggle) > .wp-block-button__link,
.lagoon-form__actions .wp-element-button,
.wp-block-post-comments-form .form-submit .wp-element-button,
.lagoon-sidebar .wp-block-search__button {
	position: relative;
	isolation: isolate;
	--lagoon-button-mark: var(--wp--preset--color--on-accent);
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-button:not(.lagoon-scheme-toggle) > .wp-block-button__link::before,
.lagoon-form__actions .wp-element-button::before,
.wp-block-post-comments-form .form-submit .wp-element-button::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid var(--lagoon-button-mark);
	pointer-events: none;
}

.wp-block-button:not(.lagoon-scheme-toggle) > .wp-block-button__link::after,
.lagoon-form__actions .wp-element-button::after,
.wp-block-post-comments-form .form-submit .wp-element-button::after {
	content: "";
	position: absolute;
	right: 5px;
	bottom: 5px;
	border: 10px solid transparent;
	border-right-color: var(--lagoon-button-mark);
	border-bottom-color: var(--lagoon-button-mark);
	pointer-events: none;
}

.wp-block-button:not(.lagoon-scheme-toggle) > .wp-block-button__link:hover,
.wp-block-button:not(.lagoon-scheme-toggle) > .wp-block-button__link:focus-visible,
.lagoon-form__actions .wp-element-button:hover,
.lagoon-form__actions .wp-element-button:focus-visible,
.wp-block-post-comments-form .form-submit .wp-element-button:hover,
.wp-block-post-comments-form .form-submit .wp-element-button:focus-visible {
	background: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 5px var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	--lagoon-button-mark: var(--wp--preset--color--accent);
}

/* Dark (block style: button › Dark): the hero's navy button. It is the
   heading colour with the page colour for its words, so in a dark palette,
   or in dark mode, it turns light rather than vanishing into the panel. */
.wp-block-button.is-style-lagoon-dark > .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	--lagoon-button-mark: var(--wp--preset--color--base);
}

.wp-block-button.is-style-lagoon-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-lagoon-dark > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--accent);
	box-shadow: none;
	color: var(--wp--preset--color--on-accent);
	--lagoon-button-mark: var(--wp--preset--color--on-accent);
}

/* Light (block style: button › Light): the white button on the red box. */
.wp-block-button.is-style-lagoon-light > .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	--lagoon-button-mark: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-lagoon-light > .wp-block-button__link:hover,
.wp-block-button.is-style-lagoon-light > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--dark);
	box-shadow: inset 0 0 0 5px var(--wp--preset--color--base);
	color: var(--wp--preset--color--overlay);
	--lagoon-button-mark: var(--wp--preset--color--overlay);
}

/* ==========================================================================
   The hero and the page banners: a photograph toned in the brand colour,
   behind the template's two-panel box.
   ========================================================================== */

/* The photograph goes grey and the brand-coloured overlay multiplies over
   it: the template's red port, in whichever palette is active. */
.lagoon-duotone > .wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.05) brightness(1.15);
}

.lagoon-duotone > .wp-block-cover__background {
	mix-blend-mode: multiply;
}

.wp-block-cover.lagoon-hero {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.wp-block-columns.lagoon-titlebox {
	gap: 0;
	margin: 0 !important;
	max-width: 39.6875rem;
}

.lagoon-titlebox__row > * {
	margin-block: 0;
}

.lagoon-titlebox > .lagoon-panel {
	flex: 1 1 50% !important;
	margin: 0;
}

.lagoon-titlebox .lagoon-panel > * {
	margin-block: 0;
}

.lagoon-panel--title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3.75rem 3.3125rem;
}

.lagoon-panel--title .wp-block-heading,
.lagoon-panel--title .wp-block-post-title,
.lagoon-panel--title .wp-block-query-title {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.lagoon-panel--text {
	position: relative;
	padding: 3.75rem 2.5rem;
	/* A cover gives its contents light text; this panel is white. */
	color: var(--wp--preset--color--muted);
}

.lagoon-panel--text > p {
	max-width: 31rem;
}

/* The hero's button sits in the white panel's bottom-right corner. */
@media (min-width: 782px) {
	.lagoon-hero__box .lagoon-panel--text {
		padding-bottom: 6.25rem;
	}

	.lagoon-hero__box .lagoon-panel--text > .wp-block-buttons {
		position: absolute;
		right: 0.3125rem;
		bottom: 0.3125rem;
	}
}

@media (max-width: 781px) {
	.lagoon-titlebox .lagoon-panel--title {
		padding: 2.5rem 1.25rem;
	}

	.lagoon-titlebox .lagoon-panel--title .wp-block-heading,
	.lagoon-titlebox .lagoon-panel--title .wp-block-post-title,
	.lagoon-titlebox .lagoon-panel--title .wp-block-query-title {
		text-align: left !important;
	}

	.lagoon-titlebox .lagoon-panel--text {
		padding: 1.875rem 1.25rem;
	}

	.lagoon-titlebox .lagoon-panel--text > * + * {
		margin-top: 1.5rem;
	}
}

/* The banner: the same box, smaller, with the breadcrumb as a navy chip in
   the white panel's corner. */
.wp-block-cover.lagoon-banner {
	padding-top: 4.25rem;
	padding-bottom: 4.25rem;
}

.lagoon-banner__box .lagoon-panel--title {
	padding: 1.875rem 3.3125rem;
}

.lagoon-banner__box .lagoon-panel--text {
	padding: 1.875rem 2.5rem 5.5rem;
}

.lagoon-banner__box .lagoon-panel--text > p,
.lagoon-banner__box .wp-block-site-tagline {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.lagoon-banner__query {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.lagoon-breadcrumb {
	position: absolute;
	right: 0;
	bottom: 0;
	gap: 0 !important;
	padding: 0 1.25rem;
	min-height: 3.75rem;
	background-color: var(--wp--preset--color--dark);
	font-size: 0.8125rem;
	text-transform: uppercase;
}

.lagoon-breadcrumb > * {
	margin: 0;
	font-size: inherit !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--overlay) !important;
	text-transform: uppercase;
}

.lagoon-breadcrumb__home {
	display: inline-flex;
	align-items: center;
}

.lagoon-breadcrumb__home::after {
	content: "";
	width: 1rem;
	height: 1rem;
	margin: 0 0.75rem;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/arrow-narrow-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-narrow-right.svg") center / contain no-repeat;
}

.lagoon-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.lagoon-breadcrumb a:hover,
.lagoon-breadcrumb a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.lagoon-banner__box .lagoon-panel--text {
		padding-bottom: 1.875rem;
	}

	.lagoon-breadcrumb {
		position: static;
		display: inline-flex !important;
		margin-top: 1.25rem;
	}
}

/* ==========================================================================
   Features beside the company story
   ========================================================================== */

.lagoon-features .wp-block-columns .wp-block-columns {
	margin-bottom: 0;
}

.lagoon-feature > * {
	margin-block: 0;
}

.lagoon-feature__icon {
	position: relative;
	width: 3.75rem;
	height: 3.75rem;
	margin: 0 !important;
	color: var(--wp--preset--color--brand);
}

.lagoon-feature__icon::before,
.lagoon-counter__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--lagoon-icon) left center / contain no-repeat;
	mask: var(--lagoon-icon) left center / contain no-repeat;
}

.lagoon-feature .lagoon-feature__title {
	margin-top: 1.5625rem;
	margin-bottom: 1.5625rem;
	font-weight: 400;
}

.lagoon-feature > p:not([class]) {
	margin-top: 0.3rem;
}

.lagoon-feature > .lagoon-more {
	margin-top: 1.25rem;
}

.lagoon-about > * {
	margin-block: 0;
}

.lagoon-about .lagoon-about__title {
	margin-top: 1.5625rem;
	margin-bottom: 2.5rem;
}

.lagoon-about .lagoon-lede + p {
	margin-top: 1.875rem;
}

.lagoon-about .wp-block-buttons {
	margin-top: 2.5rem;
}

/* ==========================================================================
   Statistics over a dotted world map
   ========================================================================== */

.lagoon-stats {
	position: relative;
	isolation: isolate;
}

/* Bands on the same white ground share one gap rather than two, as the
   template's sections do. */
.lagoon-features {
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

.lagoon-features + .lagoon-stats,
.lagoon-quote + .lagoon-stats,
.lagoon-quote + .lagoon-testimonials,
.lagoon-testimonials + .lagoon-latest,
.lagoon-testimonials + .lagoon-stats {
	padding-top: 0 !important;
}

.lagoon-stats,
.lagoon-testimonials {
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* The template's dotted map, drawn as a mask so it takes the palette. */
.lagoon-stats::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--wp--preset--spacing--80);
	left: 50%;
	width: min(71.25rem, 100%);
	aspect-ratio: 1440 / 544;
	transform: translateX(-50%);
	background-color: var(--wp--preset--color--divider);
	-webkit-mask: url("assets/images/world-map.svg") center top / contain no-repeat;
	mask: url("assets/images/world-map.svg") center top / contain no-repeat;
	opacity: 0.8;
	pointer-events: none;
}

@media (min-width: 782px) {
	.lagoon-stats__row > .lagoon-counters {
		margin-left: 8.33% !important;
	}
}

.lagoon-sectors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 92%;
	margin-top: var(--wp--preset--spacing--60) !important;
}

/* The template's ruled logo grid: lines between the tiles, none round the
   outside. */
.lagoon-sectors > .lagoon-sector {
	position: relative;
	margin: 0;
	padding: 5rem 0.9375rem 1.25rem;
	border: 1px solid var(--wp--preset--color--divider);
	border-width: 0 1px 1px 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.lagoon-sectors > .lagoon-sector:nth-child(3n) {
	border-right-width: 0;
}

.lagoon-sectors > .lagoon-sector:nth-child(n + 4) {
	border-bottom-width: 0;
}

.lagoon-sector::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: 50%;
	width: 3rem;
	height: 3rem;
	transform: translateX(-50%);
	background-color: currentColor;
	opacity: 0.55;
	-webkit-mask: var(--lagoon-icon) center / contain no-repeat;
	mask: var(--lagoon-icon) center / contain no-repeat;
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

.lagoon-sector:hover {
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 10px 40px -14px var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
}

.lagoon-sector:hover::before {
	background-color: var(--wp--preset--color--brand);
	opacity: 1;
}

@media (max-width: 599px) {
	.lagoon-sectors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}

	.lagoon-sectors > .lagoon-sector:nth-child(n) {
		border-width: 0 0 1px;
	}

	.lagoon-sectors > .lagoon-sector:nth-child(odd) {
		border-right-width: 1px;
	}

	.lagoon-sectors > .lagoon-sector:nth-child(n + 5) {
		border-bottom-width: 0;
	}
}

.lagoon-counters .wp-block-columns {
	margin-bottom: 0;
}

.lagoon-counter {
	height: 100%;
	border-bottom: 3px solid var(--wp--preset--color--divider);
	transition: border-color 0.3s ease;
}

.lagoon-counter > * {
	margin-block: 0;
}

.lagoon-counter:hover {
	border-color: var(--wp--preset--color--brand);
}

.lagoon-counter__icon {
	position: relative;
	width: 3.75rem;
	height: 3.75rem;
	color: var(--wp--preset--color--brand);
}

.lagoon-counter__number {
	margin-top: 1.25rem !important;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.lagoon-counter__label {
	margin-bottom: 1.25rem !important;
}

/* ==========================================================================
   Services on the navy band
   ========================================================================== */

.lagoon-service > * {
	margin-block: 0;
}

.lagoon-service .lagoon-service__photo {
	margin: 0;
	overflow: hidden;
}

.lagoon-service .lagoon-service__photo img {
	width: 100%;
	transition: transform 0.3s ease;
}

.lagoon-service:hover .lagoon-service__photo img {
	transform: scale(1.05);
}

.lagoon-service__box {
	padding: 3.125rem 3.125rem 2.8125rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--overlay) 30%, transparent);
	transition: background-color 0.3s ease;
}

.lagoon-service__box > * {
	margin-block: 0;
}

.lagoon-service .lagoon-service__title {
	font-weight: 400;
	line-height: 1.45;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.lagoon-service__text {
	margin: 1.25rem 0 !important;
}

.lagoon-service .lagoon-more a {
	color: var(--wp--preset--color--overlay);
}

/* Hover turns the box white, as the template's. */
.lagoon-service:hover .lagoon-service__box {
	background-color: var(--wp--preset--color--base);
}

.lagoon-service:hover .lagoon-service__title {
	color: var(--wp--preset--color--primary) !important;
}

.lagoon-service:hover .lagoon-service__text {
	color: var(--wp--preset--color--muted) !important;
}

.lagoon-service:hover .lagoon-more a {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 767px) {
	.lagoon-service__box {
		padding: 2.5rem 1.25rem 2.25rem;
	}
}

/* ==========================================================================
   The quote card: a navy heading band, then the white card with its tabs
   across the band's lower edge (assets/js/interactions.js turns the two
   headings into tabs; without it both forms show, one under the other).
   ========================================================================== */

.lagoon-quote {
	padding-bottom: var(--wp--preset--spacing--70);
}

.lagoon-quote__head {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: calc(var(--wp--preset--spacing--70) + var(--lagoon-tab-height));
}

/* Straight after the services band the navy simply continues. */
.lagoon-services + .lagoon-quote > .lagoon-quote__head {
	padding-top: 0;
}

.lagoon-quote__head .lagoon-section-head {
	margin-bottom: 0;
}

.lagoon-quote > .wp-block-group:not(.lagoon-quote__head) {
	margin-top: 0;
}

.lagoon-tabs {
	position: relative;
	margin-top: calc(-1 * var(--lagoon-tab-height)) !important;
}

.lagoon-tab {
	margin: 0 !important;
	padding: 1.875rem 2.5rem 3.125rem;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}

.lagoon-tab > * {
	margin-block: 0;
}

.lagoon-tab + .lagoon-tab {
	border-top: 1px solid var(--wp--preset--color--divider);
}

.lagoon-tab .lagoon-tab__label {
	margin-bottom: 1.25rem;
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}

.lagoon-tab__intro {
	margin-bottom: 1.25rem !important;
	font-size: var(--wp--preset--font-size--small);
}

/* With the script: a tab row on the navy, one panel at a time. */
.lagoon-tabs.is-tabbed {
	margin-top: 0 !important;
}

.lagoon-tabs.is-tabbed > .lagoon-tab + .lagoon-tab {
	border-top: 0;
}

.lagoon-tabs.is-tabbed .lagoon-tab__label {
	display: none;
}

.lagoon-tabs__list {
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--lagoon-tab-height)) !important;
}

.lagoon-tabs__tab {
	min-height: var(--lagoon-tab-height);
	padding: 0.5rem 2.375rem;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.lagoon-tabs__tab[aria-selected="true"],
.lagoon-tabs__tab:hover {
	border-bottom-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--primary);
}

.lagoon-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.lagoon-tabs.is-tabbed > .lagoon-tab[hidden] {
	display: none;
}

@media (max-width: 559px) {
	.lagoon-tab {
		padding: 1.5rem 1.25rem 2.25rem;
	}

	.lagoon-tabs__tab {
		padding: 0.5rem 1rem;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* ==========================================================================
   Testimonials: the red box
   ========================================================================== */

.lagoon-testimonials__frame {
	position: relative;
}

.lagoon-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	/* Room below the box for its red glow, which the scroller would clip. */
	padding-bottom: 5rem;
	margin-bottom: -2.5rem !important;
}

.lagoon-slider::-webkit-scrollbar {
	display: none;
}

.lagoon-slider > .lagoon-slide {
	flex: 0 0 100%;
	margin: 0 !important;
	box-sizing: border-box;
	scroll-snap-align: start;
}

.lagoon-testimonial {
	padding: 4.375rem 0.9375rem;
	box-shadow: var(--wp--preset--shadow--glow);
}

.lagoon-testimonial > * {
	max-width: 28.625rem;
	margin-inline: auto !important;
}

.lagoon-testimonial__text {
	margin-block: 0;
	font-style: italic;
}

.lagoon-testimonial__who {
	margin-top: 2.5rem !important;
	max-width: none;
}

.lagoon-testimonial__who > * {
	margin: 0;
}

.lagoon-testimonial__photo {
	flex: none;
	margin: 0 !important;
}

.lagoon-testimonial__photo img {
	display: block;
	width: 3.75rem;
	height: 3.75rem;
	object-fit: cover;
}

.lagoon-testimonial__name {
	margin: 0 0 0.3rem;
	font-size: 1.125rem;
	line-height: 1.3;
	text-transform: uppercase;
}

.lagoon-testimonial__role {
	margin: 0;
	font-weight: 700;
	line-height: 1.4;
}

.lagoon-slider__nav {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0;
}

.lagoon-slider__arrow {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.lagoon-slider__arrow::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/arrow-narrow-left.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-narrow-left.svg") center / contain no-repeat;
}

.lagoon-slider__arrow--next::before {
	-webkit-mask-image: url("assets/icons/arrow-narrow-right.svg");
	mask-image: url("assets/icons/arrow-narrow-right.svg");
}

.lagoon-slider__arrow:hover,
.lagoon-slider__arrow:focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--primary);
}

.lagoon-slider__arrow:disabled {
	opacity: 0.45;
	cursor: default;
}

/* ==========================================================================
   Latest posts: three ruled cards, the third on its own photograph
   ========================================================================== */

.lagoon-news .wp-block-post {
	display: flex;
	flex-direction: column;
	container-type: inline-size;
}

.lagoon-news .wp-block-post > * {
	margin-block: 0;
}

.lagoon-news .wp-block-post-featured-image {
	overflow: hidden;
	margin: 0;
}

.lagoon-news .wp-block-post-featured-image img {
	transition: transform 0.3s ease;
}

.lagoon-news .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.lagoon-news__box {
	flex: 1 1 auto;
	position: relative;
	z-index: 1;
	padding: 3.125rem 3.125rem 2.8125rem;
	border: 1px solid var(--wp--preset--color--divider);
}

.lagoon-news__box > * {
	margin-block: 0;
}

.lagoon-news__box > .wp-block-post-excerpt {
	margin-top: 1rem;
}

.lagoon-news__box > .lagoon-news__meta {
	margin-top: 1.125rem;
}

.lagoon-news .lagoon-news__title {
	font-weight: 400;
	line-height: 1.45;
	text-transform: uppercase;
}

.lagoon-news .lagoon-news__title a {
	transition: color 0.3s ease;
}

.lagoon-news .wp-block-post:hover .lagoon-news__title a,
.lagoon-news .lagoon-news__title a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.lagoon-news .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.lagoon-news__meta {
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--divider);
}

.lagoon-news__meta > * {
	margin: 0;
}

.lagoon-news__meta > * + * {
	position: relative;
}

.lagoon-news__meta > * + *::before {
	content: "|";
	position: absolute;
	left: calc(-0.5 * var(--wp--preset--spacing--30) - 0.15em);
}

.lagoon-news__meta a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 1199px) {
	.lagoon-news__box {
		padding: 2.5rem 1.25rem 2.1875rem;
	}
}

/* The third card: the photograph fills it under a navy wash and the words
   turn light, as the template's truck card. */
@media (min-width: 782px) {
	.lagoon-news .wp-block-post:nth-child(3) {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		isolation: isolate;
	}

	.lagoon-news .wp-block-post:nth-child(3) .wp-block-post-featured-image {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.lagoon-news .wp-block-post:nth-child(3) .wp-block-post-featured-image a,
	.lagoon-news .wp-block-post:nth-child(3) .wp-block-post-featured-image img {
		display: block;
		width: 100%;
		height: 100% !important;
		aspect-ratio: auto !important;
		object-fit: cover;
	}

	/* The words start where the other cards' do, below the photograph's
	   height; the box covers the whole card and carries the navy wash. */
	.lagoon-news .wp-block-post:nth-child(3) .lagoon-news__box {
		padding-top: calc(61.11cqw + 3.125rem);
		border-color: transparent;
		background-color: color-mix(in srgb, var(--wp--preset--color--dark) 85%, transparent);
		color: var(--wp--preset--color--on-dark);
	}

	.lagoon-news .wp-block-post:nth-child(3) .lagoon-news__title a {
		color: var(--wp--preset--color--overlay);
	}

	.lagoon-news .wp-block-post:nth-child(3):hover .lagoon-news__title a,
	.lagoon-news .wp-block-post:nth-child(3) .lagoon-news__title a:focus-visible {
		color: var(--wp--preset--color--brand-on-dark);
	}

	.lagoon-news .wp-block-post:nth-child(3) .lagoon-news__meta {
		border-top-color: var(--wp--preset--color--overlay);
	}
}

/* ==========================================================================
   Contact
   ========================================================================== */

.lagoon-contact__details > * {
	margin-block: 0;
}

.lagoon-contact-item {
	position: relative;
	min-height: 2rem;
	padding-left: 2.8125rem;
	line-height: 1.6;
}

.lagoon-contact-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--muted);
	-webkit-mask: var(--lagoon-icon) center / contain no-repeat;
	mask: var(--lagoon-icon) center / contain no-repeat;
}

.lagoon-contact-item strong {
	display: inline-block;
	margin-bottom: 0.2rem;
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
}

.lagoon-contact-item a {
	color: inherit;
	text-decoration: none;
}

.lagoon-contact-item a:hover,
.lagoon-contact-item a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Blog: the post list, the single post and the sidebar
   ========================================================================== */

.lagoon-posts .wp-block-post {
	position: relative;
	container-type: inline-size;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 10px 30px -12px rgb(38 37 51 / 0.18);
}

.lagoon-posts .wp-block-post > * {
	margin-block: 0;
}

.lagoon-posts .wp-block-post-featured-image {
	margin: 0;
}

/* The red date badge over the photograph's foot, as the template's. The
   photograph is 750/375, so its height is half the card's width. */
.lagoon-date {
	position: absolute;
	top: calc(50cqw - 3.5rem);
	left: 1.875rem;
	z-index: 1;
	min-width: 3.75rem;
	padding: 0.5rem 0.625rem;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	text-align: center;
	line-height: 1.2;
}

.lagoon-date > * {
	margin: 0 !important;
}

/* A result with no photograph (a page, in search) has nothing to sit on:
   the badge takes its place at the top of the card instead. */
.lagoon-posts .wp-block-post:not(:has(.wp-block-post-featured-image)) .lagoon-date {
	position: static;
	display: inline-block;
	margin: 1.875rem 0 0 1.875rem;
}

.lagoon-posts .wp-block-post:not(:has(.wp-block-post-featured-image)) .lagoon-posts__body {
	padding-top: 1.25rem;
}

.lagoon-date .lagoon-date__day {
	font-size: 1.3125rem;
	font-weight: 700;
}

.lagoon-date .lagoon-date__month {
	font-size: var(--wp--preset--font-size--small);
}

.lagoon-posts__body {
	padding: 3.125rem 1.875rem 1.875rem;
}

.lagoon-posts__body > * {
	margin-block: 0;
}

.lagoon-posts .wp-block-post-title a:hover,
.lagoon-posts .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.lagoon-posts .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.lagoon-post__meta {
	color: var(--wp--preset--color--muted);
}

.lagoon-post__meta > * {
	margin: 0;
}

.lagoon-post__meta a {
	color: inherit;
	text-decoration: none;
}

.lagoon-post__meta a:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-post-terms a {
	text-decoration: none;
}

/* A category line, a date and a comment count each carry a small icon. */
.lagoon-post-cats,
.lagoon-post-date,
.lagoon-comments-count {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.lagoon-post-cats::before,
.lagoon-post-date::before,
.lagoon-comments-count::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/user.svg") center / contain no-repeat;
	mask: url("assets/icons/user.svg") center / contain no-repeat;
}

.lagoon-post-date::before {
	-webkit-mask-image: url("assets/icons/calendar.svg");
	mask-image: url("assets/icons/calendar.svg");
}

.lagoon-comments-count::before {
	-webkit-mask-image: url("assets/icons/message.svg");
	mask-image: url("assets/icons/message.svg");
}

.lagoon-news .lagoon-comments-count::before {
	content: none;
}

.wp-block-query-pagination {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-query-pagination .current,
.wp-block-query-pagination a:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* The single post. */
.lagoon-article > .wp-block-post-featured-image {
	margin-bottom: 0;
}

.lagoon-article > .lagoon-article__title {
	margin-top: 1.875rem;
	margin-bottom: 0;
	text-transform: none;
}

.lagoon-article > .lagoon-post__meta {
	margin-top: 0.75rem;
}

.lagoon-post-tags a {
	text-decoration: none;
}

/* Headings inside an article step down: the section scale (42px h2) is for
   bands on a page, not for a subheading in a column of copy. */
.lagoon-article .wp-block-post-content h2 {
	margin-top: 2.5rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.lagoon-article .wp-block-post-content h3 {
	margin-top: 2rem;
	font-size: var(--wp--preset--font-size--large);
}

/* The single post's quotations, as the template's: a pale panel with a rule. */
.wp-block-quote {
	margin-inline: 0;
}

.wp-block-quote p {
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.75rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 700;
}

.wp-block-post-navigation-link a {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-decoration: none;
}

.wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--primary);
}

.lagoon-author > * {
	margin-block: 0;
}

.lagoon-author .wp-block-columns {
	margin: 0;
}

.lagoon-author .wp-block-avatar img {
	display: block;
}

.lagoon-author__name {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.lagoon-author .wp-block-post-author-biography {
	margin: 0;
}

/* Box (block style: group › Box) — the sidebar's widgets and the author box. */
.is-style-lagoon-box {
	padding: 1.875rem;
	background-color: var(--wp--preset--color--surface);
}

.is-style-lagoon-box > * {
	margin-block: 0;
}

.is-style-lagoon-box > * + * {
	margin-top: 1.5rem;
}

.lagoon-box__title {
	padding-bottom: 0.9375rem;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	font-size: 1.125rem !important;
}

.is-style-lagoon-box ul {
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

/* Categories and archives with counts: ruled, the count in brackets. */
.lagoon-counts li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	font-size: var(--wp--preset--font-size--small);
}

.lagoon-counts a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.lagoon-counts a:hover {
	color: var(--wp--preset--color--primary);
}

.lagoon-recent li {
	display: flow-root;
	margin-bottom: 1.25rem;
}

.lagoon-recent li:last-child {
	margin-bottom: 0;
}

.lagoon-recent .wp-block-latest-posts__featured-image.alignleft {
	margin: 0 1.25rem 0 0;
}

.lagoon-recent .wp-block-latest-posts__featured-image img {
	width: 5rem;
	height: 5rem;
	object-fit: cover;
}

.lagoon-recent .wp-block-latest-posts__post-title {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

.lagoon-recent .wp-block-latest-posts__post-title:hover {
	color: var(--wp--preset--color--primary);
}

.lagoon-recent .wp-block-latest-posts__post-date {
	margin-top: 0.4rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-tag-cloud.lagoon-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wp-block-tag-cloud a {
	margin: 0;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--wp--preset--color--divider);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wp-block-tag-cloud a:hover,
.wp-block-tag-cloud a:focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* The sidebar's search: a white field and the full-width red button. */
.lagoon-sidebar .wp-block-search__inside-wrapper {
	flex-wrap: wrap;
	gap: 0.625rem;
}

.lagoon-sidebar .wp-block-search__input {
	flex: 1 1 100%;
	border-color: var(--wp--preset--color--divider);
}

.lagoon-sidebar .wp-block-search__button {
	flex: 1 1 100%;
	margin: 0;
	padding: 0.9rem 1rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.lagoon-sidebar .wp-block-search__button:hover,
.lagoon-sidebar .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--overlay);
}

/* Comments. */
.lagoon-comments .wp-block-post-comments-form {
	margin-top: var(--wp--preset--spacing--60);
}

.lagoon-comments .wp-block-comments-title {
	font-weight: 700;
}

.lagoon-comments .wp-block-comment-template {
	padding-left: 0;
}

.lagoon-comments .wp-block-comment-template ol {
	padding-left: var(--wp--preset--spacing--50);
}

.lagoon-comments .wp-block-comment-author-name {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.lagoon-comments .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.lagoon-comments .wp-block-comment-date a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.lagoon-reply {
	margin-left: auto;
}

.lagoon-reply a {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.lagoon-reply a:hover,
.lagoon-reply a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Footer: the red call-to-action box across the navy's top edge
   ========================================================================== */

.lagoon-footer > * {
	margin-block: 0;
}

/* Half page, half navy: the box sits across the line, as the template's. */
.lagoon-cta-wrap {
	background: linear-gradient(to bottom, var(--wp--preset--color--base) 50%, var(--wp--preset--color--dark) 50%);
}

.wp-block-group.lagoon-cta {
	padding: 3.625rem 4.25rem;
	box-shadow: var(--wp--preset--shadow--glow);
}

.lagoon-cta__box > .wp-block-group > * {
	margin-block: 0;
}

.lagoon-cta__kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.lagoon-cta .lagoon-cta__title {
	margin: 0.5rem 0 0;
	font-weight: 400;
	text-transform: uppercase;
}

@media (max-width: 991px) {
	.wp-block-group.lagoon-cta {
		padding: 3.375rem 1.25rem;
	}
}

.lagoon-footer__body {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

.lagoon-footer .lagoon-footer__title {
	margin-bottom: 1.5625rem;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
}

.lagoon-footer__body p {
	margin-block: 0 1.25rem;
}

.lagoon-footer__legal {
	margin-top: 1.875rem !important;
}

.lagoon-footer__legal a {
	color: var(--wp--preset--color--overlay);
}

.lagoon-footer__legal a:hover,
.lagoon-footer__legal a:focus-visible {
	text-decoration: none;
}

/* Plain icons (block style: social links › Plain icons): the template's bare
   small icons, in the words' colour. */
.wp-block-social-links.is-style-lagoon-plain {
	gap: 0.25rem 1.25rem;
}

.wp-block-social-links.is-style-lagoon-plain .wp-social-link.wp-block-social-link {
	border-radius: 0;
	background: none;
	color: inherit;
	transition: color 0.3s ease;
}

.wp-block-social-links.is-style-lagoon-plain .wp-social-link a {
	padding: 0.25rem;
	color: inherit;
}

.wp-block-social-links.is-style-lagoon-plain .wp-social-link svg {
	width: 0.875rem;
	height: 0.875rem;
}

.wp-block-social-links.is-style-lagoon-plain .wp-social-link:hover,
.wp-block-social-links.is-style-lagoon-plain .wp-social-link:focus-within {
	color: var(--wp--preset--color--brand-on-dark);
	transform: none;
}

.lagoon-footer .wp-block-social-links.is-style-lagoon-plain {
	color: var(--wp--preset--color--overlay);
}

/* ==========================================================================
   Scroll reveals (assets/js/interactions.js)

   Hidden only once the script has run and only for what is below the first
   screen, so a visitor without JavaScript, a crawler, or anyone looking at the
   top of the page sees content immediately.
   ========================================================================== */

.lagoon-motion .lagoon-reveal {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--lagoon-reveal-delay, 0ms);
}

.lagoon-motion .lagoon-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Reduced motion: no movement anywhere, content shown at once.
   ========================================================================== */

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

	.lagoon-slider {
		scroll-behavior: auto;
	}

	.lagoon-service:hover .lagoon-service__photo img,
	.lagoon-news .wp-block-post:hover .wp-block-post-featured-image img {
		transform: none;
	}

	/* !important: the button rules above set their transition with a
	   longer selector than this block's. */
	.wp-block-button > .wp-block-button__link,
	.lagoon-form__actions .wp-element-button,
	.wp-block-post-comments-form .form-submit .wp-element-button,
	.lagoon-sidebar .wp-block-search__button {
		transition: none !important;
	}

	.wp-block-button__link,
	.wp-element-button,
	.lagoon-form__round,
	.lagoon-more a,
	.lagoon-service__box,
	.lagoon-service .lagoon-service__photo img,
	.lagoon-news .wp-block-post-featured-image img,
	.lagoon-sector,
	.lagoon-counter {
		transition: none;
	}
}