/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Child Theme for Divi 5 - Optimized for 2026
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.86
*/

/* ==========================================================================
   Nets Tasmania — 9 Sep 2026
   Only for what Divi 5.9 exposes no module attribute for. Anything settable
   as a module attribute is set on the module, not here.
   Palette: navy #0b2b3c · accent #1a97c4 · light #f2f6f8
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SITE WIDTH
   Divi ships --content-width:80% and --content-max-width:1080px. On desktop
   every row is instead the page width less an 80px inset each side, capped
   at 1280px — inside the 1440px box (0b) that is exactly 1280px, matching
   the footer. Change the max to move the whole site.
   -------------------------------------------------------------------------- */
:root {
	--content-max-width: 1280px;
}

@media (min-width: 981px) {
	:root {
		--content-width: calc(100% - 160px);
	}
}

/* Templates outside the builder (search.php, 404.php) wrap content in
   Divi's classic .container, hard-coded at 80% / 1080px; point it at the
   same variables so those pages match the rows. */
#main-content .container {
	width: var(--content-width);
	max-width: var(--content-max-width);
}

/* Those pages carry et_right_sidebar as well as et_no_sidebar, so Divi's
   right-sidebar gutter (padding-right:5.5%) still pulled the content in. */
.et_no_sidebar #left-area {
	padding-right: 0;
}

/* --------------------------------------------------------------------------
   0b. BOXED SITE — 29 Sep 2026, temporary
   Client wants the site narrower until photos that suit full-width arrive.
   Content is 1280px (section 0); the whole page (header, hero, footer) is boxed at
   1440px. Delete this block to return to full width.
   -------------------------------------------------------------------------- */
body {
	background-color: #f2f6f8;
}

#page-container {
	max-width: 1440px;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0 0 40px rgba(11, 43, 60, 0.08);
}

/* The header spans the box, not the 1280px content: its rows run the full
   1440px with a 40px inset so the logo and search icon keep off the edges;
   the Enquiry button sits flush right. The footer needs nothing here — the
   global row width (section 0) already gives it the 80px inset.
   From 768px, not 981: tablets get the desktop header too. */
