/**
 * Perth Web Hosting – design system + component styles.
 *
 * Values come from the "Perth Web Hosting" Figma file (Foundations page,
 * Page / Home). Elementor templates in /elementor-templates attach these
 * classes through the "CSS Classes" field (Advanced tab) of each element.
 *
 * Breakpoints match Elementor defaults: tablet ≤ 1024px, mobile ≤ 767px.
 */

/* ---------------------------------------------------------------------------
 * 1. Fonts
 * ------------------------------------------------------------------------ */

/* GT Standard is licensed from Grilli Type – drop the woff2 files into
   assets/fonts (see assets/fonts/README.md). Until then Archivo Expanded,
   loaded from Google Fonts, is used. */
@font-face {
	font-family: "GT Standard";
	src: url("../fonts/GT-Standard-M-Extended-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "GT Standard";
	src: url("../fonts/GT-Standard-M-Extended-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
 * 2. Tokens (Figma variables)
 * ------------------------------------------------------------------------ */

:root {
	--pwh-cream: #fffef4;
	--pwh-navy-ink: #0b1629;
	--pwh-navy: #1a325b;
	--pwh-navy-deep: #1a315c;
	--pwh-navy-soft: #6b91be;
	--pwh-navy-pale: #c2d3e8;
	--pwh-navy-mist: #eaf0f8;
	--pwh-amber: #c89439;
	--pwh-grey: #828082;
	--pwh-grey-dark: #575557;
	--pwh-grey-light: #d4d3d5;
	--pwh-sand: #e8e0c8;
	--pwh-amber-deep: #9e6e25;
	--pwh-cream-warm: #f5f1e0;

	--pwh-font-display: "GT Standard", "Archivo", "Arial Black", sans-serif;
	--pwh-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--pwh-radius: 16px;
	--pwh-radius-sm: 6px;
	--pwh-shadow-menu: 0 24px 24px rgba(11, 22, 41, 0.28);
	--pwh-content: 1180px;
	--pwh-header-h: 84px;
}

/* ---------------------------------------------------------------------------
 * 3. Base
 * ------------------------------------------------------------------------ */

body {
	background-color: var(--pwh-cream);
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * 4. Typography helpers (add to Heading / Text Editor widgets)
 * ------------------------------------------------------------------------ */

.pwh-display .elementor-heading-title,
.pwh-h1 .elementor-heading-title,
.pwh-h2 .elementor-heading-title,
.pwh-h3 .elementor-heading-title,
.pwh-card-title .elementor-heading-title,
.pwh-eyebrow .elementor-heading-title {
	font-family: var(--pwh-font-display);
	font-stretch: 125%;
	color: inherit;
	margin: 0;
}

/* PWH/H1 */
.pwh-h1 .elementor-heading-title {
	font-size: 56px;
	font-weight: 900;
	line-height: 62px;
	letter-spacing: -1.3px;
}

/* PWH/H2 */
.pwh-h2 .elementor-heading-title {
	font-size: 40px;
	font-weight: 900;
	line-height: 46px;
	letter-spacing: -0.9px;
}

/* PWH/H3 */
.pwh-h3 .elementor-heading-title {
	font-size: 28px;
	font-weight: 900;
	line-height: 34px;
}

/* Card Title */
.pwh-card-title .elementor-heading-title {
	font-size: 22px;
	font-weight: 900;
	line-height: normal;
}

/* PWH/Eyebrow */
.pwh-eyebrow .elementor-heading-title {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

/* PWH/Body */
.pwh-body,
.pwh-lead {
	font-family: var(--pwh-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

.pwh-lead {
	font-weight: 300;
	line-height: normal;
}

.pwh-body p,
.pwh-lead p {
	margin: 0;
}

.pwh-body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Colour helpers – applied to the widget wrapper, inherited by the content. */
.pwh-text-cream,
.pwh-text-cream .elementor-heading-title {
	color: var(--pwh-cream);
}

.pwh-text-ink,
.pwh-text-ink .elementor-heading-title {
	color: var(--pwh-navy-ink);
}

.pwh-text-mist,
.pwh-text-mist .elementor-heading-title {
	color: var(--pwh-navy-mist);
}

/* Dot list (hero proof points). Text Editor widget containing <ul class="pwh-dots">. */
.pwh-dots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pwh-dots li {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--pwh-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
}

.pwh-dots li::before {
	content: "";
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pwh-amber);
}

/* ---------------------------------------------------------------------------
 * 5. Buttons (Figma component "Button": Amber / Navy / Outline / Outline Pill)
 *    Add "pwh-btn pwh-btn--<style>" to a Button widget.
 * ------------------------------------------------------------------------ */

body .pwh-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border: 1.5px solid transparent;
	border-radius: var(--pwh-radius);
	background-color: transparent;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body .pwh-btn .elementor-button:hover,
body .pwh-btn .elementor-button:focus-visible {
	transform: translateY(-1px);
}

body .pwh-btn .elementor-button:focus-visible {
	outline: 2px solid var(--pwh-amber);
	outline-offset: 3px;
}

/* Amber */
body .pwh-btn--amber .elementor-button {
	background-color: var(--pwh-amber);
	border-color: var(--pwh-amber);
	color: var(--pwh-navy-ink);
}

body .pwh-btn--amber .elementor-button:hover {
	background-color: #b5832c;
	border-color: #b5832c;
	color: var(--pwh-navy-ink);
}

/* Navy */
body .pwh-btn--navy .elementor-button {
	background-color: var(--pwh-navy);
	border-color: var(--pwh-navy);
	color: var(--pwh-cream);
}

body .pwh-btn--navy .elementor-button:hover {
	background-color: var(--pwh-navy-ink);
	border-color: var(--pwh-navy-ink);
	color: var(--pwh-cream);
}

/* Outline */
body .pwh-btn--outline .elementor-button {
	border-color: var(--pwh-navy);
	color: var(--pwh-navy);
}

body .pwh-btn--outline .elementor-button:hover {
	background-color: var(--pwh-navy);
	color: var(--pwh-cream);
}

/* Outline on dark backgrounds */
body .pwh-btn--outline-cream .elementor-button {
	border-color: var(--pwh-cream);
	color: var(--pwh-cream);
}

body .pwh-btn--outline-cream .elementor-button:hover {
	background-color: var(--pwh-cream);
	color: var(--pwh-navy-ink);
}

/* Outline Pill */
body .pwh-btn--pill .elementor-button {
	border-color: var(--pwh-navy-ink);
	border-radius: 999px;
	color: var(--pwh-navy-ink);
}

body .pwh-btn--pill .elementor-button:hover {
	background-color: var(--pwh-navy-ink);
	color: var(--pwh-cream);
}

/* Small – nav "Client Login" */
body .pwh-btn--sm .elementor-button {
	padding: 11px 22px;
	font-size: 13px;
	background-color: var(--pwh-cream);
}

/* ---------------------------------------------------------------------------
 * 6. Header + JetMenu mega menu
 * ------------------------------------------------------------------------ */

.pwh-header {
	background-color: var(--pwh-cream);
	min-height: var(--pwh-header-h);
	z-index: 100;
	transition: box-shadow 0.2s ease;
}

/* Elementor Pro adds .elementor-sticky--effects once the sticky header has scrolled. */
.pwh-header.elementor-sticky--effects {
	box-shadow: 0 1px 0 var(--pwh-navy-pale);
}

/* Header logo (pwh-logo-noborder-navy.svg): 142px wide, the visible logo size
   in Figma's 200 × 86 logo frame. */
.pwh-logo img {
	display: block;
	width: 142px;
	max-width: 100%;
	height: auto;
}

/* --- JetMenu 2.x widget (.jet-mega-menu) ------------------------------- */

.pwh-mainnav .jet-mega-menu-list {
	gap: 4px;
}

.pwh-mainnav .jet-mega-menu-item__inner {
	padding: 10px 12px;
	border-radius: var(--pwh-radius-sm);
	background-color: transparent;
	transition: background-color 0.2s ease;
}

.pwh-mainnav .jet-mega-menu-item--hover > .jet-mega-menu-item__inner,
.pwh-mainnav .jet-mega-menu-item__inner:hover {
	background-color: var(--pwh-navy-mist);
}

.pwh-mainnav .jet-mega-menu-item__link,
.pwh-mainnav .jet-mega-menu-item__title,
.pwh-mainnav .jet-mega-menu-item__label {
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
}

.pwh-mainnav .jet-mega-menu-item__inner {
	gap: 7px !important;
}

.pwh-mainnav .jet-mega-menu-item__dropdown {
	width: 11px !important;
	min-width: 0 !important;
	height: 11px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--pwh-navy-ink);
	font-size: 11px !important;
	line-height: 1;
}

.pwh-mainnav .jet-mega-menu-item__dropdown svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
}

/* Mega panel position. JetMenu anchors the panel to the menu widget, so it
   starts at the "Products" link and runs off the right of the screen. Instead,
   anchor it to the header bar and centre it on the 1180px content column, 14px
   below the bar as in Figma. Narrow panels (About) stay under their own menu
   item: .pwh-mega--narrow, or any single-column panel from older imports. */
.pwh-header {
	position: relative;
}

.pwh-header > .e-con-inner,
.pwh-mainnav,
.pwh-mainnav > .elementor-widget-container,
.pwh-mainnav .jet-mega-menu,
.pwh-mainnav .jet-mega-menu-container,
.pwh-mainnav .jet-mega-menu-list,
.pwh-mainnav .jet-mega-menu-item--top-level {
	position: static !important;
}

.pwh-mainnav .jet-mega-menu-item--top-level > .jet-mega-menu-mega-container {
	position: absolute !important;
	top: calc(100% - 23px) !important;
	left: 50% !important;
	right: auto !important;
	width: min(var(--pwh-content), calc(100% - 48px)) !important;
	max-width: none !important;
	margin: 0 !important;
	transform: translateX(-50%) !important;
	padding: 37px 0 0 !important; /* 23px hover bridge + 14px gap */
}

.pwh-mainnav .jet-mega-menu-item--top-level:has(.pwh-mega--narrow, .pwh-mega > .e-con:only-child, .pwh-mega > .e-con-inner > .e-con:only-child) {
	position: relative !important;
}

.pwh-mainnav .jet-mega-menu-item--top-level:has(.pwh-mega--narrow, .pwh-mega > .e-con:only-child, .pwh-mega > .e-con-inner > .e-con:only-child) > .jet-mega-menu-mega-container {
	top: 100% !important;
	left: 0 !important;
	width: 280px !important;
	transform: none !important;
	padding-top: 41px !important; /* hover bridge; panel lands 14px below the bar, level with the wide panels */
}

.pwh-mainnav .jet-mega-menu-mega-container__inner {
	width: 100%;
	max-width: none;
}

/* JetMenu paints its mega wrapper white (default CSS plus the widget's style
   controls, which use more specific selectors). Force the wrapper and every
   layer between it and the .pwh-mega panel to be invisible so only the cream
   panel shows. */
.pwh-mainnav .jet-mega-menu-mega-container,
.pwh-mainnav .jet-mega-menu-mega-container__inner,
.pwh-mainnav .jet-mega-menu-mega-container__inner > .elementor,
.pwh-mainnav .jet-mega-menu-mega-container__inner > .elementor > .elementor-section-wrap,
.pwh-mainnav .jet-sub-mega-menu,
.pwh-mainnav .jet-sub-mega-menu > .elementor,
.pwh-mainnav .jet-sub-mega-menu > .elementor > .elementor-section-wrap {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

.pwh-mainnav .jet-mega-menu-mega-container__inner,
.pwh-mainnav .jet-mega-menu-mega-container__inner > .elementor {
	padding: 0 !important;
}

/* --- JetMenu 1.x (legacy markup: .jet-menu / .jet-sub-mega-menu) ------ */

.pwh-mainnav .jet-menu {
	gap: 4px;
	background: transparent;
}

.pwh-mainnav .jet-menu > .jet-menu-item > .top-level-link {
	padding: 10px 12px;
	border-radius: var(--pwh-radius-sm);
	background: transparent;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 15px;
	font-weight: 700;
}

.pwh-mainnav .jet-menu > .jet-menu-item:hover > .top-level-link,
.pwh-mainnav .jet-menu > .jet-menu-item.jet-menu-hover > .top-level-link {
	background-color: var(--pwh-navy-mist);
}

.pwh-mainnav .jet-menu .jet-dropdown-arrow {
	font-size: 11px;
	margin-left: 7px;
	color: var(--pwh-navy-ink);
}

.pwh-mainnav .jet-menu-container,
.pwh-mainnav .jet-menu-inner,
.pwh-mainnav .jet-menu,
.pwh-mainnav .jet-menu > .jet-menu-item {
	position: static !important;
}

.pwh-mainnav .jet-menu > .jet-menu-item > .jet-sub-mega-menu {
	top: calc(100% - 23px) !important;
	left: 50% !important;
	width: min(var(--pwh-content), calc(100% - 48px)) !important;
	max-width: none !important;
	margin: 0 !important;
	transform: translateX(-50%) !important;
	padding: 37px 0 0 !important;
}

.pwh-mainnav .jet-menu > .jet-menu-item:has(.pwh-mega--narrow, .pwh-mega > .e-con:only-child, .pwh-mega > .e-con-inner > .e-con:only-child) {
	position: relative !important;
}

.pwh-mainnav .jet-menu > .jet-menu-item:has(.pwh-mega--narrow, .pwh-mega > .e-con:only-child, .pwh-mega > .e-con-inner > .e-con:only-child) > .jet-sub-mega-menu {
	top: 100% !important;
	left: 0 !important;
	width: 280px !important;
	transform: none !important;
	padding-top: 41px !important; /* hover bridge; panel lands 14px below the bar, level with the wide panels */
}

/* --- Mega content templates (Mega Menu / Products, Support, About) ----- */

/* Layout is set here as well as in Elementor, because JetMenu doesn't always
   load the Elementor-generated CSS for its mega content. Without it every
   container falls back to a 100%-wide column and only the first column shows. */
.pwh-mega {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: flex-start;
	--gap: 48px;
	--row-gap: 48px;
	--column-gap: 48px;
	--padding-top: 44px;
	--padding-right: 44px;
	--padding-bottom: 44px;
	--padding-left: 44px;
	--width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 44px;
	background-color: var(--pwh-cream);
	border: 1px solid var(--pwh-navy-pale);
	border-radius: var(--pwh-radius);
	box-shadow: var(--pwh-shadow-menu);
}

/* Older imports: the panel is a boxed container, so Elementor passes the
   panel's padding vars to its .e-con-inner as well (44px twice) and the
   columns are boxed without .pwh-mega-col and don't shrink. Normalise both
   structures. */
.pwh-mega > .e-con-inner {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 !important;
}

.pwh-mega > .e-con,
.pwh-mega > .e-con-inner > .e-con {
	flex: 1 1 0 !important;
	min-width: 0;
	width: auto;
}

.pwh-mega .e-con-inner .e-con-inner {
	padding: 0 !important;
	max-width: none;
}

.pwh-mega .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--width: auto;
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	padding: 0;
	min-width: 0;
}

.pwh-mega .elementor-widget {
	width: 100%;
	margin: 0;
}

.pwh-mega-col {
	--gap: 18px;
	--row-gap: 18px;
	flex: 1 1 0 !important;
	gap: 18px;
}

.pwh-mega-col--tight {
	--gap: 12px;
	--row-gap: 12px;
	gap: 12px;
}

.pwh-mega-col--list {
	--gap: 16px;
	--row-gap: 16px;
	gap: 16px;
}

.pwh-mega .pwh-mega-item {
	--gap: 3px;
	--row-gap: 3px;
	gap: 3px;
}

.pwh-mega .pwh-mega-box {
	--gap: 4px;
	--row-gap: 4px;
	--padding-top: 14px;
	--padding-right: 14px;
	--padding-bottom: 14px;
	--padding-left: 14px;
	gap: 4px;
	padding: 14px;
}

@media (max-width: 1024px) {
	.pwh-mega {
		--flex-wrap: wrap;
		--gap: 32px;
		flex-wrap: wrap;
		gap: 32px;
	}

	.pwh-mega > .e-con-inner {
		flex-wrap: wrap;
		gap: 32px;
	}

	.pwh-mega-col,
	.pwh-mega > .e-con,
	.pwh-mega > .e-con-inner > .e-con {
		flex: 1 1 calc(50% - 16px) !important;
	}
}

@media (max-width: 767px) {
	.pwh-mega,
	.pwh-mega > .e-con-inner {
		flex-direction: column;
	}

	.pwh-mega {
		padding: 24px;
	}
}

/* Column heading: "• Domains" (Inter Black 15, navy dot 7px, gap 8) */
.pwh-mega-group .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 15px;
	font-weight: 900;
	line-height: normal;
}

.pwh-mega-group .elementor-heading-title::before {
	content: "";
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pwh-navy-ink);
}

/* Link title (Inter Bold 14.5) */
.pwh-mega-link .elementor-heading-title {
	margin: 0;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 14.5px;
	font-weight: 700;
	line-height: normal;
}

.pwh-mega-link .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.pwh-mega-link .elementor-heading-title a:hover,
.pwh-mega-link .elementor-heading-title a:focus-visible {
	color: var(--pwh-navy-soft);
}

/* Make the whole item clickable: stretch the title link over its item container. */
.pwh-mega-item {
	position: relative;
}

/* Elementor makes every widget position:relative; release them so the
   stretched link below covers the whole item, not just the title. */
.pwh-mega-item > .elementor-widget,
.pwh-mega-item > .e-con-inner > .elementor-widget,
.pwh-mega-item .elementor-widget-container {
	position: static;
}

.pwh-mega-item .pwh-mega-link .elementor-heading-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Link description (Inter Regular 12.5, grey-dark) */
.pwh-mega-desc,
.pwh-mega-desc p {
	margin: 0;
	color: var(--pwh-grey-dark);
	font-family: var(--pwh-font-body);
	font-size: 12.5px;
	font-weight: 400;
	line-height: normal;
}

/* Boxed items (Support → MyToolbox / Submit a Ticket) */
.pwh-mega-box {
	border: 1.5px solid var(--pwh-navy-ink);
	border-radius: var(--pwh-radius);
	transition: background-color 0.15s ease;
}

.pwh-mega-box:hover {
	background-color: var(--pwh-navy-mist);
}

/* ---------------------------------------------------------------------------
 * 7. Home page sections
 * ------------------------------------------------------------------------ */

/* Hero: the laptop photo sits on the left of a navy panel. In Figma it is
   1100 × 825 and starts 155px left of the 1440 frame, i.e. 875px left of
   centre. With a fixed 1100px width, "50% - 325px" lands it there at any
   viewport width (50% of (viewport - 1100) - 325 = centre - 875). */
.pwh-hero {
	background-color: var(--pwh-navy-ink);
	background-repeat: no-repeat;
	background-size: 1100px auto;
	background-position: calc(50% - 325px) 0;
}

/* "Not sure what you need?" – navy under the photo, so the gradient doesn't
   show as grey on cream while Elementor lazy-loads the background. */
.pwh-why {
	background-color: var(--pwh-navy-ink);
}

/* Clients strip – dashed logo slots */
.pwh-logo-slot {
	background-color: var(--pwh-navy-mist);
	border: 1.5px dashed var(--pwh-navy-pale);
	border-radius: var(--pwh-radius-sm);
}

.pwh-logo-slot .elementor-heading-title {
	margin: 0;
	color: var(--pwh-grey);
	font-family: var(--pwh-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	text-align: center;
}

.pwh-logo-slot img {
	max-height: 40px;
	width: auto;
}

/* Card / Media – product cards */
/* Three-up card rows (product cards, testimonials): equal columns that fit
   the row including gaps. Elementor gives containers flex-shrink 0, so
   33.33% widths plus 32px gaps overflowed by 64px. */
@media (min-width: 1025px) {
	.pwh-media-card,
	.pwh-testimonial {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

.pwh-media-card {
	border-radius: var(--pwh-radius);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pwh-media-card:hover,
.pwh-media-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 30px rgba(11, 22, 41, 0.25);
}

.pwh-media-card:focus-visible {
	outline: 2px solid var(--pwh-amber);
	outline-offset: 3px;
}

.pwh-media-card .pwh-card-arrow img {
	width: 30px;
	height: 20px;
	transition: transform 0.25s ease;
}

.pwh-media-card:hover .pwh-card-arrow img {
	transform: translateX(4px);
}

/* Testimonial Card */
.pwh-testimonial {
	background-color: var(--pwh-cream);
	border: 1px solid var(--pwh-navy-pale);
	border-radius: var(--pwh-radius);
}

.pwh-stars img {
	width: 126px;
	height: 22px;
}

.pwh-quote,
.pwh-quote p {
	margin: 0;
	color: var(--pwh-grey-dark);
	font-family: var(--pwh-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: normal;
}

.pwh-who {
	border-top: 1px solid var(--pwh-navy-pale);
}

.pwh-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.pwh-who-name .elementor-heading-title {
	margin: 0;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
}

.pwh-who-source,
.pwh-who-source p {
	margin: 0;
	color: var(--pwh-grey);
	font-family: var(--pwh-font-body);
	font-size: 13px;
	line-height: normal;
}

/* Not sure CTA */
.pwh-cta {
	border-top: 1px solid var(--pwh-navy-ink);
}

.pwh-cta-image img {
	display: block;
	width: 100%;
	height: 348px;
	object-fit: cover;
	object-position: 40% 35%;
	border-radius: var(--pwh-radius);
}

/* ---------------------------------------------------------------------------
 * 7b. Plan pages (cPanel Plans): page hero, billing toggle, pricing cards,
 *     partner logos, trust strip
 * ------------------------------------------------------------------------ */

/* Page hero: photo under an 80% navy overlay (set on the container in Elementor). */
.pwh-page-hero {
	background-color: var(--pwh-navy-ink);
}

.pwh-small,
.pwh-small p {
	margin: 0;
	font-family: var(--pwh-font-body);
	font-size: 14px;
	line-height: normal;
}

.pwh-h3-amber .elementor-heading-title {
	color: var(--pwh-amber-deep);
}

/* Billing toggle (Toggle / Billing) */
.pwh-billing {
	display: inline-flex;
	align-items: flex-start;
	gap: 4px;
	padding: 5px;
	background: var(--pwh-cream);
	border: 1px solid var(--pwh-navy-pale);
	border-radius: 999px;
}

.pwh-billing__opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pwh-billing__opt:hover,
.pwh-billing__opt:focus {
	background: var(--pwh-navy-mist);
	color: var(--pwh-navy-ink);
}

.pwh-billing__opt[aria-checked="true"],
.pwh-billing__opt[aria-checked="true"]:hover,
.pwh-billing__opt[aria-checked="true"]:focus {
	background: var(--pwh-navy-ink);
	color: var(--pwh-cream);
}

.pwh-billing__opt:focus-visible {
	outline: 2px solid var(--pwh-amber);
	outline-offset: 2px;
}

.pwh-billing__badge {
	font-size: 12px;
	color: var(--pwh-grey-dark);
}

.pwh-billing__opt[aria-checked="true"] .pwh-billing__badge {
	color: var(--pwh-cream);
}

/* Pricing card (Card / Pricing) */
.pwh-plan {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 36px;
	background: var(--pwh-cream);
	border: 1px solid var(--pwh-navy-pale);
	border-radius: var(--pwh-radius);
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
}

.pwh-plan--featured {
	border: 2px solid var(--pwh-navy-ink);
	box-shadow: 0 20px 20px rgba(11, 22, 41, 0.18);
}

.pwh-plan [hidden] {
	display: none !important;
}

.pwh-plan__tag {
	padding: 5px 10px;
	border-radius: 3px;
	background: var(--pwh-sand);
	color: var(--pwh-amber-deep);
	font-size: 11px;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
}

.pwh-plan__title {
	margin: 0;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-display);
	font-stretch: 125%;
	font-size: 22px;
	font-weight: 900;
	line-height: normal;
}

.pwh-plan__desc,
.pwh-price__note {
	margin: 0;
	color: var(--pwh-grey-dark);
	font-size: 13px;
	line-height: 18px;
}

.pwh-price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pwh-price__row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}

.pwh-price__amount {
	font-family: var(--pwh-font-display);
	font-stretch: 125%;
	font-size: 40px;
	font-weight: 900;
	line-height: 46px;
	letter-spacing: -0.9px;
}

.pwh-price__currency {
	font-size: 25.8px;
	vertical-align: top;
}

.pwh-price__period {
	color: var(--pwh-grey-dark);
	font-size: 15px;
}

.pwh-price__note {
	line-height: normal;
}

.pwh-plan__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 30px;
	border-radius: var(--pwh-radius);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.pwh-plan__btn--navy,
.pwh-plan__btn--navy:visited {
	background: var(--pwh-navy);
	color: var(--pwh-cream);
}

.pwh-plan__btn--navy:hover,
.pwh-plan__btn--navy:focus {
	background: var(--pwh-navy-ink);
	color: var(--pwh-cream);
}

.pwh-plan__btn--amber,
.pwh-plan__btn--amber:visited {
	background: var(--pwh-amber);
	color: var(--pwh-navy-ink);
}

.pwh-plan__btn--amber:hover,
.pwh-plan__btn--amber:focus {
	background: #b5832c;
	color: var(--pwh-navy-ink);
}

.pwh-plan__btn:focus-visible {
	outline: 2px solid var(--pwh-amber);
	outline-offset: 3px;
}

.pwh-plan__rule {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--pwh-navy-pale);
}

.pwh-plan__features,
.pwh-plan__details {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwh-plan__features li,
.pwh-plan__details li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	line-height: normal;
}

/* 16px tick (Figma check icon, drawn in CSS) */
.pwh-plan__features li::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: no-repeat center / 12px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5 4.3 7.8 11 1' fill='none' stroke='%230b1629' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pwh-plan__details li {
	align-items: flex-start;
	color: var(--pwh-grey-dark);
	font-size: 13px;
}

.pwh-plan__details li::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	background: no-repeat center / 5px 5px radial-gradient(circle, var(--pwh-grey-dark) 60%, transparent 62%);
}

/* "+" divider that opens the technical details; "−" when open */
.pwh-plan__more {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 14px;
	margin: -6px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.pwh-plan__more::before,
.pwh-plan__more::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--pwh-navy-pale);
}

