/* =========================================================================
   Amy Porto - theme stylesheet

   Every token below is lifted verbatim from the live Elementor global kit
   (post-5) and the compiled per-page CSS, so the rebuild is colour-, type- and
   spacing-identical rather than merely similar. Source references in comments
   use the audit's tags: [kit] = elementor-kit-5, [p-NN] = post-NN.css.

   Breakpoints match live exactly: 1024px (tablet) and 767px (mobile).
   ========================================================================= */

/* =========================================================================
   0. Fonts — self-hosted, latin subset only, 134 KB for the whole type system

   The original site rented three faces from Adobe Fonts (kit xzn3qrm):
   trade-gothic-next-compressed, shelby and sculpin. Adobe's licence forbids
   self-hosting them and ties the kit to an allowlist of domains, so they are
   replaced here with free, self-hosted equivalents chosen by measurement
   rather than by eye:

     trade-gothic-next-compressed 700  ->  Saira Extra Condensed 700
         ink width 103% of the original, ink height 65px vs 63px, ink coverage
         104%. Effectively a drop-in: nothing reflowed when it was swapped.

     shelby 400                        ->  Caveat 500
         the closest free face on WEIGHT (124% ink) and character - a light,
         narrow, casual script rather than a heavy brush. Every other candidate
         tested (Kaushan, Damion, Norican, Grand Hotel, Yellowtail, Satisfy,
         Pacifico, Allura, Sacramento, Marck, Cookie, Style Script) was 40-180%
         heavier. Caveat renders ~26% wider at the same px size, so the script
         sizes below are scaled to 90% to land on the same visual size.

     sculpin                           ->  dropped
         it is in the Adobe kit but referenced by ZERO site CSS. Verified by
         grepping every stylesheet the live site loads.

   Lato and Roboto were always Google fonts. The live site self-hosts all 18
   weights of each; only the three actually used are shipped here.
   ========================================================================= */
