/*
Theme Name: Morgan Hesketh
Theme URI: https://morganhesketh.co.uk
Author: Morgan Hesketh
Author URI: https://morganhesketh.co.uk
Description: A fully editable WordPress theme for Morgan Hesketh Photography, with an elegant, editorial wedding-photography-style page structure. Built with custom post types for the team, FAQ, gallery and press logos, plus full Customizer control over the homepage, header, footer and contact details -- no page builder or extra plugins required.
Version: 1.43.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morganhesketh
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, one-column, two-columns, wedding, photography, portfolio
*/

/* =========================================================
   0a. HEADING FONT ("Butler")
   Butler is the display font for every heading sitewide (h1-h5, the
   nav logo text, footer headings, pull quotes, etc. -- anything using
   the --pt-font-display token below). It isn't on Google Fonts, so it
   can't be pulled in the same way as the theme's other fonts (see
   morganhesketh_scripts() in functions.php) -- it has to be self-hosted.
   Drop the font files into assets/fonts/ using these exact filenames
   (see assets/fonts/README.txt) and this @font-face activates
   automatically; until then, browsers silently fall back to Playfair
   Display, the theme's original display font.
   ========================================================= */
@font-face{
	font-family:'Butler';
	src: url('assets/fonts/Butler-Bold.woff2') format('woff2'),
	     url('assets/fonts/Butler-Bold.woff') format('woff');
	font-weight:700;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:'Butler';
	src: url('assets/fonts/Butler-Regular.woff2') format('woff2'),
	     url('assets/fonts/Butler-Regular.woff') format('woff');
	font-weight:400;
	font-style:normal;
	font-display:swap;
}

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
	--pt-dark: #1b1b1b;
	--pt-dark-soft: #262422;
	--pt-cream: #f6f3ee;
	--pt-cream-2: #efe9e0;
	--pt-white: #ffffff;
	--pt-accent: #6d4c5c;      /* muted plum -- nods to "Morgan Hesketh" without being cartoonish */
	--pt-accent-light: #a8899a;
	--pt-line: rgba(27,27,27,.12);
	--pt-line-light: rgba(255,255,255,.22);
	--pt-text: #2a2a28;
	--pt-text-muted: #6b665f;
	--pt-radius: 2px;

	--pt-font-display: "Butler", "Playfair Display", "Times New Roman", serif;
	--pt-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
	--pt-font-nav: "Montserrat", "Helvetica Neue", Arial, sans-serif;

	--pt-container: 1240px;
	--pt-gutter: clamp(20px, 5vw, 64px);

	--pt-offer-bar-bg: var(--pt-dark);
	--pt-offer-bar-color: var(--pt-cream);
}

/* =========================================================
   0b. PAGE TRANSITION OVERLAY
   Masks normal browser navigation (the hard white flash between pages)
   with a soft cream fade + a black spinner, driven by
   assets/js/page-transitions.js. Visible by default (no JS needed) so
   there's no flash-of-missing-overlay on first paint; the script fades
   it out once the page is ready, and fades it back in just before
   following an internal link.
   ========================================================= */
#pt-page-transition{
	position:fixed; inset:0; z-index:9999;
	background: var(--pt-cream);
	display:flex; align-items:center; justify-content:center;
	opacity:1; visibility:visible;
	transition: opacity .4s ease, visibility 0s linear 0s;
}
#pt-page-transition.pt-is-hidden{
	opacity:0; visibility:hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
}
#pt-page-transition__spinner{
	width:42px; height:42px; border-radius:50%;
	border: 3px solid rgba(27,27,27,.15);
	border-top-color: var(--pt-dark);
	animation: pt-spin .8s linear infinite;
}
@keyframes pt-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
	#pt-page-transition{ transition: opacity .15s linear, visibility 0s linear 0s; }
	#pt-page-transition.pt-is-hidden{ transition: opacity .15s linear, visibility 0s linear .15s; }
	#pt-page-transition__spinner{ animation-duration: 1.6s; }
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin:0;
	font-family: var(--pt-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--pt-text);
	background: var(--pt-white);
	-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
/* Deterrent against casual image-saving (see assets/js/image-protect.js
   for the right-click/drag blocking half of this, and its own comment
   for what this can't actually prevent): stops the native drag
   "ghost", the long-press "Save Image" callout on iOS/Android, and
   long-press text-selection handles from appearing on an image. */
img{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family: var(--pt-font-display); font-weight: 500; line-height:1.15; margin:0 0 .5em; letter-spacing:.01em; }
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3{ font-size: 1.3rem; }
p{ margin:0 0 1.2em; }
em{ font-style: italic; color: var(--pt-accent); }
strong{ font-weight:600; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

/* =========================================================
   2. LAYOUT HELPERS
   ========================================================= */
.pt-container{ max-width: var(--pt-container); margin-inline:auto; padding-inline: var(--pt-gutter); }
.pt-section{ padding-block: clamp(48px, 8vw, 120px); }
.pt-section--dark{ background: var(--pt-dark); color: var(--pt-cream); }
.pt-section--dark h2, .pt-section--dark h3{ color: var(--pt-cream); }
.pt-section--cream{ background: var(--pt-cream); }
.pt-eyebrow{
	display:block; text-transform:uppercase; letter-spacing:.22em; font-size:.72rem;
	color: var(--pt-accent); margin-bottom: 1em; font-weight:600;
	/* Also used on the odd real heading (e.g. "As Seen In") so that section
	   has a proper <h2> for SEO/screen readers -- these two overrides keep
	   it looking identical to the label style everywhere else, rather than
	   picking up the sitewide Butler heading font/line-height. */
	font-family: inherit; line-height: inherit; margin-top:0;
}
.pt-section--dark .pt-eyebrow{ color: var(--pt-accent-light); }
.pt-btn{
	display:inline-flex; align-items:center; gap:.5em;
	padding: .9em 2em; border:1px solid currentColor; border-radius: var(--pt-radius);
	text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:600;
	transition: background .25s ease, color .25s ease;
	background: transparent;
}
.pt-btn:hover{ background: var(--pt-dark); color: var(--pt-cream); border-color: var(--pt-dark); }
.pt-section--dark .pt-btn:hover{ background: var(--pt-cream); color: var(--pt-dark); border-color: var(--pt-cream); }
.pt-btn--solid{ background: var(--pt-dark); color: var(--pt-cream); border-color: var(--pt-dark); }
.pt-btn--solid:hover{ opacity:.85; background: var(--pt-dark); color: var(--pt-cream); }
.pt-grid{ display:grid; gap: var(--pt-gutter); }
.pt-grid--2{ grid-template-columns: 1fr; }
@media(min-width: 800px){ .pt-grid--2{ grid-template-columns: 1fr 1fr; align-items:center; } }
.pt-grid--3{ grid-template-columns: 1fr; }
@media(min-width: 700px){ .pt-grid--3{ grid-template-columns: repeat(3,1fr); } }
.pt-center{ text-align:center; }
.pt-max-text{ max-width: var(--pt-max-text-width, 640px); }
.pt-mx-auto{ margin-inline:auto; }

/* =========================================================
   3. SOCIAL ICONS (footer, mobile drawer, hero left-edge strip)
   ========================================================= */
.pt-social{ display:flex; gap:.9em; align-items:center; }
.pt-social a{ display:inline-flex; }
.pt-social svg{ width:16px; height:16px; fill:currentColor; }
.pt-social a:hover{ color: var(--pt-accent-light); }
.pt-footer__contact{ font-size:.9rem; }
.pt-footer__contact a:hover{ color: var(--pt-accent-light); }

/* =========================================================
   4. LOGO (overlaid on the hero -- there is no separate header band,
   the top bar flows straight into the hero image)
   ========================================================= */
.pt-hero__logo{
	position:absolute; z-index:5;
	top: clamp(20px, 4vw, 40px); left: var(--pt-gutter);
}
.pt-hero__logo img{
	max-height:52px; width:auto;
	filter: drop-shadow(0 1px 6px rgba(0,0,0,.35));
}
.pt-hero__logo a{
	display:inline-flex; align-items:center;
	font-family: var(--pt-font-display); font-style:italic; font-size:1.6rem; color:#fff;
	text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.pt-hero--align-center .pt-hero__logo{ left:50%; transform:translateX(-50%); }
.pt-hero--align-right .pt-hero__logo{ left:auto; right: var(--pt-gutter); }

/* Vertical social icon strip, pinned to the hero's left edge. Desktop
   only -- on narrow screens the same links are already reachable via
   the mobile drawer, so this stays out of the way of the hero text. */
.pt-hero__social{
	display:none;
}
@media(min-width: 900px){
	.pt-hero__social{
		display:flex; flex-direction:column; align-items:center; gap:14px;
		position:absolute; z-index:5; left: clamp(20px, 3vw, 36px);
		top:50%; transform:translateY(-50%);
	}
}
.pt-hero__social-line{ width:1px; height:32px; background: rgba(255,255,255,.5); }
.pt-social--vertical{ flex-direction:column; gap:14px; }
.pt-social--vertical a{ color:#fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }

/* =========================================================
   4b. NAVIGATION BAR (rendered just below the hero on every page)
   ========================================================= */
.pt-navbar{
	position: sticky; top:0; z-index:40;
	background: var(--pt-navbar-bg, var(--pt-dark));
	color: var(--pt-navbar-text, var(--pt-cream));
	font-family: var(--pt-font-nav);
	box-shadow: var(--pt-navbar-shadow, none);
}
.pt-navbar__inner{
	display:flex; align-items:center; justify-content:space-between;
	padding-block: 1em; gap:1.5em;
	/* Independent of --pt-container (the rest of the site's content
	   width) -- widen this via Customize > "Navigation Bar (below hero)"
	   > "Navigation bar width" if a menu item is wrapping onto two
	   lines, without affecting any other page's width. */
	max-width: var(--pt-navbar-width, var(--pt-container));
}
.pt-navbar__left{ flex:1; display:flex; }
.pt-navbar__right{ flex:1; display:flex; align-items:center; justify-content:flex-end; gap:1.3em; }
.pt-navbar__btn{
	color: var(--pt-navbar-text, var(--pt-cream)); border-color: var(--pt-navbar-text, var(--pt-cream));
}
.pt-navbar__btn:hover{
	background: var(--pt-navbar-link-hover, var(--pt-accent)); color: var(--pt-navbar-bg, var(--pt-dark));
	border-color: var(--pt-navbar-link-hover, var(--pt-accent));
}
.pt-navbar__phone{ display:none; font-size:.85rem; font-weight:600; letter-spacing:.03em; color: var(--pt-navbar-text, var(--pt-cream)); }
@media(min-width:1024px){ .pt-navbar__phone{ display:inline; } }

.pt-navbar__menu.pt-nav{ display:none; }
@media(min-width: 1024px){
	.pt-navbar__menu.pt-nav{ display:flex; align-items:center; justify-content:center; gap: clamp(16px,2vw,34px); flex:2; }
	.pt-nav a{ text-transform:uppercase; font-size: var(--pt-navbar-font-size, .78rem); letter-spacing:.1em; font-weight:500; color: var(--pt-navbar-link, var(--pt-cream)); }
	.pt-nav a:hover{ color: var(--pt-navbar-link-hover, var(--pt-accent-light)); }
	.pt-nav > ul{ display:flex; gap: clamp(16px,2vw,34px); }
	.pt-nav .menu-item-has-children{ position:relative; }
	.pt-nav .menu-item-has-children > a::after{ content:"+"; margin-left:.35em; font-size:.85em; }
	.pt-nav .sub-menu{
		position:absolute; top:100%; left:0; background:var(--pt-white);
		border:1px solid var(--pt-line); min-width:220px; padding:.6em 0;
		opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s ease;
	}
	.pt-nav .menu-item-has-children:hover > .sub-menu,
	.pt-nav .menu-item-has-children:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; }
	.pt-nav .sub-menu a{ display:block; padding:.5em 1.2em; text-transform:none; letter-spacing:0; color: var(--pt-text); }
	.pt-nav .sub-menu a:hover{ color: var(--pt-accent); }
}
.pt-menu-toggle{
	display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
@media(min-width:1024px){ .pt-menu-toggle{ display:none; } }
.pt-menu-toggle span{ width:24px; height:2px; background: var(--pt-navbar-text, var(--pt-cream)); display:block; }

/* mobile drawer */
.pt-mobile-nav{
	position:fixed; inset:0; background: var(--pt-dark); color: var(--pt-cream);
	transform: translateX(100%); transition: transform .35s ease; z-index:60;
	padding: 2.4em var(--pt-gutter); overflow-y:auto;
	font-family: var(--pt-font-nav);
}
.pt-mobile-nav.is-open{ transform: translateX(0); }
.pt-mobile-nav__close{ background:none; border:0; color:inherit; font-size:1.8rem; float:right; cursor:pointer; }
.pt-mobile-nav ul{ clear:both; margin-top:2em; }
.pt-mobile-nav li{ border-bottom:1px solid var(--pt-line-light); }
.pt-mobile-nav a{ display:block; padding:.9em 0; text-transform:uppercase; letter-spacing:.1em; font-size:.95rem; }
.pt-mobile-nav .sub-menu{ padding-left:1em; }
@media(min-width:1024px){ .pt-mobile-nav{ display:none; } }

/* =========================================================
   5. HERO
   ========================================================= */
.pt-hero{
	position:relative; min-height: 100vh; display:flex; align-items:flex-end;
	color: var(--pt-cream); overflow:hidden; background: var(--pt-dark);
}
.pt-hero__media{ position:absolute; inset:0; }
.pt-hero__media img{ width:100%; height:100%; object-fit:cover; }
.pt-hero__media::after{
	content:""; position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}
/* Optional customisable left-to-right colour wash, on top of the photo/
   slider (Customize > "Homepage: Hero" > "Add a colour overlay") -- its
   background gradient is set inline per-request in front-page.php. Sits
   above .pt-hero__media (and its fixed ::after darkening) but below the
   hero text. */
.pt-hero__overlay{ position:absolute; inset:0; z-index:1; }
.pt-hero__content{ position:relative; z-index:2; padding: clamp(40px,8vw,90px) var(--pt-gutter); max-width:900px; }
.pt-hero__eyebrow{ text-transform:uppercase; letter-spacing:.25em; font-size:.75rem; margin-bottom:1em; display:block; }
.pt-hero h1{ color:#fff; max-width:500px; }
.pt-hero__subtitle{ color:#fff; opacity:.85; font-size:1.05rem; max-width:42em; margin-top:.6em; }
.pt-hero__actions{ display:flex; gap:1.2em; align-items:center; margin-top:1.6em; flex-wrap:wrap; }
.pt-hero--page{ min-height:56vh; align-items:center; text-align:center; }
.pt-hero--page .pt-hero__content{ max-width:100%; }
/* Heading is width-capped (above) so it wraps onto new lines rather
   than stretching edge-to-edge -- centre that narrower block whenever
   the surrounding text is centred (every inner-page hero, and the
   homepage's "Center" text-alignment option), otherwise it keeps the
   natural left/right start position of the chosen alignment. */
.pt-hero--page h1,
.pt-hero--align-center .pt-hero__content h1{ margin-inline:auto; }

/* Hero image slider (Customizer: "Use a sliding image gallery in the
   hero", homepage only). assets/js/hero-slider.js toggles the
   .is-active class; the two effect variants below decide what that
   class actually does. */
.pt-hero-slider__track{ position:relative; width:100%; height:100%; }
.pt-hero-slider__slide{ position:absolute; inset:0; opacity:0; }
.pt-hero-slider__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.pt-hero-slider__slide.is-active{ opacity:1; z-index:1; }

/* Fade: cross-dissolve between slides. */
.pt-hero-slider--fade .pt-hero-slider__slide{ transition: opacity 1.1s ease; }

/* Slide: the incoming/outgoing slides push across horizontally instead
   of cross-fading. Every slide is full-size and stacked (position:
   absolute, above), so sliding just means animating each one's own
   transform rather than moving a shared track. */
.pt-hero-slider--slide .pt-hero-slider__slide{
	opacity:1; visibility:hidden; transform:translateX(100%);
	transition: transform .9s ease, visibility 0s linear .9s;
}
.pt-hero-slider--slide .pt-hero-slider__slide.is-active{
	visibility:visible; transform:translateX(0);
	transition: transform .9s ease;
}
.pt-hero-slider--slide .pt-hero-slider__slide.is-leaving{
	visibility:visible; opacity:1; transform:translateX(-100%);
	transition: transform .9s ease;
}
@media (prefers-reduced-motion: reduce){
	.pt-hero-slider__slide,
	.pt-hero-slider--slide .pt-hero-slider__slide{ transition:none !important; }
}

/* Hero vertical position (Customizer: "Vertical position of the hero text") */
.pt-hero--valign-top{ align-items:flex-start; }
.pt-hero--valign-middle{ align-items:center; }
.pt-hero--valign-bottom{ align-items:flex-end; }

/* Hero text alignment (Customizer: "Text alignment of the hero text") */
.pt-hero--align-left{ justify-content:flex-start; }
.pt-hero--align-left .pt-hero__content{ text-align:left; }
.pt-hero--align-center{ justify-content:center; }
.pt-hero--align-center .pt-hero__content{ text-align:center; }
.pt-hero--align-center .pt-hero__actions{ justify-content:center; }
.pt-hero--align-right{ justify-content:flex-end; }
.pt-hero--align-right .pt-hero__content{ text-align:right; }
.pt-hero--align-right .pt-hero__actions{ justify-content:flex-end; }

/* Hero button hover colour (Customizer: "Button hover colour") -- falls
   back to the sitewide .pt-btn:hover colours when not set. */
.pt-hero .pt-btn:hover{
	background: var(--pt-hero-btn-hover-bg, var(--pt-dark));
	border-color: var(--pt-hero-btn-hover-bg, var(--pt-dark));
}

/* Scroll-down arrow (Customizer: "Show a scroll-down arrow") */
.pt-hero__scroll{
	position:absolute; z-index:3; bottom: clamp(20px,4vw,40px); left:50%; transform:translateX(-50%);
	width:40px; height:40px; display:flex; align-items:center; justify-content:center;
	border:1px solid var(--pt-line-light); border-radius:50%; color:#fff;
	animation: pt-scroll-bounce 2.2s ease-in-out infinite;
}
.pt-hero__scroll svg{ width:18px; height:18px; }
.pt-hero__scroll:hover{ border-color:#fff; }
@keyframes pt-scroll-bounce{
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce){
	.pt-hero__scroll{ animation:none; }
}

/* =========================================================
   5c. BREADCRUMB (every inner page except the homepage -- Customize >
   Site-Wide > "Breadcrumbs"). Sits between the nav bar and the page
   content.
   ========================================================= */
.pt-breadcrumb{ border-bottom:1px solid var(--pt-line); }
.pt-breadcrumb .pt-container{
	padding-block: .9em;
	font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
	display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
	color: var(--pt-text-muted);
}
.pt-breadcrumb a{ color: var(--pt-text); }
.pt-breadcrumb a:hover{ color: var(--pt-accent); }
.pt-breadcrumb__sep{ opacity:.6; }
.pt-breadcrumb__current{ color: var(--pt-text-muted); }

/* =========================================================
   6. INTRO / ABOUT / TWO-COL SECTIONS
   ========================================================= */
.pt-intro__head{ max-width:680px; margin-inline:auto; text-align:center; }
.pt-intro__head h2{ margin-top:.3em; }
.pt-intro__divider{ display:block; width:60px; height:1px; background: var(--pt-line); margin: 1.6em auto; }
.pt-intro__head p{ color: var(--pt-text-muted); }

.pt-intro__images{ position:relative; margin-top: clamp(40px,7vw,80px); }
.pt-intro__img--main{ width:min(760px, 90%); margin-inline:auto; }
.pt-intro__img img{ width:100%; height:auto; display:block; }

.pt-intro__img--left,
.pt-intro__img--right{ display:none; }
@media(min-width:1200px){
	.pt-intro__img--left,
	.pt-intro__img--right{
		display:block; position:absolute; width: clamp(220px,18vw,360px);
		box-shadow: 0 20px 45px rgba(0,0,0,.14);
	}
	.pt-intro__img--left{ left: -2%; bottom: -9%; }
	.pt-intro__img--right{ right: -2%; top: -9%; }
}

.pt-readmore[data-collapsed="true"] .pt-readmore__body{
	max-height: 260px; overflow:hidden; position:relative;
	-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent 100%);
	mask-image: linear-gradient(180deg,#000 60%,transparent 100%);
}
.pt-readmore__toggle{
	margin-top:1.2em; background:none; border:none; border-bottom:1px solid currentColor;
	cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; padding:0 0 2px;
}

/* =========================================================
   7. LOGO STRIP (AS SEEN IN)
   ========================================================= */
.pt-logostrip{ display:flex; flex-wrap:wrap; gap: clamp(24px,4vw,56px); align-items:center; justify-content:center; }
.pt-logostrip img{ max-height:42px; width:auto; opacity:.75; filter:grayscale(1); }

/* =========================================================
   7b. PORTFOLIO SLIDESHOW (homepage)
   Full-width, edge-to-edge carousel showing 3 images at a time (fewer
   on narrower screens) flush against each other with no gaps, plus
   previous/next arrow buttons and a slide-by-one auto-advance that
   pauses between slides. Each slide's width is set as a CSS custom
   property (--pt-slide-width) by assets/js/portfolio-slideshow.js,
   which also drives the pause/slide/loop timing and the arrow buttons.
   ========================================================= */
.pt-portfolio-slideshow .pt-container:first-child{ margin-bottom: clamp(28px,4vw,50px); }
.pt-slideshow{ width:100%; overflow:hidden; position:relative; }
.pt-slideshow__track{ display:flex; gap: 0; }
.pt-slideshow__slide{
	flex: 0 0 auto; width: var(--pt-slide-width, 33.3334%); aspect-ratio: 3 / 5;
	overflow:hidden;
}
.pt-slideshow__slide img{
	width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease;
}
.pt-slideshow__slide:hover img{ transform: scale(1.05); }
.pt-portfolio-slideshow > .pt-container:last-child{ margin-top: clamp(28px,4vw,50px); }

.pt-slideshow__nav{
	position:absolute; top:50%; transform:translateY(-50%); z-index:3;
	width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
	background: rgba(255,255,255,.85); color: var(--pt-dark);
	display:flex; align-items:center; justify-content:center;
	transition: background .2s ease;
}
.pt-slideshow__nav:hover{ background: #fff; }
.pt-slideshow__nav svg{ width:20px; height:20px; }
.pt-slideshow__nav--prev{ left: clamp(10px,2vw,28px); }
.pt-slideshow__nav--prev svg{ transform: scaleX(-1); }
.pt-slideshow__nav--next{ right: clamp(10px,2vw,28px); }
@media(max-width:640px){
	.pt-slideshow__nav{ width:42px; height:42px; }
	.pt-slideshow__nav svg{ width:16px; height:16px; }
}

/* =========================================================
   8. PORTFOLIO / GALLERY GRID
   ========================================================= */
/* Three layout variants -- Square and Landscape are an even CSS grid
   of fixed-ratio tiles (object-fit:cover crops each photo to fit);
   Mixed drops back to CSS-column masonry so every photo keeps its own
   original proportions (Pinterest-style, used by the "Portfolio (Real
   Weddings)" page template). Column count is customizable in all 3
   (--pt-masonry-columns, set inline per the "Columns" field --
   Customize > "Portfolio (Real Weddings) Page" for that template). */
.pt-masonry{
	display:grid; gap:16px;
	grid-template-columns: repeat(2, 1fr);
}
@media(min-width:640px){ .pt-masonry{ grid-template-columns: repeat(3, 1fr); } }
@media(min-width:1024px){ .pt-masonry{ grid-template-columns: repeat(6, 1fr); } }
.pt-masonry__item{
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	margin: 0;
}
.pt-masonry--landscape .pt-masonry__item{ aspect-ratio: 3 / 2; }

/* The thumbnail wrapper, filling the tile completely -- a <button>
   that opens a lightbox on the (currently unused) Portfolio Images
   grid (morganhesketh_gallery_item_markup() in inc/template-tags.php),
   or a plain, non-interactive <div> with no lightbox on the Portfolio
   (Real Weddings) page (.pt-masonry__trigger--static --
   morganhesketh_wedding_gallery_item_markup() in inc/real-weddings.php,
   removed at Morgan's request). Same look either way. */
.pt-masonry__trigger{
	display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:pointer;
}
.pt-masonry__trigger--static{ cursor:default; }
.pt-masonry__trigger:focus-visible{ outline:2px solid var(--pt-accent); outline-offset:-2px; }
.pt-masonry__trigger img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.pt-masonry__item:hover img{ transform: scale(1.04); }

/* "Mixed" -- back to CSS-column masonry, natural aspect ratios (no
   forced crop), each photo's own height. */
.pt-masonry--mixed{
	display:block;
	column-gap: 16px;
	column-count: 2;
}
@media(min-width:640px){ .pt-masonry--mixed{ column-count: 3; } }
@media(min-width:1024px){ .pt-masonry--mixed{ column-count: 6; } }
.pt-masonry--mixed .pt-masonry__item{
	aspect-ratio: auto;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 16px;
}
.pt-masonry--mixed .pt-masonry__trigger{ height:auto; }
.pt-masonry--mixed .pt-masonry__trigger img{ height:auto; object-fit:unset; }

/* A small overlay tag in the corner, visible on hover/focus so it
   doesn't clutter the grid otherwise. Two uses: an optional "View
   project" LINK (only shown if a Portfolio entry has a Link URL set --
   morganhesketh_gallery_item_markup() in inc/template-tags.php), and a
   plain, non-clickable caption naming the couple -- and their venue,
   on a second line, when one is set -- on the Portfolio (Real
   Weddings) page (.pt-masonry__link--static --
   morganhesketh_wedding_gallery_item_markup() in inc/real-weddings.php,
   a <span> rather than an <a> since it deliberately has nowhere to
   link to). Same look either way, aside from the static version
   stacking into two lines instead of sitting on one. */
.pt-masonry__link{
	position:absolute; left:10px; bottom:10px; z-index:2; max-width: calc(100% - 20px);
	display:inline-flex; align-items:center; gap:.4em;
	background: rgba(27,27,27,.82); color:#fff;
	padding:.5em 1em; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
	opacity:0; transform:translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
.pt-masonry__link svg{ width:12px; height:12px; }
.pt-masonry__link--static{
	cursor:default; flex-direction:column; align-items:flex-start; gap:.25em;
}
.pt-masonry__link-venue{
	display:block; text-transform:none; letter-spacing:.01em; font-size:.85em; opacity:.8;
}
.pt-masonry__item:hover .pt-masonry__link,
.pt-masonry__link:focus-visible{ opacity:1; transform:translateY(0); }

/* Column count override (Customize > "Portfolio Page" > "Columns"),
   used instead of the fixed 2/3/6 breakpoints above -- mobile still
   always shows 2, the tablet breakpoint never exceeds 3 columns even
   if a higher desktop count is chosen. Applies to both the grid
   (Square/Landscape) and column-count (Mixed) variants. */
.pt-masonry--custom-columns{ grid-template-columns: repeat(2, 1fr); }
@media(min-width:640px){ .pt-masonry--custom-columns{ grid-template-columns: repeat(min(var(--pt-masonry-columns, 6), 3), 1fr); } }
@media(min-width:1024px){ .pt-masonry--custom-columns{ grid-template-columns: repeat(var(--pt-masonry-columns, 6), 1fr); } }

.pt-masonry--mixed.pt-masonry--custom-columns{ grid-template-columns: none; column-count: 2; }
@media(min-width:640px){ .pt-masonry--mixed.pt-masonry--custom-columns{ column-count: min(var(--pt-masonry-columns, 6), 3); } }
@media(min-width:1024px){ .pt-masonry--mixed.pt-masonry--custom-columns{ column-count: var(--pt-masonry-columns, 6); } }

/* Edge-to-edge portfolio grid (Gallery page template): the section
   isn't wrapped in .pt-container, so the grid spans the full viewport
   width; only the "no images yet" fallback message keeps a gutter so
   it doesn't sit flush against the screen edges. */
.pt-portfolio-fullwidth p.pt-center{ padding-inline: var(--pt-gutter); }

/* Pagination (paginate_links() 'type' => 'list' output: a <ul
   class="page-numbers">). Replaces the old "Show More" button. */
.pt-gallery-pagination{ margin-top: clamp(28px,4vw,48px); padding-inline: var(--pt-gutter); display:flex; justify-content:center; }
.pt-gallery-pagination ul.page-numbers{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.pt-gallery-pagination .page-numbers li{ margin:0; }
.pt-gallery-pagination .page-numbers a,
.pt-gallery-pagination .page-numbers span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding-inline:10px;
	border:1px solid var(--pt-line); color: var(--pt-text);
	text-decoration:none; font-size:.9rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pt-gallery-pagination .page-numbers a:hover{ border-color: var(--pt-accent); color: var(--pt-accent); }
.pt-gallery-pagination .page-numbers .current{ background: var(--pt-accent); border-color: var(--pt-accent); color:#fff; }
.pt-gallery-pagination .page-numbers .dots{ border:none; }

/* Lightbox overlay (one shared instance per grid -- see
   assets/js/portfolio-lightbox.js). Hidden by default; JS toggles
   .is-open and swaps the <img> src/alt on each click. */
.pt-lightbox{
	position:fixed; inset:0; z-index:9000;
	background: rgba(15,15,15,.92);
	display:flex; align-items:center; justify-content:center;
	padding: clamp(20px,5vw,60px);
	opacity:0; visibility:hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.pt-lightbox.is-open{
	opacity:1; visibility:visible;
	transition: opacity .25s ease, visibility 0s linear 0s;
}
body.pt-lightbox-open{ overflow:hidden; }
.pt-lightbox__inner{ position:relative; max-width:100%; max-height:100%; }
.pt-lightbox__img{
	display:block; max-width:100%; max-height:90vh; width:auto; height:auto;
	margin-inline:auto; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.pt-lightbox__close{
	position:absolute; top: clamp(10px,3vw,28px); right: clamp(10px,3vw,28px); z-index:2;
	width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
	background: rgba(0,0,0,.35); color:#fff; font-size:1.7rem; line-height:1;
	display:flex; align-items:center; justify-content:center; cursor:pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
.pt-lightbox__close:hover{ background: rgba(0,0,0,.6); border-color:#fff; }
@media (prefers-reduced-motion: reduce){
	.pt-lightbox{ transition:none; }
}

.pt-feature-card{ }
.pt-feature-card h3{ margin-bottom:.6em; }
.pt-feature-card ul li{ padding:.4em 0; border-bottom:1px solid var(--pt-line); }
.pt-feature-card ul li a:hover{ color: var(--pt-accent); }

/* =========================================================
   8a-ii. REAL WEDDINGS SEARCH + SORT (Real Weddings page template)
   A plain GET form -- no JS framework, no page-builder widget -- so
   search results and sort order are both shareable/bookmarkable URLs.
   The sort dropdown submits itself on change; the search box still has
   a real Search button so it also works with JS off.
   ========================================================= */
.pt-weddings-filter{
	display:flex; flex-wrap:wrap; align-items:center; gap:12px;
	margin-bottom: clamp(28px,4vw,44px);
}
.pt-weddings-filter__search{ flex:1 1 240px; min-width:0; }
.pt-weddings-filter__search input[type="search"]{
	width:100%; padding:.75em 1em; border:1px solid var(--pt-line);
	border-radius: var(--pt-radius); background:#fff; font: inherit; color: var(--pt-text);
}
.pt-weddings-filter__sort select{
	padding:.75em 1em; border:1px solid var(--pt-line); border-radius: var(--pt-radius);
	background:#fff; font: inherit; color: var(--pt-text); max-width:100%;
}
.pt-weddings-filter__clear{
	font-size:.82rem; letter-spacing:.04em; color: var(--pt-text-muted); text-decoration:underline;
	white-space:nowrap;
}
.pt-weddings-filter__clear:hover{ color: var(--pt-accent); }

/* =========================================================
   8b. REAL WEDDINGS GRID (Real Weddings page template)
   Each tile is a single link (or a plain div if no Gallery Link is set)
   straight out to that couple's own gallery -- unlike the Portfolio
   grid above, there's no in-page lightbox here, since the whole point
   is sending visitors on to the full gallery.
   ========================================================= */
.pt-weddings-grid{
	display:grid; gap: clamp(20px, 3vw, 36px);
	grid-template-columns: repeat(2, 1fr);
}
@media(min-width:640px){ .pt-weddings-grid{ grid-template-columns: repeat(3, 1fr); } }
@media(min-width:1024px){ .pt-weddings-grid{ grid-template-columns: repeat(4, 1fr); } }

.pt-weddings-grid__item{ display:block; }
.pt-weddings-grid__photo{
	position:relative;
	aspect-ratio: 4 / 5;
	overflow:hidden;
	background: var(--pt-cream-2);
	margin-bottom: .9em;
}
.pt-weddings-grid__photo img{
	width:100%; height:100%; object-fit:cover; display:block;
	transition: transform .5s ease;
}
.pt-weddings-grid__item:hover .pt-weddings-grid__photo img{ transform: scale(1.05); }

.pt-weddings-grid__lock{
	position:absolute; top:10px; right:10px; z-index:2;
	display:inline-flex; align-items:center; justify-content:center;
	width:30px; height:30px; border-radius:50%;
	background: rgba(27,27,27,.65); color:#fff;
}
.pt-weddings-grid__lock svg{ width:14px; height:14px; }

.pt-weddings-grid__name{
	font-family: var(--pt-font-display);
	font-size:1.15rem; margin:0 0 .2em;
	transition: color .2s ease;
}
a.pt-weddings-grid__item:hover .pt-weddings-grid__name{ color: var(--pt-accent); }
.pt-weddings-grid__date{
	margin:0; font-size:.82rem; letter-spacing:.05em; color: var(--pt-text-muted);
}
.pt-weddings-grid__venue{
	margin:.15em 0 0; font-size:.82rem; letter-spacing:.05em; color: var(--pt-text-muted);
}

/* =========================================================
   8c. REAL WEDDING SINGLE PAGE (single-pt_real_wedding.php)
   ========================================================= */
.pt-wedding-single{
	display:grid; grid-template-columns: 1fr; gap: clamp(28px,4vw,56px);
	align-items:start;
}
@media(min-width:780px){
	.pt-wedding-single{ grid-template-columns: 1.1fr 1fr; }
}

.pt-wedding-single__main{
	/* Height is fixed (inline style, from Customize > Site-Wide > "Real
	   Weddings" > "Main Photo Height") and never changes as photos are
	   swapped -- this value here is only a fallback for the rare case
	   the inline style is missing. object-fit:contain on the <img> below
	   is what makes this safe: a portrait photo shrinks to fit inside
	   this fixed box instead of being cropped or stretching it taller.
	   No background colour here on purpose -- a portrait photo that
	   doesn't fill the box just shows the page behind it, not a
	   coloured bar down either side. */
	position:relative;
	height: 550px;
	overflow:hidden; border-radius:2px;
}
.pt-wedding-single__main img{
	width:100%; height:100%; object-fit:contain; display:block;
}

.pt-wedding-single__nav{
	position:absolute; top:50%; transform:translateY(-50%);
	width:40px; height:40px; padding:0; border:none; border-radius:50%;
	background: rgba(27,27,27,.55); color:#fff; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	opacity:0; transition: opacity .2s ease, background-color .2s ease;
}
.pt-wedding-single__nav svg{ width:20px; height:20px; }
.pt-wedding-single__main:hover .pt-wedding-single__nav,
.pt-wedding-single__nav:focus-visible{ opacity:1; }
.pt-wedding-single__nav:hover{ background: rgba(27,27,27,.8); }
.pt-wedding-single__nav--prev{ left:12px; }
.pt-wedding-single__nav--next{ right:12px; }
@media(hover:none){
	/* No hover on touch -- always show the arrows rather than hiding a
	   control behind a gesture that doesn't exist there. */
	.pt-wedding-single__nav{ opacity:1; }
}

.pt-wedding-single__thumbs{
	display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;
}
.pt-wedding-single__thumb{
	width:72px; height:72px; padding:0; border-radius:2px; overflow:hidden;
	border:2px solid transparent; background:none; cursor:pointer; flex-shrink:0;
	opacity:.7; transition: opacity .2s ease, border-color .2s ease;
}
.pt-wedding-single__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pt-wedding-single__thumb:hover{ opacity:1; }
.pt-wedding-single__thumb.is-active{ opacity:1; border-color: var(--pt-accent); }

.pt-wedding-single__name{
	font-family: var(--pt-font-display); margin:0 0 .4em;
}

.pt-wedding-single__meta{
	/* One item per line (Wedding Date, Venue, Package Booked, Images
	   Received) rather than side by side, so a longer venue or package
	   name never crowds its neighbours or wraps oddly. */
	display:flex; flex-direction:column; gap: 10px;
	margin: 0 0 1.8em; font-size:.9rem; letter-spacing:.03em; color: var(--pt-text-muted);
}
.pt-wedding-single__meta-item{ display:inline-flex; align-items:center; gap:8px; }
.pt-wedding-single__meta-item svg{ width:16px; height:16px; flex-shrink:0; }
.pt-wedding-single__meta-item a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.pt-wedding-single__meta-item a:hover{ color: var(--pt-accent); }

.pt-wedding-single__story p:first-of-type{ margin-top:0; }

.pt-wedding-single__accent{
	margin-top: 2em; aspect-ratio: 3/2; overflow:hidden;
	background: var(--pt-cream-2); border-radius:2px;
}
.pt-wedding-single__accent img{ width:100%; height:100%; object-fit:cover; display:block; }

.pt-wedding-single__cta{ margin-top: 2em; }
.pt-wedding-single__cta .pt-btn svg{ width:14px; height:14px; margin-left:6px; vertical-align:-2px; }

.pt-wedding-single__back{ margin-top: clamp(40px,6vw,70px); }

.pt-wedding-cta{ text-align:center; }
.pt-wedding-cta__inner{ max-width: 640px; }
.pt-wedding-cta__message{ margin:0 0 .8em; }
.pt-wedding-cta__btn{ margin: 0 0 1.6em; }
.pt-wedding-cta__contact{ margin: 0 0 1.6em; font-size:.95rem; }
.pt-wedding-cta__contact a:hover{ color: var(--pt-accent-light); }
.pt-wedding-cta__sep{ margin: 0 .6em; opacity:.6; }
.pt-wedding-cta .pt-social{ justify-content:center; }

/* =========================================================
   9. TEAM GRID
   ========================================================= */
.pt-team-list{ display:flex; flex-direction:column; gap: clamp(50px,7vw,90px); }
.pt-team-member{
	display:grid; grid-template-columns: 1fr; gap: clamp(24px,4vw,50px);
	padding-bottom: clamp(50px,7vw,90px); border-bottom:1px solid var(--pt-line);
}
.pt-team-member:last-child{ border-bottom:0; padding-bottom:0; }
@media(min-width:780px){
	.pt-team-member{ grid-template-columns: minmax(240px,360px) 1fr; align-items:start; }
}
.pt-team-member__photo{ aspect-ratio: 4/5; overflow:hidden; background: var(--pt-cream-2); }
.pt-team-member__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pt-team-member__meta{ margin:0 0 1.2em; }
.pt-team-member__meta-row{
	display:flex; gap:.5em; flex-wrap:wrap; padding:.5em 0; border-bottom:1px solid var(--pt-line);
}
.pt-team-member__meta-row dt{
	font-family: var(--pt-font-display); font-style:italic; font-size:1rem; margin:0; min-width:110px;
}
.pt-team-member__meta-row dd{ margin:0; color: var(--pt-text-muted); }
.pt-team-member__bio{ margin-bottom:1.2em; line-height:1.75; }
.pt-team-member__bio p:last-child{ margin-bottom:0; }
.pt-team-member__fun-fact{ font-size:.9rem; color: var(--pt-text-muted); margin-bottom:1em; }
.pt-team-member__instagram a{
	display:inline-block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
	color: var(--pt-text); border-bottom:1px solid var(--pt-line); padding-bottom:.15em;
}
.pt-team-member__instagram a:hover{ color: var(--pt-accent); border-color: var(--pt-accent); }

/* =========================================================
   10. FAQ ACCORDION
   ========================================================= */
.pt-faq{ max-width:820px; margin-inline:auto; }
.pt-faq-item{ border-bottom:1px solid var(--pt-line); }
.pt-faq-item__q{
	width:100%; text-align:left; background:none; border:0; cursor:pointer;
	padding: 1.2em 2.4em 1.2em 0; font-family: var(--pt-font-display); font-size:1.05rem;
	position:relative;
}
.pt-faq-item__q-heading{
	/* The question is now wrapped in a real <h3> for SEO/accessibility
	   (see template-faq.php) -- this neutralises the sitewide h1-h5 rule's
	   margin/font so the accordion looks exactly as it did when the
	   button had no heading wrapper. */
	margin:0; font-size:inherit; font-weight:inherit; line-height:inherit;
	letter-spacing:inherit; font-family:inherit;
}
.pt-faq-item__q::after{
	content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.3rem;
}
.pt-faq-item.is-open .pt-faq-item__q::after{ content:"\2212"; }
.pt-faq-item__a{ display:none; padding-bottom:1.4em; color: var(--pt-text-muted); }
.pt-faq-item.is-open .pt-faq-item__a{ display:block; }

.pt-process{ counter-reset: step; }
.pt-process__step{ counter-increment: step; position:relative; padding-left:3.2em; margin-bottom:2.4em; }
.pt-process__step::before{
	content: counter(step); position:absolute; left:0; top:0;
	width:2.2em; height:2.2em; border:1px solid var(--pt-line-light); border-radius:50%;
	display:flex; align-items:center; justify-content:center; font-family: var(--pt-font-display);
}

/* =========================================================
   10b. PRICING TABLE (Services page template)
   Packages sit side-by-side as columns; every row (badge, image,
   name, price, description, features, button) lines up across all
   columns via CSS subgrid, even though each package's own feature
   list is independent in length/content. Falls back to a plain
   flex/stacked layout (still fully usable) in browsers without
   subgrid support.
   ========================================================= */
.pt-pricing-table-wrap{ margin-top:2.5em; overflow-x:auto; }
.pt-pricing-table{
	display:flex; align-items:stretch; justify-content:center; gap:0;
	border:1px solid var(--pt-line); border-radius: var(--pt-radius); overflow:hidden;
	background: var(--pt-white);
}
@supports (grid-template-rows: subgrid){
	.pt-pricing-table{
		display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,300px);
		grid-template-rows: auto auto auto auto auto 1fr auto;
	}
	.pt-pricing-table__col{
		display:grid; grid-template-rows: subgrid; grid-row: 1 / -1;
	}
	/* The stats card doesn't share the other columns' image/price/features
	   row structure, so it opts out of subgrid and just centers its own
	   content vertically within the row span -- see the flexbox override
	   below, which applies here too since display:flex wins over the
	   display:grid set above (same specificity, declared later). */
}
.pt-pricing-table__col{
	position:relative; flex:1 1 240px; min-width:220px; max-width:300px;
	border-left:1px solid var(--pt-line); padding: 2em 1.6em; text-align:center;
}
.pt-pricing-table__col:first-child{ border-left:0; }
.pt-pricing-table__col--highlighted{ background: var(--pt-cream); }
.pt-pricing-table__badge-row{ min-height:1.6em; margin-bottom:.6em; }
.pt-pricing-table__badge{
	display:inline-block; background: var(--pt-accent); color:#fff; font-size:.7rem;
	text-transform:uppercase; letter-spacing:.1em; padding:.4em 1em; border-radius:999px;
	white-space:nowrap;
}
.pt-pricing-table__image{ margin: 0 0 1.4em; overflow:hidden; border-radius: var(--pt-radius); }
.pt-pricing-table__image img{ width:100%; height:auto; display:block; }
.pt-pricing-table__image--empty{ min-height:1px; }
.pt-pricing-table__name{ margin-bottom:.4em; }
.pt-pricing-table__price{
	font-family: var(--pt-font-display); font-size:2rem; font-style:italic; color: var(--pt-accent);
	min-height:1.4em; margin-bottom:1em;
}
.pt-pricing-table__note{
	display:block; font-family: var(--pt-font-body); font-style:normal; font-size:.75rem;
	text-transform:uppercase; letter-spacing:.08em; color: var(--pt-text-muted); margin-top:.3em;
}
.pt-pricing-table__desc{ color: var(--pt-text-muted); margin-bottom:1em; }
.pt-pricing-table__desc:empty{ display:none; }
.pt-pricing-table__features{ text-align:left; margin-bottom:1.6em; }
.pt-pricing-table__features ul{ margin:0; }
.pt-pricing-table__features li{
	position:relative; padding: .5em 0 .5em 1.6em; border-bottom:1px solid var(--pt-line); font-size:.92rem;
}
.pt-pricing-table__features li:last-child{ border-bottom:0; }
.pt-pricing-table__features li::before{
	content:"\2713"; position:absolute; left:0; top:.5em; color: var(--pt-accent); font-weight:600;
}
.pt-pricing-table__cta{ align-self:end; }
.pt-pricing-table__cta .pt-btn{ width:100%; }
.pt-price-note{ color: var(--pt-text-muted); font-size:.85rem; }

/* "By the Numbers" -- a 4th pricing-table column, same size as the
   package cards next to it (capped above via max-width so it doesn't
   force them to shrink), styled dark so it reads as a distinct,
   standout stat rather than a fourth package. Text sits aligned to the
   top of the card's full height (justify-content:flex-start) rather
   than centered -- deliberately different from how a plain vertical
   center would look once the card holds only one or two short lines,
   in both the subgrid and flexbox layouts. */
.pt-pricing-table__col.pt-pricing-table__col--stats{
	display:flex; flex-direction:column; justify-content:flex-start;
	background: var(--pt-dark); color: var(--pt-cream); border-left:0;
}
.pt-package-stats{ width:100%; }
.pt-package-stats__eyebrow{
	display:inline-block; text-transform:uppercase; letter-spacing:.14em;
	font-size:.72rem; font-weight:600; color: var(--pt-accent-light); margin-bottom:.7em;
}
.pt-package-stats__heading{ color: var(--pt-cream); margin-bottom:1.2em; }
.pt-package-stats__list{
	list-style:none; margin:0 0 1.4em; padding:0;
	display:flex; flex-direction:column; gap:1.1em;
}
.pt-package-stats__item{ padding-bottom:1.1em; border-bottom:1px solid var(--pt-line-light); }
.pt-package-stats__item:last-child{ border-bottom:0; padding-bottom:0; }
.pt-package-stats__name{
	display:block; font-family: var(--pt-font-display); font-style:italic;
	font-size:1rem; color: var(--pt-cream); margin-bottom:.55em;
}
.pt-package-stats__figures{ display:flex; justify-content:center; gap:1.5em; flex-wrap:wrap; }
.pt-package-stats__figure{ display:flex; flex-direction:column; align-items:center; }
.pt-package-stats__num{
	font-family: var(--pt-font-display); font-style:italic; font-size:1.7rem;
	color: var(--pt-accent-light); line-height:1.1; font-variant-numeric: tabular-nums;
}
.pt-package-stats__label{
	font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color: var(--pt-cream); opacity:.75;
}
.pt-package-stats__footnote{ font-size:.75rem; color: var(--pt-cream); opacity:.6; margin:1.4em 0 0; }

/* Progressive-enhancement animation: package-stats.js is what adds
   .pt-package-stats--js (on load) and .is-inview (once the card scrolls
   into view). Because that class only ever gets added by JS, a visitor
   with JS disabled -- or a search engine, or `prefers-reduced-motion` --
   always sees every figure at full opacity immediately; nothing here is
   ever hidden by CSS alone. */
.pt-package-stats--js .pt-package-stats__item{ opacity:0; transform: translateY(14px); }
.pt-package-stats--js.is-inview .pt-package-stats__item{
	opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease;
}
.pt-package-stats--js.is-inview .pt-package-stats__item:nth-child(2){ transition-delay:.12s; }
.pt-package-stats--js.is-inview .pt-package-stats__item:nth-child(3){ transition-delay:.24s; }
.pt-package-stats--js.is-inview .pt-package-stats__item:nth-child(4){ transition-delay:.36s; }
.pt-package-stats--js.is-inview .pt-package-stats__item:nth-child(5){ transition-delay:.48s; }

@media(max-width:640px){
	.pt-pricing-table{ flex-direction:column; }
	.pt-pricing-table__col{ border-left:0; border-top:1px solid var(--pt-line); max-width:none; }
	.pt-pricing-table__col:first-child{ border-top:0; }
	.pt-pricing-table__col--stats{ border-top:1px solid var(--pt-line-light); }
	@supports (grid-template-rows: subgrid){
		.pt-pricing-table{ display:block; }
		.pt-pricing-table__col{ display:block; }
	}
}

@media (prefers-reduced-motion: reduce){
	.pt-package-stats--js .pt-package-stats__item{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   11. FORMS
   ========================================================= */
.pt-form{ display:grid; gap:1.1em; }
.pt-form__row{ display:grid; gap:1.1em; grid-template-columns:1fr; }
@media(min-width:640px){ .pt-form__row--2{ grid-template-columns:1fr 1fr; } }
.pt-field label{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.5em; color: var(--pt-text-muted); }
.pt-field__required{ color: var(--pt-accent); }
.pt-field input, .pt-field select, .pt-field textarea{
	width:100%; padding:.9em 1em; border:1px solid var(--pt-line); background: var(--pt-white);
	border-radius: var(--pt-radius); font-family:inherit; color:inherit;
}
.pt-field input[type="date"]{ appearance:none; -webkit-appearance:none; }
.pt-field textarea{ min-height:140px; resize:vertical; }
.pt-field--checkbox{ display:flex; align-items:center; gap:.6em; }
.pt-field--checkbox input{ width:auto; }
.pt-form-notice{ padding:1em 1.2em; border-radius: var(--pt-radius); margin-bottom:1.2em; font-size:.9rem; }
.pt-form-notice--success{ background:#e9f3e9; color:#2e5a2e; }
.pt-form-notice--error{ background:#fbeaea; color:#8a2c2c; }

/* Thank You page (template-thank-you.php) -- just the heading/message/
   button block; everything around it reuses existing section/container
   classes shared with every other page. */
.pt-thankyou__message{ color: var(--pt-text-muted); margin:0 0 1.6em; }
.pt-thankyou__message p:last-child{ margin-bottom:0; }

/* honeypot */
.pt-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

/* =========================================================
   12. CTA BANNER
   ========================================================= */
.pt-cta{
	position:relative; color:#fff; text-align:center; overflow:hidden;
	min-height: 60vh; display:flex; align-items:center; justify-content:center;
}
.pt-cta__media{ position:absolute; inset:0; }
.pt-cta__media img{ width:100%; height:100%; object-fit:cover; }
.pt-cta__media::after{ content:""; position:absolute; inset:0; background: rgba(15,15,15,.55); }
.pt-cta__content{ position:relative; z-index:2; max-width:820px; padding: 0 var(--pt-gutter); }
.pt-cta h2{ color:#fff; }

/* =========================================================
   12b. FULL-BLEED IMAGE SECTION (e.g. "Our Story")
   Edge-to-edge background photo with a side scrim so overlaid text
   stays readable. Unlike .pt-cta this is left/right aligned rather
   than centered, and has no button by default.
   ========================================================= */
.pt-fullbleed{
	position:relative; overflow:hidden; color:#fff;
	min-height: 72vh; display:flex; align-items:center;
	/* Default overlay strength; set inline per-instance via the
	   Customizer's "overlay darkness" range control, e.g.
	   style="--pt-fullbleed-overlay: .55" -- see morganhesketh_opt(
	   'pt_team_overlay_opacity' ) in template-parts/home/teamteaser.php. */
	--pt-fullbleed-overlay: .55;
}
.pt-fullbleed__media{ position:absolute; inset:0; }
.pt-fullbleed__media img{ width:100%; height:100%; object-fit:cover; }
.pt-fullbleed__media::after{
	content:""; position:absolute; inset:0;
	background: linear-gradient(90deg,
		rgba(15,15,15, var(--pt-fullbleed-overlay)) 0%,
		rgba(15,15,15, calc(var(--pt-fullbleed-overlay) * .62)) 45%,
		rgba(15,15,15, calc(var(--pt-fullbleed-overlay) * .09)) 75%);
}
.pt-fullbleed__content{ position:relative; z-index:2; max-width:560px; padding: 48px var(--pt-gutter); }
.pt-fullbleed h2{ color:#fff; }
.pt-fullbleed--align-right{ justify-content:flex-end; }
.pt-fullbleed--align-right .pt-fullbleed__media::after{
	background: linear-gradient(270deg,
		rgba(15,15,15, var(--pt-fullbleed-overlay)) 0%,
		rgba(15,15,15, calc(var(--pt-fullbleed-overlay) * .62)) 45%,
		rgba(15,15,15, calc(var(--pt-fullbleed-overlay) * .09)) 75%);
}

/* =========================================================
   13. FOOTER
   ========================================================= */
.pt-footer{ background: var(--pt-dark); color: var(--pt-cream); }
.pt-footer__top{ padding-block: clamp(48px,7vw,90px); }
.pt-footer__grid{ display:grid; gap: clamp(28px,4vw,60px); grid-template-columns:1fr; }
@media(min-width:800px){ .pt-footer__grid{ grid-template-columns: 1.2fr 1fr 1fr; } }
.pt-footer h4{ font-family: var(--pt-font-display); font-style:italic; color: var(--pt-cream); margin-bottom:1em; }
.pt-footer ul li{ margin-bottom:.6em; }
.pt-footer a:hover{ color: var(--pt-accent-light); }
.pt-footer__name{
	font-family: var(--pt-font-display); font-style:italic; font-size:1.4rem;
	color: var(--pt-cream); margin-bottom:.6em;
}
.pt-footer__bottom{
	border-top:1px solid var(--pt-line-light); padding-block:1.4em; font-size:.78rem;
	display:flex; justify-content:space-between; flex-wrap:wrap; gap:1em; color: var(--pt-accent-light);
}

/* =========================================================
   14. BLOG
   ========================================================= */
.pt-post-grid{ display:grid; gap: clamp(24px,3vw,48px); grid-template-columns:1fr; }
@media(min-width:700px){ .pt-post-grid{ grid-template-columns: 1fr 1fr; } }
@media(min-width:1100px){ .pt-post-grid{ grid-template-columns: repeat(3,1fr); } }
.pt-post-card__thumb{ aspect-ratio: 4/3; overflow:hidden; margin-bottom:1.1em; background:var(--pt-cream-2); }
.pt-post-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pt-post-card:hover .pt-post-card__thumb img{ transform:scale(1.05); }
.pt-post-card__label{ text-transform:uppercase; font-size:.7rem; letter-spacing:.14em; color: var(--pt-accent); margin-bottom:.6em; display:block; }
.pt-post-card h3{ margin-bottom:.5em; }
.pt-pagination{ display:flex; justify-content:space-between; margin-top:3em; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; }

.pt-single-content{ max-width: 760px; margin-inline:auto; }
.pt-single-content img{ border-radius: var(--pt-radius); margin-block:1.4em; }
.pt-single-content h2{ margin-top:1.4em; }
.pt-single-meta{ text-transform:uppercase; font-size:.75rem; letter-spacing:.1em; color: var(--pt-text-muted); margin-bottom:1.5em; }

.pt-sidebar-block + .pt-sidebar-block{ margin-top:2.4em; }
.pt-search-form{ display:flex; }
.pt-search-form input[type="search"]{ flex:1; padding:.8em 1em; border:1px solid var(--pt-line); }
.pt-search-form button{ padding:.8em 1.2em; background:var(--pt-dark); color:#fff; border:0; cursor:pointer; }

/* =========================================================
   15. UTILITIES / WP CORE
   ========================================================= */
.alignwide{ margin-inline: calc(var(--pt-gutter) * -1); }
.alignfull{ width:100vw; margin-left:50%; transform:translateX(-50%); }
.wp-caption-text{ font-size:.8rem; color:var(--pt-text-muted); text-align:center; margin-top:.5em; }
.pt-skip-link{
	position:absolute; left:-999px; top:auto; background:#fff; padding:1em; z-index:999;
}
.pt-skip-link:focus{ left:1em; top:1em; }

/* =========================================================
   16. OFFER BAR
   Sitewide, fixed to the bottom of the screen (Customize > Site-Wide
   > "Offer Bar"). Closing it sets a flag in localStorage (see
   assets/js/main.js) so it stays closed on later visits -- that flag
   is checked before paint via the inline snippet output right after
   this element, to avoid a flash of the bar for returning visitors
   who already dismissed it.
   ========================================================= */
.pt-offer-bar{
	position:fixed; left:0; right:0; bottom:0; z-index:80;
	background: var(--pt-offer-bar-bg); color: var(--pt-offer-bar-color);
	box-shadow: 0 -2px 12px rgba(0,0,0,.18);
	transition: transform .3s ease, opacity .3s ease;
}
.pt-offer-bar.is-dismissed{ transform: translateY(100%); opacity:0; pointer-events:none; }
.pt-offer-bar__inner{
	max-width: var(--pt-container); margin-inline:auto; padding: .9em var(--pt-gutter);
	display:flex; align-items:center; justify-content:center; gap:1.4em; flex-wrap:wrap;
	position:relative;
}
.pt-offer-bar__text{ margin:0; font-size:.92rem; text-align:center; }
.pt-offer-bar__btn{ flex-shrink:0; }
.pt-offer-bar__close{
	position:absolute; right:0; top:50%; transform:translateY(-50%);
	background:transparent; border:0; color:inherit; font-size:1.6rem; line-height:1;
	cursor:pointer; padding:.2em .5em; opacity:.75;
}
.pt-offer-bar__close:hover{ opacity:1; }
@media(max-width:640px){
	.pt-offer-bar__inner{ padding-right: 2.6em; }
	.pt-offer-bar__close{ right:.4em; }
}