.pwh-plan__more .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pwh-plan__more {
	--pwh-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23575557' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	--pwh-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12' stroke='%230b1629' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background: no-repeat center / 14px 14px var(--pwh-plus);
}

.pwh-plan__more::before {
	margin-right: 12px;
}

.pwh-plan__more::after {
	margin-left: 12px;
}

.pwh-plan__more[aria-expanded="true"] {
	background-image: var(--pwh-minus);
}

.pwh-plan__more:focus-visible {
	outline: 2px solid var(--pwh-amber);
	outline-offset: 4px;
}

/* Plan cards row: equal columns, cards keep their own height (Figma: items-start). */
@media (min-width: 1025px) {
	.pwh-plans > .e-con,
	.pwh-plans > .e-con-inner > .e-con,
	.pwh-plans > .elementor-widget,
	.pwh-plans > .e-con-inner > .elementor-widget {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

@media (max-width: 1024px) {
	.pwh-plans .elementor-widget-pwh-pricing-card {
		width: 100%;
	}
}

/* Testimonial stars + avatar as built on the live Home page (Rating and Icon
   widgets). Defaults only; the widgets' own settings take precedence. */
.pwh-stars {
	--e-rating-icon-font-size: 20px;
	--e-rating-gap: 3px;
	--e-rating-icon-marked-color: var(--pwh-amber);
}

.pwh-avatar .elementor-icon {
	font-size: 40px;
	color: var(--pwh-navy-soft);
	fill: var(--pwh-navy-soft);
}

/* Partner logos (cPanel, JetBackup, …) */
.pwh-partner img {
	display: block;
	width: 201px;
	max-width: 100%;
	height: 70px;
	margin: 0 auto;
	object-fit: contain;
}

/* Trust strip */
.pwh-trust {
	background-color: var(--pwh-cream-warm);
}

.pwh-trust-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwh-trust-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
}

.pwh-trust-list li::before {
	content: "";
	flex: 0 0 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pwh-navy-ink);
}

/* ---------------------------------------------------------------------------
 * 7c. Domains page: hero search + phone photo, privacy note, extension
 *     chips, numbered steps, FAQ, centred help CTA
 * ------------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pwh-domains-hero {
	overflow: hidden;
}

/* Copy stays above the oversized phone photo. */
.pwh-domains-hero > .e-con-inner > .e-con:first-child,
.pwh-domains-hero > .e-con:first-child {
	position: relative;
	z-index: 1;
}

/* Grey pill search (529 × 40, magnifier at 14px) */
.pwh-domain-search {
	position: relative;
	width: 100%;
	max-width: 529px;
	margin: 0;
}

.pwh-domain-search__input,
.pwh-domain-search__input[type="search"] {
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 20px 0 47px;
	border: 0;
	border-radius: 40px;
	background: #d9d9d9;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 18px;
	line-height: 26px;
	-webkit-appearance: none;
	appearance: none;
}

.pwh-domain-search__input::placeholder {
	color: rgba(11, 22, 41, 0.59);
	opacity: 1;
}

.pwh-domain-search__input:focus {
	outline: 2px solid var(--pwh-amber);
	outline-offset: 2px;
	background: #e4e4e4;
}

.pwh-domain-search__btn {
	position: absolute;
	top: 0;
	left: 8px;
	width: 34px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 40px;
	cursor: pointer;
	background: transparent no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='7.5' cy='7.5' r='6.5' fill='none' stroke='%230b1629' stroke-width='2'/%3E%3Cpath d='M12.3 12.3 18 18' stroke='%230b1629' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.pwh-domain-search__btn:hover,
.pwh-domain-search__btn:focus {
	background-color: transparent;
}

/* Phone-in-hand photo: overflows its 558 × 380 slot as in Figma, clipped by the hero. */
@media (min-width: 1025px) {
	.pwh-domains-visual {
		position: relative;
	}

	.pwh-domains-visual > .elementor-widget-image {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1166px;
		max-width: none;
		transform: translate(calc(-50% + 61px), -50%);
		pointer-events: none;
	}

	.pwh-domains-visual > .elementor-widget-image img {
		width: 1166px;
		max-width: none;
		height: auto;
	}
}

@media (max-width: 1024px) {
	.pwh-domains-visual img {
		width: 100%;
		max-width: 560px;
		height: auto;
		margin: 0 auto;
	}
}

/* Domain privacy note with a switch (on) */
.pwh-note {
	background-color: var(--pwh-navy-mist);
	border: 1px solid var(--pwh-navy-pale);
	border-radius: 8px;
}

.pwh-note-switch {
	flex: 0 0 46px;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: var(--pwh-navy-ink);
	position: relative;
}

.pwh-note-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pwh-cream);
}