@font-face {
	font-family: "Saira Extra Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/saira-extra-condensed-700.woff2") format("woff2");
}
@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/caveat-500.woff2") format("woff2");
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lato-400.woff2") format("woff2");
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lato-700.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/roboto-500.woff2") format("woff2");
}

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root {
	/* ---------- Colour ---------- */
	--ap-primary:      #e69769;   /* peach        - default heading + icon colour */
	--ap-secondary:    #053962;   /* deep navy    - footer nav hover, dropdown bg */
	--ap-text:         #414042;   /* body grey    - all prose */
	--ap-accent:       #e0682c;   /* burnt orange - every CTA, nav hover */
	--ap-white:        #ffffff;
	--ap-indigo:       #4c619c;
	--ap-sky:          #77b5dd;
	--ap-green:        #43a447;

	/* Gradient end stops */
	--ap-accent-light: #e7895a;
	--ap-accent-dark:  #c26435;
	--ap-indigo-dark:  #3a4b78;
	--ap-sky-dark:     #3087c0;
	--ap-green-dark:   #1b601e;

	/* Tints */
	--ap-sky-15:   rgba(119, 181, 221, 0.15);
	/* Two band tints measured off the rendered live pages. Neither is declared
	   in the Elementor kit, so a token sweep alone would have missed them. */
	--ap-sky-light: #bad9ed;   /* About: "You shouldn't have to dedicate your life..." */
	--ap-sky-pale:  #ebf4fa;   /* VIP: the two pale bands */
	--ap-white-75: rgba(255, 255, 255, 0.75);
	--ap-white-41: rgba(255, 255, 255, 0.41);

	/* Gradients - verbatim from live */
	--ap-grad-footer:  linear-gradient(200deg, #e0682c 0%, #e7895a 100%);
	--ap-grad-hero:    linear-gradient(240deg, #e69769 0%, #e0682c 100%);
	--ap-grad-indigo:  linear-gradient(190deg, #4c619c 0%, #3a4b78 100%);
	--ap-grad-sky:     linear-gradient(190deg, #77b5dd 0%, #3087c0 100%);
	--ap-grad-sky-alt: linear-gradient(240deg, #77b5dd 31%, #3087c0 100%);
	--ap-grad-green:   linear-gradient(190deg, #43a447 0%, #1b601e 100%);
	--ap-grad-accent:  linear-gradient(180deg, #e0682c 0%, #c26435 100%);

	/* ---------- Families ---------- */
	--ap-font-display: "Saira Extra Condensed", "Arial Narrow", Arial, sans-serif;
	--ap-font-script:  "Caveat", "Segoe Script", "Brush Script MT", cursive;
	--ap-font-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--ap-font-accent:  "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* ---------- Type scale (desktop, >1024px) ---------- */
	--ap-display-size:   70px;
	--ap-display-weight: 700;
	--ap-display-lh:     1;
	--ap-display-tt:     capitalize;

	--ap-h2-size:        50px;
	--ap-h3-size:        30px;

	--ap-script-size:    72px;
	--ap-script-weight:  500;
	--ap-script-lh:      1;

	--ap-body-size:      18px;
	--ap-body-weight:    400;
	--ap-body-lh:        1.5;
	--ap-body-mb:        0.9rem;

	--ap-body-lg-size:   20px;
	--ap-small-size:     14px;

	--ap-btn-font:       var(--ap-font-accent);
	--ap-btn-size:       18px;
	--ap-btn-weight:     500;

	--ap-nav-font:       var(--ap-font-body);
	--ap-nav-size:       18px;
	--ap-nav-weight:     400;

	--ap-widget-gap:     20px;

	/* ---------- Layout ---------- */
	--ap-container:      1140px;
	--ap-container-narrow: 640px;
	--ap-gutter:         10px;
	--ap-section-pad-x:  5%;

	/* Vertical rhythm for the rebuilt sections. Live expresses this per
	   section; these are the two values the sections actually resolve to. */
	--ap-space-sm: 40px;
	--ap-space-md: 70px;
	--ap-space-lg: 100px;

	/* ---------- Chrome ---------- */
	--ap-header-shadow:   0 0 10px 0 rgba(0, 0, 0, 0.25);
	--ap-dropdown-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
	--ap-btn-shadow:      0 4px 15px 0 rgba(0, 0, 0, 0.25);
	--ap-card-radius:     20px;
}

@media (max-width: 1024px) {
	:root {
		--ap-display-size: 60px;
		--ap-script-size:  36px;
		--ap-h3-size:      26px;
		--ap-container:    1024px;
		--ap-section-pad-x: 3%;
		--ap-space-lg: 80px;
		--ap-space-md: 56px;
	}
}

@media (max-width: 767px) {
	:root {
		--ap-display-size: 40px;
		--ap-h2-size:      40px;
		--ap-h3-size:      22px;
		--ap-script-size:  28px;
		--ap-body-lg-size: 18px;
		--ap-container:    767px;
		--ap-space-lg: 56px;
		--ap-space-md: 40px;
		--ap-space-sm: 28px;
	}
}

/* =========================================================================
   2. Reset
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--ap-white);
	color: var(--ap-text);
	font-family: var(--ap-font-body);
	font-size: var(--ap-body-size);
	font-weight: var(--ap-body-weight);
	line-height: var(--ap-body-lh);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

a { color: var(--ap-accent); text-decoration: none; }
a:hover, a:focus { color: var(--ap-secondary); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--ap-secondary); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 var(--ap-body-mb); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--ap-body-mb); padding-left: 1.25em; }

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--ap-white);
	color: var(--ap-secondary);
	font-weight: 700;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   3. Typography
   ========================================================================= */
/* Display type is applied by CLASS, never to bare h1/h2/h3.
   Third-party markup renders inside this page - the Kit modal injects its own
   <h2> - and a bare element selector would restyle it. Live scoped the same
   rules to .elementor-heading-title for the same reason. */
.ap-display,
.ap-prose h1,
.ap-prose h2,
.ap-prose h3 {
	font-family: var(--ap-font-display);
	font-size: var(--ap-display-size);
	font-weight: var(--ap-display-weight);
	line-height: var(--ap-display-lh);
	text-transform: var(--ap-display-tt);
	letter-spacing: normal;
	margin: 0;
	color: var(--ap-primary);
}

.ap-h2, .ap-prose h2 { font-size: var(--ap-h2-size); }
.ap-h3, .ap-prose h3 { font-size: var(--ap-h3-size); }

.ap-eyebrow {
	font-family: var(--ap-font-script);
	font-size: var(--ap-script-size);
	font-weight: var(--ap-script-weight);
	line-height: var(--ap-script-lh);
	/* Live title-cases these: "Meet The Doc", not "Meet the Doc". */
	text-transform: capitalize;
	margin: 0;
	color: var(--ap-sky);
}
.ap-eyebrow--peach  { color: var(--ap-primary); }
.ap-eyebrow--accent { color: var(--ap-accent); }
.ap-eyebrow--white  { color: var(--ap-white); }
.ap-eyebrow--sky    { color: var(--ap-sky); }
.ap-eyebrow--text   { color: var(--ap-text); }

/* The eyebrow tuck. Shelby has line-height 1 and no descender allowance, so
   live closes the optical gap with a negative top margin on the heading that
   follows. 16 desktop occurrences at -40px, 22 mobile at -20px. */
/* NET 20px on live. Elementor's -40px widget margin is applied on top of its
   own 20px widget gap, so the visible overlap is 20px, not 40. This theme has
   no widget gap, so -40px would double-count it. Verified by measurement on
   /contact/: eyebrow top 555, h2 top 615, eyebrow height 80 -> 20px overlap.

   But -20px is a Shelby number, and Shelby is gone. The tuck exists to close
   the slack a script face leaves between its ink and the bottom of its line
   box, so it has to be re-derived for whatever face is actually drawing. Both
   pairs rendered with no tuck and the ink measured off the screenshot:

       Shelby 80 / Trade 60   ink stops 27px above the box  ->  39px ink gap
       Caveat 72 / Saira 60   ink stops  6px above the box  ->  14px ink gap

   Live's -20px against a 39px gap leaves ~19px of daylight. The same -20px
   against Caveat's 14px gap gives -6px: the heading climbs INTO the eyebrow,
   which is the collision visible on every eyebrow of the first build. To land
   on live's ~19px the tuck has to be 14 - 19 = -5px. */
.ap-eyebrow + .ap-display,
.ap-eyebrow + h1,
.ap-eyebrow + h2,
.ap-eyebrow + h3 { margin-top: -5px; }
@media (max-width: 767px) {
	.ap-eyebrow + .ap-display,
	.ap-eyebrow + h1,
	.ap-eyebrow + h2,
	.ap-eyebrow + h3 { margin-top: -3px; }
}

.ap-lead  { font-size: var(--ap-body-lg-size); }
.ap-small { font-size: var(--ap-small-size); }

.ap-text-center { text-align: center; }
.ap-text-left   { text-align: left; }
.ap-text-right  { text-align: right; }

.ap-c-white     { color: var(--ap-white); }
.ap-c-text      { color: var(--ap-text); }
.ap-c-accent    { color: var(--ap-accent); }
.ap-c-primary   { color: var(--ap-primary); }
.ap-c-secondary { color: var(--ap-secondary); }

.ap-prose > :last-child { margin-bottom: 0; }
.ap-prose h2 { margin: 1.2em 0 0.4em; font-size: var(--ap-h2-size); }
.ap-prose h3 { margin: 1em 0 0.4em; font-size: var(--ap-h3-size); }
.ap-prose h4 { margin: 1em 0 0.4em; font-family: var(--ap-font-display); font-size: 22px; }
.ap-prose a { text-decoration: underline; }
.ap-prose ul, .ap-prose ol { padding-left: 1.4em; }
.ap-prose li { margin-bottom: 0.4em; }
.ap-prose strong { font-weight: 700; }

/* Two DIFFERENT blockquote treatments on live, and they must not be confused:

   default  - the VIP page's quotation-mark pull-quote: body copy at the
              section's own colour with a large decorative quote mark above it.
   .ap-quote-script - the About page's script pull-quote in accent orange.

   Styling every blockquote as the script variant turned the VIP quote orange
   and centred; it is white and left-aligned on live. */
.ap-prose blockquote {
	position: relative;
	margin: 30px 0 0;
	padding: 34px 0 0;
	border: 0;
	color: inherit;
	font-size: var(--ap-body-lg-size);
	line-height: 1.5;
}
.ap-prose blockquote::before {
	/* A left double quotation mark, written as the character itself so no
	   escape can be re-interpreted. This held U+0081 + "C" -- a \201C
	   escape read as octal -- which painted a .notdef box and a capital C
	   above every quote band. */
	content: "“";
	position: absolute;
	top: -10px;
	left: 0;
	font-family: var(--ap-font-body);
	font-size: 70px;
	line-height: 1;
	color: inherit;
	opacity: 0.9;
}
.ap-prose blockquote p { margin: 0; color: inherit; }

.ap-prose blockquote.ap-quote-script {
	padding: 0;
	margin: 34px 0 0;
	font-family: var(--ap-font-script);
	font-size: 42px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--ap-accent);
	text-align: center;
}
.ap-prose blockquote.ap-quote-script::before { content: none; }
.ap-prose blockquote.ap-quote-script p { font: inherit; }
@media (max-width: 1024px) { .ap-prose blockquote.ap-quote-script { font-size: 34px; } }
@media (max-width: 767px)  { .ap-prose blockquote.ap-quote-script { font-size: 28px; } }

.ap-page-title { margin-bottom: 0.4em; color: var(--ap-text); }

/* A heading that sits INSIDE a body field, e.g. "I have a better idea." in the
   middle of the homepage's indigo band. 50px on live. */
.ap-prose h2.ap-mid,
.ap-prose h3.ap-mid {
	font-size: 50px;
	line-height: var(--ap-display-lh);
	margin: 40px 0 24px;
	color: inherit;
}
@media (max-width: 1024px) { .ap-prose h2.ap-mid, .ap-prose h3.ap-mid { font-size: 40px; } }
@media (max-width: 767px)  { .ap-prose h2.ap-mid, .ap-prose h3.ap-mid { font-size: 30px; } }


/* ---------- Per-section heading colour and size ----------
   Measured on live: the homepage alone uses #414042, #E69769 and #FFFFFF for
   headings and three different sizes, so neither can be a single global. */
.ap-display--text      { color: var(--ap-text); }
.ap-display--white     { color: var(--ap-white); }
.ap-display--peach     { color: var(--ap-primary); }
.ap-display--accent    { color: var(--ap-accent); }
.ap-display--secondary { color: var(--ap-secondary); }
.ap-display--sky       { color: var(--ap-sky); }

.ap-display--size-xl { font-size: var(--ap-display-size); }
.ap-display--size-lg { font-size: 60px; }
.ap-display--size-md { font-size: 50px; }
.ap-display--size-sm { font-size: 30px; }

@media (max-width: 1024px) {
	.ap-display--size-lg { font-size: 50px; }
	.ap-display--size-md { font-size: 40px; }
	.ap-display--size-sm { font-size: 26px; }
}
@media (max-width: 767px) {
	.ap-display--size-lg { font-size: 36px; }
	.ap-display--size-md { font-size: 30px; }
	.ap-display--size-sm { font-size: 22px; }
}

.ap-eyebrow--size-sm { font-size: 58px; }
@media (max-width: 1024px) { .ap-eyebrow--size-sm { font-size: 32px; } }
@media (max-width: 767px)  { .ap-eyebrow--size-sm { font-size: 26px; } }

/* A coloured band must not override an explicitly chosen heading colour. */
.ap-section--bg-accent :is(h1,h2,h3).ap-display--text,
.ap-section--bg-primary :is(h1,h2,h3).ap-display--text,
.ap-section--bg-secondary :is(h1,h2,h3).ap-display--text,
.ap-section--bg-indigo :is(h1,h2,h3).ap-display--text,
.ap-section--bg-sky :is(h1,h2,h3).ap-display--text,
.ap-section--grad-hero :is(h1,h2,h3).ap-display--text,
.ap-section--grad-indigo :is(h1,h2,h3).ap-display--text,
.ap-section--grad-sky :is(h1,h2,h3).ap-display--text,
.ap-section--grad-sky-alt :is(h1,h2,h3).ap-display--text,
.ap-section--grad-green :is(h1,h2,h3).ap-display--text,
.ap-section--grad-accent :is(h1,h2,h3).ap-display--text { color: var(--ap-white); }

/* =========================================================================
   4. Layout
   ========================================================================= */
.ap-container {
	width: 100%;
	max-width: var(--ap-container);
	margin-inline: auto;
	padding-inline: var(--ap-gutter);
}
.ap-container--narrow { max-width: var(--ap-container-narrow); }
.ap-container--wide   { max-width: 1320px; }

.ap-section {
	position: relative;
	padding-inline: var(--ap-section-pad-x);
}
.ap-section--flush { padding-inline: 0; }

.ap-section--space-none { padding-block: 0; }
.ap-section--space-sm   { padding-block: var(--ap-space-sm); }
.ap-section--space-md   { padding-block: var(--ap-space-md); }
.ap-section--space-lg   { padding-block: var(--ap-space-lg); }

/* Per-section numeric overrides. They beat the preset and, unlike a flat
   inline padding, they can be scaled at the mobile breakpoint. */
.ap-section[style*="--ap-space-top"]    { padding-top: var(--ap-space-top); }
.ap-section[style*="--ap-space-bottom"] { padding-bottom: var(--ap-space-bottom); }

@media (max-width: 1024px) {
	.ap-section[style*="--ap-space-top"]    { padding-top: calc(var(--ap-space-top) * 0.8); }
	.ap-section[style*="--ap-space-bottom"] { padding-bottom: calc(var(--ap-space-bottom) * 0.8); }
}
@media (max-width: 767px) {
	.ap-section[style*="--ap-space-top"]    { padding-top: calc(var(--ap-space-top) * 0.56); }
	.ap-section[style*="--ap-space-bottom"] { padding-bottom: calc(var(--ap-space-bottom) * 0.56); }
}

.ap-section--bg-white     { background: var(--ap-white); color: var(--ap-text); }
.ap-section--bg-accent    { background: var(--ap-accent); color: var(--ap-white); }
.ap-section--bg-primary   { background: var(--ap-primary); color: var(--ap-white); }
.ap-section--bg-secondary { background: var(--ap-secondary); color: var(--ap-white); }
.ap-section--bg-indigo    { background: var(--ap-indigo); color: var(--ap-white); }
.ap-section--bg-sky       { background: var(--ap-sky); color: var(--ap-white); }
.ap-section--bg-sky-light { background: var(--ap-sky-light); color: var(--ap-text); }
.ap-section--bg-sky-pale  { background: var(--ap-sky-pale); color: var(--ap-text); }

.ap-section--grad-hero   { background-image: var(--ap-grad-hero); color: var(--ap-white); }
.ap-section--grad-indigo { background-image: var(--ap-grad-indigo); color: var(--ap-white); }
.ap-section--grad-sky    { background-image: var(--ap-grad-sky); color: var(--ap-white); }
.ap-section--grad-sky-alt { background-image: var(--ap-grad-sky-alt); color: var(--ap-white); }
.ap-section--grad-green  { background-image: var(--ap-grad-green); color: var(--ap-white); }
.ap-section--grad-accent { background-image: var(--ap-grad-accent); color: var(--ap-white); }
.ap-section--grad-footer { background-image: var(--ap-grad-footer); color: var(--ap-white); }

/* On any coloured band the heading default (peach) is wrong: live overrides
   every one of them to white. */
.ap-section--bg-accent :is(h1,h2,h3,.ap-display),
.ap-section--bg-primary :is(h1,h2,h3,.ap-display),
.ap-section--bg-secondary :is(h1,h2,h3,.ap-display),
.ap-section--bg-indigo :is(h1,h2,h3,.ap-display),
.ap-section--bg-sky :is(h1,h2,h3,.ap-display),
.ap-section--grad-hero :is(h1,h2,h3,.ap-display),
.ap-section--grad-indigo :is(h1,h2,h3,.ap-display),
.ap-section--grad-sky :is(h1,h2,h3,.ap-display),
.ap-section--grad-sky-alt :is(h1,h2,h3,.ap-display),
.ap-section--grad-green :is(h1,h2,h3,.ap-display),
.ap-section--grad-accent :is(h1,h2,h3,.ap-display) { color: var(--ap-white); }

/* The repeating leaf watermark that sits over the coloured bands on live. */
.ap-section--pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ap-pattern-url, none);
	background-repeat: repeat;
	background-size: 500px auto;
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}
.ap-section--pattern > * { position: relative; z-index: 1; }

.ap-section--missing {
	background: repeating-linear-gradient(45deg, #fee, #fee 10px, #fdd 10px, #fdd 20px);
	padding-block: 24px;
	color: #900;
}

.ap-grid { display: grid; gap: var(--ap-widget-gap); }
.ap-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-grid--middle { align-items: center; }
@media (max-width: 1024px) {
	.ap-grid--3, .ap-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.ap-grid--2, .ap-grid--3, .ap-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.ap-stack > * + * { margin-top: var(--ap-widget-gap); }

/* Visibility helpers, matching Elementor's three breakpoints. */
@media (min-width: 1025px) { .ap-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .ap-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .ap-hide-mobile { display: none !important; } }

/* The curve-asymmetrical shape divider used on every gradient hero.
   Live's geometry exactly: a 500px-tall SVG stretched to 300% width and
   mirrored, hanging 1px below the section at z-index 2 so the white curve
   paints OVER the hero and crops its bottom edge. Only the lower part of the
   path is opaque, so the heading above it still reads. Halving any of these
   numbers changes the crop, so they are reproduced verbatim. */
.ap-shape {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	line-height: 0;
	direction: ltr;
	overflow: hidden;
	z-index: 2;
	pointer-events: none;
}
.ap-shape svg {
	display: block;
	position: relative;
	left: 50%;
	/* max-width:none is load-bearing. The global img/svg reset caps children at
	   100%, which silently clamps this to one viewport width and turns the
	   shallow wave into a dome. */
	max-width: none;
	width: calc(300% + 1.3px);
	height: 500px;
	transform: translateX(-50%) rotateY(180deg);
}
.ap-shape .ap-shape__fill { fill: var(--ap-white); }

/* Hero content must sit above the divider, or a 500px white curve swallows the
   heading. Live achieves the same by giving the following section z-index 40. */
.ap-hero__inner { position: relative; z-index: 3; }

/* =========================================================================
   5. Buttons
   ========================================================================= */
.ap-btn,
button.ap-btn,
input[type="submit"].ap-btn,
.gform_wrapper .gform_footer input[type="submit"] {
	display: inline-block;
	background-color: var(--ap-accent);
	color: var(--ap-white);
	fill: var(--ap-white);
	font-family: var(--ap-btn-font);
	font-size: var(--ap-btn-size);
	font-weight: var(--ap-btn-weight);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	padding: 15px 60px;
	border: 0;
	border-radius: 30px;
	box-shadow: var(--ap-btn-shadow);
	cursor: pointer;
	transition: all 0.3s;
}
.ap-btn:visited { color: var(--ap-white); }
.ap-btn:hover,
.ap-btn:focus { color: var(--ap-white); text-decoration: none; }

.ap-btn--grow { transition-duration: 0.3s; transition-property: transform; }
.ap-btn--grow:hover,
.ap-btn--grow:focus,
.ap-btn--grow:active { transform: scale(1.1); }

.ap-btn--inverse {
	background-color: var(--ap-white);
	color: var(--ap-accent);
	fill: var(--ap-accent);
}
.ap-btn--inverse:hover,
.ap-btn--inverse:focus,
.ap-btn--inverse:visited { color: var(--ap-accent); }

.ap-btn--sm { padding: 12px 34px; font-size: var(--ap-small-size); }
.ap-btn--block { display: block; width: 100%; }

/* Live has no visible focus ring on buttons. Adding one is invisible to mouse
   users and strictly better for keyboard users; listed as a divergence. */
.ap-btn:focus-visible { outline: 3px solid var(--ap-secondary); outline-offset: 3px; }

@media (max-width: 767px) {
	.ap-btn { padding-inline: 40px; }
}

/* =========================================================================
   6. Header
   ========================================================================= */
.ap-header {
	position: relative;
	z-index: 40;
	background: var(--ap-white);
	box-shadow: var(--ap-header-shadow);
	padding-inline: 5%;
}

/* Live's header is a three-column Elementor section: 16.667% logo, 66.667%
   nav, 16.667% empty spacer, each column padded 10px, the logo centred in its
   column. That is what puts the logo at x=128 and the nav dead-centre in the
   viewport rather than centred in the leftover space. Reproduced as a grid so
   the empty third column costs no markup. */
.ap-header__inner {
	display: grid;
	grid-template-columns: 16.6667% 66.6666% 16.6667%;
	align-items: center;
	padding-block: 10px;
}

.ap-header__brand { display: flex; justify-content: center; padding-inline: 10px; }
/* display:flex, not inline-block: an inline-block wrapper adds ~7px of baseline
   descender space below the image and the header grows by exactly that much. */
.ap-header__logo { display: flex; }
.ap-header__logo-img { max-width: 100px; width: 100px; height: auto; }
.ap-header__logo--text { font-family: var(--ap-font-display); font-size: 24px; color: var(--ap-text); }

.ap-nav { display: flex; justify-content: center; padding-inline: 10px; }

/* Live's nav items carry 13px 20px of padding and NO gap between them; the
   list is centred. Measured item boxes: Home 87.8, About 89.0, Work With Me
   157.4, Contact 103.3, all 46px tall. */
.ap-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
	align-items: center;
	justify-content: center;
}

.ap-nav__link {
	position: relative;
	display: block;
	font-family: var(--ap-nav-font);
	font-size: var(--ap-nav-size);
	font-weight: var(--ap-nav-weight);
	line-height: 1.111;
	color: var(--ap-text);
	padding: 13px 20px;
	text-decoration: none;
}
.ap-nav__link::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 8px;
	height: 3px;
	background: var(--ap-accent);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ap-nav__link:hover,
.ap-nav__link:focus,
.ap-nav__link.is-current { color: var(--ap-accent); text-decoration: none; }
.ap-nav__link:hover::after,
.ap-nav__link:focus::after,
.ap-nav__link.is-current::after { opacity: 1; }

.ap-nav-toggle {
	display: none;
	margin-left: auto;
	background: transparent;
	border: 0;
	padding: 10px;
	cursor: pointer;
	color: var(--ap-accent);
}
.ap-nav-toggle:hover, .ap-nav-toggle:focus { color: var(--ap-secondary); }
.ap-nav-toggle__bars,
.ap-nav-toggle__bars::before,
.ap-nav-toggle__bars::after {
	display: block;
	width: 30px;
	height: 3px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, background-color 0.2s ease;
}
.ap-nav-toggle__bars { position: relative; }
.ap-nav-toggle__bars::before,
.ap-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.ap-nav-toggle__bars::before { top: -9px; }
.ap-nav-toggle__bars::after  { top: 9px; }

.ap-nav-toggle[aria-expanded="true"] .ap-nav-toggle__bars { background: transparent; }
.ap-nav-toggle[aria-expanded="true"] .ap-nav-toggle__bars::before { transform: translateY(9px) rotate(45deg); }
.ap-nav-toggle[aria-expanded="true"] .ap-nav-toggle__bars::after  { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 767px) {
	.ap-header { padding-inline: 2%; }
	.ap-header__inner { grid-template-columns: 50% 50%; }
	.ap-header__brand { justify-content: flex-start; }
}

@media (max-width: 1024px) {
	.ap-header__inner { grid-template-columns: 18% 82%; }
	.ap-nav-toggle { display: block; grid-column: 2; justify-self: end; }
	.ap-nav { padding-inline: 0; }

	.ap-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		background: var(--ap-white);
		border-radius: 0 0 10px 10px;
		box-shadow: var(--ap-dropdown-shadow);
		overflow: hidden;
	}
	.ap-nav.is-open { display: block; }
	.ap-nav .ap-nav__list { flex-direction: column; gap: 0; align-items: stretch; }
	.ap-nav .ap-nav__item { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
	.ap-nav .ap-nav__item:last-child { border-bottom: 0; }
	.ap-nav .ap-nav__link {
		display: block;
		padding: 14px 20px;
		font-size: var(--ap-body-size);
	}
	.ap-nav .ap-nav__list { justify-content: stretch; }
	.ap-nav .ap-nav__link::after { display: none; }
	.ap-nav .ap-nav__link:hover,
	.ap-nav .ap-nav__link:focus,
	.ap-nav .ap-nav__link.is-current { background: var(--ap-secondary); color: var(--ap-white); }
	.ap-nav .ap-nav__item:last-child .ap-nav__link { border-radius: 0 0 10px 10px; }
}

/* =========================================================================
   7. Footer
   ========================================================================= */
.ap-footer {
	background-image: var(--ap-grad-footer);
	color: var(--ap-white);
	padding: 2% 5%;
}
.ap-footer a { color: var(--ap-white); }
.ap-footer a:hover, .ap-footer a:focus { color: var(--ap-white); text-decoration: underline; }

.ap-footer__inner {
	/* Live's footer runs wider than the 1140 body container: its legal
	   column ends at x1356 at 1440px wide, which is a 1296 measure. */
	max-width: 1296px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	align-items: center;
	gap: var(--ap-widget-gap);
	padding-block: 20px;
}

.ap-footer__logo-img { max-width: 90px; width: 90px; }
.ap-footer__centre { text-align: center; }
.ap-footer__nav .ap-nav__list { justify-content: center; }
.ap-footer__nav .ap-nav__link { color: var(--ap-white); }
.ap-footer__nav .ap-nav__link::after { background: var(--ap-white); }

.ap-footer__address {
	margin: 12px 0 0;
	/* Live's address line sets 646px wide with a 16px glyph band; at
	   --ap-small-size (14px) the build set 503px with a 13px band. */
	font-size: 17px;
	color: var(--ap-white-41);
}

.ap-footer__legal { text-align: right; }
.ap-footer__legal .ap-nav__list { flex-direction: column; align-items: flex-end; gap: 6px; }
.ap-footer__legal .ap-nav__link { font-size: 17px; color: var(--ap-white); }
.ap-footer__legal .ap-nav__link::after { display: none; }
.ap-footer__credit { margin: 12px 0 0; font-size: 12px; }

.ap-footer__mobile { display: none; }
.ap-footer__inner--sitemap {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	text-align: left;
}
.ap-footer__sitemap .ap-nav__list { flex-direction: column; align-items: flex-start; gap: 8px; }
.ap-footer__sitemap .ap-nav__link { font-size: var(--ap-small-size); color: var(--ap-white); }
.ap-footer__sitemap .ap-nav__link::after { display: none; }
.ap-footer__inner--address { display: block; text-align: center; padding-top: 0; }

@media (max-width: 1024px) {
	.ap-footer { padding: 2% 3% 0; }
}
@media (max-width: 767px) {
	.ap-footer { padding: 2% 3% 10%; }
	.ap-footer__desktop { display: none; }
	.ap-footer__mobile { display: block; }
}

/* =========================================================================
   8. Forms (Gravity Forms, restyled to the site's own language)

   GF's own stylesheet is dequeued, so everything it normally provides has to
   live here - including the two rules that are FUNCTIONAL rather than
   cosmetic: hiding the honeypot field and hiding screen-reader-only labels.
   Leaving the honeypot visible would show a stray "Phone" input on every form
   and defeat the anti-spam trap it exists to be.
   ========================================================================= */
.gform_wrapper form { margin: 0; }

/* The honeypot. It must stay in the DOM and stay reachable by a bot, so it is
   moved off-screen rather than display:none'd. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Screen-reader-only labels: live's forms show placeholders, not labels. */
.gform_wrapper .hidden_label .gfield_label,
.gform_wrapper .gform_fields.hidden_label .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Live shows no required indicator anywhere. */
.gform_wrapper .gfield_required { display: none; }
.gform_wrapper .gform_fields { display: grid; gap: 16px; }
.gform_wrapper .gfield_label {
	font-family: var(--ap-font-body);
	font-size: var(--ap-body-size);
	font-weight: 700;
	color: inherit;
	display: block;
	margin-bottom: 6px;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	padding: 8px 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 30px;
	background: var(--ap-white);
	color: var(--ap-text);
	font-family: var(--ap-font-body);
	font-size: var(--ap-body-size);
	line-height: 1.4;
}
/* Live's message box is 113px tall. min-height:140px let the rows
   attribute win at 278px, which alone put ~165px of extra height on both
   form pages and pushed the cut-out into the copy. */
.gform_wrapper textarea { border-radius: 20px; min-height: 0; height: 113px; }
/* Without this Chrome's own #757575 shows; live renders #8d8c8d. */
.gform_wrapper ::placeholder { color: #8d8c8d; opacity: 1; }
.gform_wrapper .gfield_required { color: var(--ap-accent); }
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer { margin-top: 18px; text-align: center; }

/* Style the submit control by CLASS. A filter that rewrites class="..." misses
   Gravity Forms' single-quoted attributes, so the class hook is the reliable
   one. */
.gform_wrapper .gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper input.gform_button {
	display: inline-block;
	background-color: var(--ap-accent);
	color: var(--ap-white);
	font-family: var(--ap-btn-font);
	font-size: var(--ap-btn-size);
	font-weight: var(--ap-btn-weight);
	line-height: 1;
	text-align: center;
	padding: 15px 60px;
	border: 0;
	border-radius: 30px;
	box-shadow: var(--ap-btn-shadow);
	cursor: pointer;
	transition: all 0.3s;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus { transform: scale(1.1); color: var(--ap-white); }
.gform_wrapper .gform_ajax_spinner { margin-left: 10px; }
.gform_wrapper .validation_message {
	color: var(--ap-accent);
	font-size: var(--ap-small-size);
	margin-top: 6px;
}
.gform_wrapper .gform_confirmation_message,
.ap-form__confirmation {
	font-size: var(--ap-body-lg-size);
	text-align: center;
}
.gform_wrapper .gform_validation_errors {
	border: 2px solid var(--ap-accent);
	border-radius: var(--ap-card-radius);
	padding: 14px 18px;
	margin-bottom: 18px;
}

/* Live's contact form is a 430px column, not the full width of its section. */
.ap-contactform .gform_wrapper { max-width: 430px; margin-inline: auto; }

/* The inline newsletter capture: one field and a button, centred. */
.ap-subscribe .gform_wrapper .gform_fields { max-width: 420px; margin-inline: auto; }
.ap-subscribe .gform_wrapper .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ap-subscribe .gform_wrapper input[type="email"] { text-align: center; }

/* =========================================================================
   9. Search and fallback routes
   ========================================================================= */
.ap-search-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ap-search-form__label { flex: 1 1 100%; font-weight: 700; }
.ap-search-form__input {
	flex: 1 1 220px;
	padding: 12px 16px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 30px;
	font: inherit;
}
.ap-results { list-style: none; padding: 0; margin: 0; }
.ap-results__item { padding-block: 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.ap-results__link { font-family: var(--ap-font-display); font-size: var(--ap-h3-size); }

/* =========================================================================
   10. Reveal on scroll
   Default state is VISIBLE. main.js adds .js-reveal to <html> only once the
   IntersectionObserver is confirmed running, so a JS failure leaves the page
   fully readable rather than permanently blank.
   ========================================================================= */
[data-reveal] { opacity: 1; transform: none; }
.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }