/*
Theme Name: Proactive Testing & Energization (ACF)
Theme URI: https://proactive-testing.com/
Author: Tornado Design
Author URI: https://tornadodesign.com/
Description: Classic ACF-driven theme for Proactive Testing & Energization (PT&E), a third-party electrical testing and diagnostics firm in Phoenix, AZ. Built from the PT-E Figma design with a consolidated token set — one eyebrow style, one section-heading size, one button height, three corner radii.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: proactive-testing-acf
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, wide-blocks
*/

/* ==========================================================================
   0. Base layer
   In the block build these came from theme.json, which WordPress compiled
   into global styles. A classic theme should not depend on that, so the
   same declarations are written out here. Generated by build/port_css.py
   from theme.json — edit that file, not this block.
   ========================================================================== */

:root {
	--wp--preset--color--base: #ffffff;
	--wp--preset--color--surface: #f4f4f3;
	--wp--preset--color--line: #e0e0e0;
	--wp--preset--color--muted: #383838;
	--wp--preset--color--ink: #0d0d0d;
	--wp--preset--color--steel: #0a0a0a;
	--wp--preset--color--accent: #f75800;
	--wp--preset--color--accent-deep: #d94c00;
	--wp--preset--font-family--display: Phudu, "Arial Black", "Helvetica Neue", sans-serif;
	--wp--preset--font-family--body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wp--preset--font-size--eyebrow: 11px;
	--wp--preset--font-size--x-small: 12px;
	--wp--preset--font-size--small: 14px;
	--wp--preset--font-size--medium: 15px;
	--wp--preset--font-size--nav: 19px;
	--wp--preset--font-size--large: 24px;
	--wp--preset--font-size--x-large: 28px;
	--wp--preset--font-size--xx-large: 44px;
	--wp--preset--spacing--10: 8px;
	--wp--preset--spacing--20: 16px;
	--wp--preset--spacing--30: 24px;
	--wp--preset--spacing--40: 32px;
	--wp--preset--spacing--50: 50px;
	--wp--preset--spacing--60: 80px;
	--wp--preset--spacing--70: 100px;
	--wp--preset--spacing--80: 140px;
	--wp--style--global--content-size: 1300px;
	--wp--style--global--wide-size: 1460px;
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}
@font-face{font-family:Phudu;font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/phudu-variable-latin.woff2') format('woff2-variations');}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/inter-variable-latin.woff2') format('woff2-variations');}
@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url('assets/fonts/inter-variable-latin-italic.woff2') format('woff2-variations');}
body{background:var(--wp--preset--color--base);color:var(--wp--preset--color--ink);font-family:var(--wp--preset--font-family--body);font-size:var(--wp--preset--font-size--medium);font-weight:400;line-height:1.4666;margin:0;}
h1,h2,h3,h4,h5,h6{font-family:var(--wp--preset--font-family--display);font-weight:800;line-height:1.18;color:var(--wp--preset--color--ink);margin:0;}
h1{font-size:var(--wp--preset--font-size--xx-large);line-height:1.18;}
h2{font-size:var(--wp--preset--font-size--xx-large);line-height:1.18;}
h3{font-size:var(--wp--preset--font-size--large);line-height:1.25;}
h4{font-size:18px;line-height:1.3333;}
h5{font-size:var(--wp--preset--font-size--medium);line-height:1.4666;}
h6{font-size:var(--wp--preset--font-size--eyebrow);line-height:1.2727;text-transform:uppercase;letter-spacing:0.14em;font-family:var(--wp--preset--font-family--body);font-weight:700;color:var(--wp--preset--color--accent);}
a{color:var(--wp--preset--color--accent);text-decoration:none;}
.pte-figure img{border-radius:10px;}
p{margin:0;}
ul,ol{margin:0;}

/* --------------------------------------------------------------------------
   What the block editor's stylesheet used to provide.

   A block theme gets these from wp-block-library, which a classic theme does
   not load. They are not opinions — the design is laid out assuming every one
   of them. box-sizing in particular: without it the hero's height and padding
   add up instead of nesting, and the page grows by 182px at the first section.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

.pte-figure {
	margin: 0 0 1em;
}

.pte-figure img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.pte-btns,
.pte-btn-wrap {
	margin: 0;
}

.pte-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pte-statement-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--style--block-gap, 24px);
}


/* ==========================================================================
   1. Extended-latin font ranges (the core latin ranges are declared in theme.json)
   ========================================================================== */

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

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

/* ==========================================================================
   2. Tokens
   Everything the design needed, consolidated. See NORMALIZATION.md for the
   list of near-duplicate Figma values that were collapsed into each token.
   ========================================================================== */