.pwh-note-title .elementor-heading-title {
	margin: 0;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
}

.pwh-note-text,
.pwh-note-text p {
	margin: 0;
	color: var(--pwh-grey-dark);
	font-family: var(--pwh-font-body);
	font-size: 13px;
	line-height: normal;
}

/* Chips column takes what's left next to the fixed 638px copy column. */
.e-con:has(> .elementor-widget .pwh-chips),
.e-con-inner > .e-con:has(> .elementor-widget .pwh-chips) {
	min-width: 0;
	flex-basis: 0 !important;
}

/* Small grey label ("…plus every other extension") */
.pwh-label .elementor-heading-title {
	margin: 0;
	max-width: 200px;
	color: var(--pwh-grey-dark);
	font-family: var(--pwh-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
}

/* Extension chips: <ul class="pwh-chips"><li>.com.au</li>… <li class="is-more">+ more</li></ul> */
.pwh-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwh-chips li {
	margin: 0;
	padding: 9px 18px;
	border: 1.5px solid var(--pwh-navy-pale);
	border-radius: 999px;
	background: var(--pwh-cream);
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
}

.pwh-chips li.is-more {
	border-style: dashed;
	color: var(--pwh-grey-dark);
	font-weight: 400;
}

.pwh-chips a {
	color: inherit;
	text-decoration: none;
}

/* Numbered steps: <ol class="pwh-steps"><li>…</li></ol> → 01, 02 … */
.pwh-steps {
	max-width: 640px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pwh-step;
}

.pwh-steps li {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin: 0;
	padding: 16px 0;
	color: var(--pwh-navy-ink);
	font-family: var(--pwh-font-body);
	font-size: 17px;
	font-weight: 300;
	line-height: normal;
	counter-increment: pwh-step;
}

.pwh-steps li + li {
	border-top: 1px solid var(--pwh-navy-pale);
}

.pwh-steps li::before {
	content: counter(pwh-step, decimal-leading-zero);
	flex: 0 0 auto;
	min-width: 20px;
	padding-top: 2px;
	color: var(--pwh-amber-deep);
	font-size: 14px;
	font-weight: 900;
}

/* FAQ (Elementor Toggle widget with class pwh-faq; FAQ Row component) */
.pwh-faq .elementor-toggle-item {
	margin: 0 !important;
	border: 0;
	border-bottom: 1px solid var(--pwh-navy-pale);
}

.pwh-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 0 !important;
	border: 0 !important;
	cursor: pointer;
}