@media (min-width: 768px) {
	.nt-topbar .et_pb_row,
	.nt-navbar .et_pb_row {
		width: 100%;
		max-width: none;
	}

	.nt-topbar .et_pb_row {
		padding-left: 40px;
		padding-right: 0;
	}

	/* Divi zeroes row padding inside fullwidth modules with !important,
	   so the nav inset goes on the menu module instead. */
	.nt-navbar .et_pb_fullwidth_menu {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* --------------------------------------------------------------------------
   1. TOP BAR
   -------------------------------------------------------------------------- */
.nt-topbar .et_pb_row {
	padding-top: 0;
	padding-bottom: 0;
}

.nt-topbar__inner {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: 26px;
	min-height: 42px;
}

.nt-topbar__link {
	display: inline-flex;
	align-items: center;
	color: #dbe8ef !important;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: color 0.2s ease;
}

.nt-topbar__link:hover {
	color: #ffffff !important;
}

.nt-topbar__cta {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 0 26px;
	background: var(--gcid-nt-blue, #1a97c4);
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease;
}

.nt-topbar__cta:hover {
	background: #148ab4;
}

/* Phones (≤767, where the text links used to wrap onto two lines): phone,
   email and Enquiry all become icons, centred on one row. The link text is
   only shrunk to 0, so screen readers still announce each one. The
   `.nt-topbar` prefix outranks the tablet block below, which comes later. */
@media (max-width: 767px) {
	.nt-topbar .et_pb_row {
		width: 100%;
		max-width: none;
		padding-right: 0;
	}
	.nt-topbar .nt-topbar__inner {
		justify-content: center;
		gap: 0;
		min-height: 40px;
	}
	/* spacing between Call / Email / Enquire as margins, not flex gap */
	.nt-topbar .nt-topbar__inner > * + * {
		margin-left: 40px !important;
	}
	.nt-topbar__link,
	.nt-topbar .nt-topbar__cta {
		justify-content: center;
		/* no flex gap: the hidden link text is a flex item too, so a gap
		   would count twice between icon and label */
		gap: 0;
		padding: 0;
		/* Divi's text-module font sizes on the links outrank a plain rule */
		font-size: 0 !important;
	}
	.nt-topbar__link::before,
	.nt-topbar__cta::before {
		content: "";
		flex: 0 0 18px;
		height: 18px;
		margin-right: 6px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.nt-topbar__link[href^="tel:"]::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
	}
	/* question-in-a-speech-bubble, the usual enquiry icon; plain like the
	   other two, no blue square */
	.nt-topbar .nt-topbar__cta {
		margin-left: 0;
		padding: 0;
		background: none;
		color: #dbe8ef !important;
	}
	.nt-topbar .nt-topbar__cta:hover {
		color: #ffffff !important;
	}
	/* Short visible labels beside the icons. The "/ ''" alt text keeps screen
	   readers on the real link text (the number, address, "Enquiry") rather
	   than reading the label as well. */
	.nt-topbar__link::after,
	.nt-topbar__cta::after {
		font-size: 13px;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		line-height: 1;
	}
	.nt-topbar__link[href^="tel:"]::after {
		content: "Call";
		content: "Call" / "";
	}
	.nt-topbar__link:not([href^="tel:"])::after {
		content: "Email";
		content: "Email" / "";
	}
	.nt-topbar__cta::after {
		content: "Enquire";
		content: "Enquire" / "";
	}
	.nt-topbar__cta::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 14.5h-2v-2h2v2zm0-3.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 14.5h-2v-2h2v2zm0-3.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z'/%3E%3C/svg%3E");
	}
}

/* --------------------------------------------------------------------------
   2. MAIN NAV ROW
   From 768px, not Divi's 981: a tablet gets the desktop menu (it wraps to
   two rows there) instead of the hamburger; see the 768–980 block below.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.nt-navbar .et_pb_fullwidth_menu .et_pb_row {
		display: flex;
		align-items: center;
	}

	/* Anchor the whole menu group to the container's right edge.
	   Divi's own flex-end rule for this style lives inside
	   @media (max-width:980px), so at desktop the base justify-content:
	   flex-start applies and .et_pb_menu__wrap (flex:1 1 auto) grows to
	   fill — leaving the items stranded mid-row. margin-left:auto alone
	   cannot fix that: a grown item leaves no free space for the margin
	   to absorb, so the flex basis has to be pinned as well.

	   justify-content is flex-start, not flex-end: once the group is
	   pinned and pushed right, the two differ only when the items wrap,
	   and then flex-start is what packs each line against the logo
	   instead of trailing it off the right edge. */
	.nt-navbar .et_pb_menu__wrap {
		flex: 0 1 auto !important;
		justify-content: flex-start !important;
		margin-left: auto !important;
	}

	/* Put the menu items and the search icon in ONE wrapping flow.
	   Divi nests them in separate boxes — the items live in
	   .et_pb_menu__menu > nav > ul, the button is that ul's uncle — so
	   .et_pb_menu__wrap wraps the nav as a single unit and the button
	   drops onto a line of its own, stranded under the menu. Collapsing
	   the three wrappers with display:contents promotes every <li> to a
	   flex item of the wrap alongside the button, so the icon simply
	   follows the last item onto whichever line that item lands on.
	   Scoped to desktop: below 981px Divi hides .et_pb_menu__menu for
	   the hamburger, and display:contents here would defeat that. */
	.nt-navbar .et_pb_menu__menu,
	.nt-navbar .et_pb_menu__menu > nav,
	.nt-navbar .et_pb_menu__menu > nav > ul.et-menu {
		display: contents;
	}

	/* the desktop row must not reserve space for the mobile toggle */
	.nt-navbar .et_mobile_nav_menu {
		display: none !important;
	}

	/* Room between items (Divi ships padding-right:22px).
	   Divi's own 11px li padding is cancelled by a -11px margin on the
	   ul, and display:contents above drops that margin along with the
	   rest of the ul's box — so zero the padding instead of letting the
	   whole menu shift right by 11px. */
	.nt-navbar .et-menu {
		margin-right: 0;
	}
	.nt-navbar .et-menu > li {
		padding-left: 0;
		padding-right: 34px;
	}
	.nt-navbar .et-menu > li:last-child {
		padding-right: 0;
	}

	/* keep the search icon off the last menu item */
	.nt-navbar .et_pb_menu__search-button {
		margin-left: 22px;
	}

	/* Divi stretches the open search across the whole row
	   (.et_pb_menu__search / -form are flex:1 1 auto, input width:100%).
	   Pin it to a sensible width beside the icon instead. */
	.nt-navbar .et_pb_menu__search-container {
		justify-content: flex-end;
	}
	.nt-navbar .et_pb_menu__search {
		flex: 0 1 auto;
	}
	.nt-navbar .et_pb_menu__search-form {
		flex: 0 1 auto;
		width: 340px;
		max-width: 55vw;
		border-bottom: 1px solid rgba(11, 43, 60, 0.25);
	}

	/* Active underline.
	   A positioned ::after landed mid-text because the anchor is an inline box;
	   text-decoration cannot be mispositioned and needs no layout context. */
	.nt-navbar ul.et-menu > li.current-menu-item > a,
	.nt-navbar ul.et-menu > li.current_page_item > a,
	.nt-navbar ul.et-menu > li.current-menu-ancestor > a,
	.nt-navbar ul.et-menu > li.current-menu-parent > a {
		text-decoration: underline;
		text-decoration-color: var(--gcid-nt-blue, #1a97c4);
		text-decoration-thickness: 3px;
		text-underline-offset: 9px;
		text-decoration-skip-ink: none;
	}
}

/* Tablet (768–980): Divi hides the menu and shows the hamburger below 981px;
   undo that so the desktop menu shows, wrapping onto two rows beside the
   logo. */
@media (min-width: 768px) and (max-width: 980px) {
	/* contents, as on desktop (section 2), so the items wrap one by one */
	.nt-navbar .et_pb_menu__menu,
	.nt-navbar .et_pb_menu__menu > nav,
	.nt-navbar .et_pb_menu__menu > nav > ul.et-menu {
		display: contents !important;
	}
	.nt-navbar .et_pb_fullwidth_menu.et_pb_module .et_pb_row .et_pb_menu__wrap {
		flex: 0 1 auto !important;
		min-width: 0;
		justify-content: flex-end !important;
		flex-wrap: wrap;
		gap: 4px 22px;
		margin-left: auto !important;
	}
	/* spacing as a flex gap, not li padding, so both rows end flush right */
	.nt-navbar .et-menu > li {
		padding-right: 0 !important;
	}
	/* Divi's 31px top/bottom link padding sizes the desktop bar; two rows of
	   it left an 80px gap between them */
	.nt-navbar .et-menu > li > a {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	.nt-navbar .et_pb_menu__search-button {
		align-self: center;
		height: 38px;
		margin-left: 0 !important;
	}
	/* the menu squeezed the logo to a sliver; the logo keeps its size and
	   the menu wraps instead */
	.nt-navbar .et_pb_menu__logo-wrap {
		flex: 0 0 auto !important;
		margin-right: 28px;
	}
	.nt-navbar .et_pb_menu__logo img {
		width: auto !important;
		max-height: 84px !important;
	}
}

/* Phone (≤767): no search, a larger logo centred, and the hamburger centred
   on its own row beneath it. */
@media (max-width: 767px) {
	.nt-navbar .et_pb_menu__search-button,
	.nt-navbar .et_pb_menu__search-container {
		display: none !important;
	}
	.nt-navbar .et_pb_fullwidth_menu .et_pb_row {
		flex-direction: column;
		align-items: center;
		padding-top: 16px !important;
		padding-bottom: 4px !important;
	}
	/* Divi gives the logo wrap a right margin/padding meant for the menu
	   beside it; zeroed on every wrapper so the image itself is centred */
	.nt-navbar .et_pb_menu__logo-wrap,
	.nt-navbar .et_pb_menu__logo,
	.nt-navbar .et_pb_menu__logo-wrap a {
		display: flex;
		justify-content: center;
		width: auto !important;
		max-width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Divi's module settings cap it at 64px on a phone */
	.nt-navbar .et_pb_menu__logo img {
		max-height: 110px !important;
		margin: 0 auto;
	}
	/* Divi's phone/tablet right-align is a three-class flex-end !important */
	.nt-navbar .et_pb_fullwidth_menu.et_pb_module .et_pb_row .et_pb_menu__wrap {
		flex: 0 0 auto !important;
		justify-content: center !important;
		width: 100%;
		margin: 4px 0 0 !important;
	}
	.nt-navbar .et_mobile_nav_menu {
		margin: 0 !important;
	}
}
/* logo links home (Divi 5.9's menu module renders no anchor around it) */
.nt-navbar .et_pb_menu__logo-wrap a {
	display: block;
}

/* --------------------------------------------------------------------------
   3. HERO SLIDER — arrows always visible
   arrows.advanced.show is already "on"; Divi's stock CSS hides them at
   opacity:0 and only reveals them on .et_pb_slider:hover.
   -------------------------------------------------------------------------- */
.et_pb_slider:not(.et_pb_slider_carousel) .et-pb-arrow-prev {
	left: 22px;
	opacity: 1 !important;
}

.et_pb_slider:not(.et_pb_slider_carousel) .et-pb-arrow-next {
	right: 22px;
	opacity: 1 !important;
}

.et_pb_slider:not(.et_pb_slider_carousel) .et-pb-arrow-prev,
.et_pb_slider:not(.et_pb_slider_carousel) .et-pb-arrow-next {
	text-shadow: 0 1px 6px rgba(6, 28, 40, 0.55);
}

/* On a phone the arrows sat on the ends of the subtitle lines; the dots and
   swiping are enough there. */
@media (max-width: 767px) {
	.et_pb_slider:not(.et_pb_slider_carousel) .et-pb-slider-arrows {
		display: none;
	}
}

/* nt-hero-height: at 1080p the stock 16% caption padding (230px each side in
   the 1440 box) made the hero ~695px tall and pushed "Featured Products"
   below the fold. 11% (~158px) lifts the heading into view on desktop;
   tablet/phone keep Divi stock. */
@media (min-width: 981px) {
	body.home .et_pb_fullwidth_slider_0 .et_pb_slide_description {
		padding-top: 11%;
		padding-bottom: 11%;
	}
}

/* nt-cards-gap: the gap under the hero was the section 80px + the heading
   row 27px = 107px; cut to 40px so the heading sits higher at 1080p. Home
   only (/products/ shares nt-cards). */
@media (min-width: 981px) {
	body.home .et_pb_section.nt-cards {
		padding-top: 40px;
	}
	body.home .et_pb_section.nt-cards > .et_pb_row:first-child {
		padding-top: 0;
		padding-bottom: 0;
	}
	/* equal 40px below the heading: drop the h1 10px + both 27px row pads */
	body.home .et_pb_section.nt-cards > .et_pb_row:first-child h1 {
		padding-bottom: 0;
	}
	body.home .et_pb_section.nt-cards > .et_pb_row:first-child + .et_pb_row {
		padding-top: 40px;
	}
}

/* --------------------------------------------------------------------------
   4. FEATURED PRODUCT CARDS — equal height, buttons on a common floor
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
	.nt-cards .et_pb_row {
		display: flex;
		align-items: stretch;
		gap: 26px;
	}

	/* Divi clears its float layout with .et_block_row:after. Once the row is a
	   flex container that clearfix becomes a flex ITEM, and `gap` puts a full
	   gap in front of it — which is why the last card stopped short of the
	   container's right edge by exactly the gap width. */
	.nt-cards .et_pb_row::after {
		display: none;
	}

	/* Divi gives 1_3 columns 29.67% + a 5.5% gutter, which is 132px of gap on a
	   1200px row. Equal flex tracks with a 26px gap give the cards ~80px more
	   width between them. (The row module's gutter attribute emits no class
	   here, so the spacing is set directly.) */
	.nt-cards .nt-card {
		flex: 1 1 0 !important;
		width: auto !important;
		margin-right: 0 !important;
	}
}

.nt-cards .nt-card {
	background: #ffffff;
	border: 1px solid #e3eaef;
	border-radius: 6px;
	box-shadow: 0 10px 28px rgba(11, 43, 60, 0.08);
	padding: 22px 22px 30px;
	display: flex;
	flex-direction: column;
}

.nt-cards .nt-card .et_pb_image {
	margin-bottom: 10px;
}

.nt-cards .nt-card .et_pb_image .et_pb_image_wrap,
.nt-cards .nt-card .et_pb_image img {
	width: 100%;
}

.nt-cards .nt-card .et_pb_button_module_wrapper {
	margin-top: auto;
	padding-top: 6px;
}

/* Card button hover — the static state inverted: the blue fill becomes the
   outline, the fill drops out, and the label goes navy.

   The outline is an inset box-shadow, not a border, on purpose. The static
   button is `border-width:0` and its padding comes from the preset rule
   `.preset--module--divi-button--default_wrapper .preset--module--divi-button--default`
   as four `!important` values, so a real 2px border on hover would widen the
   button by 4px in each direction with no padding left to give back — the
   label would jump under the cursor. An inset shadow paints the same 2px ring
   and costs no layout at all.

   `.et_pb_section.nt-cards` is compound, not descendant: nt-cards sits ON the
   section element, so a space there asks for a section inside a section and
   matches nothing.

   Selector weight is deliberate: one id, four classes, two elements. It has to
   outrank the preset's `color:#ffffff!important` and the fill on
   `body #page-container .et_pb_section .preset--module--divi-button--default`,
   plus Divi's own `.et_pb_bg_layout_light .et_pb_button:hover` grey wash. The
   preset rules are generated per page, so leave no tie to source order.
   `:focus-visible` rather than `:focus` so the inverted state does not stick
   after a mouse click. */
.nt-cards .nt-card .et_pb_button {
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

body #page-container .et_pb_section.nt-cards .nt-card a.et_pb_button:hover,
body #page-container .et_pb_section.nt-cards .nt-card a.et_pb_button:focus-visible {
	background-color: transparent !important;
	box-shadow: inset 0 0 0 2px #1a97c4 !important;
	color: #0b2b3c !important;
}

@media (max-width: 980px) {
	.nt-cards .nt-card {
		margin-bottom: 30px !important;
	}
}

/* --------------------------------------------------------------------------
   5. PHILOSOPHY & PRESENCE — the blue wave field is the section background
   Wave paths are the archive's own Elementor "waves" divider, recovered from
   the captured HTML. Each edge is filled in the neighbouring section's colour
   so the blue reads as cut with a wavy edge.
   -------------------------------------------------------------------------- */
.nt-philosophy {
	position: relative;
	overflow: hidden;
	padding-top: 120px !important;
	padding-bottom: 120px !important;
}

.nt-philosophy::before,
.nt-philosophy::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 44px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

.nt-philosophy::before {
	top: 0;
	background-image: url("images/wave-top.svg");     /* filled #ffffff — cards section above */
}

.nt-philosophy::after {
	bottom: 0;
	background-image: url("images/wave-bottom.svg");  /* filled #f2f6f8 — testimonials below */
}

.nt-philosophy > .et_pb_row {
	position: relative;
	z-index: 1;
}

.nt-philosophy .nt-icon {
	/* The icon is a <p>, and Divi's base rule is p{padding-bottom:1em} — at an
	   80px glyph that alone was ~80px of dead space under every icon. */
	margin: 0 0 6px;
	padding-bottom: 0 !important;
	font-family: ETmodules;
	font-size: 80px;
	line-height: 1;
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
}

/* breathing room under the subheading, before the blurb */
.nt-philosophy .et_pb_text_inner h5 {
	margin-top: 0;
	margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   6. TESTIMONIALS
   No card, no box, no slider background, no text shadow — the quote sits
   directly on the section. Logo on top, attribution beneath, per the common
   pattern for company (rather than person) testimonials.
   -------------------------------------------------------------------------- */
.nt-testimonials .et_pb_slider,
.nt-testimonials .et_pb_slides,
.nt-testimonials .et_pb_slide {
	background-color: transparent !important;
	background-image: none !important;
}

.nt-testimonials .et_pb_slide_description,
.nt-testimonials .et_pb_slide_description * {
	text-shadow: none !important;
}

.nt-testimonials .et_pb_slide_description {
	padding: 0 !important;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

/* Divi's stock caption entrance (fadeBottom, 0.9s delay + 0.7s, fill-mode
   both) holds the quote at opacity 0 for ~1.6s every time a slide becomes
   active — a blank panel on first view and between slides. The slide itself
   already cross-fades, so the caption needs no animation of its own. */
.nt-testimonials .et-pb-active-slide .et_pb_slide_description {
	animation: none;
}

.nt-testimonials .nt-quote {
	position: relative;
	padding-top: 8px;
}

/* decorative opening quote */
.nt-testimonials .nt-quote::before {
	content: "\201C";
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 96px;
	line-height: 0.7;
	color: var(--gcid-nt-blue, #1a97c4);
	opacity: 0.22;
	margin-bottom: 6px;
}

.nt-testimonials .nt-quote__logo-wrap {
	margin: 0 0 28px;
}

.nt-testimonials .nt-quote__logo {
	display: block;
	margin: 0 auto;
	max-width: 420px;
	height: auto;
}

.nt-testimonials .nt-quote__body p {
	color: #3d4f57;
	font-size: 19px;
	line-height: 1.85em;
	margin-bottom: 20px;
}

.nt-testimonials .nt-quote__body p:last-child {
	margin-bottom: 0;
}

.nt-testimonials .nt-quote__attrib {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(11, 43, 60, 0.12);
	display: inline-block;
	min-width: 260px;
}

.nt-testimonials .nt-quote__attrib p {
	color: #6b7c86;
	font-size: 15px;
	line-height: 1.6em;
	margin: 0;
}

.nt-testimonials .nt-quote__attrib strong {
	display: block;
	color: var(--gcid-nt-navy, #0b2b3c);
	font-size: 16px;
}

.nt-testimonials .et-pb-arrow-prev,
.nt-testimonials .et-pb-arrow-next {
	color: var(--gcid-nt-blue, #1a97c4) !important;
	text-shadow: none !important;
}

.nt-testimonials .et-pb-arrow-prev {
	left: -10px;
}

/* the dots sit in the slide's bottom ~40px, which is where the attribution
   ends; give them their own strip */
.nt-testimonials .et_pb_slide {
	padding-bottom: 48px !important;
}

.nt-testimonials .et-pb-arrow-next {
	right: -10px;
}

@media (max-width: 767px) {
	.nt-testimonials .nt-quote__body p {
		font-size: 17px;
		line-height: 1.75em;
	}
	.nt-testimonials .nt-quote__logo {
		max-width: 240px;
	}
	.nt-testimonials .et-pb-arrow-prev,
	.nt-testimonials .et-pb-arrow-next {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
/* The four columns are already mathematically equal (Divi: 20.875% + 5.5%
   gutters), so the unevenness is content, not sizing. Equal flex tracks with
   one fixed gap keep the space between them identical whatever the copy does. */
@media (min-width: 981px) {
	.nt-footer .et_pb_row {
		display: flex;
		align-items: flex-start;
		gap: 44px;
	}
	.nt-footer .et_pb_row::after {
		display: none;   /* see the note on .nt-cards .et_pb_row::after */
	}
	.nt-footer .et_pb_column {
		flex: 1 1 0;
		width: auto !important;
		margin-right: 0 !important;
	}
	.nt-footer .et_pb_column .et_pb_module:last-child {
		margin-bottom: 0;
	}
}

.nt-footer .et_pb_image {
	/* Divi centres image modules with margin-left/right:auto — text-align
	   has no effect on them, the auto margin is what has to go. */
	margin-bottom: 18px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* link lists read as lists, not bulleted content */
.nt-footer .et_pb_text_inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nt-footer .et_pb_text_inner ul li {
	margin-bottom: 8px;
	padding: 0;
}

/* Bottom bar height is governed by the module's own bottom margin, not the
   section padding — Divi gives modules in a 4_4 column margin-bottom:2.75%,
   which is ~33px on a 1200px row. */
.nt-footer-bar .et_pb_row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex;
	align-items: center;
}

.nt-footer-bar .et_pb_row::after {
	display: none;
}

.nt-footer-bar .et_pb_column {
	width: 100% !important;
	margin-right: 0 !important;
}

.nt-footer-bar .et_pb_module {
	margin-bottom: 0 !important;
}

.nt-footer-bar .nt-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.nt-footer-bar .nt-othrs {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.nt-footer-bar .nt-othrs:hover {
	opacity: 1;
}

.nt-footer-bar .nt-othrs img {
	display: block;
	width: auto;
	height: 13px;
}

@media (max-width: 767px) {
	.nt-footer-bar .nt-footer-bottom {
		justify-content: center;
		text-align: center;
	}
	/* the OTHRS credit is too prominent on its own on a phone; wider only */
	.nt-footer-bar .nt-othrs {
		display: none;
	}
}

/* ==========================================================================
   8. SEARCH RESULTS — divi-child/search.php
   The sidebar is not rendered at all; the et_no_sidebar body class (added in
   functions.php) lets Divi's own rule widen #left-area.
   ========================================================================== */

.nt-search #left-area {
	padding-bottom: 60px;
}

.nt-search__header {
	border-bottom: 2px solid #1a97c4;
	margin: 0 0 34px;
	padding: 0 0 18px;
}

.nt-search__title {
	color: #0b2b3c;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	padding: 0;
}

.nt-search__term {
	color: #1a97c4;
}

.nt-search__count {
	color: #3d4f57;
	font-size: 15px;
	margin: 8px 0 0;
	padding: 0;
}

/* Divi's base rule
      #left-area ol, .entry-content ol, .et-l--body ol, … {
          list-style-type: decimal; list-style-position: inside; padding: 0 0 23px }
   lives in the parent's inline critical CSS and has specificity (1,0,1). The
   original selector here was `.nt-search .nt-search__list` at (0,2,0), so Divi
   won and every result rendered a "1." "2." marker INSIDE the card (the
   position:inside is why it sat above the title rather than in a gutter).
   Qualifying with the same ID takes this to (1,1,1) and wins on merit — no
   !important, and the rule still only applies inside the search template. */
#left-area ol.nt-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nt-search__item {
	background: #f2f6f8;
	border-left: 4px solid #1a97c4;
	margin: 0 0 18px;
	padding: 22px 26px;
}

.nt-search__item-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

.nt-search__item-title a {
	color: #0b2b3c;
	text-decoration: none;
}

.nt-search__item-title a:hover,
.nt-search__item-title a:focus {
	color: #1a97c4;
	text-decoration: underline;
}

.nt-search__excerpt {
	color: #3d4f57;
	font-size: 16px;
	line-height: 1.6;
	margin: 8px 0 0;
	padding: 0;
}

/* ---- no results --------------------------------------------------------- */

.nt-search__empty {
	background: #f2f6f8;
	border-left: 4px solid #1a97c4;
	padding: 26px 30px;
}

.nt-search__empty p {
	color: #3d4f57;
	padding-bottom: 12px;
}

.nt-search__empty-lead {
	color: #0b2b3c;
	font-size: 19px;
	font-weight: 600;
}

.nt-search .nt-search__suggestions {
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
}

.nt-search__suggestions a {
	color: #1a97c4;
	font-weight: 600;
}

/* ---- search again form -------------------------------------------------- */

.nt-search__form {
	display: flex;
	gap: 10px;
	margin-top: 36px;
	max-width: 520px;
}

.nt-search__input {
	border: 1px solid #c3d3db;
	border-radius: 3px;
	color: #0b2b3c;
	flex: 1 1 auto;
	font-size: 16px;
	min-width: 0;
	padding: 12px 14px;
}

.nt-search__input:focus {
	border-color: #1a97c4;
	outline: 2px solid rgba(26, 151, 196, 0.35);
	outline-offset: 1px;
}

.nt-search__submit {
	background: #1a97c4;
	border: 0;
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 24px;
}

.nt-search__submit:hover,
.nt-search__submit:focus {
	background: #0b2b3c;
}

/* ---- pagination --------------------------------------------------------- */

.nt-search .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 30px;
}

.nt-search .pagination .page-numbers {
	background: #f2f6f8;
	color: #0b2b3c;
	display: inline-block;
	padding: 8px 14px;
	text-decoration: none;
}

.nt-search .pagination .page-numbers.current,
.nt-search .pagination a.page-numbers:hover {
	background: #0b2b3c;
	color: #fff;
}

/* ==========================================================================
   9. RESPONSIVE PASS — Divi breakpoints are 980 / 767 / 479
   Covers everything added or changed on 9 Sep 2026. Desktop-only layout rules
   (nav anchoring, card/footer flex tracks, search width) are already scoped to
   min-width:981px so Divi's own stacking takes over below that.
   ========================================================================== */

/* ---- tablet: 768–980 ---------------------------------------------------- */
@media (max-width: 980px) {
	/* top bar still fits on one line here, just tighter */
	.nt-topbar__inner {
		gap: 16px;
		min-height: 40px;
	}
	.nt-topbar__link {
		font-size: 13px;
	}
	.nt-topbar__cta {
		padding: 0 18px;
		font-size: 12px;
	}

	.nt-philosophy {
		padding-top: 92px !important;
		padding-bottom: 92px !important;
	}
	.nt-philosophy::before,
	.nt-philosophy::after {
		height: 34px;
	}
	.nt-philosophy .nt-icon {
		font-size: 68px;
	}

	/* keep the arrows off the quote at narrower widths: pinned to the edges,
	   and the quote pulled in clear of them */
	.nt-testimonials .et-pb-arrow-prev {
		left: 0;
	}
	.nt-testimonials .et-pb-arrow-next {
		right: 0;
	}

	/* stacked footer columns need their own rhythm back */
	.nt-footer .et_pb_column .et_pb_module {
		margin-bottom: 22px;
	}
}

/* the search box keeps its 520px cap only while there is room to spare */
@media (max-width: 980px) {
	.nt-search__form {
		max-width: none;
	}
}

/* ---- tablet only: 768–980 ----------------------------------------------- */
/* Kept out of the ≤980 block above on purpose: these are two-column / side-by-
   side layouts, and at ≤980 they also hit phones (floated footer columns went
   side by side and escaped the section; card buttons went right-aligned). */
@media (min-width: 768px) and (max-width: 980px) {
	.nt-testimonials .et_pb_slide_description {
		padding: 0 44px !important;
	}

	/* four stacked left-aligned columns left most of the dark band empty on
	   a tablet; two by two instead (phones stack and centre, below) */
	.nt-footer .et_pb_row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 36px 44px;
	}
	.nt-footer .et_pb_row::after {
		display: none;
	}
	.nt-footer .et_pb_column {
		width: auto !important;
		margin: 0 !important;
	}

	/* stacked full-width product cards made the section ~2,200px tall on a
	   tablet; lay each card out image-left instead */
	.nt-cards .nt-card {
		display: grid;
		grid-template-columns: 42% 1fr;
		grid-template-rows: auto 1fr;
		column-gap: 24px;
	}
	.nt-cards .nt-card .et_pb_image {
		grid-row: 1 / span 2;
		margin-bottom: 0 !important;
	}
	.nt-cards .nt-card .et_pb_button_module_wrapper {
		align-self: end;
	}

	/* the search box keeps its 520px cap only while there is room to spare */
}

/* ---- phone: ≤767 -------------------------------------------------------- */
@media (max-width: 767px) {
	.nt-philosophy {
		padding-top: 68px !important;
		padding-bottom: 68px !important;
	}
	.nt-philosophy::before,
	.nt-philosophy::after {
		height: 24px;
	}
	.nt-philosophy .nt-icon {
		font-size: 58px;
		margin-bottom: 4px;
	}
	.nt-philosophy .et_pb_text_inner h5 {
		margin-bottom: 12px;
	}

	.nt-testimonials .nt-quote::before {
		font-size: 64px;
	}
	.nt-testimonials .nt-quote__attrib {
		min-width: 0;
		width: 100%;
	}

	.nt-cards .nt-card {
		padding: 18px 18px 26px;
	}

	/* stacked footer columns: logo and text centred */
	.nt-footer .et_pb_text_inner {
		text-align: center;
	}
	.nt-footer .et_pb_image {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ---- small phone: ≤479 -------------------------------------------------- */
@media (max-width: 479px) {
	.nt-philosophy {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
	.nt-philosophy .nt-icon {
		font-size: 50px;
	}

	.nt-testimonials .nt-quote__logo {
		max-width: 180px;
	}
	.nt-testimonials .nt-quote__body p {
		font-size: 16px;
	}

	/* stop the bottom bar becoming two cramped lines */
	.nt-footer-bar .nt-footer-bottom {
		gap: 8px;
	}
	.nt-footer-bar .nt-footer-bottom span {
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   10. PRODUCT PAGE BODY — 2/3 description + 1/3 key-features rail
   Hooked on .nt-product-main / .nt-product-rail rather than the column
   fraction, so changing the split doesn't silently drop the styling.
   -------------------------------------------------------------------------- */
.nt-product-row .nt-product-rail {
	/* one number, used above the bullets and below them, so the heading-to-list
	   gap and the list-to-button gap stay equal */
	--nt-rail-gap: 20px;
	background: var(--gcid-nt-light, #f2f6f8);
	padding: 32px 28px;
	align-self: flex-start;
}

/* Four separate Divi rules were padding out the space under the list, which is
   why it dwarfed the gap under the heading:
     h1-h6            { padding-bottom: 10px }
     .et_pb_text ul   { padding-bottom: 1em }
     .et_pb_gutters3 .et_pb_column_1_3 .et_pb_module { margin-bottom: 9.27% }
     plus our own button margin-top.
   That module rule is four classes inside @media (min-width:981px) and was also
   overriding the 12px between the two buttons with ~31px, hence !important. */
.nt-product-row .nt-product-rail .et_pb_module {
	margin-bottom: 0 !important;
}

.nt-product-row .nt-product-rail h3 {
	margin: 0 0 var(--nt-rail-gap);
	padding-top: 0;
	padding-bottom: 0;
}

.nt-product-row .nt-product-rail ul {
	padding-left: 1.1em;
	padding-bottom: 0;
	margin-bottom: 0;
}

.nt-product-row .nt-product-rail li {
	line-height: 1.5;
	padding-bottom: 0.6em;
}

/* the last bullet must not add to the gap the button margin already sets */
.nt-product-row .nt-product-rail li:last-child {
	padding-bottom: 0;
}

/* /work-with-us/ puts prose in the rail rather than a bullet list, and Divi's
   `p { padding-bottom: 1em }` would stack on top of the button margin the same
   way the last bullet did. */
.nt-product-row .nt-product-rail p:last-child {
	padding-bottom: 0;
}

/* the buttons sit under the bullets, full width of the rail */
.nt-product-row .nt-product-rail .et_pb_button_module_wrapper {
	margin-top: var(--nt-rail-gap);
}

.nt-product-row .nt-product-rail .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   11. OUTLINE BUTTONS — white fill, accent border, dark text; invert on hover
   Divi prints its own `body #page-container .et_pb_section .et_pb_button_N`
   rule inline in <head>, which outranks this file on source order at equal
   specificity, so the hover state has to be !important.
   -------------------------------------------------------------------------- */
.nt-btn-outline {
	display: block;
	width: 100%;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Divi 5 also emits a PRESET rule,
   `.preset--module--divi-button--default_wrapper .preset--module--divi-button--default`,
   which is two classes with !important. A single-class `.nt-btn-outline` rule
   loses to it even with !important, so its 32px side padding was winning in a
   1/3-width rail. Match its shape to outrank it. */
.et_pb_button_module_wrapper .et_pb_button.nt-btn-outline {
	padding: 14px 18px !important;
}

/* Divi slides an arrow glyph in on hover and re-pads the button, which makes
   the label jump. These buttons are fixed width, so drop it. */
.nt-btn-outline:after,
.nt-btn-outline:before {
	display: none !important;
}

/* Deliberately heavy: one id, four classes, two elements. Divi's per-module
   rule, its preset rule and `.et_pb_bg_layout_light .et_pb_button:hover` all
   compete here, and the preset rules are generated per page, so leave no tie
   to source order. */
body #page-container .et_pb_section a.et_pb_button.nt-btn-outline:hover,
body #page-container .et_pb_section a.et_pb_button.nt-btn-outline:focus {
	background-color: #1a97c4 !important;
	border: 2px solid #1a97c4 !important;
	color: #ffffff !important;
	cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   12. VIDEO — fill the row, 16:9
   Divi 5.9's dynamic assets ship NO css for divi/video on the front end, so
   the raw oEmbed iframe lands at its literal width="1080" height="608" and
   sits left-aligned in the column. Everything here is ours.
   -------------------------------------------------------------------------- */
.nt-media-section .et_pb_video,
.et_pb_video .et_pb_video_box {
	width: 100%;
}

.et_pb_video .et_pb_video_box {
	position: relative;
	aspect-ratio: 16 / 9;
	line-height: 0;
}

.et_pb_video .et_pb_video_box iframe,
.et_pb_video .et_pb_video_box video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	display: block;
	border: 0;
}

/* YouTube already paints its own poster and play button, so Divi's overlay is
   a second play button over the top of it. */
.et_pb_video .et_pb_video_overlay {
	display: none;
}

/* --------------------------------------------------------------------------
   13. GALLERY SLIDER
   Divi 5.9 renders the fullwidth-gallery markup and classes but ships neither
   CSS nor JS for it on the front end — `et_pb_gallery_fullwidth` appears only
   in the Visual Builder bundle — so without this every image stacks. The track
   is flex + scroll-snap, which stays swipeable with JS off; js/nt-gallery-
   slider.js adds the arrows, dots and keyboard control.

   Divi does stamp `et_pb_slider` on the wrapper, which made its slider engine
   append a second pair of arrows and a second dot row, and made
   `.et_pb_slider{overflow:hidden}` clip the dots. functions.php
   (nt_gallery_drop_slider_class) strips that one class on render; the
   `position: relative` below replaces the one it used to carry.
   -------------------------------------------------------------------------- */
.et_pb_gallery.et_pb_gallery_fullwidth {
	position: relative;
}

/* js/nt-gallery-slider.js wraps the track in this. It is the arrows'
   positioning context, so they centre on the photo rather than on the
   gallery's full height, which includes the dots row. */
.et_pb_gallery.et_pb_gallery_fullwidth .nt-gallery-stage {
	position: relative;
}

.et_pb_gallery.et_pb_gallery_fullwidth .et_pb_gallery_items {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0;
}

.et_pb_gallery.et_pb_gallery_fullwidth .et_pb_gallery_items::-webkit-scrollbar {
	display: none;
}

/* .clearfix::after would otherwise become a flex item and pad the track */
.et_pb_gallery.et_pb_gallery_fullwidth .et_pb_gallery_items::after {
	display: none;
}

/* `display: block` is the load-bearing one. Divi's per-page dynamic CSS ships
   `.et_pb_gallery_fullwidth .et_pb_gallery_item{display:none;float:left;
   margin-right:-100%}` with only `:first-child` set back to block — it stacks
   every slide in one spot and lets its slider engine toggle `display` inline.
   With that engine off (functions.php strips `et_pb_slider`), nothing restores
   the other five, so the track held a single item, `scrollWidth` equalled
   `clientWidth`, and our arrows and dots had nothing to scroll. Declaring all
   three here means the track no longer depends on Divi's JS — or on Divi's
   dynamic-assets pass deciding to emit that CSS at all, which is exactly the
   kind of thing that changes under us when the et-cache is regenerated.
   Our three classes beat Divi's two; the `:first-child` rule asks for `block`
   too, so there is nothing to fight there. */
.et_pb_gallery.et_pb_gallery_fullwidth .et_pb_gallery_item {
	display: block;
	flex: 0 0 100%;
	max-width: 100%;
	scroll-snap-align: start;
	float: none;
	margin: 0;
}

/* One uniform box. `cover` rather than `contain`: the arrows sit inside the
   photo, and with `contain` a 960x715 image in a 3:2 box letterboxes to about
   1074px wide, leaving ~63px of empty background each side for the arrows to
   land on. Filling the box costs roughly 10% off the top and bottom of the
   1.34-ratio majority, which is a better trade than arrows floating in a gap.
   The one portrait shot (600x800) crops hardest, but its subject is centred. */
.et_pb_gallery.et_pb_gallery_fullwidth .et_pb_gallery_image {
	display: block;
	aspect-ratio: 3 / 2;
	line-height: 0;
	overflow: hidden;
}

/* The slide anchor points at the raw JPEG: Divi 5.9 gives it no lightbox class
   and never enqueues Magnific Popup, and the slide already renders the
   full-size file, so the link is dead weight. js/nt-gallery-slider.js strips
   the href; this covers the pre-JS paint and the no-JS case. Undo both if a
   lightbox is ever added. */
.et_pb_gallery.et_pb_gallery_fullwidth .et_pb_gallery_image > a {
	display: block;
	width: 100%;
	height: 100%;
	cursor: default;
	pointer-events: none;
}

.et_pb_gallery.et_pb_gallery_fullwidth .et_pb_gallery_image img {
	width: 100% !important;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.et_pb_gallery.et_pb_gallery_fullwidth .et_overlay {
	display: none;
}

/* ---- arrows ------------------------------------------------------------- */
.nt-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(11, 43, 60, 0.78);
	cursor: pointer;
	z-index: 3;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.nt-gallery-nav:hover {
	background: #1a97c4;
}

.nt-gallery-nav[disabled] {
	opacity: 0.25;
	cursor: default;
}

.nt-gallery-nav--prev { left: 18px; }
.nt-gallery-nav--next { right: 18px; }

/* chevron */
.nt-gallery-nav:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

.nt-gallery-nav--prev:before { transform: translate(-35%, -50%) rotate(-135deg); }
.nt-gallery-nav--next:before { transform: translate(-65%, -50%) rotate(45deg); }

/* ---- dots --------------------------------------------------------------- */
.nt-gallery-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 18px;
	/* .is-active scales to 1.35, i.e. ~1.6px past the row on each side. The row
	   is the module's last child, so without this the growth lands on the
	   module's own bottom edge and any ancestor clip takes a bite out of it. */
	padding: 2px 0;
}

.nt-gallery-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(11, 43, 60, 0.28);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.nt-gallery-dot:hover { background: rgba(11, 43, 60, 0.55); }

.nt-gallery-dot.is-active {
	background: #1a97c4;
	transform: scale(1.35);
}

/* --------------------------------------------------------------------------
   14. PRODUCT PAGE — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.nt-product-row .nt-product-rail {
		padding: 26px 22px;
	}

	/* Once the columns stack the rail spans the full width, and a 100%-wide
	   button across a tablet reads as a banner rather than a button. */
	.nt-product-row .nt-product-rail .nt-btn-outline {
		max-width: 360px;
	}
}

@media (max-width: 767px) {
	/* on a phone edge-to-edge is right */
	.nt-product-row .nt-product-rail .nt-btn-outline {
		max-width: none;
	}

	.et_pb_gallery.et_pb_gallery_fullwidth .et_pb_gallery_image {
		aspect-ratio: 4 / 3;
	}
	.nt-gallery-nav {
		width: 38px;
		height: 38px;
	}
	.nt-gallery-nav--prev { left: 8px; }
	.nt-gallery-nav--next { right: 8px; }
}

/* ==========================================================================
   ICON FONT — 16 Sep 2026
   Stop ETmodules glyphs flashing as raw letters on a cold load.
   ========================================================================== */

/* Divi 5.9 declares the ETmodules face with `font-display:swap` (see
   Divi/includes/builder/feature/dynamic-assets/assets/css/icons_all.css, which
   Divi inlines as <style id="divi-dynamic-critical-inline-css">). Divi draws
   icons as characters in a pseudo-element, so until modules.woff arrives the
   browser paints the fallback font and those characters show literally:

     .et-menu .menu-item-has-children>a:first-child:after { content:"3" }  -> a 3
     .mobile_menu_bar:before                              { content:"a" }  -> an a
     .nt-philosophy .nt-icon  (80px, line 318)                             -> raw letters

   First/hard-refreshed load only — after that the font is in HTTP cache, which
   is why it reads as intermittent. Re-declaring the same family last with
   `block` keeps the glyph slot blank for the block period instead of painting
   the fallback. This wins on document order: Divi's inline @font-face sits at
   head offset ~43,500 and this stylesheet's <link> at ~107,000.

   No JS needed — this is the same result as a document.fonts.ready class
   toggle, without the script. Paired with the modules.woff preload in
   functions.php so the blank period is imperceptible.

   Root-relative src so it survives the move to netstasmania.com.au.
   Remove if Elegant Themes reverts the descriptor to `block` upstream. */
@font-face {
	font-family: ETmodules;
	font-display: block;
	src: url("/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.woff") format("woff"),
	     url("/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

/* --------------------------------------------------------------------------
   15. CONTACT FORMS — /contact-us/ and /product-enquiry/
   The form module sets `background-color:#ffffff` on its fields, and both
   forms sit on white sections, so every input was white-on-white with no
   border: all the visitor saw was the placeholder text floating in space.
   Give the fields an edge rather than fighting the module's colour, so the
   background stays editable from the builder.
   -------------------------------------------------------------------------- */
.et_pb_contact_form_container .et_pb_contact_field .input,
.et_pb_contact_form_container .et_pb_contact_field textarea.input,
.et_pb_contact_form_container .et_pb_contact_field select.input {
	width: 100%;
	border: 1px solid rgba(11, 43, 60, 0.22) !important;
	border-radius: 3px;
	padding: 14px 16px !important;
	font-size: 16px;
	line-height: 1.5;
	color: var(--gcid-nt-navy, #0b2b3c);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.et_pb_contact_form_container .et_pb_contact_field .input:focus {
	outline: none;
	border-color: #1a97c4 !important;
	box-shadow: 0 0 0 3px rgba(26, 151, 196, 0.18);
}

/* Placeholders read as typed-in values (reported 28 Sep 2026). Cause: the
   module's `placeholderFont` colour was #0b2b3c — the same navy as real input
   text, 14.74:1 on white. Divi emits that at
   `.et_pb_contact_form_0 .et_pb_contact_field .input:not(…):not(…)::placeholder`,
   specificity (0,5,1), which beat this rule at (0,3,1) — so the real fix is the
   module attribute on posts 76 and 77, now #85959e (3.09:1: clearly faint, still
   legible). This rule is kept as a matching fallback if that attribute is ever
   cleared in the builder; `opacity:1` is still required because Firefox applies
   a default placeholder opacity of its own. Keep the two values in step. */
.et_pb_contact_form_container .et_pb_contact_field .input::placeholder {
	color: #85959e;
	opacity: 1;
}

.et_pb_contact_form_container .et_pb_contact_field textarea.input {
	min-height: 180px;
	resize: vertical;
}

/* Divi hides the field label with `display:none`, which also removes it from
   the accessibility tree and leaves the placeholder as the only cue. Keep it
   off-screen instead, so screen readers still announce the field. */
.et_pb_contact_form_container .et_pb_contact_form_label {
	display: block !important;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- radio / checkbox groups -------------------------------------------- */
.et_pb_contact_form_container .et_pb_contact_field_options_title {
	display: block;
	margin-bottom: 10px;
	font-weight: 600;
	color: var(--gcid-nt-navy, #0b2b3c);
}

.et_pb_contact_form_container .et_pb_contact_field_options_list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.et_pb_contact_form_container .et_pb_contact_field_radio,
.et_pb_contact_form_container .et_pb_contact_field_checkbox {
	width: auto !important;
}

.et_pb_contact_form_container .et_pb_contact_field_radio label,
.et_pb_contact_form_container .et_pb_contact_field_checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
}

/* the module paints these white too, so they vanished against the section */
.et_pb_contact_form_container .et_pb_contact_field .input[type="radio"] + label i,
.et_pb_contact_form_container .et_pb_contact_field .input[type="checkbox"] + label i {
	width: 20px;
	height: 20px;
	border: 1px solid rgba(11, 43, 60, 0.35) !important;
	background-color: #ffffff;
	flex: 0 0 20px;
}

.et_pb_contact_form_container .et_pb_contact_field .input[type="radio"] + label i {
	border-radius: 50%;
}

.et_pb_contact_form_container .et_pb_contact_field .input[type="radio"]:checked + label i,
.et_pb_contact_form_container .et_pb_contact_field .input[type="checkbox"]:checked + label i {
	border-color: #1a97c4 !important;
}

.et_pb_contact_form_container .et_pb_contact_field .input[type="radio"]:checked + label i:before,
.et_pb_contact_form_container .et_pb_contact_field .input[type="checkbox"]:checked + label i:before {
	background-color: #1a97c4;
}

.et_pb_contact_form_container .et_pb_contact_field .input[type="radio"]:focus-visible + label i,
.et_pb_contact_form_container .et_pb_contact_field .input[type="checkbox"]:focus-visible + label i {
	box-shadow: 0 0 0 3px rgba(26, 151, 196, 0.25);
}

/* ---- captcha + submit ---------------------------------------------------- */
/* The row stays RIGHT-aligned, which is deliberate: the Submit's right edge
   lines up with the right edge of the fields above it. Divi pins it there with
   `body #page-container .et_pb_section .et_pb_contact_form_N
   .et_contact_bottom_container { margin-left:auto; margin-right:0 }` — one id
   and three classes, so the `text-align`/`float` below are inert and a
   two-class rule cannot move it. To left-align, override that margin at equal
   or higher specificity; nothing less will do it.
   What this block DOES fix is the spacing: Divi leaves the sum and its input
   jammed together, and the input at a 2-character width. */
.et_pb_contact_form_container .et_contact_bottom_container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px 24px;
	margin-top: 26px;
}

.et_pb_contact_form_container .et_contact_bottom_container:after {
	display: none;
}

.et_pb_contact_form_container .et_pb_contact_right {
	float: none;
	margin: 0;
	width: auto;
}

.et_pb_contact_form_container .et_pb_contact_right p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.et_pb_contact_form_container .et_pb_contact_captcha_question {
	font-weight: 600;
	color: var(--gcid-nt-navy, #0b2b3c);
}

.et_pb_contact_form_container .input.et_pb_contact_captcha {
	width: 78px !important;
	text-align: center;
	padding: 12px 8px !important;
}

.et_pb_contact_form_container .et_pb_button_wrapper {
	float: none;
	margin: 0;
	text-align: left;
}

.et_pb_contact_form_container .et_pb_contact_submit {
	cursor: pointer;
	padding: 14px 34px !important;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.et_pb_contact_form_container .et_pb_contact_submit:after {
	display: none !important;
}

body #page-container .et_pb_section .et_pb_contact_submit:hover,
body #page-container .et_pb_section .et_pb_contact_submit:focus {
	background-color: var(--gcid-nt-navy, #0b2b3c) !important;
	border-color: var(--gcid-nt-navy, #0b2b3c) !important;
	color: #ffffff !important;
}

/* ---- validation / success messages --------------------------------------- */
.et_pb_contact_form_container .et-pb-contact-message {
	margin-bottom: 22px;
	color: var(--gcid-nt-navy, #0b2b3c);
}

.et_pb_contact_form_container .et_contact_error {
	border-color: #c0392b !important;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 767px) {
	/* Divi sizes contact fields with `.et_flex_column_12_24 { width: calc(50% -
	   var(--horizontal-gap-parent)*1/2) }` and ships NO media query for it, so
	   Name/Email stayed side by side at 375px — about 165px per field. Divi's
	   own markup even tags them `..._phone`, but nothing acts on it. */
	.et_pb_contact_form_container .et_pb_contact_field[class*="et_flex_column_"] {
		width: 100% !important;
	}

	.et_pb_contact_form_container .et_contact_bottom_container {
		gap: 14px 16px;
	}
	/* Divi's 18px left margin on the button pushed it off the fields' edge;
	   and the wrapper has to be full width for the button's 100% to mean it */
	.et_pb_contact_form_container .et_pb_button_wrapper {
		flex: 1 1 100%;
	}
	/* Divi right-aligns the captcha + submit row (margin-left:auto at one id
	   and three classes, see "captcha + submit"); on a phone the row spans
	   the fields instead, or at ~744px it sat indented 135px */
	body #page-container .et_pb_section .et_pb_contact_form_container .et_contact_bottom_container {
		margin-left: 0;
		width: 100%;
	}
	.et_pb_contact_form_container .et_pb_contact_submit {
		width: 100%;
		margin-left: 0 !important;
		text-align: center;
	}
}

/* Product Enquiry has an odd number of half-width fields, which left Email
   alone in half a row; it takes the full row instead. */
.page-id-77 .et_pb_contact_form_container .et_pb_contact_field[data-id="email"] {
	width: 100% !important;
}

/* --------------------------------------------------------------------------
   15b. CONTACT FORMS — the line that introduces the form
   "Alternatively, feel free to fill in our web form below…" sits in the same
   column as the form on /contact-us/ and was reading as a separate block
   rather than a lead-in, because it collects two gaps at once: Divi scales a
   module's bottom margin to the column fraction
   (`.et_pb_gutters3 .et_pb_column_2_3.et_block_column .et_pb_module
   { margin-bottom: 4.242% }` — about 33px in this 2/3 column, and four
   classes, hence the !important) and `p` carries its own `padding-bottom:1em`
   on top of that. Drop the module margin and set the whole gap from the
   paragraph, so there is one number to tune.
   -------------------------------------------------------------------------- */
.nt-form-intro.et_pb_text {
	margin-bottom: 0 !important;
}

/* The ONLY number that sets this gap — the module margin above is zeroed, and
   nothing on the form adds top spacing, so what is here is what you see. */
.nt-form-intro p:last-child {
	padding-bottom: 8px;
}

/* Divi's base h3 line-height is 1em, so a wrapped heading (the About page's
   "Define the need – …") had its lines touching. */
.et_pb_text_inner h3 {
	line-height: 1.3em;
}

/* --------------------------------------------------------------------------
   16. ABOUT PAGES — copy left, photo + actions right
   Shared by /about-nets-tasmania/ (post 72) and /don-latham/ (post 73); both
   rows are .nt-about-row with a .nt-about-copy and a .nt-about-media column.
   The two buttons sit in one row under the photo, half the column each with a
   12px gap. .nt-btn-outline (section 11) already gives them the white fill,
   accent border, invert on hover and the fixed padding that stops Divi's
   `.et_pb_button:hover { padding: .3em 2em .3em .7em }` sliding its arrow in
   and widening them, so all that is left here is geometry.
   -------------------------------------------------------------------------- */
.nt-about-media .et_pb_module {
	margin-bottom: 0 !important;
}

.nt-about-media .et_pb_image {
	margin-bottom: 20px !important;
}

/* Divi emits no whitespace between the two wrappers, so the 12px margin is the
   whole gap and 50% - 6px each lands exactly on the column edges. */
.nt-about-media .et_pb_button_module_wrapper {
	display: inline-block;
	vertical-align: top;
	width: calc(50% - 6px);
}

.nt-about-media .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
	margin-left: 12px;
}

/* Between Divi's 980px column-stack point and about 1250px the column is still
   half the row, so a half-column button is narrower than "MEET DON LATHAM" at
   20px and the label would break over two lines. Shrink the type for that band
   rather than give up the single row. */
@media (min-width: 981px) and (max-width: 1250px) {
	.nt-about-media .et_pb_button_module_wrapper .nt-btn-outline {
		font-size: 16px !important;
		padding: 14px 10px !important;
	}
}

@media (max-width: 767px) {
	/* No honest way to fit two of these across a phone; stack them edge to
	   edge, the same as the product rail does. */
	.nt-about-media .et_pb_button_module_wrapper {
		display: block;
		width: 100%;
	}

	.nt-about-media .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
		margin-left: 0;
		margin-top: 12px;
	}
}

/* --------------------------------------------------------------------------
   17. OUR HISTORY — timeline
   The old site drew this with the UAEL Elementor timeline widget: a grey
   centre rail, a blue fill that follows the scroll and runs back up again,
   and a calendar marker per event that turns blue as it is reached. Divi 5
   ships nothing like it, so all of it is here plus js/nt-timeline.js.

   Structure, one Divi row per event:
     .nt-tl-item.nt-tl-item--left    card column then year column
     .nt-tl-item.nt-tl-item--right   year column then card column
   The year is taken out of flow and pinned beside the marker, so it is
   centred on the event whichever column it happens to sit in, and the card
   column alone sets the row height.
   -------------------------------------------------------------------------- */
.nt-timeline {
	position: relative;
}

/* ---- the rail ----------------------------------------------------------- */
.nt-timeline:before {
	content: "";
	position: absolute;
	/* nt-timeline.js measures these off the first and last marker so the rail
	   starts at the first year and stops at the last. The fallbacks are the
	   full section, which is what a visitor with the script blocked gets. */
	top: var(--nt-rail-top, 0px);
	height: var(--nt-rail-height, 100%);
	left: 50%;
	width: 4px;
	margin-left: -2px;
	background: #dbe3e8;
	z-index: 1;
}

.nt-timeline__fill {
	position: absolute;
	top: var(--nt-rail-top, 0px);
	left: 50%;
	width: 4px;
	margin-left: -2px;
	height: 0;
	background: #1a97c4;
	z-index: 2;
}

/* ---- one event ---------------------------------------------------------- */
.nt-timeline .nt-tl-item {
	margin-bottom: 26px;
}

.nt-timeline .nt-tl-item:last-of-type {
	margin-bottom: 0;
}

/* The marker. `.et_pb_row` is already position:relative and z-index:5, so it
   is the anchor and it paints over the rail without any help. The white ring
   is what gives the grey markers their gap in the rail. */
.nt-tl-item:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 20px 20px;
	box-shadow: 0 0 0 6px #ffffff;
	transition: background-color 0.3s ease;
	z-index: 3;
}

/* Default is the reached look, so a visitor with the script blocked gets a
   finished timeline rather than a uniformly grey one. .nt-timeline--js, which
   nt-timeline.js adds, is what hands the states over to the scroll. */
.nt-tl-item:before {
	background-color: #1a97c4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.nt-timeline--js .nt-tl-item:before {
	background-color: #e3e9ec;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c9ea8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.nt-timeline--js .nt-tl-item.is-reached:before {
	background-color: #1a97c4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

/* ---- the card ----------------------------------------------------------- */
.nt-tl-card {
	background: #edf1f3;
	padding: 30px 32px;
}

.nt-tl-item--left .nt-tl-card { text-align: right; }
.nt-tl-item--right .nt-tl-card { text-align: left; }

.nt-tl-card h3 {
	color: #1a97c4;
	padding-bottom: 14px;
	line-height: 1.25em;
}

.nt-tl-card p:last-child {
	padding-bottom: 0;
}

/* the little arrow reaching from the card towards the rail */
.nt-tl-card:after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 13px solid transparent;
}

.nt-tl-item--left .nt-tl-card:after {
	left: 100%;
	border-left-color: #edf1f3;
}

.nt-tl-item--right .nt-tl-card:after {
	right: 100%;
	border-right-color: #edf1f3;
}

/* ---- the year ----------------------------------------------------------- */
/* Divi makes every column position:relative; clearing that on the year column
   hands the year up to the row, which is the box the marker is centred in. */
.nt-tl-year {
	position: static;
}

.nt-tl-year .et_pb_text {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
}

.nt-tl-item--left .nt-tl-year .et_pb_text {
	left: calc(50% + 34px);
	text-align: left;
}

.nt-tl-item--right .nt-tl-year .et_pb_text {
	right: calc(50% + 34px);
	text-align: right;
}

.nt-tl-year p {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	white-space: nowrap;
	color: #7b8f99;
	transition: color 0.3s ease;
}

.nt-tl-year p { color: #1a97c4; }
.nt-timeline--js .nt-tl-year p { color: #7b8f99; }
.nt-timeline--js .nt-tl-item.is-reached .nt-tl-year p { color: #1a97c4; }

/* --------------------------------------------------------------------------
   17a. OUR HISTORY — responsive
   At Divi's 980 breakpoint the two columns stack, so the rail moves to the
   left and every card sits to the right of it. The rail is drawn on the
   section but has to line up inside the row, and `.et_pb_row` is width:80%
   centred, hence the 10%.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.nt-timeline:before,
	.nt-timeline__fill {
		left: calc(10% + 22px);
		margin-left: 0;
	}

	/* padding on the row, not the columns: an absolutely positioned child is
	   placed against the padding box, so the marker keeps its 22px */
	.nt-timeline .nt-tl-item {
		padding-left: 62px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-bottom: 34px;
	}
	/* Divi's stacked-column margin put ~30px of dead space between the year
	   and a right-hand card (the empty year column comes first there) */
	.nt-timeline .nt-tl-item > .et_pb_column {
		margin-bottom: 0 !important;
	}

	.nt-tl-item:before {
		top: 6px;
		left: 22px;
		transform: translate(-50%, 0);
		width: 38px;
		height: 38px;
		background-size: 17px 17px;
	}

	/* the year moves above the card so it reads the same way round whichever
	   column order the row happens to have */
	.nt-tl-item--left .nt-tl-year .et_pb_text,
	.nt-tl-item--right .nt-tl-year .et_pb_text {
		top: 8px;
		left: 62px;
		right: auto;
		transform: none;
		text-align: left;
	}

	.nt-tl-item--left .nt-tl-card,
	.nt-tl-item--right .nt-tl-card {
		margin-top: 44px;
		text-align: left;
	}

	.nt-tl-item--left .nt-tl-card:after,
	.nt-tl-item--right .nt-tl-card:after {
		top: 22px;
		left: auto;
		right: 100%;
		transform: none;
		border-width: 11px;
		border-left-color: transparent;
		border-right-color: #edf1f3;
	}
}

@media (max-width: 767px) {
	/* At 80% the cards were ~190px of text on a phone. Widen these rows to a
	   20px gutter and tuck the rail in, so the cards get ~280px. */
	.nt-timeline .nt-tl-item {
		width: calc(100% - 40px) !important;
		max-width: none !important;
		padding-left: 50px;
	}
	.nt-timeline:before,
	.nt-timeline__fill {
		left: 36px;
	}
	.nt-tl-item:before {
		left: 18px;
	}
	.nt-tl-item--left .nt-tl-year .et_pb_text,
	.nt-tl-item--right .nt-tl-year .et_pb_text {
		left: 50px;
	}
	.nt-tl-card {
		padding: 22px 20px;
	}
	.nt-tl-card h3 {
		font-size: 20px !important;
	}
}

/* --------------------------------------------------------------------------
   15a. CONTACT FORMS — reCAPTCHA v2 checkbox
   The widget takes the slot the arithmetic captcha used to hold, as a flex
   item of `.et_contact_bottom_container` (section 15), so it inherits that
   row's alignment and gap. Google's iframe is a fixed 304x78 and must not be
   scaled — a transform on it breaks the challenge popup's hit testing — so
   the only job here is to stop it overflowing a narrow column.
   -------------------------------------------------------------------------- */
.et_pb_contact_form_container .nt-recaptcha {
	float: none;
	margin: 0;
	width: auto;
	min-width: 0;
	text-align: left;
	line-height: 0; /* the iframe is inline, so the line box adds ~6px below it */
}

.et_pb_contact_form_container .nt-recaptcha .g-recaptcha {
	display: inline-block;
}

@media (max-width: 479px) {
	/* 304px plus the form's own padding overflows the narrowest phones. This
	   is the one transform Google documents as safe, because it scales the
	   anchor rather than the challenge popup, which is a separate overlay. */
	.et_pb_contact_form_container .nt-recaptcha .g-recaptcha {
		transform: scale(0.88);
		transform-origin: 0 0;
		height: 69px; /* 78 * 0.88, so the row does not keep the full height */
	}
}

/* --------------------------------------------------------------------------
   18. 404 — divi-child/404.php
   Divi's stock 404.php calls get_sidebar(), which rendered the default widget
   area on a site with no blog: a search box, "Recent Posts" (empty) and
   "Recent Comments" reading "No comments to show." The child template drops
   the sidebar; nt_no_sidebar_body_class() adds .et_no_sidebar so Divi's own
   rule widens #left-area, exactly as the search template does.
   Reuses .nt-search__form / __input / __submit for the search box rather than
   duplicating them.
   -------------------------------------------------------------------------- */
.nt-404 #left-area {
	padding-bottom: 80px;
	padding-top: 20px;
}

.nt-404__header {
	border-bottom: 2px solid #1a97c4;
	margin: 0 0 36px;
	padding: 0 0 24px;
}

/* Big, quiet watermark. It is decorative — the <h1> below carries the meaning,
   so this stays a <p> and is not announced as a heading. */
.nt-404__code {
	color: #d6e2e8;
	font-size: 92px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	margin: 0 0 4px;
	padding: 0;
}

.nt-404__title {
	color: #0b2b3c;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	padding: 0;
}

.nt-404__lead {
	color: #3d4f57;
	font-size: 17px;
	line-height: 1.6;
	margin: 12px 0 0;
	max-width: 60ch;
	padding: 0;
}

/* ---- suggested destinations --------------------------------------------- */

.nt-404__links {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 44px;
}

.nt-404__link {
	background: #f2f6f8;
	border-left: 4px solid #1a97c4;
	display: block;
	padding: 20px 24px;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.nt-404__link:hover,
.nt-404__link:focus {
	background: #e4edf2;
	text-decoration: none;
	transform: translateX(2px);
}

.nt-404__link:focus-visible {
	outline: 2px solid #1a97c4;
	outline-offset: 2px;
}

.nt-404__link-label {
	color: #0b2b3c;
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.nt-404__link:hover .nt-404__link-label,
.nt-404__link:focus .nt-404__link-label {
	color: #1a97c4;
}

.nt-404__link-desc {
	color: #3d4f57;
	display: block;
	font-size: 15px;
	line-height: 1.5;
	margin-top: 5px;
}

/* ---- search ------------------------------------------------------------- */

.nt-404__search-title {
	color: #0b2b3c;
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	padding: 0;
}

.nt-404 .nt-search__form {
	margin-top: 16px;
}

/* ---- responsive (Divi breakpoints: 980 / 767 / 479) ---------------------- */

@media (max-width: 767px) {
	.nt-404__links {
		grid-template-columns: minmax(0, 1fr);
	}

	.nt-404__code {
		font-size: 72px;
	}

	.nt-404__title {
		font-size: 28px;
	}
}

@media (max-width: 479px) {
	.nt-404__code {
		font-size: 58px;
	}

	.nt-404__title {
		font-size: 24px;
	}

	.nt-404__link {
		padding: 16px 18px;
	}
}