:root {
	--pte-accent: var(--wp--preset--color--accent, #f75800);
	--pte-accent-deep: var(--wp--preset--color--accent-deep, #d94c00);
	--pte-ink: var(--wp--preset--color--ink, #0d0d0d);
	--pte-muted: var(--wp--preset--color--muted, #383838);
	--pte-line: var(--wp--preset--color--line, #e0e0e0);
	--pte-surface: var(--wp--preset--color--surface, #f4f4f3);
	--pte-base: var(--wp--preset--color--base, #fff);
	--pte-steel: var(--wp--preset--color--steel, #0a0a0a);

	--pte-radius-panel: 50px;
	--pte-radius-card: 10px;
	--pte-radius-control: 6px;

	--pte-container: 1460px;   /* wide measure: panels and bands */
	--pte-content: 1300px;     /* the resulting text column at 1660px */
	--pte-gutter: 24px;        /* panel inner padding */
	--pte-page-pad: 24px;      /* viewport edge -> content box */
	--pte-card-pad: 32px;      /* one value on all four sides of a card */
	--pte-card-accent: 4px;    /* the orange rule across the top of a card */
	--pte-header-gap: 20px;
	--pte-letstalk-copy: clamp(560px, 37.4vw, 610px);   /* tracks the contact row */

	--pte-header-h: 93px;
	--pte-header-offset: 93px;   /* desktop header height; JS refreshes it on resize */
	--pte-control-h: 50px;

	--pte-texture: url("assets/images/texture-brushed-steel.jpg");
	--pte-hero-image: url("assets/images/hero-transmission-towers.jpg");

	--pte-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(textarea):focus-visible,
:where(select):focus-visible {
	outline: 3px solid var(--pte-accent);
	outline-offset: 2px;
}

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

.pte-skip-link:focus {
	position: fixed;
	z-index: 100000;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	background: var(--pte-accent);
	color: #fff;
	font-weight: 700;
	border-radius: var(--pte-radius-control);
}

/* ==========================================================================
   4. Shared primitives
   ========================================================================== */



/* Measures are done with padding, not with per-child max-widths.
   Core's constrained layout would otherwise centre each child on its own, which
   pushes anything that sets `margin: 0 ...` (every heading and eyebrow) hard
   against the page padding while siblings that don't stay centred on the 1300px
   column. Neutralising the content-size and letting one padding box govern the
   section keeps every heading, every card and every logo on one left edge. */
.pte-hero,
.pte-section,
.pte-section--wide,
.pte-band--main {
	--wp--style--global--content-size: 100%;
}

/* A section's text starts exactly where a panel's text starts: the band's own
   padding plus the panel gutter. At 1660 that is 100 + 80 = 180px, which is both
   the comp's measurement and a 1300px content column. */
.pte-section {
	padding-inline: calc(max(var(--pte-page-pad), (100% - var(--pte-container)) / 2) + var(--pte-gutter));
}

.pte-section--wide,
.pte-band--main {
	padding-inline: max(var(--pte-page-pad), calc((100% - var(--pte-container)) / 2));
}

.pte-section {
	padding-top: 87px;
	padding-bottom: 50px;
}

.pte-section--flush-top {
	padding-top: 0;
	padding-bottom: 8px;
}

.pte-section--flush-bottom {
	padding-bottom: 0;
}

.pte-band--main {
	display: flow-root;
	padding-top: 0;
	padding-bottom: 67px;
}

/* -- Eyebrow ------------------------------------------------------------- */
/* One style. Figma had 11px/800/1.5px for section labels and 10px/500 for the
   CALL / EMAIL / LOCATION labels; both collapse to this. */
.pte-eyebrow{
	margin: 0 0 19px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2727;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pte-accent);
}

/* -- Section heading ----------------------------------------------------- */
/* One size. Figma had 44/50 and 44/52; both collapse to 44/52. */
.pte-h2{
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: 0;
	color: var(--pte-ink);
	text-wrap: balance;
}

.pte-h2--light,
.pte-h2.pte-h2--light {
	color: #fff;
}

/* -- Body copy ----------------------------------------------------------- */
.pte-body,
.pte-body p {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.4666;
	color: var(--pte-ink);
}

.pte-body:last-child,
.pte-body p:last-child {
	margin-bottom: 0;
}

.pte-body--light,
.pte-body--light p {
	color: #fff;
}

/* Column measures. Each keeps its own width and stays pinned left.
   The block build needed !important here to beat core's
   `margin-left: auto !important` on constrained children; a classic theme has
   no such rule, so a plain margin does it. */
.pte-measure,
.pte-services > .pte-body,
.pte-equipment .pte-h2,
.pte-letstalk .pte-h2,
.pte-letstalk__copy > .pte-body {
	margin-left: 0;
	margin-right: auto;
}

.pte-measure,
.pte-services > .pte-body {
	max-width: 575px;
}

.pte-equipment .pte-h2 {
	max-width: 640px;
}

.pte-letstalk .pte-h2 {
	max-width: 420px;
}

.pte-letstalk__copy > .pte-body {
	max-width: 420px;
}

/* On desktop the card boxes line up with the section headings above them.
   The bleed below 1024 is a negative margin, which loses to that same rule. */
.pte-services__grid {
	max-width: none;
	margin-inline: 0;
}

/* -- Buttons ------------------------------------------------------------- */
/* One height. Figma had 50px and 46px variants; both collapse to 50px. */
.pte-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pte-control-h);
	padding: 0 28px;
	border: 0;
	border-radius: var(--pte-radius-control);
	background: var(--pte-accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s var(--pte-ease), transform .18s var(--pte-ease);
}

/* Managed hosts style submit buttons with
   `.pte-site button[type="submit"]:not(.pte-btn)` and fill them
   from `--wp--preset--color--accent-2` — a palette slug this theme does not
   define, so the declaration is invalid at computed-value time and the button
   goes transparent. The markup carries .pte-btn so that rule no longer
   matches; this out-specifies it as well, in case the exclusion is dropped. */
.pte-site .pte-form .pte-form__actions button[type="submit"],
.pte-site .pte-form .pte-form__actions input[type="submit"] {
	background-color: var(--pte-accent);
	color: #fff;
}

.pte-site .pte-form .pte-form__actions button[type="submit"]:hover,
.pte-site .pte-form .pte-form__actions input[type="submit"]:hover {
	background-color: var(--pte-accent-deep);
	color: #fff;
}

.pte-btn:hover{
	background: var(--pte-accent-deep);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.pte-btn-wrap.pte-btn--light .pte-btn {
	background: #fff;
	color: var(--pte-ink);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.pte-btn-wrap.pte-btn--light .pte-btn:hover {
	background: var(--pte-surface);
	color: var(--pte-ink);
}

/* -- White rounded panel ------------------------------------------------- */
.pte-panel {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	/* One gutter on all four sides — the comp used 72 top / 49 bottom. */
	padding: var(--pte-gutter);
	border-radius: var(--pte-radius-panel);
	background: var(--pte-base);
	overflow: hidden;
}

.pte-panel--overlap {
	--pte-overlap: -271px;
}

/* The first panel rides up over the hero. In the block build this needed
   extra specificity to beat a core rule; here it is just a class. */
.pte-band--main > .pte-panel--overlap {
	margin-top: var(--pte-overlap);
}

/* -- Brushed-steel band -------------------------------------------------- */
.pte-band {
	position: relative;
	background-color: var(--pte-steel);
	background-image: var(--pte-texture);
	background-size: cover;
	background-position: center;
}

.pte-band > * {
	position: relative;
	z-index: 1;
}

/* Black-to-transparent wash across the top of the main band, so the panel that
   overlaps the hero sits on darkness rather than on bare texture. */
.pte-band--main::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 620px;
	background: linear-gradient(180deg, var(--pte-steel) 0%, rgba(10, 10, 10, .88) 22%, rgba(10, 10, 10, 0) 100%);
	pointer-events: none;
	z-index: 0;
}

/* post-content is itself a constrained child of <main>, so without this the
   alignfull sections inside it can never exceed the 1300px content measure. */
.pte-main > .pte-content,
.pte-content.pte-alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

/* Full-bleed helper for groups inside the constrained content flow. */
.pte-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   5. Header
   ========================================================================== */

/* Sticky on desktop only.

   Sticky lives on the template part's wrapper, not on <header>. A sticky
   element only travels within its own containing block, and the wrapper is
   exactly the header's height — sticking the header itself would unstick it
   immediately.

   Below 1024 the bar stacks into three rows, 190-230px tall, which is a quarter
   of a phone screen. It scrolls away there instead. */
.pte-header-wrap {
	z-index: 50;
}

@media (min-width: 1024px) {
	.pte-header-wrap {
		position: sticky;
		top: 0;
	}

	/* The admin bar is fixed at 783px and up, and scrolls away below it. */
	.admin-bar .pte-header-wrap {
		top: 32px;
	}
}

/* Anchor targets clear the sticky bar — where there is one.

   Only ONE of scroll-padding (container) and scroll-margin (target) may be set:
   the browser applies both, so setting both lands the section twice the offset
   down the viewport. The container is the one that also covers keyboard focus
   and find-in-page, so the offset lives here.

   Below 1024 the header is not sticky, so the offset is 0 — anything else would
   just leave a band of dead space above the section. --pte-header-offset is
   still published at every width; this is the only place that reads it.

   That value is the header's real height, which functions.php keeps current
   from a ResizeObserver: the admin bar adds 32px that CSS cannot see, and the
   header type is clamped, so it moves continuously rather than by tier. The
   fallback below covers the no-JS case. */
html {
	scroll-padding-top: 0;
}

@media (min-width: 1024px) {
	html {
		scroll-padding-top: calc(var(--pte-header-offset) + 24px);
	}
}

.pte-header {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--pte-header-gap);
	min-height: var(--pte-header-h);
	/* Contained to the same edge as the outside of the big panels. */
	padding-block: 0;
	padding-inline: max(var(--pte-page-pad), calc((100% - var(--pte-container)) / 2));
	background-color: var(--pte-steel);
	background-image: var(--pte-texture);
	background-size: cover;
	background-position: center;
}

.pte-header__nav {
	flex: 0 0 auto;
}

.pte-header__nav ul {
	display: flex;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pte-header__nav a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.0526;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: color .18s var(--pte-ease);
}

.pte-header__nav a:hover,
.pte-header__nav .current-menu-item > a {
	color: var(--pte-accent);
	text-decoration: none;
}

/* Double the header's own gap on each side of the logo so it reads as its own
   element rather than part of the nav or the contact block. The logo carries an
   explicit width so the flex row can never shrink it away; nav and contact are
   the items that give ground. */
.pte-header__brand {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
	/* Double the header gap where the row has room for it, easing back as the
	   row tightens so the logo keeps a legible width down to 1024. */
	padding-inline: min(calc(var(--pte-header-gap) * 2), calc(3.4vw - 15px));
}

/* The brand takes the leftover space, so the nav sits hard against the left
   edge and the contact block against the right. */
.pte-header__nav,
.pte-header__contact {
	flex: 0 0 auto;
}

/* Size the link, not the image: a percentage max-width on the image resolves
   against an auto-width anchor and collapses it as the row tightens. */
.pte-header__brand a {
	display: block;
	/* 180px floor at 1024, the comp's 478px from 1660 up. */
	width: clamp(180px, calc(39.8vw - 183px), 478px);
	max-width: 100%;
}

.pte-header__brand img,
.pte-header__brand svg {
	display: block;
	width: 100%;
	height: auto;
}

.pte-header__contact {
	display: flex;
	justify-content: flex-end;
	gap: clamp(16px, 1.8vw, 30px);
}

.pte-contact-item {
	display: block;
}

.pte-contact-item__label {
	display: block;
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2727;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pte-accent);
}

/* Figma used 15/600/1.05px in the header and 15/700/0 in the contact panel.
   Consolidated to one value. */
.pte-contact-item__value,
.pte-contact-item a {
	display: block;
	font-size: clamp(13px, 0.9vw, 15px);
	font-weight: 700;
	line-height: 1.4666;
	letter-spacing: 0.04em;
	color: #fff;
	text-decoration: none;
	transition: color .18s var(--pte-ease);
}

.pte-contact-item a:hover {
	color: var(--pte-accent);
	text-decoration: none;
}

/* Mobile nav toggle — hidden on desktop, revealed in the media query below. */
.pte-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--pte-radius-control);
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.pte-nav-toggle svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.pte-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 644px;
	padding: 122px var(--pte-page-pad) 60px;
	background-color: #000;
	background-image: var(--pte-hero-image);
	background-size: cover;
	background-position: center 68%;
	overflow: hidden;
}

/* Radial vignette anchored bottom-left, matching the Figma ellipse. */
.pte-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(115% 150% at 12% 78%, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, 0) 72%),
		linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 38%);
	pointer-events: none;
}

/* Fade the bottom of the photo into the brushed-steel band that follows, so the
   two sections read as one surface rather than two stacked images. */
.pte-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 240px;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, .55) 55%, var(--pte-steel) 100%);
	pointer-events: none;
}