.pwh-faq .elementor-toggle-title {
	flex: 1 1 auto;
	order: 1;
	color: var(--pwh-navy-ink) !important;
	font-family: var(--pwh-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
}

.pwh-faq .elementor-toggle-icon {
	order: 2;
	flex: 0 0 20px;
	width: 20px !important;
	margin: 0 !important;
	color: var(--pwh-navy-ink);
	fill: var(--pwh-navy-ink);
	font-size: 14px;
	text-align: center;
}

.pwh-faq .elementor-toggle-icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.pwh-faq .elementor-tab-content {
	padding: 0 40px 20px 0 !important;
	border: 0 !important;
	color: var(--pwh-grey-dark);
	font-family: var(--pwh-font-body);
	font-size: 16px;
	line-height: 24px;
}

.pwh-faq .elementor-tab-content p {
	margin: 0 0 8px;
}

.pwh-faq .elementor-tab-content p:last-child {
	margin-bottom: 0;
}

.pwh-faq .elementor-tab-title:focus-visible {
	outline: 2px solid var(--pwh-amber);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 7d. About page
 * ------------------------------------------------------------------------ */

/* Inter Light body sizes used on About */
.pwh-lead--tight,
.pwh-lead--tight p {
	line-height: 22px;
}

.pwh-lead-17,
.pwh-lead-17 p,
.pwh-lead-16,
.pwh-lead-16 p {
	margin: 0;
	font-family: var(--pwh-font-body);
	font-size: 17px;
	font-weight: 300;
	line-height: 21px;
}

.pwh-lead-16,
.pwh-lead-16 p {
	font-size: 16px;
	line-height: 19px;
}

.pwh-text-grey,
.pwh-text-grey .elementor-heading-title {
	color: var(--pwh-grey-dark);
}

/* Small amber-light label above a heading ("Meet the founder") */
.pwh-kicker .elementor-heading-title {
	margin: 0;
	color: #e8c07a;
	font-family: var(--pwh-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
}

/* Fixed-width widgets beside a growing column keep their Figma width. */
@media (min-width: 1025px) {
	.pwh-fixed {
		flex-shrink: 0 !important;
	}
}

/* Rounded photos filling their slot */
.pwh-photo img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--pwh-radius);
}

.pwh-photo--300 img {
	height: 300px;
}

.pwh-photo--343 img {
	height: 343px;
}

/* Video placeholder: navy panel, 84px cream play button, caption */
.pwh-video {
	border-radius: var(--pwh-radius);
	overflow: hidden;
}

.pwh-play {
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--pwh-cream) no-repeat 54% 50% / 21px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 24'%3E%3Cpath d='M0 0v24l21-12z' fill='%230b1629'/%3E%3C/svg%3E");
}

.pwh-video-caption,
.pwh-video-caption p {
	margin: 0;
	color: var(--pwh-navy-mist);
	font-family: var(--pwh-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
}

/* CTA band: pale rule top and bottom */
.pwh-cta-band {
	border-top: 1px solid var(--pwh-navy-pale);
	border-bottom: 1px solid var(--pwh-navy-pale);
}

@media (max-width: 1024px) {
	.pwh-photo--300 img,
	.pwh-photo--343 img {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Footer
 * ------------------------------------------------------------------------ */

.pwh-footer {
	background-color: var(--pwh-navy-ink);
	color: var(--pwh-cream);
}

.pwh-footer-logo img {
	display: block;
	width: 201px;
	max-width: 100%;
	height: auto;
}

.pwh-footer-tagline .elementor-heading-title {
	margin: 0;
	color: var(--pwh-cream);
	font-family: var(--pwh-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
}

.pwh-footer-blurb,
.pwh-footer-blurb p {
	margin: 0;
	color: var(--pwh-navy-pale);
	font-family: var(--pwh-font-body);
	font-size: 14.5px;
	font-weight: 300;
	line-height: normal;
}

/* Contact rows: 24px icon slot, text starts 36px from the left */
.pwh-contact-row {
	--pwh-contact-icon: 24px;
}

.pwh-contact-icon img {
	display: block;
	width: var(--pwh-contact-icon);
	height: var(--pwh-contact-icon);
	object-fit: contain;
}

.pwh-contact-text,
.pwh-contact-text p {
	margin: 0;
	color: var(--pwh-cream);
	font-family: var(--pwh-font-body);
	font-size: 14px;
	line-height: normal;
}

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

.pwh-social img {
	display: block;
	width: 34px;
	height: 34px;
	transition: opacity 0.15s ease;
}

.pwh-social a:hover img {
	opacity: 0.8;
}

/* Footer columns */
.pwh-footer-heading .elementor-heading-title {
	margin: 0;
	color: var(--pwh-cream);
	font-family: var(--pwh-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
}

/* Icon List widget used as a plain link list (no icons) */
.pwh-footer-links .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
}

.pwh-footer-links .elementor-icon-list-item,
.pwh-footer-links .elementor-icon-list-item > a {
	padding: 0;
	margin: 0;
}

.pwh-footer-links .elementor-icon-list-item::after {
	display: none;
}

.pwh-footer-links .elementor-icon-list-text {
	padding: 0;
	color: var(--pwh-navy-mist);
	font-family: var(--pwh-font-body);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 17px;
	transition: color 0.15s ease;
}

.pwh-footer-links a:hover .elementor-icon-list-text,
.pwh-footer-links a:focus-visible .elementor-icon-list-text {
	color: var(--pwh-amber);
}

.pwh-footer-rule {
	border-top: 1px solid var(--pwh-navy-pale);
}

.pwh-footer-small,
.pwh-footer-small p {
	margin: 0;
	color: var(--pwh-navy-pale);
	font-family: var(--pwh-font-body);
	font-size: 13px;
	line-height: normal;
	white-space: pre-wrap;
}

.pwh-credit img {
	display: block;
	width: 84px;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * 9. Responsive type scale
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.pwh-h1 .elementor-heading-title {
		font-size: 44px;
		line-height: 50px;
		letter-spacing: -1px;
	}

	.pwh-h2 .elementor-heading-title {
		font-size: 34px;
		line-height: 40px;
		letter-spacing: -0.7px;
	}

	/* Stacked: photo on top, copy below (spacer container shrinks to 420px). */
	.pwh-hero {
		background-size: auto 480px;
		background-position: 35% 0;
	}
}

@media (max-width: 767px) {
	.pwh-h1 .elementor-heading-title {
		font-size: 36px;
		line-height: 42px;
		letter-spacing: -0.8px;
	}

	.pwh-h2 .elementor-heading-title {
		font-size: 28px;
		line-height: 34px;
		letter-spacing: -0.5px;
	}

	.pwh-h3 .elementor-heading-title {
		font-size: 24px;
		line-height: 30px;
	}

	.pwh-body,
	.pwh-lead {
		font-size: 16px;
		line-height: 24px;
	}

	.pwh-hero {
		background-size: auto 340px;
		background-position: 35% 0;
	}

	.pwh-cta-image img {
		height: 240px;
	}

	.pwh-footer-small {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
 * 10. Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.pwh-media-card,
	.pwh-media-card .pwh-card-arrow img,
	body .pwh-btn .elementor-button {
		transition: none;
	}

	.pwh-media-card:hover,
	body .pwh-btn .elementor-button:hover {
		transform: none;
	}
}