.elementor-kit-6{--e-global-color-primary:#FF6600;--e-global-color-secondary:#000000;--e-global-color-text:#555555;--e-global-color-accent:#C24E00;--e-global-color-a1f0e01:#FFF1E6;--e-global-color-d8c6182:#2A2A2A;--e-global-color-b182030:#182030;--e-global-color-bc5cbd6:#C5CBD6;--e-global-color-b2a3448:#2A3448;--e-global-color-abf451d:#6B6B6B;--e-global-color-df8cd44:#FFFFFF;--e-global-color-3405e02:#F8F8F8;--e-global-color-c7c6345:#F4F4F4;--e-global-color-3b6329a:#D0D0D0;--e-global-color-ef451cd:#C8C8C8;--e-global-color-53bb350:#E0E0E0;--e-global-color-1d7a460:#1D7A46;--e-global-color-e8f5ec0:#E8F5EC;--e-global-color-be2cc0a:#AA0000;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Source Sans 3";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:700;--e-global-typography-c0a1e01-font-family:"Source Sans 3";--e-global-typography-c0a1e01-font-size:21px;--e-global-typography-c0a1e01-font-weight:400;--e-global-typography-c0a1e01-line-height:1.55em;--e-global-typography-c0a1e02-font-family:"Source Sans 3";--e-global-typography-c0a1e02-font-size:15px;--e-global-typography-c0a1e02-font-weight:400;--e-global-typography-c0a1e02-line-height:1.5em;--e-global-typography-c0a1e03-font-family:"Manrope";--e-global-typography-c0a1e03-font-size:13px;--e-global-typography-c0a1e03-font-weight:700;--e-global-typography-c0a1e03-text-transform:uppercase;--e-global-typography-c0a1e03-line-height:1.3em;--e-global-typography-c0a1e03-letter-spacing:0.08em;--e-global-typography-c0a1e04-font-family:"Manrope";--e-global-typography-c0a1e04-font-size:28px;--e-global-typography-c0a1e04-font-weight:800;--e-global-typography-c0a1e04-line-height:1em;--e-global-typography-c0a1e05-font-family:"Manrope";--e-global-typography-c0a1e05-font-size:16px;--e-global-typography-c0a1e05-font-weight:700;background-color:#FFFFFF;color:var( --e-global-color-text );font-family:"Source Sans 3", Sans-serif;font-size:18px;font-weight:400;line-height:1.6em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:16px;font-weight:700;text-transform:none;line-height:1.2em;color:var( --e-global-color-df8cd44 );border-style:none;border-radius:999px 999px 999px 999px;padding:13px 24px 13px 24px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-df8cd44 );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 p{margin-block-end:1em;}.elementor-kit-6 a{color:var( --e-global-color-accent );font-weight:600;}.elementor-kit-6 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-6 h1{color:var( --e-global-color-secondary );font-family:"Manrope", Sans-serif;font-size:clamp(40px, 2rem + 2.5vw, 64px);font-weight:800;line-height:1.08em;letter-spacing:-0.02em;}.elementor-kit-6 h2{color:var( --e-global-color-secondary );font-family:"Manrope", Sans-serif;font-size:clamp(32px, 1.5rem + 1.875vw, 48px);font-weight:800;line-height:1.12em;letter-spacing:-0.015em;}.elementor-kit-6 h3{color:var( --e-global-color-d8c6182 );font-family:"Manrope", Sans-serif;font-size:clamp(24px, 1.125rem + 1.1vw, 32px);font-weight:700;line-height:1.2em;letter-spacing:-0.01em;}.elementor-kit-6 h4{color:var( --e-global-color-secondary );font-family:"Manrope", Sans-serif;font-size:clamp(20px, 1rem + 0.5vw, 24px);font-weight:700;line-height:1.3em;}.elementor-kit-6 h5{color:var( --e-global-color-secondary );font-family:"Manrope", Sans-serif;font-size:16px;font-weight:700;line-height:1.4em;}.elementor-kit-6 h6{color:var( --e-global-color-abf451d );font-family:"Manrope", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;line-height:1.4em;letter-spacing:0.06em;}.elementor-kit-6 label{color:var( --e-global-color-d8c6182 );font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:"Source Sans 3", Sans-serif;font-size:16px;font-weight:500;color:var( --e-global-color-secondary );background-color:var( --e-global-color-df8cd44 );border-style:solid;border-width:1.5px 1.5px 1.5px 1.5px;border-color:var( --e-global-color-ef451cd );border-radius:999px 999px 999px 999px;padding:14px 22px 14px 22px;}.elementor-kit-6 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea:focus,.elementor-kit-6 .elementor-field-textual:focus{background-color:var( --e-global-color-df8cd44 );box-shadow:0px 0px 0px 3px #FFF1E6;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:2rem;}.elementor-element{--widgets-spacing:2rem 2rem;--widgets-spacing-row:2rem;--widgets-spacing-column:2rem;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1279px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-text-font-size:17px;--e-global-typography-c0a1e01-font-size:19px;font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* WMS kit CSS: only what the kit's own controls can't set. Values from the WMS design system. */

/* Domain search: the button sits inside the rounded field (approved prototype). */
#wfwc_domain_search_form .elementor-form-fields-wrapper {
    position: relative;
}
#wfwc_domain_search_form .elementor-form-fields-wrapper .elementor-field-type-submit {
    position: absolute;
    right: 6px;
    top: 5px;
}
#form-field-wfwc_domain_search_input {
    padding-right: 20%;
}