.pte-hero__lockup {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 854px;
	margin: 0 auto;
}

.pte-hero__lockup img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   7. Specialization panel
   ========================================================================== */

.pte-spec {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	column-gap: 36px;
	align-items: start;
}

.pte-spec__rule {
	align-self: stretch;
	width: 1px;
	background: var(--pte-line);
}

.pte-spec__figure {
	margin: 24px 0;
}

.pte-spec__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 580 / 226;
	object-fit: cover;
	border-radius: var(--pte-radius-card);
}

/* Audience list — the orange dot + title + description rows. */
.pte-audience {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.pte-audience li {
	position: relative;
	padding-left: 20px;
	min-height: 48px;
	/* The description's type lives on the item, so it applies to a bare text
	   node as well as to a <span>. <strong> below overrides it for the name. */
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5714;
	color: var(--pte-muted);
}

.pte-audience li > p {
	margin: 0;
}

.pte-audience li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background: var(--pte-accent);
}

.pte-audience strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--pte-ink);
}

.pte-audience span {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5714;
	color: var(--pte-muted);
}

/* ==========================================================================
   8. Statement band + hero CTAs
   ========================================================================== */

.pte-statement {
	max-width: 662px;
	margin: 0 auto;
	font-size: clamp(20px, 1.8vw, 28px);
	font-weight: 500;
	line-height: 1.1428;
	letter-spacing: -0.02em;
	text-align: center;
	color: #fff;
	text-wrap: balance;
}

.pte-statement strong {
	font-weight: 700;
}

.pte-statement-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	justify-content: center;
	align-items: center;
	margin-top: 47px;
}

.pte-statement-actions .pte-btn {
	min-width: 160px;
}

/* ==========================================================================
   9. Service area panel
   ========================================================================== */

.pte-servicearea {
	display: grid;
	/* Even split on a small desktop; the photo only takes the larger share once
	   the panel is wide enough to give it its designed 735px. */
	grid-template-columns: minmax(0, 1fr) minmax(0, min(735px, 52%));
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.pte-servicearea__body {
	padding: var(--pte-gutter);
}

.pte-servicearea__media {
	position: relative;
	min-height: 434px;
}

.pte-servicearea__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* ==========================================================================
   10. Services
   ========================================================================== */

.pte-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px;
	margin-top: 42px;
}

.pte-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* The accent sits inside the card's top edge, so add its thickness to the
	   top padding — that leaves an equal band of grey on all four sides. */
	padding: calc(var(--pte-card-pad) + var(--pte-card-accent)) var(--pte-card-pad) var(--pte-card-pad);
	border-radius: var(--pte-radius-card);
	background: var(--pte-surface);
	overflow: hidden;
}

.pte-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--pte-card-accent);
	background: var(--pte-accent);
}

.pte-card__media {
	margin: 0 0 var(--pte-card-pad);
}

.pte-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 339 / 160;
	object-fit: cover;
	border-radius: var(--pte-radius-card);
}

.pte-card__title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--pte-ink);
}

/* The card ends at its copy — no CTA. The bottom gutter is the card's own
   padding, so the body adds nothing on top of it. */
.pte-card__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.3333;
	color: var(--pte-ink);
}

.pte-card__body p + p {
	margin-top: 20px;
}

/* ==========================================================================
   11. Let's Talk
   ========================================================================== */

.pte-letstalk {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--pte-container);
	margin-inline: auto;
	padding: var(--pte-gutter);
	border-radius: var(--pte-radius-panel);
	background-color: #04040a;
	background-image: var(--pte-texture);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* The copy column is capped at the width its contact row actually needs, so the
   seal — right-aligned in the intro above — lands over the social mark rather
   than the mark being pushed out to meet it. Neither column grows, so the slack
   collects in the gap between them: wide on a large screen, gone on a small one. */
.pte-letstalk__main {
	flex: 0 1 var(--pte-letstalk-copy);
	max-width: var(--pte-letstalk-copy);
	min-width: min(100%, 542px);
}

/* Heading and copy share a row with the seal; the contact details get the whole
   column underneath so they never wrap. */
.pte-letstalk__intro {
	display: flex;
	align-items: center;
	gap: 32px;
}

.pte-letstalk__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.pte-letstalk__seal {
	flex: 0 0 auto;
	width: clamp(120px, 12vw, 200px);
}

/* A small basis so the form never forces a line break; it grows into its designed
   552px and anything past that is left for the gap to absorb. */
.pte-letstalk__form {
	flex: 1 1 320px;
	max-width: 552px;
	min-width: min(100%, 320px);
}

/* Whatever stray empty nodes the editor leaves behind must not become columns. */
.pte-letstalk > *:empty {
	display: none;
}

/* Its own full-width row under the intro, so it stays on one line. */
.pte-letstalk__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
	margin-top: 40px;
}

.pte-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pte-accent);
	transition: background-color .18s var(--pte-ease);
}

.pte-social:hover {
	background: var(--pte-accent-deep);
}

.pte-social img,
.pte-social svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* The circular seal sits between the two columns. */
.pte-letstalk__seal img {
	display: block;
	width: 100%;
	height: auto;
}

/* -- Form card ----------------------------------------------------------- */
.pte-form {
	position: relative;
	z-index: 2;
	padding: 28px 32px 32px;
	border-radius: var(--pte-radius-card);
	background: #fff;
}

.pte-form__title {
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3333;
	color: var(--pte-ink);
}

.pte-field + .pte-field {
	margin-top: 20px;
}

.pte-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: 0.025em;
	color: var(--pte-muted);
}

body .pte-site .pte-field input,
body .pte-site .pte-field textarea,
body .pte-site .pte-field select,
.pte-field input,
.pte-field textarea,
.pte-field select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 11px 16px;
	/* Managed hosts ship a form reset along the lines of
	   `body .pte-site input:not([type="submit"]):not([type="button"])…`,
	   seven :not() clauses deep, which no practical selector outranks. The fill
	   and the border answer it in kind; nothing else in this block does. */
	border: 1px solid transparent !important;
	border-radius: var(--pte-radius-control);
	background-color: var(--pte-surface) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.4285;
	color: var(--pte-ink);
	transition: border-color .18s var(--pte-ease), background-color .18s var(--pte-ease);
}

.pte-field input::placeholder,
.pte-field textarea::placeholder {
	color: #8b8b8b;
}

.pte-field input:focus,
.pte-field textarea:focus,
.pte-field select:focus {
	border-color: var(--pte-accent) !important;
	background-color: #fff !important;
}

.pte-form__actions {
	margin-top: 24px;
}

.pte-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pte-form__notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--pte-radius-control);
	font-size: 14px;
	line-height: 1.4285;
}

.pte-form__notice--ok {
	background: rgba(24, 128, 56, .1);
	color: #146c30;
}

.pte-form__notice--error {
	background: rgba(247, 88, 0, .1);
	color: var(--pte-accent-deep);
}

/* ==========================================================================
   12. Equipment logo wall
   ========================================================================== */

.pte-equipment {
	padding-bottom: 110px;
}

.pte-equipment__grid {
	margin-block: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 84px 40px;
	align-items: center;
	margin-top: 65px;
}

.pte-equipment__grid li {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	list-style: none;
}

.pte-equipment__grid img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 34px;
	filter: saturate(1);
	transition: opacity .18s var(--pte-ease);
}

/* ==========================================================================
   13. Closing lockup + footer
   ========================================================================== */

.pte-closing {
	padding: 88px var(--pte-page-pad) 0;
	text-align: center;
}

.pte-closing__lockup {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
}

.pte-closing__lockup img {
	display: block;
	width: 100%;
	height: auto;
}

.pte-footer-rule {
	height: 6px;
	margin: 84px 0 0;
	background: #fff;
}

.pte-footer-brand {
	padding: 61px var(--pte-page-pad);
	line-height: 0;
	text-align: center;
}

.pte-footer-brand img {
	display: inline-block;
	width: 462px;
	max-width: 100%;
	height: auto;
}

.pte-colophon {
	margin-top: 0;
	padding: 21px var(--pte-page-pad);
	background: #fff;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pte-ink);
}

.pte-colophon a {
	color: var(--pte-ink);
	text-decoration: underline;
}

/* ==========================================================================
   14. Interior pages
   ========================================================================== */

.pte-page-header {
	padding-block: 96px 60px;
	padding-inline: calc(max(var(--pte-page-pad), (100% - var(--pte-container)) / 2) + var(--pte-gutter));
	background-color: var(--pte-steel);
	background-image: var(--pte-texture);
	background-size: cover;
	background-position: center;
	text-align: left;
}