/* Placeholders use Muted. */
.elementor-field-group .elementor-field::placeholder,
input::placeholder,
textarea::placeholder {
    color: #6B6B6B;
}

/* Text areas can't be pills, so they get the panel radius. */
.elementor-field-group textarea.elementor-field,
.elementor-field-textual.elementor-size-sm textarea,
textarea {
    border-radius: 24px !important;
}

/* Plain WordPress and WooCommerce fields match the Elementor form fields. */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], select {
    border: 1.5px solid #C8C8C8;
    border-radius: 999px;
    padding: 12px 22px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: #000;
    background-color: #fff;
}
textarea {
    border: 1.5px solid #C8C8C8;
    padding: 16px 22px;
}
input:focus, select:focus, textarea:focus,
.elementor-field-group .elementor-field:focus {
    border-color: #FF6600 !important;
    box-shadow: 0 0 0 3px #FFF1E6;
    outline: none;
}

/* Visible keyboard focus on buttons and links. */
.elementor-button:focus-visible, a:focus-visible, button:focus-visible {
    outline: 3px solid #FF6600;
    outline-offset: 2px;
}

/* WooCommerce buttons follow the kit pill style. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button {
    border-radius: 999px;
    background: #FF6600;
    color: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-weight: 700;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.wc-block-components-button:hover {
    background: #000;
    color: #fff;
}

/* Andy, 13 Nov: text and icons on orange or black fills are always white. */
.elementor-button, .elementor-button .elementor-button-icon svg { color: #fff; fill: #fff; }

/* WHMCS for WooCommerce plugin: map its old #FF8800 / Roboto tokens to the WMS kit.
   Set on body so it wins over the plugin's own :root values whatever the load order. */
body {
    --wfwc-primary: var(--e-global-color-primary, #FF6600);
    --wfwc-primary-hover: var(--e-global-color-secondary, #000000);
    --wfwc-accent: var(--e-global-color-accent, #C24E00);
    --wfwc-accent-hover: var(--e-global-color-secondary, #000000);
    --wfwc-secondary: var(--e-global-color-d8c6182, #2A2A2A);
    --wfwc-text: var(--e-global-color-text, #555555);
    --wfwc-dark: var(--e-global-color-secondary, #000000);
    --wfwc-light-bg: var(--e-global-color-3405e02, #F8F8F8);
    --wfwc-border: var(--e-global-color-ef451cd, #C8C8C8);
    --wfwc-radius: 999px;
    --wfwc-font: "Source Sans 3", system-ui, sans-serif;
}

/* Navy sections (Andy, 13 Nov). Add the class "wms-navy" to any section with the Navy background:
   headings go white, text goes light grey, links go orange. Buttons keep their kit style. */
.wms-navy, .wms-on-navy { color: #C5CBD6; }
.wms-navy h1, .wms-navy h2, .wms-navy h3, .wms-navy h4, .wms-navy h5, .wms-navy h6 { color: #FFFFFF; }
.wms-navy a:not(.elementor-button), .wms-on-navy a { color: #FF6600; }
.wms-navy a:not(.elementor-button):hover, .wms-on-navy a:hover { color: #FFFFFF; }

/* The NXTLVL credit logo is navy, so show it in white on the navy footer. */
.elementor-location-footer img[src*="nxtlvl-logo"] { filter: brightness(0) invert(1); vertical-align: -2px !important; } /* -2px: sits the logo on the text line (Andy, 14 Nov) */
/* Footer column labels are plain text (p), not headings. Keep the old heading spacing: no paragraph margin. */
.elementor-location-footer .wms-footer-label .elementor-heading-title { margin: 0; }

/* Moved from the child theme on 13 Nov so all global and navy styles live in the kit. */
/* Text blocks: no extra space after the last paragraph, so container gaps set the rhythm. */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Navy photo sections. Use with "wms-navy" on a section that has a background
   photo and a Navy overlay of about 88%. Adds faint 45-degree stripes over the photo,
   and keeps the section's content above them. */
.wms-navy-image {
	position: relative;
	isolation: isolate;
}
.wms-navy-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 6px);
}
.wms-navy-image > * {
	position: relative;
	z-index: 1;
}

/* Page width (Andy, 13 Nov): every top-level section keeps a full-width background,
   but its content sits within 1600px, centred, with a side gutter of at least
   56px on desktop, 40px on tablet and 16px on phones. Applies to pages, header and footer.
   "Top-level" means a container placed directly on the page or template, not inside another one.
   To let one section's content run edge to edge, give it the CSS class "wms-bleed". */
:root { --wms-gutter: 56px; --wms-max: 1600px; }
@media (max-width: 1279px) { :root { --wms-gutter: 40px; } }
@media (max-width: 767px) { :root { --wms-gutter: 16px; } }
.elementor > .e-con:not(.wms-bleed) {
    padding-left: max(var(--wms-gutter), calc((100% - var(--wms-max)) / 2)) !important;
    padding-right: max(var(--wms-gutter), calc((100% - var(--wms-max)) / 2)) !important;
}

/* Page Template // Default wraps post content in a "wms-bleed" container, so sections inside
   the content get the gutter once. Content not built from Elementor sections (WooCommerce
   cart, checkout and account, plain policy pages) gets the same gutter here. */
/* Skipped inside a "wms-article" section (Single Post template), which sets its own width. */
.elementor-widget-theme-post-content:not(.wms-article):not(.wms-article *):not(:has(.elementor > .e-con)) {
    padding: 48px max(var(--wms-gutter), calc((100% - var(--wms-max)) / 2)) 64px !important;
}

/* Wide blocks (e.g. the WooCommerce cart) stay inside the gutter instead of pulling out past it. */
.elementor-widget-theme-post-content .alignwide, .elementor-widget-theme-post-content .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; width: auto; }

/* Header cart link. The cart script writes the item count into .wms-cart-count;
   it stays hidden while empty, so leave it blank (not "0") for an empty cart. */
body .elementor a.wms-cart-link { position: relative; display: inline-flex; align-items: center; padding: 8px; color: #000; }
body .elementor a.wms-cart-link:hover, body .elementor a.wms-cart-link:focus-visible { color: #FF6600; }
.wms-cart-count {
    position: absolute; top: 0; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #FF6600; color: #fff;
    font: 700 11px/18px "Manrope", system-ui, sans-serif; text-align: center;
}
.wms-cart-count:empty { display: none; }

/* ===== CTA library ([wms_cta] shortcode, inc/cta.php). Usage: content-strategy/cta-library.md ===== */
.wms-cta { margin: 40px 0; }
.wms-cta p { margin: 0; }
.wms-cta__eyebrow { font: 700 13px/1.3 "Manrope", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6B6B6B; }
.wms-cta__heading { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; color: #000; margin: 0; }
.wms-cta__text { color: #555; }
.wms-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
.wms-cta .wms-cta__button { padding: 12px 24px; font-size: 16px; text-decoration: none; }
.wms-cta__link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Inline card: sits inside article text. Smoke, with an orange left edge. */
.wms-cta--inline {
    display: grid; gap: 8px; padding: 24px 28px;
    background: #F8F8F8; border: 1px solid #D0D0D0; border-left: 4px solid #FF6600; border-radius: 16px;
}
.wms-cta--inline .wms-cta__heading { font-size: 21px; line-height: 1.3; }
.wms-cta--inline .wms-cta__text { font-size: 17px; line-height: 1.55; }

/* Large section: navy panel. In Elementor pages use the saved "CTA section" templates instead. */
.wms-cta--section {
    display: grid; gap: 14px; justify-items: start; padding: clamp(32px, 5vw, 64px);
    background-color: #182030; border-radius: 24px; overflow: hidden;
}
.wms-cta--section .wms-cta__eyebrow { color: #C5CBD6; }
.wms-cta--section .wms-cta__heading { color: #fff; font-size: clamp(28px, 1.25rem + 1.5vw, 40px); line-height: 1.15; max-width: 22ch; }
.wms-cta--section .wms-cta__text { color: #C5CBD6; font-size: 19px; max-width: 60ch; }

/* Slim banner: end of a post. */
.wms-cta--banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
    padding: 20px 24px; background: #182030; border-radius: 16px;
}
.wms-cta--banner .wms-cta__text { color: #C5CBD6; font-size: 17px; flex: 1 1 320px; }
.wms-cta--banner .wms-cta__text strong { color: #fff; font-family: "Manrope", system-ui, sans-serif; font-weight: 800; }
@media (max-width: 767px) {
    .wms-cta--inline { padding: 20px; }
    .wms-cta--banner .wms-cta__actions, .wms-cta--banner .wms-cta__button { width: 100%; text-align: center; justify-content: center; }
}

/* ===== Blog article reading styles (Single Post template, Post Content widget class "wms-article") =====
   The Single Post template is full content width; running text is capped at 960px (see below). */
.wms-article { font-size: 19px; line-height: 1.7; color: #555; }
/* Template 783 is full content width (logo edge to Log in edge). Running text is capped at 960px
   from the same left edge so lines stay readable; images, tables, takeaways, CTA cards, FAQs and
   related posts keep the full width. */
.wms-article :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, dl) { max-width: 960px; }
/* Article headings sit one step below page headings, so long posts stay calm to read. */
.wms-article h2 { font-size: clamp(28px, 1.25rem + 1vw, 36px); line-height: 1.2; }
.wms-article h3 { font-size: clamp(22px, 1.1rem + .5vw, 26px); line-height: 1.3; }
.wms-article p { margin: 0 0 1.15em; }
.wms-article h2 { margin: 2.2em 0 .5em; }
.wms-article h3 { margin: 1.8em 0 .45em; }
.wms-article h4, .wms-article h5 { margin: 1.5em 0 .4em; }
.wms-article :is(h2, h3, h4):first-child { margin-top: 0; }
.wms-article strong { color: #2A2A2A; }
.wms-article a:not(.elementor-button) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wms-article :is(ul, ol) { margin: 0 0 1.3em; padding-left: 1.4em; }
.wms-article li { margin: 0 0 .5em; padding-left: .2em; }
.wms-article li::marker { color: #FF6600; font-weight: 700; }
.wms-article :is(figure, .wp-block-image) { margin: 2em 0; max-width: 100%; }
.wms-article img { border-radius: 16px; height: auto; }
.wms-article figcaption { margin-top: .6em; font-size: 15px; line-height: 1.5; color: #6B6B6B; }
.wms-article blockquote {
    margin: 2em 0; padding: 4px 0 4px 24px; border-left: 4px solid #FF6600;
    font-size: 21px; line-height: 1.55; color: #2A2A2A;
}
.wms-article blockquote p:last-child { margin-bottom: 0; }
.wms-article table { width: 100%; margin: 2em 0; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.wms-article :is(th, td) { padding: 12px 14px; border-bottom: 1px solid #E0E0E0; text-align: left; vertical-align: top; }
.wms-article th { background: #F8F8F8; color: #000; font-family: "Manrope", system-ui, sans-serif; font-weight: 700; font-size: 15px; }
.wms-article .wp-block-table { overflow-x: auto; }
.wms-article hr { border: 0; border-top: 1px solid #E0E0E0; margin: 2.5em 0; }
.wms-article code { font-size: .88em; background: #F4F4F4; padding: .1em .35em; border-radius: 6px; }
.wms-article .wms-cta { max-width: none; }
@media (max-width: 767px) {
    .wms-article { font-size: 18px; }
    .wms-article blockquote { font-size: 19px; padding-left: 18px; }
}

/* --- Article components (classes used by the blog writers) --- */
/* Key takeaways */
.wms-article .wms-kt {
    max-width: none; margin: 0 0 2em; padding: 24px 28px;
    background: #F8F8F8; border: 1px solid #D0D0D0; border-radius: 16px;
}
.wms-article .wms-kt__title {
    margin: 0 0 .6em; font: 700 13px/1.3 "Manrope", system-ui, sans-serif;
    letter-spacing: .08em; text-transform: uppercase; color: #000;
}
.wms-article .wms-kt ul { margin: 0; }
.wms-article .wms-kt li:last-child { margin-bottom: 0; }

/* Numbered steps with orange badges (respects the list's start number) */
.wms-article ol.wms-steps { list-style: none; padding-left: 0; }
.wms-article ol.wms-steps > li { position: relative; padding-left: 52px; margin-bottom: 1em; min-height: 36px; }
.wms-article ol.wms-steps > li::before {
    content: counter(list-item); position: absolute; left: 0; top: 0;
    width: 34px; height: 34px; border-radius: 999px; background: #FF6600; color: #fff;
    font: 800 15px/34px "Manrope", system-ui, sans-serif; text-align: center;
}
.wms-article ol.wms-steps > li::marker { content: ""; }

/* FAQ accordion */
.wms-article .wms-faq-list { max-width: none; margin: 2.5em 0; }
.wms-article .wms-faq { border-bottom: 1px solid #E0E0E0; }
.wms-article .wms-faq:first-of-type { border-top: 1px solid #E0E0E0; }
.wms-article .wms-faq summary {
    list-style: none; cursor: pointer; position: relative; padding: 18px 48px 18px 0;
    font: 700 18px/1.4 "Manrope", system-ui, sans-serif; color: #000;
}
.wms-article .wms-faq summary::-webkit-details-marker { display: none; }
.wms-article .wms-faq summary::after {
    content: ""; position: absolute; right: 8px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
    border-radius: 999px; background: #F4F4F4;
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    background-size: 10px 2px, 2px 10px; background-position: center; background-repeat: no-repeat;
    transition: transform .2s;
}
.wms-article .wms-faq[open] summary::after { background-size: 10px 2px, 0 0; background-color: #FF6600; background-image: linear-gradient(#fff, #fff); }
.wms-article .wms-faq summary:hover { color: #C24E00; }
.wms-article .wms-faq summary:focus-visible { outline: 3px solid #FF6600; outline-offset: 2px; border-radius: 6px; }
.wms-article .wms-faq__a { padding: 0 0 18px; }
.wms-article .wms-faq__a p:last-child { margin-bottom: 0; }

/* Sources */
.wms-article .wms-sources { max-width: none; margin: 3em 0 0; padding-top: 1.5em; border-top: 1px solid #E0E0E0; font-size: 15px; line-height: 1.5; color: #6B6B6B; }
.wms-article .wms-sources h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .8em; color: #2A2A2A; }
.wms-article .wms-sources :is(ol, ul) { padding-left: 1.2em; margin: 0; }
.wms-article .wms-sources li { margin-bottom: .4em; }
.wms-article .wms-sources li::marker { color: #6B6B6B; font-weight: 400; }
.wms-article .wms-sources a { color: #555; }

/* SVG figures and photos */
.wms-article .wms-figure { margin: 2em 0; }
.wms-article .wms-figure svg { display: block; width: 100%; height: auto; max-width: 100%; }
.wms-article :is(.wp-block-image, .wms-photo) img { display: block; width: 100%; height: auto; border-radius: 16px; }
/* Photos and figures in the article body share the text's 960px cap and left edge (Andy, 14 Nov).
   Tables (figure.wp-block-table) and anything inside CTA cards keep their own widths. */
.wms-article :is(figure:not(.wp-block-table), .wp-block-image, .wms-figure, .wms-photo):not(.wms-cta *),
.wms-article img:not(.wms-cta img) { max-width: min(100%, 960px); }
.wms-article .wms-credit { display: block; margin-top: .2em; font-size: 13px; color: #6B6B6B; }
.wms-article .wms-credit a { color: inherit; }

/* Callout notice */
.wms-article blockquote.wms-callout {
    max-width: none; padding: 20px 24px; border: 1px solid #D0D0D0; border-left: 4px solid #FF6600;
    border-radius: 16px; background: #F8F8F8; font-size: 18px; line-height: 1.6; color: #2A2A2A;
}

/* Links that aren't live yet read as plain text */
.wms-article .wms-pending-link { color: inherit; text-decoration: none; font-weight: inherit; }

/* Tables scroll sideways on phones */
.wms-article table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) { .wms-article table { display: table; } }
.wms-article tbody tr:nth-child(even) td { background: #FCFCFC; }
.wms-article td strong { color: #000; }

/* Code */
.wms-article pre {
    max-width: 100%; margin: 1.6em 0; padding: 18px 20px; overflow-x: auto;
    background: #182030; color: #E8ECF2; border-radius: 12px;
    font: 14px/1.6 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wms-article pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* Mobile header menu: pin the dropdown to the screen edges under the 64px masthead.
   Elementor's "stretch" maths was pushing it past the right edge (page 427px wide on a 390px phone). */
@media (max-width: 767px) {
    .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important;
        width: 100% !important; max-width: 100vw; max-height: calc(100vh - 64px); overflow-y: auto;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    }
}

/* Long words (error codes, URLs) wrap instead of widening the page on phones. */
.wms-article, .wms-article :is(h1, h2, h3, h4, p, li, a, td),
.elementor-widget-theme-post-title .elementor-heading-title { overflow-wrap: break-word; word-break: normal; }
.wms-article :is(h2, h3, p, li) { overflow-wrap: anywhere; }
.elementor-widget-post-info .elementor-inline-items { flex-wrap: wrap; row-gap: 6px; }

/* ===== Blog archive (template 782 + inc/blog-archive.php) ===== */
/* Mid-list CTA spans the whole card grid, between the first and second six posts. */
.elementor-posts-container .wms-archive-cta { grid-column: 1 / -1; }
.wms-archive-cta .wms-cta { margin: 24px 0; }

/* Pagination: pill buttons in the site style. */
.elementor-pagination {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
    margin-top: 56px; font-family: "Manrope", system-ui, sans-serif;
}
.elementor-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 46px; padding: 0 16px; margin: 0 !important;
    border: 1.5px solid #C8C8C8; border-radius: 999px; background: #fff;
    color: #000 !important; font-weight: 700; font-size: 16px; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.elementor-pagination a.page-numbers:hover, .elementor-pagination a.page-numbers:focus-visible {
    border-color: #000; background: #000; color: #fff !important;
}
.elementor-pagination .page-numbers.current { border-color: #FF6600; background: #FF6600; color: #fff !important; }
.elementor-pagination .page-numbers.dots { border-color: transparent; background: none; min-width: 24px; padding: 0; }
.elementor-pagination .page-numbers.prev, .elementor-pagination .page-numbers.next { padding: 0 22px; }
.elementor-pagination span.page-numbers.prev, .elementor-pagination span.page-numbers.next { color: #6B6B6B !important; border-color: #E0E0E0; }
@media (max-width: 767px) {
    .elementor-pagination .page-numbers { min-width: 42px; height: 42px; padding: 0 12px; font-size: 15px; }
}
@media (max-width: 767px) {
    /* On phones, Previous and Next become arrows so the pager fits on one line. */
    .elementor-pagination { gap: 6px; }
    .elementor-pagination .page-numbers.prev, .elementor-pagination .page-numbers.next { font-size: 0; padding: 0; min-width: 42px; }
    .elementor-pagination .page-numbers.prev::before { content: "←"; font-size: 17px; }
    .elementor-pagination .page-numbers.next::before { content: "→"; font-size: 17px; }
}

/* Icon cards (Andy, 14 Nov): icon left of the title, 16px gap, centred on the title (1 or 2 lines);
   description full width underneath. Applies to every Icon Box widget set to icon position "top". */
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper {
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px; row-gap: 8px; align-items: center; text-align: start;
}
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-content { display: contents; }
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-icon {
	grid-column: 1; grid-row: 1; margin: 0 !important; display: flex; line-height: 0;
}
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-title { grid-column: 2; grid-row: 1; margin: 0 !important; }
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-description { grid-column: 1 / -1; grid-row: 2; margin: 0; }

/* FAQ accordions (Elementor Accordion with class wms-faq, Andy 14 Nov): even padding round the answer,
   same side padding as the question, no extra space after the last paragraph, questions 20px. */
.elementor-widget-accordion.wms-faq .elementor-tab-content { padding: 20px 24px !important; }
.elementor-widget-accordion.wms-faq .elementor-tab-content > :last-child { margin-bottom: 0 !important; }
.elementor-widget-accordion.wms-faq .elementor-tab-title,
.elementor-widget-accordion.wms-faq .elementor-tab-title .elementor-accordion-title { font-size: 20px !important; line-height: 1.35 !important; }

/* 10-card grid (class wms-grid-10 on the grid container, Andy 14 Nov): 4 / 4 / 2 centred on desktop,
   2 columns on tablet, 1 on phones. Uses an 8-track grid so the last two cards can sit in the middle. */
.e-con.wms-grid-10 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
.e-con.wms-grid-10 > .e-con { grid-column: span 2 !important; }
.e-con.wms-grid-10 > .e-con:nth-child(9) { grid-column: 3 / span 2 !important; }
.e-con.wms-grid-10 > .e-con:nth-child(10) { grid-column: 5 / span 2 !important; }
/* Four across leaves little room, so long titles (WooCommerce) step down a size on desktop. */
@media (min-width: 1280px) { .e-con.wms-grid-10 .elementor-icon-box-title { font-size: 26px !important; } }
@media (max-width: 1279px) {
	.e-con.wms-grid-10 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.e-con.wms-grid-10 > .e-con, .e-con.wms-grid-10 > .e-con:nth-child(n) { grid-column: auto !important; }
}
@media (max-width: 767px) {
	.e-con.wms-grid-10 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Heading keyword highlight (Andy, 14 Nov): wrap 1–3 real keywords in <span class="wms-hl">. Orange on white and navy. */
.wms-hl { color: var(--e-global-color-primary); }

/* Header logo: inline SVG with heartbeat animation (Andy, 14 Nov). Header 59 widget wms-logo-svg.
   Sized by its container (210 / 190 / 150px); width+height attributes keep the ratio, so no layout shift. */
.wms-logo-link { display: block; line-height: 0; }
.wms-logo-link svg { display: block; width: 100%; height: auto; }
.wms-mark .trace{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion: no-preference){.wms-mark.play .trace{animation:wms-trace 5s cubic-bezier(.55,.1,.35,1) infinite}.wms-mark.play .dot{transform-box:fill-box;transform-origin:center;animation:wms-beat 5s ease-out infinite}}
@keyframes wms-trace{0%{stroke-dashoffset:1}22%{stroke-dashoffset:0}88%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes wms-beat{0%,23%{transform:scale(1)}27%{transform:scale(1.45)}31%{transform:scale(.9)}35%{transform:scale(1.25)}40%,100%{transform:scale(1)}}

/* Header menu 768-999px (14 Nov): six items do not fit beside the logo, so use the burger menu here too.
   Elementor tablet breakpoint is 1279px, so the widget setting cannot do this. */
@media (min-width: 768px) and (max-width: 999px) {
	.elementor-location-header .elementor-nav-menu--dropdown-mobile .elementor-nav-menu--main { display: none !important; }
	.elementor-location-header .elementor-nav-menu--dropdown-mobile .elementor-menu-toggle { display: flex !important; }
	.elementor-location-header .elementor-nav-menu--dropdown-mobile .elementor-nav-menu--dropdown { display: block !important; }
}

/* Tablet overflow fix (Andy, 14 Nov): some intro/hero text containers have a fixed px width (760/860/900)
   with no tablet value, so 768-940px screens scroll sideways. Cap nested full-width containers at their parent. */
.e-con .e-con.e-con-full { max-width: 100%; }

/* ===== Pricing cards (grid container class "wms-plan-grid"; 14 Nov 2026) =====
   Rows line up across cards: title, intro, price, yearly/setup text, features, button.
   From 768px each card is a CSS subgrid, so each row is as tall as the tallest card's row.
   --wms-plan-rows must equal the number of widgets per card (not counting the badge):
   6 on Maintenance, 5 on Hosting (class wms-plan-rows-5). Badge widget: class wms-plan-badge. */
.wms-plan-grid { --wms-plan-rows: 6; }
.wms-plan-grid.wms-plan-rows-5 { --wms-plan-rows: 5; }
.wms-plan-grid > .e-con { position: relative; }
@media (min-width: 768px) {
    .e-con.wms-plan-grid { grid-template-rows: none; grid-auto-rows: auto; }
    .wms-plan-grid > .e-con {
        display: grid; grid-template-rows: subgrid; grid-row: span var(--wms-plan-rows);
        row-gap: 16px; align-content: start;
    }
    .wms-plan-grid > .e-con > .elementor-widget-button { align-self: end; }
}
/* "Most popular" sits on the card's top border as a pill, so it doesn't push the card down. */
.wms-plan-grid .wms-plan-badge {
    position: absolute; top: 0; left: 32px; transform: translateY(-50%); width: auto; margin: 0;
    background: var(--e-global-color-primary); border-radius: 999px; padding: 6px 14px;
}
.wms-plan-grid > .e-con > .elementor-element.wms-plan-badge .elementor-heading-title { color: #fff; font-size: 12px; line-height: 1; letter-spacing: .08em; margin: 0; }
@media (max-width: 767px) { .wms-plan-grid .wms-plan-badge { left: 24px; } }
/* Remove the stray paragraph margins that made the price gap look uneven. */
.wms-plan-grid > .e-con > .elementor-widget :is(p, .elementor-heading-title):last-child { margin-bottom: 0; }
/* Optional kicker line inside a card title: <span class="wms-plan-kicker">Maintain & Protect</span> Essentials */
.wms-plan-grid .wms-plan-kicker {
    display: block; margin-bottom: 6px; font-size: 13px; line-height: 1.3; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--e-global-color-text);
}

/* ===== Floating labels (site-wide form standard; 14 Nov 2026) =====
   Works on Elementor Pro forms (.elementor-field-group) and the child theme's .wms-c-field.
   Only active when html.wms-float is set by wms-float.js; without JS the labels stay above the fields. */
.wms-float :is(.elementor-field-group, .wms-c-field):has(> input:not([type=checkbox],[type=radio],[type=file],[type=hidden]), > textarea, > select, > .wms-c-pass) {
    position: relative;
}
/* The label sits inside the field like a placeholder. */
.wms-float .elementor-field-group:has(> :is(input:not([type=checkbox],[type=radio],[type=file],[type=hidden]), textarea, select, .elementor-select-wrapper)) > .elementor-field-label,
.wms-float .wms-c-field:has(> :is(input, textarea, select, .wms-c-pass)) > span:first-child {
    position: absolute; z-index: 1; left: var(--wms-fl-x, 23px); top: 15px; margin: 0; padding: 0;
    font-size: 16px; line-height: 20px; font-weight: 400; color: #6B6B6B; /* 5.3:1 on white */
    pointer-events: none; transform-origin: left top; transition: transform .15s ease, color .15s ease;
    white-space: nowrap; max-width: calc(100% - 42px); overflow: hidden; text-overflow: ellipsis;
}
/* Label x = field group padding (10px) + input padding (22px) + border (1px) on Elementor forms. */
.wms-float .elementor-field-group { --wms-fl-x: 33px; }
/* Room above the text for the floated label. */
.wms-float :is(.elementor-field-group, .wms-c-field) > :is(input:not([type=checkbox],[type=radio],[type=file],[type=hidden]), select),
.wms-float .elementor-select-wrapper > select,
.wms-float .wms-c-field > .wms-c-pass > input {
    min-height: 56px; padding-top: 22px !important; padding-bottom: 6px !important;
}
.wms-float :is(.elementor-field-group, .wms-c-field) > textarea { padding-top: 28px !important; }
/* Hide placeholder hints until the field has focus, so they don't overlap the label. */
.wms-float :is(.elementor-field-group, .wms-c-field) :is(input, textarea)::placeholder { opacity: 0; transition: opacity .15s; }
.wms-float :is(.elementor-field-group, .wms-c-field) :is(input, textarea):focus::placeholder { opacity: 1; }
/* Float up: on focus, when filled, when autofilled, and always for selects. */
.wms-float .elementor-field-group:is(:focus-within, :has(> :is(input, textarea):not(:placeholder-shown)), :has(> input:autofill), :has(> .elementor-select-wrapper)) > .elementor-field-label,
.wms-float .wms-c-field:is(:focus-within, :has(:is(input, textarea):not(:placeholder-shown)), :has(input:autofill), :has(> select)) > span:first-child {
    transform: translateY(-9px) scale(.75); font-weight: 600; color: #2A2A2A; /* 12px, 14:1 */
}
.wms-float :is(.elementor-field-group, .wms-c-field):focus-within > :is(.elementor-field-label, span:first-child) { color: #C24E00; } /* 5.0:1 */
/* Errors: red label and border (Elementor adds .elementor-error; native :user-invalid elsewhere). */
.wms-float .elementor-field-group:has(> .elementor-error) > .elementor-field-label,
.wms-float .wms-c-field:has(:user-invalid) > span:first-child { color: #B42318; }
.wms-float :is(.elementor-field-group, .wms-c-field) :is(input, textarea, select):user-invalid { border-color: #B42318 !important; }


/* Contact page map card (page 236): from 768px up, the map fills whatever height the form card sets,
   so the two cards end level with no empty space under Send. From 768px this is the landscape map
   (media 2131), framed so every label survives a centred crop between 0.9 and 1.45 wide:tall.
   Phones get the portrait map (media 2130) in full. */
@media (min-width: 768px) {
    .wms-map-card .wms-map-fill { flex: 1 1 0; min-height: 160px; position: relative; }
    .wms-map-card .wms-map-fill img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/Manrope-Variable-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/Manrope-Variable-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/Manrope-Variable-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/Manrope-Variable-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/Manrope-Variable-latin.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/SourceSans3-Variable-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/SourceSans3-Variable-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/SourceSans3-Variable-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/SourceSans3-Variable-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('https://www.websitemanagementservices.com.au/wp-content/uploads/wms-fonts/SourceSans3-Italic-Variable-latin.woff2') format('woff2');
}
/* End Custom Fonts CSS */