.pte-page-header .pte-page-title,
.pte-page-header h1 {
	max-width: none;
	margin: 0;
	color: #fff;
}

.pte-entry,
.pte-entry > .pte-content{
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

.pte-entry {
	padding-block: 80px 100px;
}

.pte-entry :where(h2, h3, h4) {
	margin-top: 48px;
}

.pte-entry :where(p, ul, ol) {
	margin-bottom: 20px;
}

.pte-entry ul,
.pte-entry ol {
	padding-left: 22px;
}

.pte-404 {
	padding: 140px var(--pte-page-pad);
	text-align: center;
}

/* ==========================================================================
   15. Responsive

   Two layout breakpoints, both standard: 1024px and 768px. Everything else —
   gutters, section padding, heading sizes — scales continuously, so nothing
   reflows at an in-between width.
   ========================================================================== */

@media (min-width: 768px) {
	:root {
		--pte-page-pad: 40px;
		--pte-gutter: 40px;
		--pte-header-gap: 24px;
	}
}

@media (min-width: 1024px) {
	:root {
		--pte-page-pad: clamp(64px, 6.5vw, 100px);
		--pte-gutter: clamp(64px, 5vw, 80px);
		--pte-header-gap: clamp(16px, 1.8vw, 30px);
	}
}

/* The two columns stop fitting on one line at about 1205px — copy 560 + form
   320 + gap 40 against a panel measure of 0.87vw - 128. Below that the form
   takes its own row, so let it fill that row. The number follows the wrap; it
   does not cause one. */
@media (max-width: 1210px) {
	.pte-letstalk__form {
		flex-basis: 100%;
		max-width: none;
	}
}

/* -- Below 1024: tablet -------------------------------------------------- */

@media (max-width: 1023px) {
	:root {
		--pte-radius-panel: 32px;
		--pte-header-h: auto;
	}

	/* Header stacks: brand row, then nav, then contact. */
	.pte-header {
		flex-wrap: wrap;
		padding-block: 18px;
		row-gap: 16px;
	}

	/* Three stacked rows: logo, menu, contact. */
	.pte-header__brand {
		order: -1;
		flex: 1 0 100%;
		justify-content: flex-start;
		padding-inline: 0;
		padding-block: calc(var(--pte-header-gap) / 2);
	}

	/* Logo and menu share one 340px measure, both flush to the left edge, and
	   the menu spreads across it so the links stay on one line on a phone. */
	.pte-header__brand a,
	.pte-header__nav {
		width: 340px;
		max-width: 100%;
	}

	.pte-header__nav {
		order: 2;
		flex: 0 1 auto;
	}

	.pte-header__nav .pte-nav__container {
		width: 100%;
		justify-content: space-between;
		gap: 12px;
	}

	.pte-header__nav .pte-nav__link {
		font-size: 15px;
	}

	.pte-header__contact {
		order: 3;
		flex: 1 0 100%;
		justify-content: flex-start;
		gap: calc(var(--pte-header-gap) * 1.5);
	}

	:root {
		--pte-hero-min: 420px;
		--pte-hero-pad-top: 72px;
	}

	.pte-hero {
		min-height: var(--pte-hero-min);
		padding-block: var(--pte-hero-pad-top) 48px;
	}

	/* Keep the band of hero visible below the lockup equal to the one above it.

	   The lockup is width-driven — it fills the page measure and its height
	   follows from the artwork's 854x147 — so the leftover space underneath
	   changes with the viewport and a fixed pull-up cannot track it. Solving for
	   "space below == padding above" gives the expression below; the clamp keeps
	   it sane if the hero's minimum or the page padding is ever retuned. */
	.pte-panel--overlap {
		--pte-lockup-h: calc(min(854px, 100vw - 2 * var(--pte-page-pad)) * 0.1721);
		--pte-overlap: clamp(
			-320px,
			calc(-1 * (var(--pte-hero-min) - 2 * var(--pte-hero-pad-top) - var(--pte-lockup-h))),
			-56px
		);
	}

	.pte-section {
		padding-top: 56px;
		padding-bottom: 40px;
	}

	.pte-section--flush-top {
		padding-top: 0;
	}

	.pte-band--main {
		padding-bottom: 48px;
	}

	.pte-equipment {
		padding-bottom: 72px;
	}

	/* Specialization: one column, rule removed. */
	.pte-spec {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}

	.pte-spec__rule {
		display: none;
	}

	/* Service area: photo above the copy. */
	.pte-servicearea {
		grid-template-columns: 1fr;
	}

	.pte-servicearea__media {
		order: -1;
		min-height: 320px;
	}

	/* Services: still three across, tighter. */
	:root {
		--pte-card-pad: 24px;
	}

	/* Below desktop the cards bleed out by one card padding, so their copy —
	   not their boxes — sits on the same left edge as everything else. */
	.pte-services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		margin-inline: calc(var(--pte-card-pad) * -1);
		margin-top: 48px;
	}

	.pte-card__title {
		font-size: 20px;
	}

	/* Let's Talk: copy and seal share a row, the form full width beneath. */
	.pte-letstalk__main,
	.pte-letstalk__form {
		flex: 1 1 100%;
		min-width: 0;
		max-width: none;
	}

	.pte-equipment__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 56px 32px;
		margin-top: 48px;
	}

	.pte-closing {
		padding-top: 56px;
	}

	.pte-footer-rule {
		margin-top: 48px;
	}

	.pte-footer-brand {
		padding-block: 40px;
	}

	.pte-statement-actions {
		margin-top: 32px;
	}
}

/* -- Below 768: phone ---------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--pte-radius-panel: 24px;
		--pte-card-pad: 24px;
	}

	/* A row, spread across the same measure as the logo and the menu. Stacking
	   these made the bar a third taller for no gain — there is room for both. */
	.pte-header__contact {
		flex-direction: row;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		max-width: 340px;
	}

	/* Below about 380px the email address is wider than its half of the row and
	   wraps, which puts the bar's height back where stacking had it. Half a step
	   down in type keeps both on one line; the label carries the meaning anyway. */
	.pte-header__contact .pte-contact-item__value,
	.pte-header__contact .pte-contact-item a {
		font-size: clamp(11.5px, 3.4vw, 13px);
		letter-spacing: 0.02em;
	}

	.pte-header__contact .pte-contact-item__label {
		margin-bottom: 2px;
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	:root {
		--pte-hero-min: 320px;
		--pte-hero-pad-top: 48px;
	}

	.pte-hero {
		min-height: var(--pte-hero-min);
		padding-block: var(--pte-hero-pad-top) 40px;
	}



	.pte-section {
		padding-top: 44px;
		padding-bottom: 32px;
	}

	/* One column at the panels' width, with the panels' padding, so card copy
	   lines up with every other line of text on the page. */
	.pte-services__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 32px;
	}

	/* Still a centred row; they only stack if they genuinely cannot fit. */
	.pte-statement-actions {
		gap: 16px;
	}

	/* Decorative only — it costs a full row on a phone. */
	.pte-letstalk__seal {
		display: none;
	}

	.pte-letstalk__copy > .pte-body {
		max-width: none;
	}

	.pte-equipment__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}

	.pte-form {
		padding: 24px 20px 28px;
	}

	.pte-spec__figure {
		margin: 20px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ==========================================================================
   16. Section rhythm helpers + specificity fixes
   ========================================================================== */

.pte-header > *,
.pte-spec > *,
.pte-services__grid > *,
.pte-letstalk > *,
.pte-servicearea > * {
	margin-block: 0;
}

/* Photography. Every file already ships at its slot's aspect ratio, so these
   rules only guarantee that nothing else resizes one axis without the other. */
.pte-spec__figure.pte-figure img,
.pte-card__media.pte-figure img,
.pte-servicearea__media .pte-figure img,
.pte-hero__lockup.pte-figure img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.pte-spec__figure.pte-figure img {
	height: auto;
	aspect-ratio: 580 / 226;
}

.pte-card__media.pte-figure img {
	height: auto;
	aspect-ratio: 339 / 160;
}

.pte-servicearea__media .pte-figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.pte-servicearea__media .pte-figure img {
	position: absolute;
	inset: 0;
	height: 100%;
}

.pte-hero__lockup.pte-figure img {
	height: auto;
	object-fit: contain;
}

.pte-equipment__grid img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 34px;
}

.pte-letstalk__seal img,
.pte-closing__lockup img,
.pte-footer-brand img,
.pte-header__brand img {
	height: auto;
}

/* Beat theme.json's global image radius where the design needs a hard edge. */
.pte-servicearea__media .pte-figure img {
	border-radius: 0;
}

.pte-hero__lockup.pte-figure img,
.pte-closing__lockup .pte-figure img,
.pte-footer-brand .pte-figure img,
.pte-header__brand .pte-figure img,
.pte-equipment__grid img {
	border-radius: 0;
}

.pte-hero__lockup.pte-figure,
.pte-closing__lockup .pte-figure,
.pte-footer-brand .pte-figure,
.pte-header__brand .pte-figure {
	margin: 0;
}

/* Core navigation block, styled as the PT&E top nav. */
.pte-header__nav.pte-nav {
	font-family: var(--wp--preset--font-family--body);
}

.pte-header__nav .pte-nav__container {
	gap: clamp(14px, 2vw, 33px);
}

/* Core's link colour and theme.json's :root :where(a) rule both target these,
   so state the header colours explicitly and win on specificity. */
.pte-header a,
.pte-header .pte-nav a,
.pte-header .pte-nav .pte-nav__link,
.pte-header .pte-nav__link,
.pte-header__nav a {
	color: #fff;
}

.pte-header a:hover,
.pte-header .pte-nav a:hover,
.pte-header .pte-nav__link:hover,
.pte-header__nav a:hover {
	color: var(--pte-accent);
	text-decoration: none;
}

.pte-header .pte-contact-item__label {
	color: var(--pte-accent);
}

.pte-header__nav .pte-nav__link {
	font-size: clamp(15px, 1.15vw, 19px);
	font-weight: 800;
	line-height: 1.0526;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

.pte-header__nav .pte-nav__link:hover {
	color: var(--pte-accent);
	text-decoration: none;
}


/* The contact block in the header uses the shared contact-item primitives. */
.pte-header__contact .pte-contact-item__value {
	white-space: nowrap;
}



/* ==========================================================================
   Gravity Forms

   The design's form is three text fields and a button. Gravity Forms wraps each
   of those in its own markup, so the theme's field styling is restated against
   GF's classes rather than trying to make GF emit .pte-field.

   inc/gravity-forms.php suppresses GF's own stylesheets, so in the normal case
   these rules are unopposed. They are written to hold up even if that is
   switched back on, which is why the selectors are long and why the button
   carries !important: GF 2.9's compiled theme puts four classes on the wrapper,
   and a rule at (0,5,0) still loses to it. Measured on staging — with GF's CSS
   loading, even outline-offset on that selector did not land. Nothing else in
   this block needs it; the fields and labels win on their own.
   ========================================================================== */

.pte-form .gform_wrapper {
	margin: 0;
}

.pte-form--gf.pte-form .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pte-form--gf.pte-form .gform_wrapper .gfield {
	display: block;
	margin: 0;
	padding: 0;
}

.pte-form--gf.pte-form .gform_wrapper .gfield .gfield_label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pte-muted);
}

/* No "(Required)" next to the label — the design does not have one, and the
   field is already marked required in the markup, so screen readers still
   announce it from the input's own required/aria-required attributes. The
   legend GF prints above the form goes for the same reason. */
.pte-form--gf.pte-form .gform_wrapper .gfield .gfield_required,
.pte-form--gf.pte-form .gform_wrapper .gform_required_legend {
	display: none;
}

.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container input,
.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container textarea,
.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: var(--pte-radius-control);
	background-color: var(--pte-surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.35;
	color: var(--pte-ink);
	transition: border-color .15s var(--pte-ease), background-color .15s var(--pte-ease);
}

.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container textarea {
	min-height: 120px;
	resize: vertical;
}

.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container input::placeholder,
.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container textarea::placeholder {
	color: #8a8a8a;
}

.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container input:focus,
.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container textarea:focus,
.pte-form--gf.pte-form .gform_wrapper .gfield .ginput_container select:focus {
	border-color: var(--pte-accent);
	background-color: #fff;
	outline: 3px solid var(--pte-accent);
	outline-offset: 2px;
}

/* -- Submit --------------------------------------------------------------- */

.pte-form--gf.pte-form .gform_wrapper .gform_footer {
	display: flex;
	margin: 24px 0 0;
	padding: 0;
}

.pte-form--gf.pte-form .gform_wrapper .gform_footer .gform_button,
.pte-form--gf.pte-form .gform_wrapper .gform_footer input[type="submit"],
.pte-form--gf.pte-form .gform_wrapper .gform_footer button[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	min-height: var(--pte-control-h) !important;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: var(--pte-radius-control) !important;
	background: var(--pte-accent) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s var(--pte-ease);
}

.pte-form--gf.pte-form .gform_wrapper .gform_footer .gform_button:hover,
.pte-form--gf.pte-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.pte-form--gf.pte-form .gform_wrapper .gform_footer button[type="submit"]:hover {
	background: var(--pte-accent-deep) !important;
}

/* -- Validation, description and confirmation ----------------------------- */

.pte-form--gf.pte-form .gform_wrapper .gfield .gfield_description {
	margin: 8px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pte-muted);
}

.pte-form--gf.pte-form .gform_wrapper .gfield .validation_message,
.pte-form--gf.pte-form .gform_wrapper .gform_validation_errors {
	margin: 8px 0 0;
	padding: 10px 14px;
	border: 0;
	border-left: 3px solid var(--pte-accent);
	border-radius: var(--pte-radius-control);
	background: rgba(247, 88, 0, .08);
	box-shadow: none;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pte-ink);
}

.pte-form--gf.pte-form .gform_wrapper .gform_validation_errors h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	color: var(--pte-ink);
}

.pte-form--gf.pte-form .gform_wrapper .gfield_error .ginput_container input,
.pte-form--gf.pte-form .gform_wrapper .gfield_error .ginput_container textarea,
.pte-form--gf.pte-form .gform_wrapper .gfield_error .ginput_container select {
	border-color: var(--pte-accent);
}

.pte-form .gform_confirmation_message {
	padding: 18px 20px;
	border-radius: var(--pte-radius-control);
	background: var(--pte-surface);
	font-size: 15px;
	line-height: 1.45;
	color: var(--pte-ink);
}

/* GF renders its honeypot as an ordinary field. Keep it out of the grid — and
   out of the 18px gap, which would otherwise leave a mystery hole. */
.pte-form .gform_validation_container,
.pte-form .gfield--type-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -- Editor-only note when no form is configured -------------------------- */

.pte-form__placeholder {
	padding: 18px 20px;
	border: 1px dashed var(--pte-line);
	border-radius: var(--pte-radius-control);
	background: var(--pte-surface);
}

.pte-form__placeholder p {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--pte-muted);
}

/* ==========================================================================
   Section rhythm
   The block build carried these two as inline styles on the blocks themselves,
   which is how the block editor writes a one-off margin. A classic theme has
   no reason to inline them.
   ========================================================================== */

.pte-statement {
	margin-top: 94px;
}

.pte-servicearea {
	margin-top: 88px;
}

/* The seal sits 12px below the centre of the copy column it shares a row with.
   In the block build that came from core's flow gap landing on the seal as a
   non-first child — .pte-letstalk__intro was the one container the theme did
   not neutralise. It is reproduced here so the two builds render identically.
   Delete this rule to centre the seal properly; nothing else depends on it. */
.pte-letstalk__seal {
	margin-top: 24px;
}