/*
Theme Name: PhotoTrips
Theme URI: https://phototrips.co
Author: PhotoTrips
Author URI: https://phototrips.co
Description: A clean, fast, editorial block theme (Full Site Editing) for PhotoTrips — the SEO & content layer for a local-photographer marketplace. Homepage, blog and static/legal pages are fully editable in the WordPress editor. Marketplace (booking, checkout) lives in a separate Bubble app. Rank Math compatible.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phototrips
Tags: full-site-editing, block-patterns, blog, custom-colors, custom-logo, editor-style, featured-images, block-styles, wide-blocks, threaded-comments
*/

/*
 * Nearly all styling is handled by theme.json (design tokens) and per-block
 * settings inside templates/parts/patterns. This file holds only the small
 * amount of CSS that the block system cannot express: hover transitions,
 * sticky header behaviour, horizontal scroll rows, accordions and a few
 * editorial refinements. Keep it lean.
 */

/* ---------- Palette slug alias ----------------------------------------------
   The hairline colour used to be the palette slug `border`. That slug had to be
   renamed to `line`, because WordPress generates a text-colour utility class for
   every palette entry — `.has-border-color{color:… !important}` — and that name
   collides head-on with the class WordPress ALSO adds to any block that has a
   border colour. Every bordered block therefore had its text painted #E2E8F0,
   which is why FAQ questions rendered nearly invisible.

   Page content already saved in the database still refers to the old custom
   property, so it is kept here as an alias. Do not use it in new code — use
   var(--wp--preset--color--line).
   -------------------------------------------------------------------------- */
:root { --wp--preset--color--border: var(--wp--preset--color--line); }

/* ---------- Base ---------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	/* The header is position:fixed (see .pt-header), so reserve its height here.
	   nav.js refines this to the exact measured height on load/resize. */
	padding-top: 72px;
}

/* The HTML [hidden] attribute must always win, even when a class sets `display`
   (equal specificity would otherwise let the class show it). This is what makes
   the JS-toggled accordions / drawer panels actually collapse. */
[hidden] { display: none !important; }

/* Skip-to-content link: off-screen until focused (keyboard/AT users). */
.pt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	border-radius: 0 0 12px 0;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.pt-skip-link:focus {
	left: 0;
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Smooth transitions for interactive brand elements */
a,
.wp-block-button__link,
.wp-element-button {
	transition: background-color .18s ease, color .15s ease, border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}

/* ---------- Fixed, translucent site header ---------- */
.pt-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--line);
	/* Match the site-wide root padding so the bar lines up with content sections */
	padding-left: 36px;
	padding-right: 36px;
	transition: transform .28s ease;
}
/* Auto-hide on scroll down, reappear on scroll up (toggled by nav.js). */
.pt-header.pt-header--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
	.pt-header { transition: none; }
}
/* Sit below the WordPress admin bar for logged-in users, so the sticky header
   stays visible (and its hide/show is observable) instead of hiding behind it. */
.admin-bar .pt-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .pt-header { top: 46px; } }
/* Header bar follows the site-wide section rule: max 1440, centered.
   Flex is declared explicitly (not left to the block layout engine) so the
   header renders identically on block templates AND the classic landing
   template, where per-block layout CSS is not reliably emitted. */
.pt-header > .wp-block-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Section fill ----------
   Section wrappers are alignwide (max 1440). Their inner content (grids, cards,
   covers, queries) must fill that band — not shrink to the 720px content width
   that a constrained layout imposes. This keeps every section wide, not squeezed.
   Applies on the home, blog, single and static/pattern pages (where sections sit
   inside post-content, not directly under main). */
.wp-block-group.alignwide > :where(:not(.alignfull):not(.alignleft):not(.alignright)) {
	max-width: none;
}

/* ---------- Full-bleed section flow ----------
   Every page section carries its own vertical padding, so full-bleed bands must
   butt straight up against each other and against the header. theme.json sets a
   global 26px blockGap, and it leaks in at two places the templates can't reach:

     1. between the header template part and <main> (that gap is emitted at the
        .wp-site-blocks level, so <main>'s own blockGap:0 does not govern it);
     2. between sections rendered inside wp:post-content, which runs its own
        constrained layout with the GLOBAL gap — <main>'s blockGap:0 stops at the
        post-content boundary.

     3. between <main> and the footer — same .wp-site-blocks-level gap, which
        left a strip of page background between the last section and the navy
        footer. NOTE: the target is `.wp-block-template-part`, not `.pt-footer`.
        WordPress wraps a template part in its own element, so the DOM is
        `.wp-site-blocks > footer.wp-block-template-part > footer.pt-footer` —
        the gap lands on the WRAPPER, and a `> .pt-footer` selector never
        matches. Verified against the rendered HTML, not assumed.
        The footer has no margin of its own in this theme, so zeroing this is
        safe; the sections' own bottom padding does the spacing.

   These showed up as a strip of page background above and below every hero, and
   again right above the footer. Scoped to adjacent full-bleed siblings on
   purpose: post paragraphs and figures inside .pt-article-body must keep their
   normal block spacing. */
#pt-content { margin-block-start: 0; }
.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; }
#pt-content > :first-child,
#pt-content > .wp-block-post-content > :first-child { margin-block-start: 0; }
#pt-content > .alignfull + .alignfull,
#pt-content > .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* ==========================================================================
   Header navigation — dynamic Destinations mega-menu + mobile drawer
   ========================================================================== */
/* 3-zone header bar (8-pt grid): logo left · menu centred · account right. */
.pt-nav-bar {
	max-width: 1440px;
	margin-inline: auto;
	min-height: 72px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding-block: 8px;
}
.pt-nav-left { justify-self: start; display: flex; align-items: center; gap: 16px; }
.pt-nav-center { justify-self: center; display: flex; align-items: center; gap: 24px; }
.pt-nav-right { justify-self: end; display: flex; align-items: center; gap: 16px; }
.pt-logo { display: inline-flex; align-items: center; }
.pt-logo img,
.pt-logo .custom-logo { display: block; height: 32px; width: auto; max-width: 160px; }
.pt-logo-text {
	font-family: var(--wp--preset--font-family--rethink);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}
/* "My account" — the single button at the right of the bar.
   OUTLINE, NEVER SOLID: the solid royal treatment is reserved for "Book now" on
   an experience page, and two solid blue buttons on one screen would compete for
   the same attention. Identical whether or not the visitor is signed in, because
   WordPress has no way to know — the session lives in the Bubble app. */
.pt-nav-account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	white-space: nowrap;
	/* This theme has no global border-box, so without this the 2px border sits
	   OUTSIDE the declared size and the mobile circle comes out 46px instead of
	   the 42px the design asks for. */
	box-sizing: border-box;
	padding: 9px 18px;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 50px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
/* Border and label both go royal. Nothing else moves — the button means the
   same thing at all times, so it should not appear to change state. */
.pt-nav-account:hover,
.pt-nav-account:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.pt-nav-account svg { width: 18px; height: 18px; flex: none; }
.pt-nav-link {
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 16px;
	font-weight: 500;
	/* Near-black rather than the muted slate: at small sizes the slate read as a
	   washed-out blue against the white bar. Not pure #000 — a hair off black
	   is easier on the eye at small sizes and still unmistakably not blue. */
	color: #1A1A1A;
	text-decoration: none;
}
.pt-nav-link:hover { color: var(--wp--preset--color--primary); }
.pt-nav-cta {
	flex: none;
	white-space: nowrap;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: var(--wp--custom--radius--md);
	padding: 11px 18px;
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}
.pt-nav-cta:hover { background: var(--wp--preset--color--primary); color: #fff; }

/* The Log in / Sign up pair that used to sit here is gone: it was replaced by
   the single "My account" button above. See inc/nav.php for why one destination
   rather than two. */

/* Mega trigger */
.pt-mega { position: relative; }
.pt-mega-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 16px;
	font-weight: 500;
	/* Matches .pt-nav-link — the four items in the bar must read as one set. */
	color: #1A1A1A;
	white-space: nowrap;
}
.pt-mega-trigger:hover,
.pt-mega-trigger[aria-expanded="true"] { color: var(--wp--preset--color--primary); }
.pt-mega-trigger .pt-chev { width: 11px; height: 11px; transition: transform .18s ease; }
.pt-mega-trigger[aria-expanded="true"] .pt-chev { transform: rotate(180deg); }

/* Mega panel */
.pt-mega-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 90; padding-top: 16px; }
.pt-mega-card {
	display: flex;
	width: 560px;
	max-width: calc(100vw - 40px);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--menu);
	overflow: hidden;
	animation: ptFade .16s ease;
}
@keyframes ptFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pt-mega-side {
	width: 204px;
	flex: none;
	background: var(--wp--preset--color--surface-alt);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-right: 1px solid var(--wp--preset--color--border-light);
}
.pt-mega-label {
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--faint);
	padding: 4px 12px 8px;
}
.pt-mega-country {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	color: #3E4C59;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background .14s ease, color .14s ease;
}
.pt-mega-country-name { display: inline-flex; align-items: center; gap: 11px; }
.pt-mega-ic { display: inline-flex; width: 16px; color: var(--wp--preset--color--primary); }
.pt-mega-ic svg { width: 13px; height: 13px; }
.pt-mega-country .pt-chev-r { width: 10px; height: 10px; opacity: 0.6; color: var(--wp--preset--color--primary); }
.pt-mega-country:hover { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); }
.pt-mega-country[aria-selected="true"] { background: var(--wp--preset--color--navy); color: #fff; }
.pt-mega-country[aria-selected="true"] .pt-mega-ic,
.pt-mega-country[aria-selected="true"] .pt-chev-r { color: #fff; opacity: 0.85; }

.pt-mega-main { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.pt-mega-country-panel[hidden] { display: none; }
.pt-mega-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-mega-title {
	font-family: var(--wp--preset--font-family--rethink);
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--navy);
}
.pt-mega-viewall {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
}
.pt-mega-viewall .pt-arr { width: 10px; height: 10px; }
.pt-mega-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.pt-mega-city {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 11px;
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 14px;
	font-weight: 500;
	color: #3E4C59;
	transition: background .14s ease, color .14s ease;
}
.pt-mega-city:hover { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); }
.pt-mega-city-count { font-size: 11.5px; font-weight: 400; color: var(--wp--preset--color--faint); }
.pt-mega-empty { font-size: 13px; color: var(--wp--preset--color--faint); grid-column: 1 / -1; }

/* Mega-panel footer strip — informational links concentrated here (How it Works,
   Blog, Contact) plus a de-emphasized "Become a photographer". */
.pt-mega-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.pt-mega-link {
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}
.pt-mega-link:hover { color: var(--wp--preset--color--primary); }
.pt-mega-link-muted { margin-left: auto; font-weight: 500; color: var(--wp--preset--color--muted); }
.pt-mega-link-muted:hover { color: var(--wp--preset--color--primary); }

/* Hamburger + drawer (mobile) */
.pt-nav-burger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.pt-nav-burger svg { width: 20px; height: 20px; }
.pt-drawer-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(11, 29, 110, 0.45); }
.pt-drawer {
	position: fixed;
	/* Slides in from the LEFT — the burger that opens it sits top-left. */
	top: 0; left: 0; bottom: 0;
	z-index: 80;
	width: min(86vw, 340px);
	background: var(--wp--preset--color--surface);
	box-shadow: 12px 0 40px rgba(11, 29, 110, 0.18);
	display: flex;
	flex-direction: column;
	padding: 20px;
	transform: translateX(-100%);
	transition: transform .22s ease;
	overflow-y: auto;
}
.pt-drawer.is-open { transform: translateX(0); }
.pt-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pt-drawer-head .wp-block-site-logo img,
.pt-drawer-head .custom-logo { height: 24px; width: auto; }
.pt-drawer-close {
	width: 40px; height: 40px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}
.pt-drawer-close svg { width: 17px; height: 17px; }
.pt-drawer-body { display: flex; flex-direction: column; }
.pt-drawer-acc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	cursor: pointer;
	text-align: left;
	padding: 14px 4px;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.pt-drawer-acc .pt-chev { width: 13px; height: 13px; color: var(--wp--preset--color--subtle); transition: transform .18s ease; }
.pt-drawer-acc[aria-expanded="true"] .pt-chev { transform: rotate(180deg); }
.pt-drawer-dest { background: var(--wp--preset--color--surface-alt); border-bottom: 1px solid var(--wp--preset--color--border-light); }
.pt-drawer-country { display: flex; flex-direction: column; }
.pt-drawer-country-row { display: flex; align-items: center; border-bottom: 1px solid var(--wp--preset--color--border-light); }
.pt-drawer-country-link {
	flex: 1;
	padding: 13px 4px 13px 14px;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.pt-drawer-subtoggle {
	flex: none;
	width: 44px; height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--subtle);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pt-drawer-subtoggle .pt-chev { width: 13px; height: 13px; transition: transform .18s ease; }
.pt-drawer-subtoggle[aria-expanded="true"] .pt-chev { transform: rotate(180deg); }
.pt-drawer-cities { display: flex; flex-direction: column; padding: 2px 0 8px; }
.pt-drawer-cities a {
	padding: 10px 4px 10px 28px;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.pt-drawer-link {
	padding: 14px 4px;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.pt-drawer-cta {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: var(--wp--custom--radius--md);
	padding: 14px;
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
/* The drawer's Log in / Sign up pair is gone with the rest: the account button
   lives in the bar above and is not repeated in the burger, which now holds site
   navigation only. */
.pt-drawer-become {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.pt-drawer-become:hover { color: var(--wp--preset--color--primary); }

/* Responsive switch: desktop nav vs. drawer */
.pt-drawer-overlay,
.pt-drawer { display: none; }
@media (max-width: 899px) {
	/* Burger left, logo centre, account icon right — the same arrangement as the
	   Bubble app header, so moving between the two sites feels continuous. */
	.pt-nav-bar { position: relative; display: flex; align-items: center; justify-content: space-between; }
	.pt-nav-center { display: none; }
	.pt-nav-burger { display: flex; }

	/* Centred against the BAR, not against the space left over beside the
	   burger — which is why it is taken out of the flow. Sharing a flex cell
	   with the burger would park it just right of centre, and the offset is
	   obvious once the two sites sit side by side. */
	.pt-nav-left .pt-logo,
	.pt-nav-left .pt-logo-text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/* The label goes; the circle stays 42px so the tap target does not shrink
	   below what a thumb can reliably hit. The name is not lost — the anchor's
	   aria-label still carries it. */
	.pt-nav-account-label { display: none; }
	.pt-nav-account {
		width: 42px;
		height: 42px;
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 50%;
	}
	.pt-nav-account svg { width: 20px; height: 20px; }
	.pt-drawer { display: flex; }
	.pt-drawer-overlay:not([hidden]) { display: block; }

	/* Mobile side padding = 16px everywhere. Overriding the root-padding vars
	   keeps block-template sections AND their full-bleed breakouts in sync;
	   the classic landing/header use explicit padding, overridden here too. */
	:root,
	body {
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
	}
	/* Doubled class = specificity (0,2,0) so this wins over the base
	   .pt-container rule that appears later in the file. */
	.pt-container.pt-container { padding-inline: 16px; }
	.pt-header.pt-header {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Single-column on mobile: drop the equal-height height:100% (only needed to
	   line up multi-column rows). Left on, it collapses the grid track and the
	   card overflows onto the next one, so cards visually overlap. */
	.pt-seo-main .pt-card { height: auto; }
}

/* ---------- Horizontal scroll rows (carousels) ---------- */
.pt-hscroll {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.pt-hscroll::-webkit-scrollbar { display: none; }
.pt-hscroll > * {
	scroll-snap-align: start;
	flex: none;
}
/* Turn a columns block into a scroll row on small screens */
@media (max-width: 781px) {
	.pt-scroll-mobile > .wp-block-columns {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.pt-scroll-mobile > .wp-block-columns::-webkit-scrollbar { display: none; }
	.pt-scroll-mobile > .wp-block-columns > .wp-block-column {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}

/* ---------- Cards ---------- */
.pt-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
	overflow: hidden;
}
/* Cover images inside cards fill the card width */
.pt-card > .wp-block-cover:first-child { border-radius: 0; }

/* Avatars (review authors + photoshoot photographers): perfect circles, never
   distorted. The figure is a fixed square; the image fills it and is cropped. */
.wp-block-image.is-style-rounded {
	flex: none;
	overflow: hidden;
	border-radius: 50%;
}
.wp-block-image.is-style-rounded img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	aspect-ratio: 1 / 1;
}
.pt-card-link,
.pt-lift {
	transition: box-shadow .18s ease, transform .18s ease;
}
.pt-card-link:hover,
.pt-lift:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-3px);
}

/* Destination / image tiles with gradient overlay + zoom */
.pt-tile {
	position: relative;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.pt-tile img {
	transition: transform .4s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pt-tile:hover img {
	transform: scale(1.06);
}
/* Soft shadow across the top of the image (as well as the bottom) so the tiles
   read with more depth and the labels stay legible on bright photos. */
.pt-tile .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(11, 29, 110, 0.45) 0%, rgba(11, 29, 110, 0) 32%, rgba(11, 29, 110, 0) 52%, rgba(11, 29, 110, 0.82) 100%) !important;
}
/* City-name links sit on the image overlay — keep them white, not link-blue */
.pt-tile a,
.pt-tile a:hover {
	color: inherit;
}

/* Image that fills its column (e.g. split banners) */
.pt-fill-image,
.pt-fill-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.pt-fill-image { margin: 0; min-height: 260px; }

/* Icon chip (feature icons) */
.pt-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	font-size: 21px;
}
.pt-icon svg { width: 1em; height: 1em; fill: currentColor; }
.pt-icon-dark {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

/* Home "Why" feature cards — larger brand icon medallion for more visual weight. */
.pt-feature-card .pt-icon { width: 60px; height: 60px; font-size: 26px; }

/* Home "Why" editorial benefit list (image beside a list of icon rows). */
.pt-why-list { display: flex; flex-direction: column; gap: 20px; }
.pt-why-row { display: flex; gap: 16px; align-items: flex-start; }
.pt-why-row .pt-icon { flex: none; }
.pt-why-text h3 {
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 17px;
	color: var(--wp--preset--color--navy);
	margin: 0 0 2px;
}
.pt-why-text p { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--muted); margin: 0; }

/* Centre the step-card cluster (home + how-it-works page) instead of full-bleed. */
.pt-steps { max-width: 1200px; margin-inline: auto; }
.pt-steps.pt-steps-flow { max-width: 1080px; }

/* Home "How it works" — connector chevrons between the 4 steps (desktop only). */
.pt-step { position: relative; overflow: visible; }
@media (min-width: 1000px) {
	.pt-steps-flow > .pt-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 46px;
		right: -13px;
		width: 9px;
		height: 9px;
		border-top: 2px solid var(--wp--preset--color--line);
		border-right: 2px solid var(--wp--preset--color--line);
		transform: rotate(45deg);
	}
}

/* Eyebrow / kicker label */
.pt-kicker {
	font-family: var(--wp--preset--font-family--jakarta) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Pills / badges */
.pt-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 14px;
	font-size: 12.5px;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--jakarta);
}

/* Home guide cards — category as a real tag, dark (non-blue) title */
.pt-guide-tag {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	gap: 6px;
	border-radius: var(--wp--custom--radius--pill);
	padding: 4px 12px;
	background: var(--wp--preset--color--tint);
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}
.pt-guide-tag a {
	color: var(--wp--preset--color--primary);
}
.pt-guide-tag a:hover {
	color: var(--wp--preset--color--primary-hover);
}
.pt-guide-title a {
	color: var(--wp--preset--color--navy);
}
.pt-guide-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* "Where Are You Traveling" — make the whole tile clickable.
   The cover's inner-container is normally shrink-wrapped bottom-left, so a
   stretched link inside it would only cover the text. Expand the container to
   fill the tile (keeping the text bottom-left) so the link covers the whole card. */
.pt-tile { cursor: pointer; }
.pt-tile .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 20px;
}
.pt-tile .pt-tile-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---------- Article / editorial body ---------- */
.pt-article-body {
	font-size: 17px;
	line-height: 1.75;
	color: var(--wp--preset--color--foreground);
}
.pt-article-body > * {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.pt-article-body > .alignwide,
.pt-article-body > .alignfull,
.pt-article-body > figure {
	max-width: none;
}
.pt-article-body h2 {
	margin-top: 1.8em;
	font-size: clamp(24px, 3vw, 30px);
}
.pt-article-body h3 {
	margin-top: 1.4em;
}
.pt-article-body figure img {
	border-radius: var(--wp--custom--radius--lg);
}

/* --------------------------------------------------------------------------
   Classic [caption] images — the format the imported posts arrived in.
   That markup bakes a FIXED width into the figure itself:

       <figure style="width: 749px" class="wp-caption aligncenter">

   and this theme only ever styled the block-editor variant, so these figures
   overflowed the column on desktop and blew straight past the viewport on
   mobile. The !importants below are not vanity: an inline style loses to
   nothing else.

   fit-content makes the figure hug its image, so the caption's left edge
   lines up with the photo's — even for photos narrower than the column.
   -------------------------------------------------------------------------- */
.wp-caption {
	width: fit-content !important;
	max-width: 100% !important;
	margin: 0 auto 1.5em;
}
.pt-article-body > figure.wp-caption { max-width: min(100%, 720px) !important; }
.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
	/* Portrait shots uploaded at full resolution were towering over the text.
	   Capping the height (aspect ratio preserved — no cropping) keeps them in
	   proportion with the page. */
	max-height: 640px;
	width: auto;
	border-radius: var(--wp--custom--radius--lg);
}
.wp-caption .wp-caption-text {
	margin: 10px 2px 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
/* Some captions arrive wrapped in a link to the attachment page. It should
   read as a caption, not as a call to action. */
.wp-caption .wp-caption-text a {
	color: inherit;
	text-decoration: none;
}
.pt-article-body blockquote {
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 20px;
	color: var(--wp--preset--color--navy);
}

/* ---------- FAQ accordion (details/summary) ---------- */
.pt-faq details {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
}
.pt-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	font-family: var(--wp--preset--font-family--rethink);
	font-weight: 600;
	font-size: 15.5px;
	color: var(--wp--preset--color--navy);
}
.pt-faq summary::-webkit-details-marker { display: none; }
.pt-faq summary::after {
	content: "\002B";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--wp--custom--radius--round);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	line-height: 1;
}
.pt-faq details[open] summary::after { content: "\2212"; }
.pt-faq .pt-faq-answer {
	padding: 0 20px 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* ---------- Secondary / ghost buttons ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}
.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: #fff;
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-hover);
}
.wp-block-button.is-style-navy .wp-block-button__link {
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.wp-block-button.is-style-navy .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
}

/* ---------- Footer ---------- */
.pt-footer .pt-footer-logo img,
.pt-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}
.pt-footer .pt-footer-list { list-style: none; padding: 0; margin: 0; }
.pt-footer-list li { margin: 0; }
/* ---------- Footer link hovers ---------- */
.pt-footer a { color: rgba(255, 255, 255, 0.62); }
.pt-footer a:hover { color: #fff; }
.pt-footer .wp-block-social-links .wp-social-link {
	background: rgba(255, 255, 255, 0.08);
}
.pt-footer .wp-block-social-links .wp-social-link:hover {
	background: var(--wp--preset--color--primary);
}

/* ---------- Category filter (blog) ---------- */
.pt-filter a,
.pt-filter .wp-block-categories-list a {
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 600;
	font-size: 14px;
}
.pt-filter a:hover,
.pt-filter a.pt-active,
.pt-filter li.current-cat a {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}
ul.pt-filter,
.pt-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pt-filter li { margin: 0; }

/* Journal filter — single-select pill bar that stays visible on category pages */
.pt-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pt-filter-pill {
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pt-filter-pill:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.pt-filter-pill.is-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}
/* On an active category pill, hint that clicking deselects it (not on "All"). */
.pt-filter-pill.is-active:not(.pt-filter-all)::after {
	content: " \00d7";
	font-size: 1.05em;
	opacity: .85;
}
/* The landing-page photoshoot filter uses <button> pills — keep them clickable
   looking and stripped of native chrome (the journal bar uses <a> pills). */
button.pt-filter-pill {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* The second row of the Journal filter: the open country's cities. Smaller
   pills and a left rule tie it visually to the parent row above instead of
   reading as a second, competing filter. */
.pt-filter-sub {
	margin-top: 10px;
	padding-left: 14px;
	border-left: 2px solid var(--wp--preset--color--line);
	gap: 8px;
}
.pt-filter-sub .pt-filter-pill {
	padding: 7px 14px;
	font-size: 13px;
}
/* The sub-row's "All Japan" behaves like a selection, so unlike the main
   "All" it does show the deselect hint. */
.pt-filter-sub .pt-filter-all.is-active::after {
	content: " \00d7";
	font-size: 1.05em;
	opacity: .85;
}

/* ---------- "Display Few Pictures" collage gallery (landing pages) ----------
   Masonry-style varied-height collage via CSS multi-column (no plugin needed). */
.pt-gallery { column-count: 4; column-gap: 12px; }
.pt-gallery .wp-block-image { margin: 0 0 12px; max-width: none; break-inside: avoid; }
.pt-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}
@media (max-width: 1100px) { .pt-gallery { column-count: 3; } }
@media (max-width: 781px) { .pt-gallery { column-count: 2; } }

/* Alternating image/text rows (e.g. "Popular photo locations"). On desktop the
   flex columns reverse so images zig-zag left/right; on mobile they stack. */
@media (min-width: 782px) {
	.wp-block-columns.pt-row-flip { flex-direction: row-reverse; }
}

/* Split-card media that fills its whole column height (custom-photoshoot CTA +
   "Book a photographer" footer). The column is stretched to the text column's
   height and the image covers it — no fixed aspect ratio, no leftover whitespace. */
.pt-cta-media { display: flex; }
.pt-cta-media > .wp-block-image { flex: 1; margin: 0; min-height: 220px; }
.pt-cta-media > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   "Why PhotoTrips" — feature cards (white, invert to royal blue on hover)
   ========================================================================== */
.pt-why2-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1100px;
	margin-inline: auto;
}
.pt-why2-grid.cols-4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
.pt-why2-card {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	padding: 32px 28px;
	transition: background .28s ease, border-color .28s ease, transform .2s ease;
}
.pt-why2-card:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-3px);
}
/* Orange outline decorative circles in the bottom-right corner (pseudo-elements). */
.pt-why2-card::before,
.pt-why2-card::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent);
	pointer-events: none;
	transition: opacity .28s ease;
}
.pt-why2-card::before { width: 90px; height: 90px; bottom: -30px; right: -30px; opacity: .35; }
.pt-why2-card::after { width: 145px; height: 145px; bottom: -56px; right: -56px; opacity: .5; }
.pt-why2-card:hover::before { opacity: .7; }
.pt-why2-card:hover::after { opacity: .85; }
.pt-why2-ic {
	position: relative;
	z-index: 2;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	margin-bottom: 20px;
	transition: background .28s ease, color .28s ease;
}
.pt-why2-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pt-why2-card:hover .pt-why2-ic { background: rgba(244, 113, 74, 0.22); color: var(--wp--preset--color--accent); }
.pt-why2-card h3 {
	position: relative;
	z-index: 2;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
	margin: 0 0 10px;
	transition: color .28s ease;
}
.pt-why2-card p {
	position: relative;
	z-index: 2;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	margin: 0;
	transition: color .28s ease;
}
.pt-why2-card:hover h3 { color: #fff; }
.pt-why2-card:hover p { color: rgba(255, 255, 255, 0.68); }
@media (max-width: 900px) { .pt-why2-grid, .pt-why2-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pt-why2-grid, .pt-why2-grid.cols-4 { grid-template-columns: 1fr; } }

/* The "What is Photo Trips" stat tiles: the number suffixes (+, %, .0) were
   accent orange inline; requested all-white. !important beats the baked
   inline colour without editing the page. */
.stat-card-num mark { color: #ffffff !important; }

/* ==========================================================================
   "How it works" — 3 steps: numbered royal square + orange offset shadow,
   uppercase step badge, dashed connectors between steps.
   ========================================================================== */
.pt-hiw2-steps {
	display: flex;
	align-items: flex-start;
	gap: 0;
	max-width: 1000px;
	margin-inline: auto;
}
.pt-hiw2-step { flex: 1; text-align: center; padding: 0 36px; }
.pt-hiw2-conn { flex: 0 0 60px; padding-top: 38px; }
.pt-hiw2-conn span { display: block; border-top: 2px dashed var(--wp--preset--color--line); }
.pt-hiw2-num {
	position: relative;
	width: 84px;
	height: 84px;
	margin: 0 auto 28px;
	border-radius: 24px;
	background: var(--wp--preset--color--primary);
	box-shadow: 9px 9px 0 0 var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 30px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pt-hiw2-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	background: #fff0eb;
	border-radius: 20px;
	padding: 4px 12px;
	margin-bottom: 12px;
}
.pt-hiw2-step h3 { font-size: 20px; font-weight: 700; color: var(--wp--preset--color--navy); margin: 0 0 12px; }
.pt-hiw2-step p { font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--muted); margin: 0; }
@media (max-width: 781px) {
	.pt-hiw2-steps { flex-direction: column; align-items: center; gap: 48px; }
	.pt-hiw2-conn { display: none; }
	.pt-hiw2-step { max-width: 360px; padding: 0; }
}

/* ---------- Breadcrumb & post meta ---------- */
.pt-breadcrumb a { color: var(--wp--preset--color--muted); }
.pt-breadcrumb a:hover { color: var(--wp--preset--color--primary); }
.wp-block-post-author .wp-block-post-author__name { font-weight: 600; }
.wp-block-post-author {
	align-items: center;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}
.wp-block-post-author__avatar img { border-radius: 50%; }

/* Reading-time (shortcode) inline in the article meta row */
.pt-readtime,
.pt-readtime p {
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--wp--preset--color--faint);
}

/* Featured-image links fill their card corners */
.pt-card .wp-block-post-featured-image,
.pt-card .wp-block-post-featured-image img { border-radius: 0; }

/* ---------- Utility ---------- */
.pt-eyebrow-accent { color: var(--wp--preset--color--accent) !important; }
.pt-eyebrow-primary { color: var(--wp--preset--color--primary) !important; }

.pt-star { color: var(--wp--preset--color--star); }

/* ==========================================================================
   Phase 2 — SEO landing template (single-destination.php)
   Field-driven pages, styled with the same tokens/components as the block theme.
   ========================================================================== */
.pt-seo-main { display: block; }
.pt-container {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 36px;
}
.pt-measure { max-width: 760px; }
.pt-section { padding-top: clamp(48px, 6vw, 72px); }
.pt-section-last { padding-bottom: clamp(64px, 8vw, 96px); }
.pt-mt { margin-top: 24px; }
.pt-center { display: flex; justify-content: center; }
.pt-h2 {
	font-family: var(--wp--preset--font-family--rethink);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.12;
	margin: 0 0 24px;
}
.pt-section-intro {
	color: var(--wp--preset--color--muted);
	max-width: 620px;
	font-size: 16px;
	line-height: 1.55;
	margin: -12px 0 24px;
}
.pt-lead {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.6;
	color: #3E4C59;
}
.pt-lead p { margin: 0 0 1em; }
.pt-textlink {
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.pt-card-title {
	font-family: var(--wp--preset--font-family--rethink);
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--navy);
	margin: 0;
}
.pt-card-text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
/* Landing-page content cards (why / how-it-works / reviews) stack their
   contents vertically. Image cards (spot/shoot/guide) manage their own layout. */
.pt-seo-main .pt-card:not(.pt-spot):not(.pt-shoot-card):not(.pt-guide-card) {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Breadcrumb */
.pt-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--faint);
}
.pt-breadcrumb a { color: var(--wp--preset--color--muted); text-decoration: none; }
.pt-breadcrumb a:hover { color: var(--wp--preset--color--primary); }
.pt-breadcrumb .pt-current { color: var(--wp--preset--color--navy); font-weight: 600; }
/* Same look as the catalogue pages' .crumbs: semibold, "/" in soft blue. */
.pt-breadcrumb,
.pt-breadcrumb p { font-weight: 600; }
.pt-breadcrumb .pt-sep { margin: 0 7px; color: var(--wp--preset--color--deco-blue); }

/* Hero */
.pt-hero {
	position: relative;
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	min-height: clamp(340px, 46vh, 460px);
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-color: #0a1f4d;
}
.pt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(11,29,110,0.8) 0%, rgba(11,29,110,0.5) 50%, rgba(11,29,110,0.25) 100%);
}
.pt-hero-inner {
	position: relative;
	padding: clamp(32px, 5vw, 56px);
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pt-hero-h1 {
	font-family: var(--wp--preset--font-family--rethink);
	font-weight: 800;
	color: #fff;
	font-size: clamp(28px, 4.4vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.pt-hero-intro {
	color: rgba(255,255,255,0.92);
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.55;
	max-width: 540px;
	margin: 0 0 18px;
}

/* Grids */
.pt-grid { display: grid; gap: 18px; }
.pt-grid-cities { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pt-grid-shoots { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.pt-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pt-grid-5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.pt-grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* Destination image tiles (links) — landing-page (Phase 2) tiles.
   Named .pt-dtile to avoid colliding with the Phase 1 cover-based .pt-tile. */
.pt-dtile {
	position: relative;
	display: block;
	height: 280px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--card);
}
.pt-dtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-dtile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,29,110,0.4) 0%, rgba(11,29,110,0) 32%, rgba(11,29,110,0) 55%, rgba(11,29,110,0.82) 100%);
}
.pt-dtile-content {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.pt-dtile-content strong {
	font-family: var(--wp--preset--font-family--rethink);
	font-weight: 700;
	font-size: 20px;
	color: #fff;
}
.pt-dtile-meta { font-size: 13px; color: rgba(255,255,255,0.85); }
.pt-dtile-arrow {
	position: absolute;
	right: 18px; bottom: 18px;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: var(--wp--preset--color--primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; font-weight: 700;
}

/* Photoshoot cards (curated, link out) */
.pt-shoot-card { display: flex; flex-direction: column; text-decoration: none; }
.pt-shoot-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.pt-shoot-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pt-shoot-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--muted); }
.pt-shoot-title { font-family: var(--wp--preset--font-family--rethink); font-weight: 700; font-size: 17px; color: var(--wp--preset--color--navy); line-height: 1.3; }
.pt-shoot-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--wp--preset--color--border-light); padding-top: 12px; margin-top: auto; }
.pt-shoot-price { font-weight: 700; color: var(--wp--preset--color--navy); font-size: 16px; }
.pt-shoot-meta { font-size: 12px; color: var(--wp--preset--color--faint); }

/* Trust stats band */
.pt-statband {
	background: var(--wp--preset--color--navy);
	border-radius: 20px;
	padding: clamp(26px, 4vw, 40px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 4vw, 48px);
	text-align: center;
}
.pt-stat { display: flex; flex-direction: column; gap: 4px; }
.pt-stat strong { font-family: var(--wp--preset--font-family--rethink); font-weight: 800; font-size: clamp(26px, 3vw, 34px); color: #fff; }
.pt-stat span { font-size: 13.5px; color: rgba(255,255,255,0.7); }

/* How-it-works steps */
.pt-step-n { font-family: var(--wp--preset--font-family--jakarta); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--wp--preset--color--primary); }
.pt-step-title { font-size: 15px; color: var(--wp--preset--color--navy); font-weight: 600; line-height: 1.3; }
/* How-It-Works page: the step-copy column grows to fill the flex row.
   (Kept in CSS rather than an inline flex:1, which has no block attribute and
   would trip block validation.) */
.wp-block-group.pt-hiw-copy { flex: 1; }

/* How-it-works: keep equal-height cards without the height:100% overflow that
   pushed the button on top of the cards, and place "Learn More" as a centered
   pill button clearly below the grid (matches the homepage treatment). */
.pt-hiw-grid { align-items: stretch; }
.pt-hiw-grid .pt-card { height: auto; }
.pt-hiw-more {
	margin-top: clamp(28px, 4vw, 40px);
	display: flex;
	justify-content: center;
}

/* Overview text should fill the section width, not sit in a narrow left column. */
.pt-measure-full { max-width: none; }

/* Best-photo-spot cards */
.pt-spot { display: flex; flex-direction: column; }
.pt-spot-img { width: 100%; height: 160px; object-fit: cover; display: block; }
.pt-spot-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }

/* Reviews */
.pt-review-stars { font-size: 15px; letter-spacing: 2px; margin: 0; }
.pt-review-quote { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--foreground); margin: 0; }
.pt-review-name { font-weight: 700; color: var(--wp--preset--color--navy); font-size: 14px; margin: 0; }

/* Tinted custom-request CTA */
.pt-tintcta {
	background: var(--wp--preset--color--tint);
	border-radius: var(--wp--custom--radius--xl);
	padding: clamp(32px, 5vw, 52px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.pt-tintcta-text { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }

/* Tips split */
.pt-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 4vw, 48px); align-items: center; }
.pt-split-media { border-radius: 20px; min-height: 280px; background-size: cover; background-position: center; background-color: #0a1f4d; }
.pt-tiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pt-tiplist li { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: #3E4C59; }
.pt-tip-check { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }

/* Related guide cards */
.pt-guide-card { display: flex; flex-direction: column; text-decoration: none; }
.pt-guide-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pt-guide-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.pt-guide-cat { font-family: var(--wp--preset--font-family--jakarta); font-weight: 600; font-size: 12px; color: var(--wp--preset--color--primary); }
.pt-guide-date { font-size: 12.5px; color: var(--wp--preset--color--faint); }

/* FAQ (narrow) — reuses .pt-faq accordion styles above */
/* Same 720px column as the FAQ on every landing page. The homepage FAQ sits in
   an alignwide group whose layout rule beat the old max-width, so it ran the
   full 1335px — hence the !important. */
.pt-faq-narrow { max-width: 720px !important; width: 100%; margin-inline: auto !important; display: flex; flex-direction: column; gap: 12px; }
/* The constrained layout adds max-width + margin-inline:auto to each <details>;
   inside this flex column those auto side-margins cancel the stretch and shrink
   each item to its text width. Force every accordion row to full width. */
.pt-faq-narrow > * { max-width: none; margin-inline: 0; width: 100%; }

/* Final CTA */
.pt-finalcta {
	position: relative;
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	padding: clamp(44px, 6vw, 72px) clamp(24px, 4vw, 48px);
	text-align: center;
	background-size: cover;
	background-position: center;
	background-color: #0a1f4d;
}
.pt-finalcta::before { content: ""; position: absolute; inset: 0; background: rgba(11,29,110,0.7); }
.pt-finalcta-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pt-finalcta-h { font-family: var(--wp--preset--font-family--rethink); font-weight: 800; color: #fff; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; max-width: 680px; margin: 0; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.pt-tile:hover img { transform: none; }
}

/* ==========================================================================
   ABOUT / FAQ / TERMS pages (ported from the provided mockups)
   ========================================================================== */

/* ---------- Shared: section eyebrow reuse (.pt-kicker + .pt-eyebrow-accent) ---------- */
/* scroll offset so anchored sections clear the fixed header */
.pt-faq2-cat, .pt-doc-section { scroll-margin-top: 96px; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* Mission */
.pt-mission-inner { max-width: 1060px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.pt-mission-right { display: flex; flex-direction: column; gap: 16px; }
.pt-mission-quote { position: relative; overflow: hidden; background: var(--wp--preset--color--navy); border-radius: 20px; padding: 36px 32px; }
.pt-mission-quote::before { content: "\201C"; position: absolute; top: -10px; left: 20px; font-family: var(--wp--preset--font-family--rethink); font-size: 120px; font-weight: 800; color: rgba(255,255,255,0.06); line-height: 1; pointer-events: none; }
.pt-mission-quote p { position: relative; z-index: 1; font-size: 19px; font-weight: 700; color: #fff; line-height: 1.55; margin: 0; }
.pt-mission-quote .pt-mission-attr { margin-top: 14px; font-size: 13px; color: var(--wp--preset--color--accent); font-weight: 700; }
.pt-mission-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-mission-stat { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 16px; padding: 22px 20px; }
.pt-mission-stat-num { font-family: var(--wp--preset--font-family--rethink); font-size: 32px; font-weight: 800; color: var(--wp--preset--color--navy); line-height: 1; margin: 0 0 4px; }
.pt-mission-stat-label { font-size: 13px; color: var(--wp--preset--color--muted); font-weight: 600; line-height: 1.4; margin: 0; }

/* Tagline */
.pt-tagline-stage { position: relative; width: 100%; max-width: 1000px; height: 280px; margin-inline: auto; display: flex; align-items: center; justify-content: center; }
.pt-tagline-word { position: relative; z-index: 2; font-family: var(--wp--preset--font-family--rethink); font-size: clamp(28px, 5vw, 58px); font-weight: 800; color: var(--wp--preset--color--primary); line-height: 1.1; letter-spacing: -0.01em; text-align: center; margin: 0; }
.pt-tl-pill { position: absolute; z-index: 3; background: #fff0eb; color: var(--wp--preset--color--accent); font-size: 14px; font-weight: 600; font-style: italic; padding: 10px 22px; border-radius: 50px; white-space: nowrap; }
.pt-tl-p1 { top: 8%; left: 12%; transform: rotate(-3deg); }
.pt-tl-p2 { top: 16%; right: 8%; transform: rotate(2deg); }
.pt-tl-p3 { bottom: 6%; left: 6%; transform: rotate(3deg); }
.pt-tl-p4 { bottom: 8%; right: 7%; transform: rotate(-2.5deg); }
.pt-tagline-meaning { max-width: 640px; margin: 12px auto 0; font-size: 16px; color: var(--wp--preset--color--muted); line-height: 1.8; text-align: center; }

/* Founder (navy section) */
.pt-founder-inner { max-width: 1060px; margin-inline: auto; display: grid; grid-template-columns: 420px 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.pt-founder-photo-wrap { position: relative; }
.pt-founder-photo-accent { position: absolute; width: calc(100% - 20px); height: calc(100% - 20px); background: var(--wp--preset--color--accent); border-radius: 24px; bottom: -12px; right: -12px; }
.pt-founder-photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 1/1; border-radius: 24px; overflow: hidden; border: 3px solid rgba(255,255,255,0.1); }
.pt-founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.pt-founder-label { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 12px; text-align: center; }
.pt-founder-name { font-family: var(--wp--preset--font-family--rethink); font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #fff; margin: 0 0 4px; text-align: center; }
.pt-founder-role { font-size: 15px; color: rgba(255,255,255,0.45); font-weight: 600; margin: 0 0 28px; text-align: center; }
.pt-founder-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; justify-content: center; }
.pt-founder-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 50px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }
.pt-founder-chip svg { width: 12px; height: 12px; stroke-width: 2.2; fill: none; stroke: var(--wp--preset--color--accent); flex-shrink: 0; }
.pt-fst { display: flex; flex-direction: column; margin-bottom: 28px; }
.pt-fst-item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; position: relative; }
.pt-fst-item:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; width: 2px; height: calc(100% - 16px); border-left: 2px dashed rgba(255,255,255,0.12); }
.pt-fst-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; }
.pt-fst-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 1.8; }
.pt-fst-body { padding-bottom: 28px; }
.pt-fst-heading { font-family: var(--wp--preset--font-family--rethink); font-size: 14px; font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.3; }
.pt-fst-text { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.75; margin: 0; }
.pt-founder-pullquote { padding: 20px 24px; border-left: 3px solid var(--wp--preset--color--accent); background: rgba(255,255,255,0.05); border-radius: 0 12px 12px 0; }
.pt-founder-pullquote p { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.5; font-style: italic; margin: 0; }

/* Values */
.pt-values-grid { max-width: 1060px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pt-value-card { background: var(--wp--preset--color--surface); border: 1.5px solid var(--wp--preset--color--line); border-radius: 24px; padding: 36px 32px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; transition: box-shadow .2s, transform .2s; }
.pt-value-card:hover { box-shadow: 0 10px 32px rgba(11,29,110,0.08); transform: translateY(-3px); }
.pt-value-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-value-icon svg { width: 24px; height: 24px; fill: none; stroke-width: 1.8; }
.pt-value-icon.is-creative { background: var(--wp--preset--color--tint); } .pt-value-icon.is-creative svg { stroke: var(--wp--preset--color--primary); }
.pt-value-icon.is-authentic { background: #fff0eb; } .pt-value-icon.is-authentic svg { stroke: var(--wp--preset--color--accent); }
.pt-value-icon.is-professional { background: #f0fdf4; } .pt-value-icon.is-professional svg { stroke: #16a34a; }
.pt-value-icon.is-local { background: #fef3c7; } .pt-value-icon.is-local svg { stroke: #d97706; }
.pt-value-title { font-family: var(--wp--preset--font-family--rethink); font-size: 18px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 8px; line-height: 1.2; }
.pt-value-body { font-size: 14.5px; color: var(--wp--preset--color--muted); line-height: 1.75; margin: 0; }
.pt-value-details { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pt-value-detail { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wp--preset--color--navy); font-weight: 600; }
.pt-value-detail::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wp--preset--color--accent); flex-shrink: 0; }

@media (max-width: 960px) {
	.pt-mission-inner, .pt-founder-inner, .pt-values-grid { grid-template-columns: 1fr; gap: 48px; }
	.pt-founder-photo-wrap { max-width: 360px; margin-inline: auto; }
}
@media (max-width: 720px) {
	.pt-tagline-word { font-size: 26px; }
	.pt-value-card { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   FAQ page  (.pt-faq2-*)
   ========================================================================== */
.pt-faq2-search { display: flex; align-items: center; max-width: 480px; margin: 8px auto 0; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 50px; padding: 12px 20px; gap: 10px; transition: border-color .2s, box-shadow .2s; }
.pt-faq2-search:focus-within { border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px rgba(59,80,213,0.1); }
.pt-faq2-search svg { width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--muted); stroke-width: 2; flex-shrink: 0; }
.pt-faq2-search input { flex: 1; border: none; background: none; font-family: inherit; font-size: 15px; color: var(--wp--preset--color--navy); outline: none; }
.pt-faq2-layout { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.pt-faq2-nav { position: sticky; top: 96px; }
.pt-faq2-nav-label { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 14px; padding-left: 14px; }
.pt-faq2-nav ul { list-style: none; margin: 0; padding: 0; }
.pt-faq2-nav li + li { margin-top: 2px; }
.pt-faq2-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--muted); text-decoration: none; transition: background .2s, color .2s; }
.pt-faq2-nav a .pt-navdot { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--line); flex-shrink: 0; transition: background .2s; }
.pt-faq2-nav a:hover, .pt-faq2-nav a.is-active { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); }
.pt-faq2-nav a:hover .pt-navdot, .pt-faq2-nav a.is-active .pt-navdot { background: var(--wp--preset--color--primary); }
.pt-faq2-navcount { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--wp--preset--color--muted); background: var(--wp--preset--color--base); border-radius: 20px; padding: 2px 7px; }
.pt-faq2-content { display: flex; flex-direction: column; gap: 56px; }
.pt-faq2-cathead { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1.5px solid var(--wp--preset--color--line); }
.pt-faq2-caticon { width: 44px; height: 44px; border-radius: 13px; background: var(--wp--preset--color--tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-faq2-caticon svg { width: 20px; height: 20px; fill: none; stroke: var(--wp--preset--color--primary); stroke-width: 1.8; }
.pt-faq2-cattitle { font-family: var(--wp--preset--font-family--rethink); font-size: 22px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0; }
.pt-faq2-catcount { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--muted); background: var(--wp--preset--color--base); border-radius: 20px; padding: 4px 12px; }
.pt-faq2-list { display: flex; flex-direction: column; gap: 8px; }
.pt-faq2-item { background: var(--wp--preset--color--surface); border-radius: 14px; border: 1.5px solid var(--wp--preset--color--line); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.pt-faq2-item.is-open { border-color: var(--wp--preset--color--primary); box-shadow: 0 4px 24px rgba(59,80,213,0.09); }
.pt-faq2-btn { width: 100%; background: none; border: none; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; text-align: left; font-family: inherit; }
.pt-faq2-q { font-size: 15.5px; font-weight: 700; color: var(--wp--preset--color--navy); line-height: 1.4; transition: color .25s; }
.pt-faq2-item.is-open .pt-faq2-q { color: var(--wp--preset--color--primary); }
.pt-faq2-toggle { width: 30px; height: 30px; border-radius: 50%; background: #fff0eb; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .25s; }
.pt-faq2-toggle svg { width: 13px; height: 13px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 3; transition: transform .3s ease, stroke .25s; }
.pt-faq2-item.is-open .pt-faq2-toggle { background: var(--wp--preset--color--primary); }
.pt-faq2-item.is-open .pt-faq2-toggle svg { stroke: #fff; transform: rotate(45deg); }
.pt-faq2-answer-wrap { max-height: 0; overflow: hidden; transition: max-height .38s ease; }
.pt-faq2-item.is-open .pt-faq2-answer-wrap { max-height: 600px; }
.pt-faq2-answer { padding: 16px 22px 22px; font-size: 15px; color: var(--wp--preset--color--muted); line-height: 1.78; border-top: 1px solid var(--wp--preset--color--line); margin: 0; }
.pt-faq2-noresults { text-align: center; padding: 48px 24px; color: var(--wp--preset--color--muted); font-size: 15px; }

@media (max-width: 900px) {
	.pt-faq2-layout, .pt-doc-layout { grid-template-columns: 1fr; gap: 28px; }
	.pt-faq2-nav, .pt-toc { position: static; }
	.pt-faq2-nav-label, .pt-toc-label { display: none; }
	.pt-faq2-nav ul, .pt-toc ul { display: flex; flex-wrap: wrap; gap: 8px; }
	.pt-faq2-nav li + li, .pt-toc li + li { margin-top: 0; }
	.pt-faq2-nav a, .pt-toc a { background: var(--wp--preset--color--surface); border: 1.5px solid var(--wp--preset--color--line); white-space: nowrap; font-size: 13px; padding: 8px 12px; }
	.pt-faq2-navcount, .pt-toc-num { display: none; }
}

/* ==========================================================================
   TERMS / legal document  (.pt-doc-* / .pt-toc / .pt-meta-chip)
   ========================================================================== */
.pt-meta-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.pt-meta-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 50px; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.pt-meta-chip svg { width: 14px; height: 14px; fill: none; stroke-width: 2; flex-shrink: 0; }
.pt-meta-chip.is-date { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); }
.pt-meta-chip.is-updated { background: #fff0eb; border: 1.5px solid #fcd9cc; color: var(--wp--preset--color--accent); }
.pt-doc-layout { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
.pt-toc { position: sticky; top: 96px; }
.pt-toc-label { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 14px; padding-left: 14px; }
.pt-toc ul { list-style: none; margin: 0; padding: 0; }
.pt-toc li + li { margin-top: 2px; }
.pt-toc a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--muted); text-decoration: none; line-height: 1.4; transition: background .2s, color .2s; }
.pt-toc-num { font-size: 10px; font-weight: 800; color: var(--wp--preset--color--line); flex-shrink: 0; width: 18px; transition: color .2s; }
.pt-toc a:hover, .pt-toc a.is-active { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); }
.pt-toc a:hover .pt-toc-num, .pt-toc a.is-active .pt-toc-num { color: var(--wp--preset--color--accent); }
.pt-doc-content { background: var(--wp--preset--color--surface); border-radius: 20px; border: 1.5px solid var(--wp--preset--color--line); padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 52px); }
.pt-doc-intro { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1.5px solid var(--wp--preset--color--line); }
.pt-doc-intro p { font-size: 15.5px; color: var(--wp--preset--color--muted); line-height: 1.8; margin: 0; }
.pt-doc-intro a { color: var(--wp--preset--color--primary); font-weight: 600; text-decoration: none; }
.pt-doc-section { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--wp--preset--color--line); }
.pt-doc-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pt-doc-eyebrow { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 8px; }
.pt-doc-title { font-family: var(--wp--preset--font-family--rethink); font-size: 19px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 16px; line-height: 1.3; }
.pt-doc-section p { font-size: 15px; color: var(--wp--preset--color--muted); line-height: 1.85; margin: 0 0 12px; }
.pt-doc-section p:last-child { margin-bottom: 0; }
.pt-doc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; }
.pt-doc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--wp--preset--color--muted); line-height: 1.75; }
.pt-doc-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--accent); flex-shrink: 0; margin-top: 9px; }
.pt-doc-subs { display: flex; flex-direction: column; gap: 24px; }
.pt-doc-subtitle { font-size: 15px; font-weight: 700; color: var(--wp--preset--color--navy); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.pt-doc-subtitle::before { content: attr(data-num); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); font-size: 11px; font-weight: 800; flex-shrink: 0; }
.pt-doc-highlight { display: flex; align-items: flex-start; gap: 12px; background: var(--wp--preset--color--tint); border-radius: 12px; padding: 16px 18px; margin-top: 16px; }
.pt-doc-highlight svg { width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--primary); stroke-width: 1.8; flex-shrink: 0; margin-top: 1px; }
.pt-doc-highlight p { font-size: 13.5px; color: var(--wp--preset--color--primary); line-height: 1.65; margin: 0; }
.pt-doc-highlight a { color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: underline; }
.pt-doc-contactblock { background: var(--wp--preset--color--base); border-radius: 14px; padding: 24px 28px; margin-top: 40px; border: 1.5px solid var(--wp--preset--color--line); }
.pt-doc-contactblock .pt-doc-ctitle { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy); margin: 0 0 12px; }
.pt-doc-citem { font-size: 14px; color: var(--wp--preset--color--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pt-doc-citem a { color: var(--wp--preset--color--primary); text-decoration: none; font-weight: 600; }
.pt-doc-citem svg { width: 15px; height: 15px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 1.8; flex-shrink: 0; }

@media (max-width: 640px) {
	.pt-doc-content { padding: 32px 24px; }
}

/* ==========================================================================
   HOW IT WORKS / RECRUITMENT / REVIEWS / BROWSE / CONTACT / CUSTOM REQUEST / PRIVACY
   (ported from the provided mockups)
   ========================================================================== */

/* ---------- HOW IT WORKS ---------- */
/* Concept (navy) */
.pt-hiw-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.pt-hiw-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 50px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
.pt-hiw-pill svg { width: 13px; height: 13px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 2.2; flex-shrink: 0; }
.pt-hiw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-hiw-statcard { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 28px 24px; }
.pt-hiw-statcard-num { font-family: var(--wp--preset--font-family--rethink); font-size: 40px; font-weight: 800; color: #fff; line-height: 1; margin: 0 0 6px; }
.pt-hiw-statcard-num span { color: var(--wp--preset--color--accent); }
.pt-hiw-statcard-label { font-size: 14px; color: rgba(255,255,255,0.5); font-weight: 600; line-height: 1.4; margin: 0; }
.pt-hiw-statcard.is-accent { background: var(--wp--preset--color--primary); border-color: transparent; grid-column: span 2; display: flex; align-items: center; gap: 16px; padding: 22px 24px; }
.pt-hiw-statcard.is-accent svg { width: 28px; height: 28px; fill: none; stroke: rgba(255,255,255,0.6); flex-shrink: 0; stroke-width: 1.6; }
.pt-hiw-statcard.is-accent p { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.55; font-weight: 600; margin: 0; }

/* Steps (alternating rows + device mockups) */
.pt-hiw-track { max-width: 1060px; margin-inline: auto; }
.pt-hiw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 64px 0; }
.pt-hiw-row:first-child { padding-top: 0; }
.pt-hiw-row:last-child { padding-bottom: 0; }
.pt-hiw-row.is-reverse .pt-hiw-visual { order: 2; }
.pt-hiw-row.is-reverse .pt-hiw-content { order: 1; }
.pt-hiw-divider { display: flex; align-items: center; justify-content: center; }
.pt-hiw-divider-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pt-hiw-divider-line { width: 0; height: 48px; border-left: 2px dashed #cbd5e1; }
.pt-hiw-divider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--line); }
.pt-hiw-numrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pt-hiw-num { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.pt-hiw-num-shadow { position: absolute; width: 38px; height: 38px; background: var(--wp--preset--color--accent); border-radius: 12px; bottom: 0; right: 0; }
.pt-hiw-num-main { position: absolute; width: 38px; height: 38px; background: var(--wp--preset--color--navy); border-radius: 12px; top: 0; left: 0; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--rethink); font-size: 16px; font-weight: 800; color: #fff; z-index: 1; }
.pt-hiw-steplabel { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.pt-hiw-steph { font-family: var(--wp--preset--font-family--rethink); font-size: clamp(24px, 3vw, 30px); font-weight: 800; color: var(--wp--preset--color--navy); line-height: 1.15; margin: 0 0 14px; }
.pt-hiw-stepp { font-size: 15.5px; color: var(--wp--preset--color--muted); line-height: 1.8; margin: 0 0 28px; }
.pt-hiw-details { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-hiw-detail { display: inline-flex; align-items: center; gap: 6px; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 50px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--navy); }
.pt-hiw-detail svg { width: 13px; height: 13px; fill: none; stroke: var(--wp--preset--color--primary); stroke-width: 2.2; flex-shrink: 0; }
/* device mockups */
.pt-hiw-visual { position: relative; }
.pt-ml { background: var(--wp--preset--color--surface); border: 1.5px solid var(--wp--preset--color--line); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(11,29,110,0.12); max-width: 360px; margin-inline: auto; }
.pt-ml-photo { height: 160px; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; padding: 14px; }
.pt-ml-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); }
.pt-ml-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.45); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.pt-ml-badge svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.pt-ml-body { padding: 18px; }
.pt-ml-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pt-ml-rating { font-size: 12px; font-weight: 700; color: var(--wp--preset--color--accent); }
.pt-ml-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--wp--preset--color--line); }
.pt-ml-reviews { font-size: 12px; color: var(--wp--preset--color--muted); }
.pt-ml-title { font-family: var(--wp--preset--font-family--rethink); font-size: 16px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 14px; line-height: 1.3; }
.pt-ml-footer { display: flex; align-items: center; justify-content: space-between; }
.pt-ml-price { font-size: 15px; font-weight: 800; color: var(--wp--preset--color--navy); }
.pt-ml-price span { font-size: 11px; font-weight: 500; color: var(--wp--preset--color--muted); }
.pt-ml-btn { background: var(--wp--preset--color--navy); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 50px; }
.pt-ml-tags { display: flex; gap: 8px; flex-wrap: wrap; max-width: 360px; margin: 12px auto 0; }
.pt-ml-tag { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.pt-mc { background: var(--wp--preset--color--surface); border: 1.5px solid var(--wp--preset--color--line); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(11,29,110,0.12); max-width: 360px; margin-inline: auto; }
.pt-mc-head { background: #075e54; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.pt-mc-avatar { width: 36px; height: 36px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; }
.pt-mc-name { font-size: 13px; font-weight: 700; color: #fff; }
.pt-mc-online { font-size: 11px; color: rgba(255,255,255,0.6); }
.pt-mc-wa { font-size: 10px; font-weight: 700; background: #25d366; color: #fff; padding: 3px 8px; border-radius: 20px; margin-left: auto; }
.pt-mc-msgs { padding: 14px 14px 8px; background: #f0f0f0; display: flex; flex-direction: column; gap: 6px; }
.pt-mc-msg { font-size: 12.5px; line-height: 1.45; padding: 8px 11px; border-radius: 10px; max-width: 82%; color: #111; }
.pt-mc-msg.is-received { background: #fff; align-self: flex-start; border-bottom-left-radius: 3px; }
.pt-mc-msg.is-sent { background: #dcf8c6; align-self: flex-end; border-bottom-right-radius: 3px; }
.pt-mc-time { font-size: 10px; color: #999; text-align: right; margin-top: 2px; }
.pt-mc-foot { padding: 10px 14px; background: #f0f0f0; }
.pt-mc-input { background: #fff; border-radius: 20px; padding: 7px 12px; font-size: 12px; color: #999; }
.pt-me { background: var(--wp--preset--color--surface); border: 1.5px solid var(--wp--preset--color--line); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(11,29,110,0.12); max-width: 380px; margin-inline: auto; }
.pt-me-top { background: #f5f5f5; border-bottom: 1px solid var(--wp--preset--color--line); padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
.pt-me-dots { display: flex; gap: 5px; }
.pt-me-dot { width: 10px; height: 10px; border-radius: 50%; }
.pt-me-dot.is-red { background: #ff5f57; } .pt-me-dot.is-yellow { background: #febc2e; } .pt-me-dot.is-green { background: #28c840; }
.pt-me-url { flex: 1; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; padding: 4px 10px; font-size: 11px; color: var(--wp--preset--color--muted); text-align: center; }
.pt-me-body { padding: 20px; }
.pt-me-from { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--wp--preset--color--line); }
.pt-me-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--navy); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; }
.pt-me-sname { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--navy); }
.pt-me-semail { font-size: 11px; color: var(--wp--preset--color--muted); }
.pt-me-subject { font-family: var(--wp--preset--font-family--rethink); font-size: 17px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 10px; }
.pt-me-preview { font-size: 13px; color: var(--wp--preset--color--muted); line-height: 1.65; margin: 0 0 20px; }
.pt-me-cta { display: block; background: var(--wp--preset--color--navy); color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 12px; border-radius: 10px; margin-bottom: 12px; text-decoration: none; }
.pt-me-count { text-align: center; font-size: 11px; color: var(--wp--preset--color--muted); margin: 0; }

/* Why grid (how-it-works) */
.pt-hiwwhy-grid { max-width: 1060px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pt-hiwwhy-card { background: var(--wp--preset--color--surface); border: 1.5px solid var(--wp--preset--color--line); border-radius: 20px; padding: 32px 28px; transition: box-shadow .2s, transform .2s; }
.pt-hiwwhy-card:hover { box-shadow: 0 8px 28px rgba(11,29,110,0.08); transform: translateY(-3px); }
.pt-hiwwhy-icon { width: 48px; height: 48px; background: var(--wp--preset--color--tint); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.pt-hiwwhy-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--wp--preset--color--primary); stroke-width: 1.8; }
.pt-hiwwhy-title { font-family: var(--wp--preset--font-family--rethink); font-size: 16px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 10px; line-height: 1.3; }
.pt-hiwwhy-body { font-size: 14px; color: var(--wp--preset--color--muted); line-height: 1.75; margin: 0; }

/* Custom-request callout (shared: how-it-works + browse) */
.pt-callout { max-width: 1060px; margin-inline: auto; background: var(--wp--preset--color--tint); border: 1.5px solid #d4daff; border-radius: 24px; padding: clamp(36px,4vw,52px) clamp(28px,4vw,56px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; }
.pt-callout-icon { width: 56px; height: 56px; background: var(--wp--preset--color--primary); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.pt-callout-icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; }
.pt-callout-label { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--primary); margin: 0 0 10px; }
.pt-callout-title { font-family: var(--wp--preset--font-family--rethink); font-size: clamp(22px,2.6vw,26px); font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 12px; line-height: 1.2; }
.pt-callout-body { font-size: 15px; color: var(--wp--preset--color--muted); line-height: 1.75; max-width: 540px; margin: 0; }
.pt-callout-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; padding: 16px 32px; border-radius: 50px; background: var(--wp--preset--color--navy); color: #fff; text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s; flex-shrink: 0; }
.pt-callout-btn:hover { background: var(--wp--preset--color--primary); transform: translateY(-2px); }
.pt-callout-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

@media (max-width: 1024px) {
	.pt-hiw-row { grid-template-columns: 1fr; gap: 40px; }
	.pt-hiw-row.is-reverse .pt-hiw-visual { order: 1; }
	.pt-hiw-row.is-reverse .pt-hiw-content { order: 2; }
	.pt-hiwwhy-grid { grid-template-columns: repeat(2, 1fr); }
	.pt-hiw-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.pt-hiwwhy-grid { grid-template-columns: 1fr; }
	.pt-callout { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- RECRUITMENT (photographer / join) ---------- */
.pt-hero-pills { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pt-hero-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 50px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--navy); }
.pt-hero-pill .pt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--accent); flex-shrink: 0; }
/* requirements (navy) */
.pt-req-inner { max-width: 1060px; margin-inline: auto; display: grid; grid-template-columns: 360px 1fr; gap: clamp(40px,5vw,80px); align-items: center; }
.pt-req-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; background: rgba(244,113,74,0.15); border: 1px solid rgba(244,113,74,0.3); border-radius: 50px; padding: 10px 18px; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--accent); }
.pt-req-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pt-req-list { display: flex; flex-direction: column; gap: 16px; }
.pt-req-item { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 22px 24px; transition: background .2s, border-color .2s; }
.pt-req-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.pt-req-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(244,113,74,0.12); border: 1px solid rgba(244,113,74,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-req-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 1.8; }
.pt-req-item-title { font-family: var(--wp--preset--font-family--rethink); font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 5px; }
.pt-req-item-body { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.65; margin: 0; }
/* benefits */
.pt-benefit-grid { max-width: 1060px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pt-benefit-card { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 24px; padding: 32px 28px; transition: box-shadow .2s, transform .2s; }
.pt-benefit-card:hover { box-shadow: 0 10px 32px rgba(11,29,110,0.08); transform: translateY(-3px); }
.pt-benefit-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.pt-benefit-icon svg { width: 24px; height: 24px; fill: none; stroke-width: 1.8; }
.pt-benefit-icon.is-clients { background: var(--wp--preset--color--tint); } .pt-benefit-icon.is-clients svg { stroke: var(--wp--preset--color--primary); }
.pt-benefit-icon.is-creative { background: #fff0eb; } .pt-benefit-icon.is-creative svg { stroke: var(--wp--preset--color--accent); }
.pt-benefit-icon.is-payment { background: #f0fdf4; } .pt-benefit-icon.is-payment svg { stroke: #16a34a; }
.pt-benefit-icon.is-reviews { background: #fef3c7; } .pt-benefit-icon.is-reviews svg { stroke: #d97706; }
.pt-benefit-icon.is-connection { background: #fdf4ff; } .pt-benefit-icon.is-connection svg { stroke: #9333ea; }
.pt-benefit-icon.is-flexible { background: #f0f9ff; } .pt-benefit-icon.is-flexible svg { stroke: #0284c7; }
.pt-benefit-title { font-family: var(--wp--preset--font-family--rethink); font-size: 17px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 10px; line-height: 1.25; }
.pt-benefit-body { font-size: 14px; color: var(--wp--preset--color--muted); line-height: 1.78; margin: 0; }
/* recruitment vertical numbered steps */
.pt-rsteps { max-width: 760px; margin-inline: auto; }
.pt-rstep { display: grid; grid-template-columns: 64px 1fr; gap: 24px; position: relative; padding-bottom: 36px; }
.pt-rstep:last-child { padding-bottom: 0; }
.pt-rstep:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 64px; width: 2px; height: calc(100% - 48px); border-left: 2px dashed var(--wp--preset--color--line); }
.pt-rstep-num { width: 64px; height: 64px; border-radius: 20px; background: var(--wp--preset--color--surface); border: 2px solid var(--wp--preset--color--line); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--rethink); font-size: 22px; font-weight: 800; color: var(--wp--preset--color--primary); flex-shrink: 0; position: relative; z-index: 1; }
.pt-rstep-body { padding-top: 12px; }
.pt-rstep-title { font-family: var(--wp--preset--font-family--rethink); font-size: 17px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 6px; }
.pt-rstep-desc { font-size: 14.5px; color: var(--wp--preset--color--muted); line-height: 1.78; margin: 0; }
/* founder message (navy) */
.pt-fmsg-inner { max-width: 1060px; margin-inline: auto; display: grid; grid-template-columns: 400px 1fr; gap: clamp(40px,5vw,72px); align-items: center; }
.pt-fmsg-label { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 16px; }
.pt-fmsg-title { font-family: var(--wp--preset--font-family--rethink); font-size: clamp(22px,2.8vw,28px); font-weight: 800; color: #fff; line-height: 1.25; margin: 0 0 24px; }
.pt-fmsg-body { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.85; margin: 0 0 14px; }
.pt-fmsg-body:last-of-type { margin-bottom: 0; }
.pt-fmsg-sig { margin-top: 28px; display: flex; align-items: center; gap: 16px; }
.pt-fmsg-sig-line { width: 36px; height: 2px; background: var(--wp--preset--color--accent); flex-shrink: 0; }
.pt-fmsg-sig-name { font-family: var(--wp--preset--font-family--rethink); font-size: 16px; font-weight: 800; color: #fff; }
.pt-fmsg-sig-role { font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 2px; }

@media (max-width: 960px) {
	.pt-req-inner, .pt-fmsg-inner { grid-template-columns: 1fr; gap: 48px; }
	.pt-benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.pt-benefit-grid { grid-template-columns: 1fr; }
}

/* ---------- REVIEWS ---------- */
.pt-rev-stats { display: inline-flex; align-items: center; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 50px; padding: 4px; }
.pt-rev-statchip { display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy); white-space: nowrap; }
.pt-rev-statchip + .pt-rev-statchip { border-left: 1.5px solid var(--wp--preset--color--line); }
.pt-rev-statnum { font-size: 18px; font-weight: 800; color: var(--wp--preset--color--primary); }
.pt-rev-stars { display: inline-flex; gap: 1px; }
.pt-rev-stars svg { width: 14px; height: 14px; fill: #f59e0b; }
.pt-rev-filter { max-width: 1160px; margin-inline: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-rev-filterlabel { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--navy); white-space: nowrap; }
.pt-rev-filterbtn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 50px; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--muted); cursor: pointer; transition: all .15s; }
.pt-rev-filterbtn:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.pt-rev-filterbtn.is-active { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: #fff; }
.pt-rev-grid { max-width: 1160px; margin-inline: auto; columns: 3; column-gap: 20px; }
.pt-rev-card { break-inside: avoid; background: var(--wp--preset--color--surface); border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; padding: 24px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow .2s, transform .2s; }
.pt-rev-card.is-hidden { display: none; }
.pt-rev-card:hover { box-shadow: 0 8px 28px rgba(11,29,110,0.09); transform: translateY(-2px); }
.pt-rev-head { display: flex; align-items: center; gap: 12px; }
.pt-rev-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--rethink); font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0; }
.pt-rev-name { font-size: 15px; font-weight: 700; color: var(--wp--preset--color--navy); line-height: 1.2; margin: 0; }
.pt-rev-date { font-size: 12px; color: var(--wp--preset--color--muted); font-weight: 600; margin: 2px 0 0; }
.pt-rev-cardstars { display: flex; gap: 2px; }
.pt-rev-cardstars svg { width: 16px; height: 16px; fill: #f59e0b; }
.pt-rev-title { font-size: 15px; font-weight: 700; color: var(--wp--preset--color--navy); line-height: 1.35; margin: 0; }
.pt-rev-text { font-size: 14px; color: var(--wp--preset--color--muted); line-height: 1.75; margin: 0; }
.pt-rev-explink { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--wp--preset--color--base); border-radius: 10px; text-decoration: none; transition: background .15s; margin-top: 2px; }
.pt-rev-explink:hover { background: var(--wp--preset--color--tint); }
.pt-rev-explink svg { width: 14px; height: 14px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 2; flex-shrink: 0; }
.pt-rev-explink span { font-size: 12.5px; font-weight: 600; color: var(--wp--preset--color--navy); line-height: 1.4; }
.pt-rev-loadmore { text-align: center; }
.pt-rev-loadmore button { font-family: inherit; font-size: 15px; font-weight: 700; padding: 15px 40px; border-radius: 50px; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; }
.pt-rev-loadmore button:hover { background: var(--wp--preset--color--navy); color: #fff; border-color: var(--wp--preset--color--navy); }
.pt-rev-loadmore svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
@media (max-width: 1024px) { .pt-rev-grid { columns: 2; } }
@media (max-width: 720px) {
	.pt-rev-grid { columns: 1; }
	.pt-rev-stats { flex-direction: column; border-radius: 16px; }
	.pt-rev-statchip + .pt-rev-statchip { border-left: none; border-top: 1.5px solid var(--wp--preset--color--line); }
	.pt-rev-filter { flex-direction: column; align-items: flex-start; }
}

/* ---------- BROWSE (destinations) ---------- */
.pt-browse-count { display: inline-flex; align-items: center; gap: 20px; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 50px; padding: 10px 24px; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--navy); }
.pt-browse-count span span { color: var(--wp--preset--color--accent); }
.pt-browse-count-sep { width: 1px; height: 14px; background: var(--wp--preset--color--line); }
.pt-browse-country { margin-bottom: 72px; }
.pt-browse-country:last-child { margin-bottom: 0; }
.pt-browse-chead { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1.5px solid var(--wp--preset--color--line); flex-wrap: wrap; }
.pt-browse-flag { font-size: 32px; line-height: 1; }
.pt-browse-cname { font-family: var(--wp--preset--font-family--rethink); font-size: 26px; font-weight: 800; color: var(--wp--preset--color--navy); flex: 1; margin: 0; }
.pt-browse-cbadge { font-size: 12px; font-weight: 700; color: var(--wp--preset--color--muted); background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 50px; padding: 6px 14px; }
.pt-browse-viewall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--primary); text-decoration: none; background: var(--wp--preset--color--tint); border: 1.5px solid #d4daff; border-radius: 50px; padding: 8px 16px; transition: background .2s, transform .2s; }
.pt-browse-viewall:hover { background: #d4daff; transform: translateY(-1px); }
.pt-browse-viewall svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.pt-browse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pt-browse-grid.is-two { grid-template-columns: repeat(2, 1fr); }
.pt-browse-card { background: var(--wp--preset--color--surface); border-radius: 20px; overflow: hidden; border: 1.5px solid var(--wp--preset--color--line); transition: box-shadow .25s, transform .25s; text-decoration: none; display: block; color: inherit; }
.pt-browse-card:hover { box-shadow: 0 16px 48px rgba(11,29,110,0.12); transform: translateY(-4px); }
.pt-browse-photo { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.pt-browse-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pt-browse-card:hover .pt-browse-photo img { transform: scale(1.05); }
.pt-browse-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,29,110,0.55) 0%, transparent 55%); }
.pt-browse-body { padding: 22px 22px 24px; }
.pt-browse-cardname { font-family: var(--wp--preset--font-family--rethink); font-size: 20px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 8px; line-height: 1.2; }
.pt-browse-carddesc { font-size: 14px; color: var(--wp--preset--color--muted); line-height: 1.7; margin: 0 0 18px; }
.pt-browse-cardcta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--primary); transition: gap .2s; }
.pt-browse-card:hover .pt-browse-cardcta { gap: 10px; }
.pt-browse-cardcta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
@media (max-width: 1024px) { .pt-browse-grid, .pt-browse-grid.is-two { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .pt-browse-grid, .pt-browse-grid.is-two { grid-template-columns: 1fr; } }

/* ---------- CONTACT + CUSTOM REQUEST (info panel + plugin form slot) ---------- */
.pt-cq-inner { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1.55fr; gap: 28px; align-items: start; }
.pt-panel { background: var(--wp--preset--color--navy); border-radius: 24px; padding: clamp(32px,4vw,44px) clamp(24px,3vw,40px); position: relative; overflow: hidden; }
.pt-panel-eyebrow { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 14px; }
.pt-panel-title { font-family: var(--wp--preset--font-family--rethink); font-size: clamp(24px,3vw,28px); font-weight: 800; color: #fff; line-height: 1.2; margin: 0 0 14px; }
.pt-panel-desc { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0 0 36px; }
.pt-panel-items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.pt-panel-item { display: flex; align-items: flex-start; gap: 14px; }
.pt-panel-item-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-panel-item-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 1.8; }
.pt-panel-label { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 3px; }
.pt-panel-value { font-size: 15px; font-weight: 600; color: #fff; margin: 0; }
.pt-panel-value a { color: #fff; text-decoration: none; }
.pt-panel-value a:hover { text-decoration: underline; }
.pt-panel-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 0 0 28px; }
.pt-panel-social-label { font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 14px; }
.pt-panel-social { display: flex; gap: 10px; }
.pt-panel-social a { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.pt-panel-social a:hover { background: rgba(255,255,255,0.2); }
.pt-panel-social svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; }
/* custom-request panel steps */
.pt-panel-steps { display: flex; flex-direction: column; }
.pt-panel-step { display: flex; gap: 16px; align-items: flex-start; }
.pt-panel-step-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.pt-panel-step-num { width: 36px; height: 36px; border-radius: 10px; background: var(--wp--preset--color--accent); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--rethink); font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; }
.pt-panel-step-line { width: 2px; flex: 1; min-height: 28px; background: rgba(255,255,255,0.12); margin: 6px 0; }
.pt-panel-step:last-child .pt-panel-step-line { display: none; }
.pt-panel-step-body { padding-bottom: 28px; }
.pt-panel-step:last-child .pt-panel-step-body { padding-bottom: 0; }
.pt-panel-step-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 5px; line-height: 1.3; }
.pt-panel-step-desc { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; margin: 0; }
.pt-panel-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.pt-panel-note svg { width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 1.8; flex-shrink: 0; margin-top: 1px; }
.pt-panel-note p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.65; margin: 0; }
.pt-panel-note strong { color: rgba(255,255,255,0.85); }
/* form card + plugin-form styling */
.pt-formcard { background: var(--wp--preset--color--surface); border-radius: 24px; border: 1.5px solid var(--wp--preset--color--line); padding: clamp(28px,3vw,44px) clamp(22px,3vw,40px); }
.pt-formcard-title { font-family: var(--wp--preset--font-family--rethink); font-size: 22px; font-weight: 800; color: var(--wp--preset--color--navy); margin: 0 0 6px; }
.pt-formcard-sub { font-size: 14.5px; color: var(--wp--preset--color--muted); line-height: 1.6; margin: 0 0 28px; }
.pt-formcard-slot { border: 1.5px dashed var(--wp--preset--color--line); border-radius: 14px; padding: 20px; }
/* Style common form-plugin (CF7 / WPForms / Forms) markup so it inherits the design */
.pt-formcard label { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--navy); display: block; margin-bottom: 7px; }
.pt-formcard input[type="text"], .pt-formcard input[type="email"], .pt-formcard input[type="tel"], .pt-formcard input[type="number"], .pt-formcard input[type="date"], .pt-formcard input[type="url"], .pt-formcard textarea, .pt-formcard select { font-family: inherit; font-size: 15px; color: var(--wp--preset--color--navy); background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 10px; padding: 12px 14px; width: 100%; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; margin-bottom: 16px; }
.pt-formcard textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.pt-formcard input:focus, .pt-formcard textarea:focus, .pt-formcard select:focus { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--surface); box-shadow: 0 0 0 3px rgba(59,80,213,0.1); }
.pt-formcard input[type="submit"], .pt-formcard button[type="submit"], .pt-formcard .wp-block-button__link { width: 100%; background: var(--wp--preset--color--accent); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; padding: 15px 24px; border-radius: 50px; border: none; cursor: pointer; transition: background .2s, transform .2s; }
.pt-formcard input[type="submit"]:hover, .pt-formcard button[type="submit"]:hover { background: var(--wp--preset--color--accent-hover); transform: translateY(-2px); }
.pt-formcard-note { text-align: center; font-size: 12.5px; color: var(--wp--preset--color--muted); margin: 14px 0 0; line-height: 1.5; }
.pt-cq-hint { display: flex; align-items: flex-start; gap: 12px; background: var(--wp--preset--color--tint); border-radius: 12px; padding: 14px 16px; margin-bottom: 24px; }
.pt-cq-hint svg { width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--primary); stroke-width: 1.8; flex-shrink: 0; margin-top: 1px; }
.pt-cq-hint p { font-size: 13.5px; color: var(--wp--preset--color--primary); line-height: 1.6; margin: 0; }
.pt-cq-hint a { color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: underline; }
.pt-hero-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.pt-hero-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 50px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--navy); }
.pt-hero-chip svg { width: 15px; height: 15px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 2; flex-shrink: 0; }
@media (max-width: 900px) {
	.pt-cq-inner { grid-template-columns: 1fr; gap: 24px; }
	.pt-formcard { order: -1; }
}

/* ---------- PRIVACY (extra legal-doc components) ---------- */
.pt-doc-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 14px; border: 1.5px solid var(--wp--preset--color--line); border-radius: 10px; overflow: hidden; }
.pt-doc-table th { background: var(--wp--preset--color--base); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--jakarta); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 16px; text-align: left; border-bottom: 1.5px solid var(--wp--preset--color--line); }
.pt-doc-table td { padding: 12px 16px; color: var(--wp--preset--color--muted); border-bottom: 1px solid var(--wp--preset--color--line); line-height: 1.6; vertical-align: top; }
.pt-doc-table tr:last-child td { border-bottom: none; }
.pt-doc-table td:first-child { font-weight: 600; color: var(--wp--preset--color--navy); }
.pt-proc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; }
.pt-proc-item { display: flex; align-items: flex-start; gap: 12px; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 10px; padding: 12px 14px; }
.pt-proc-name { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy); min-width: 100px; flex-shrink: 0; }
.pt-proc-desc { font-size: 13.5px; color: var(--wp--preset--color--muted); line-height: 1.55; }
.pt-proc-desc a { color: var(--wp--preset--color--primary); font-weight: 600; text-decoration: none; }
.pt-cookie-types { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pt-cookie-type { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--wp--preset--color--line); }
.pt-cookie-badge { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; margin-top: 1px; }
.pt-cookie-badge.is-required { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); }
.pt-cookie-badge.is-analytics { background: #fff0eb; color: var(--wp--preset--color--accent); }
.pt-cookie-badge.is-marketing { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.pt-cookie-name { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy); margin: 0 0 4px; }
.pt-cookie-desc { font-size: 13.5px; color: var(--wp--preset--color--muted); line-height: 1.55; margin: 0; }
@media (max-width: 640px) {
	.pt-proc-item { flex-direction: column; gap: 4px; }
	.pt-proc-name { min-width: unset; }
}

/* ==========================================================================
   HOMEPAGE (front-page.html) — sections that are unique to the landing page.
   Everything here is prefixed .pt-hp-* so it never collides with the shared
   landing-page components (.pt-dtile, .pt-shoot-card, .pt-why2-*, .pt-faq2-*).
   Tokens only — colours/radii come from theme.json.
   ========================================================================== */

/* Shared: centred "see more" pill link that closes several sections. */
.pt-morelink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 15px;
	font-weight: 700;
	padding: 13px 28px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1.5px solid var(--wp--preset--color--primary);
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pt-morelink:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
	transform: translateY(-2px);
}
.pt-morelink svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}
.pt-morelink:hover svg { transform: translateX(3px); }
.pt-hp-secfoot { margin-top: 36px; text-align: center; }

/* --------------------------------------------------------------------------
   Trust bar — four stat cells that invert to navy on hover.
   Numbers animate via .pt-count (assets/js/counter.js).
   DEV NOTE: figures are placeholders; pull the real global numbers from Bubble.
   -------------------------------------------------------------------------- */
.pt-hp-stats {
	background: var(--wp--preset--color--tint);
	border-radius: 20px;
	padding: 2rem;
}
.pt-hp-statgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(59, 80, 213, 0.12);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.pt-hp-stat {
	background: var(--wp--preset--color--surface);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background .25s ease;
}
/* The cells carry WordPress preset colour classes (has-…-color), which ship
   with !important — so the hover swap needs it too, or it never wins. */
.pt-hp-stat:hover { background: var(--wp--preset--color--navy) !important; }
.pt-hp-statlabel {
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	transition: color .25s ease;
}
.pt-hp-statnum {
	font-family: var(--wp--preset--font-family--rethink);
	font-size: clamp(34px, 4vw, 48px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--navy);
	margin: 0;
	transition: color .25s ease;
}
.pt-hp-statdesc {
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	margin: 0;
	transition: color .25s ease;
}
.pt-hp-stat:hover .pt-hp-statlabel { color: rgba(255, 255, 255, 0.5) !important; }
.pt-hp-stat:hover .pt-hp-statnum { color: #fff !important; }
.pt-hp-stat:hover .pt-hp-statdesc { color: rgba(255, 255, 255, 0.6) !important; }
.pt-hp-statstar {
	color: var(--wp--preset--color--star);
	font-size: 0.6em;
	display: inline-block;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Destinations — square city tiles with a reveal-on-hover arrow.
   -------------------------------------------------------------------------- */
.pt-hp-cities {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.pt-hp-ctile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	text-decoration: none;
}
.pt-hp-ctile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.25, .46, .45, .94);
}
.pt-hp-ctile:hover img { transform: scale(1.06); }
.pt-hp-ctile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 29, 110, 0) 35%, rgba(11, 29, 110, 0.85) 100%);
	transition: opacity .3s ease;
}
.pt-hp-ctile:hover .pt-hp-ctile-overlay { opacity: .85; }
.pt-hp-ctile-body { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.pt-hp-ctile-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	transition: gap .3s ease;
}
.pt-hp-ctile:hover .pt-hp-ctile-name { gap: 12px; }
.pt-hp-ctile-arrow {
	font-size: 16px;
	line-height: 1;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .3s ease, transform .3s ease;
}
.pt-hp-ctile:hover .pt-hp-ctile-arrow { opacity: 1; transform: translateX(0); }
.pt-hp-ctile-count {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}
/* The whole tile navigates via the click forwarding in pages.js (cursor set in
   the block-conversion section further down). The old stretched-::after hack
   that lived here is gone: it overrode the hover arrow the tiles share with
   the style tiles. */

/* --------------------------------------------------------------------------
   Most popular photoshoots — cards with the photographer over the image.
   -------------------------------------------------------------------------- */
.pt-hp-shoots {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.pt-hp-shoot {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card-soft);
	color: inherit;
	text-decoration: none;
	transition: box-shadow .25s ease, transform .25s ease;
}
.pt-hp-shoot:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-3px);
	color: inherit;
}
.pt-hp-shoot-media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	flex-shrink: 0;
}
.pt-hp-shoot-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}
.pt-hp-shoot:hover .pt-hp-shoot-media img { transform: scale(1.04); }
.pt-hp-shoot-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 50%);
}
.pt-hp-shoot-by {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 7px;
}
.pt-hp-shoot-by img {
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.pt-hp-shoot-by span {
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.pt-hp-shoot-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.pt-hp-shoot-title {
	display: block;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--navy);
	margin: 0;
	min-height: 38px;
}
.pt-hp-shoot-place { display: block; font-size: 13px; color: var(--wp--preset--color--faint); margin: 0; }
.pt-hp-shoot-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pt-hp-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}
.pt-hp-tag svg {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pt-hp-tag.is-photos { background: #dcfce7; color: #15803d; }
.pt-hp-tag.is-time { background: #dbeafe; color: #1d4ed8; }
.pt-hp-shoot-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--border-light);
}
.pt-hp-shoot-price {
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy);
}
.pt-hp-shoot-price small { font-size: 12px; font-weight: 400; color: var(--wp--preset--color--faint); }
.pt-hp-shoot-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

/* --------------------------------------------------------------------------
   Session gallery — the shared .pt-gallery collage plus a hover zoom.
   -------------------------------------------------------------------------- */
.pt-hp-gallery .wp-block-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}
.pt-hp-gallery img { transition: transform .5s cubic-bezier(.25, .46, .45, .94); }
.pt-hp-gallery .wp-block-image:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Why book with PhotoTrips — plain white benefit cards (no hover inversion,
   so it reads calmer than the .pt-why2 grid used on the landing pages).
   -------------------------------------------------------------------------- */
.pt-hp-whygrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.pt-hp-whycard {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow .25s ease, transform .25s ease;
}
.pt-hp-whycard:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-2px);
}
.pt-hp-whyic {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pt-hp-whyic svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--wp--preset--color--primary);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pt-hp-whycard h3 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
	margin: 0;
}
.pt-hp-whycard p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Traveler reviews.
   -------------------------------------------------------------------------- */
.pt-hp-testigrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.pt-hp-testi {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow .25s ease, transform .25s ease;
}
.pt-hp-testi:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-2px);
}
.pt-hp-testi-stars {
	color: var(--wp--preset--color--star);
	font-size: 15px;
	letter-spacing: 2px;
	margin: 0;
}
.pt-hp-testi-quote {
	flex: 1;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--foreground);
	margin: 0;
}
.pt-hp-testi-who { display: flex; align-items: center; gap: 12px; }
.pt-hp-testi-who img {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}
.pt-hp-testi-name {
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin: 0;
}
.pt-hp-testi-meta { font-size: 12.5px; color: var(--wp--preset--color--faint); margin: 0; }

/* --------------------------------------------------------------------------
   Browse by style — auto-fit so any number of tiles lays out cleanly.
   -------------------------------------------------------------------------- */
.pt-hp-styles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}
.pt-hp-stile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	text-decoration: none;
}
.pt-hp-stile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.25, .46, .45, .94);
}
.pt-hp-stile:hover img { transform: scale(1.06); }
.pt-hp-stile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 29, 110, 0) 38%, rgba(11, 29, 110, 0.82) 100%);
	transition: opacity .3s ease;
}
.pt-hp-stile:hover .pt-hp-stile-overlay { opacity: .9; }
.pt-hp-stile-body { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.pt-hp-stile-name {
	display: block;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
	margin-bottom: 3px;
}
.pt-hp-stile-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}
.pt-hp-stile-arrow {
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .3s ease, transform .3s ease;
}
.pt-hp-stile:hover .pt-hp-stile-arrow { opacity: 1; transform: translateX(0); }

/* --------------------------------------------------------------------------
   Closing CTA band.
   -------------------------------------------------------------------------- */
.pt-hp-cta {
	background: var(--wp--preset--color--navy);
	border-radius: 20px;
	padding: 48px 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.pt-hp-cta-text { display: flex; flex-direction: column; gap: 10px; }
.pt-hp-cta-eyebrow {
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin: 0;
}
.pt-hp-cta-title {
	font-family: var(--wp--preset--font-family--rethink);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0;
}
.pt-hp-cta-sub {
	max-width: 420px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
}
.pt-hp-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	white-space: nowrap;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 15px;
	font-weight: 700;
	padding: 15px 28px;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}
.pt-hp-cta-btn:hover {
	background: var(--wp--preset--color--accent-hover);
	color: #fff;
	transform: translateY(-2px);
}
.pt-hp-cta-btn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}
.pt-hp-cta-btn:hover svg { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Homepage responsive steps.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.pt-hp-cities { grid-template-columns: repeat(3, 1fr); }
	.pt-hp-shoots { grid-template-columns: repeat(2, 1fr); }
	.pt-hp-testigrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.pt-hp-whygrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
	.pt-hp-statgrid { grid-template-columns: repeat(2, 1fr); }
	.pt-hp-cities { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.pt-hp-shoots { gap: 14px; }
	.pt-hp-styles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
	.pt-hp-stile-name { font-size: 17px; }
	.pt-hp-testigrid { grid-template-columns: 1fr; }
	.pt-hp-cta { flex-direction: column; align-items: flex-start; padding: 32px 28px; gap: 24px; }
}
@media (max-width: 600px) {
	.pt-hp-whygrid { grid-template-columns: 1fr; }
	.pt-hp-shoots { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.pt-hp-stats { padding: 1.25rem; }
	.pt-hp-statgrid { grid-template-columns: 1fr; }
	.pt-hp-cities { grid-template-columns: 1fr; }
	.pt-hp-styles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LANDING PAGES (country / city / tag) — the components that are specific to
   patterns/landing-*.php. Everything else on those pages reuses the shared
   .pt-hp-* marketing sections above (stats band, city tiles, photoshoot cards,
   why cards, reviews, style tiles, closing CTA) and the .pt-faq2-* accordion.
   ========================================================================== */

/* Grid-width modifiers, so the same components can run 3-up or 4-up depending
   on the page. Base widths live with each component above. */
.pt-hp-statgrid.is-3 { grid-template-columns: repeat(3, 1fr); }
.pt-hp-cities.is-3 { grid-template-columns: repeat(3, 1fr); }
.pt-hp-shoots.is-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
	.pt-hp-cities.is-3 { grid-template-columns: repeat(3, 1fr); }
	.pt-hp-shoots.is-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
	/* Three stats never go 2-up: the fourth cell would sit there empty. They
	   stay 3 across, then drop to one per row below 600px. */
	.pt-hp-statgrid.is-3 { grid-template-columns: repeat(3, 1fr); }
	.pt-hp-cities.is-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.pt-hp-shoots.is-3 { grid-template-columns: 1fr; }
	.pt-hp-statgrid.is-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.pt-hp-statgrid.is-3 { grid-template-columns: 1fr; }
	.pt-hp-cities.is-3 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Editorial intro card — the long-form SEO paragraphs that open every landing
   page, on a white card with two soft off-canvas decorative circles.
   -------------------------------------------------------------------------- */
.pt-intro-card {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	padding: clamp(32px, 5vw, 56px);
	box-shadow: var(--wp--preset--shadow--card-soft);
}
.pt-intro-deco {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-intro-deco.is-1 {
	width: 320px;
	height: 320px;
	top: -150px;
	right: -110px;
	background: var(--wp--preset--color--tint);
}
.pt-intro-deco.is-2 {
	width: 160px;
	height: 160px;
	bottom: -70px;
	left: -50px;
	background: var(--wp--preset--color--accent);
	opacity: .05;
}
.pt-intro-body { position: relative; z-index: 2; }
.pt-intro-body > .pt-kicker { display: inline-block; margin: 0 0 22px; }
.pt-intro-body p {
	max-width: 660px;
	font-size: 16px;
	line-height: 1.85;
	color: var(--wp--preset--color--foreground);
	margin: 0;
}
.pt-intro-body p + p { margin-top: 20px; }
.pt-intro-lede {
	color: var(--wp--preset--color--navy);
	font-weight: 500;
}
@media (max-width: 781px) {
	.pt-intro-deco.is-1 { width: 220px; height: 220px; top: -110px; right: -80px; }
}

/* --------------------------------------------------------------------------
   Popular photo locations — stacked horizontal cards (square image left,
   area pill + name + description right). Replaces the two-up editorial grid.
   The section markup is baked into the landing pages with the old inline
   typography, hence the !importants where the two designs disagree.
   -------------------------------------------------------------------------- */
.pt-locs {
	display: grid;
	gap: 15px;
	max-width: 940px !important;
	margin: 32px auto 0 !important;
}
.pt-loc {
	display: grid;
	grid-template-columns: 185px minmax(0, 1fr);
	gap: 23px;
	padding: 14px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	box-shadow: 0 5px 18px rgba(11, 29, 110, 0.035);
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.pt-loc:hover {
	position: relative;
	z-index: 1;
	transform: translateX(5px);
	border-color: #C2D0F5;
	box-shadow: 0 17px 34px rgba(11, 29, 110, 0.1);
}
.pt-loc-media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 13px;
	background: var(--wp--preset--color--tint);
}
.pt-loc-media .wp-block-image { height: 100%; margin: 0; }
.pt-loc-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.pt-loc:hover .pt-loc-media img { transform: scale(1.055); }
.pt-loc-body { align-self: center; padding: 5px 7px 5px 0 !important; }
.pt-loc-tag {
	display: inline-block;
	margin-bottom: 7px !important;
	padding: 4px 9px !important;
	border-radius: 99px;
	background: #fff0eb;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.pt-loc-name {
	margin: 0 0 7px !important;
	font-size: 21px !important;
	font-weight: 800;
	line-height: 1.15 !important;
	letter-spacing: -.025em !important;
	color: var(--wp--preset--color--navy);
}
.pt-loc-desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--muted);
}
@media (max-width: 540px) {
	.pt-loc {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 12px;
		border-radius: 16px !important;
	}
	.pt-loc-body { padding: 2px 4px 5px !important; }
	.pt-loc-tag { font-size: 9px !important; }
}

/* --------------------------------------------------------------------------
   Editorial intro card — the white prose card right after a landing hero.
   Deco circles are drawn here so the block markup stays plain paragraphs.
   -------------------------------------------------------------------------- */
.pt-intro-card {
	position: relative;
	overflow: hidden;
	max-width: 800px !important;
	margin-inline: auto;
	padding: clamp(32px, 5vw, 56px);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line), 0 4px 24px rgba(3, 12, 87, 0.04);
}
.pt-intro-card::before,
.pt-intro-card::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-intro-card::before {
	width: 320px;
	height: 320px;
	top: -150px;
	right: -110px;
	background: var(--wp--preset--color--tint);
}
.pt-intro-card::after {
	width: 160px;
	height: 160px;
	bottom: -70px;
	left: -50px;
	background: var(--wp--preset--color--accent);
	opacity: 0.05;
}
.pt-intro-card > * { position: relative; z-index: 1; }
.pt-intro-p { max-width: none; }
.pt-intro-p .pt-lede { color: var(--wp--preset--color--navy); font-weight: 600; }
@media (max-width: 768px) {
	.pt-intro-card::before { width: 220px; height: 220px; top: -110px; right: -80px; }
}

/* Multi-paragraph FAQ answers (the tag pages need two paragraphs per answer).
   .pt-faq2-answer is normally a <p>; as a wrapper it holds several. */
.pt-faq2-answer p { margin: 0; }
.pt-faq2-answer p + p { margin-top: 12px; }

/* ==========================================================================
   PAGE: ABOUT US  (patterns/page-about.php)
   ==========================================================================
   DIVISION OF LABOUR — read this before adding anything here.

   The BLOCKS own everything visual: background colours, text colours, font
   sizes/weights/letter-spacing/line-height, padding, margins, border colours,
   border widths and border radii all live in the block attributes, so they show
   up in the editor sidebar and are editable without touching code. Do NOT move
   any of that back into this file — CSS here would out-specify the editor and
   silently make the controls do nothing.

   This file owns only what a core block cannot express:
     • CSS grid / flex geometry and max-widths
     • absolute positioning (the tagline pills, the founder photo accent)
     • the decorative background circles (::before / ::after — no content, so
       they are deliberately not blocks)
     • the oversized quote glyph and the timeline connector line
     • the founder photo crop
     • the responsive breakpoints for the above
   ========================================================================== */

.pt-page-about {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	/* theme.json's 26px blockGap would space every nested group; zeroing the
	   custom property makes core's own gap rule compute to 0 without touching
	   the margins the blocks set for themselves. */
	--wp--style--block-gap: 0;
}
/* useRootPaddingAwareAlignments pads `.has-global-padding > .alignfull`; that
   rule is (0,2,0), hence the #id prefix. The sections carry their own padding. */
#pt-content .pt-page-about { padding-left: 0; padding-right: 0; }
.pt-page-about .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-about .hero,
.pt-page-about .founder,
.pt-page-about .cta { position: relative; overflow: hidden; }
.pt-page-about .hero::before,
.pt-page-about .hero::after,
.pt-page-about .hero-content::before,
.pt-page-about .founder::before,
.pt-page-about .founder::after,
.pt-page-about .cta::before,
.pt-page-about .cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-about .hero::before  { width: 440px; height: 440px; top: -180px; right: -120px; background: #C2D0F5; opacity: .32; }
.pt-page-about .hero::after   { width: 220px; height: 220px; bottom: -80px; left: -60px;  background: #C2D0F5; opacity: .18; }
.pt-page-about .hero-content::before { width: 100px; height: 100px; bottom: -48px; right: -180px; background: #F4714A; opacity: .07; }
.pt-page-about .founder::before { width: 480px; height: 480px; top: -200px; right: -140px; background: #3B50D5; opacity: .16; }
.pt-page-about .founder::after  { width: 260px; height: 260px; bottom: -80px; left: -60px;  background: #F4714A; opacity: .07; }
.pt-page-about .cta::before { width: 400px; height: 400px; top: -160px; right: -120px; background: #3B50D5; opacity: .22; }
.pt-page-about .cta::after  { width: 220px; height: 220px; bottom: -80px; left: -60px;  background: #F4714A; opacity: .09; }

/* -- HERO -- */
.pt-page-about .hero-content { position: relative; z-index: 2; max-width: 700px; margin-inline: auto; }
.pt-page-about .hero-sub { max-width: 560px; margin-inline: auto; }

/* -- MISSION -- */
.pt-page-about .mission-inner {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}
.pt-page-about .mission-quote { position: relative; overflow: hidden; }
.pt-page-about .mission-quote::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: 20px;
	font-size: 120px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.06);
	line-height: 1;
	pointer-events: none;
}
.pt-page-about .mission-quote > * { position: relative; z-index: 1; }
.pt-page-about .mission-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* -- TAGLINE -- */
.pt-page-about .tagline-stage {
	position: relative;
	width: 100%;
	max-width: 1000px;
	height: 280px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pt-page-about .tl-pill { position: absolute; z-index: 3; white-space: nowrap; }
.pt-page-about .tagline-word { position: relative; z-index: 2; white-space: nowrap; }
.pt-page-about .tl-p1 { top: 8%;    left: 12%; transform: rotate(-3deg); }
.pt-page-about .tl-p2 { top: 16%;   right: 8%; transform: rotate(2deg); }
.pt-page-about .tl-p3 { bottom: 6%; left: 6%;  transform: rotate(3deg); }
.pt-page-about .tl-p4 { bottom: 8%; right: 7%; transform: rotate(-2.5deg); }
.pt-page-about .tagline-meaning { max-width: 640px; margin-inline: auto; }

/* -- FOUNDER -- */
.pt-page-about .founder-inner {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 72px;
	align-items: center;
	position: relative;
	z-index: 2;
}
.pt-page-about .founder-photo-wrap { position: relative; }
/* the offset accent rectangle behind the portrait */
.pt-page-about .founder-photo-wrap::before {
	content: "";
	position: absolute;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background: #F4714A;
	border-radius: 24px;
	bottom: -12px;
	right: -12px;
}
.pt-page-about .founder-photo { position: relative; z-index: 1; }
.pt-page-about .founder-photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.pt-page-about .founder-bio-chips { justify-content: center; }

/* timeline: icon column + body column, with the dashed connector between steps */
.pt-page-about .fst-item { position: relative; }
.pt-page-about .fst-item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 21px;
	top: 44px;
	width: 2px;
	height: calc(100% - 16px);
	border-left: 2px dashed rgba(255, 255, 255, 0.12);
}
.pt-page-about .fst-icon { flex: none; }

/* -- VALUES -- */
.pt-page-about .section-header { max-width: 1060px; margin-inline: auto; }
.pt-page-about .section-sub { max-width: 500px; margin-inline: auto; }
.pt-page-about .values-grid {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.pt-page-about .value-card { align-items: start; transition: box-shadow .2s, transform .2s; }
.pt-page-about .value-card:hover {
	box-shadow: 0 10px 32px rgba(11, 29, 110, 0.08);
	transform: translateY(-3px);
}
.pt-page-about .value-icon { flex: none; }
/* the small orange dot in front of each detail line */
.pt-page-about .value-detail::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #F4714A;
	flex-shrink: 0;
	display: inline-block;
	margin-right: 8px;
	vertical-align: middle;
}

/* -- CLOSING CTA -- */
.pt-page-about .cta-content { position: relative; z-index: 2; }
/* Core's button block cannot contain an image, so these two icons stay CSS.
   They are masks tinted with currentColor, so they follow whatever text colour
   the button is given in the editor. */
.pt-page-about .cta-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-about .cta-btn .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.pt-page-about .cta-btn.primary .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.pt-page-about .cta-btn.secondary .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}
.pt-page-about .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }

/* -- RESPONSIVE (geometry only) -- */
@media (max-width: 960px) {
	.pt-page-about .mission-inner { grid-template-columns: 1fr; gap: 48px; }
	.pt-page-about .founder-inner { grid-template-columns: 1fr; gap: 48px; }
	.pt-page-about .founder-photo-wrap { max-width: 360px; margin-inline: auto; }
	.pt-page-about .values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	/* Phones keep the original floating design — pills scattered around the
	   title — re-plotted so nothing overlaps: the title sits in a clear band in
	   the middle of a 330px stage, two pills above it and two below, each pair
	   at different heights and opposite corners, smaller and slightly tilted. */
	.pt-page-about .tagline-stage { height: 330px; padding: 0; }
	.pt-page-about .tagline-word { white-space: normal; padding: 0 8px; }
	body .pt-page-about .tagline-word:not(#pt-ts) { font-size: 30px !important; line-height: 1.15 !important; }
	.pt-page-about .tl-pill {
		position: absolute;
		font-size: 12.5px !important;
		padding: 7px 14px !important;
		white-space: nowrap;
	}
	.pt-page-about .tl-p1 { top: 14px;    left: 2%;  right: auto; bottom: auto; transform: rotate(-4deg); }
	.pt-page-about .tl-p2 { top: 66px;    right: 2%; left: auto;  bottom: auto; transform: rotate(3deg); }
	.pt-page-about .tl-p3 { bottom: 66px; left: 3%; right: auto; top: auto;    transform: rotate(3deg); }
	.pt-page-about .tl-p4 { bottom: 14px; right: 2%; left: auto;  top: auto;    transform: rotate(-3deg); }
	.pt-page-about .value-card { flex-direction: column; }
}

/* ==========================================================================
   PAGE: HOW IT WORKS  (patterns/page-how-it-works.php)
   ==========================================================================
   Same division of labour as the About page: the BLOCKS own every colour,
   background, font size/weight/spacing, padding, margin, border and radius, so
   all of it is editable from the editor sidebar. This file holds only geometry
   a core block cannot express.

   ⚠️ Do NOT move a colour or size back into this file — CSS out-specifies the
      block attribute and the editor control silently stops working.

   ONE DELIBERATE EXCEPTION, at the bottom: the =720px overrides use !important.
   Block attributes render as INLINE styles, and nothing but !important can beat
   an inline style. The comp uses hard breakpoints (not clamp), so this is the
   only way to be pixel-identical on both desktop and mobile while keeping the
   desktop value editable. Consequence to know about: if you change a desktop
   font-size or padding in the editor, the mobile value stays at whatever is
   written here until you update it too.
   ========================================================================== */

.pt-page-how {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--style--block-gap: 0;
}
#pt-content .pt-page-how { padding-left: 0; padding-right: 0; }
.pt-page-how .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-how .hero,
.pt-page-how .concept,
.pt-page-how .steps-section,
.pt-page-how .bottom-cta { position: relative; overflow: hidden; }
.pt-page-how .hero::before,
.pt-page-how .hero::after,
.pt-page-how .hero-content::before,
.pt-page-how .concept::before,
.pt-page-how .concept::after,
.pt-page-how .steps-section::before,
.pt-page-how .steps-section::after,
.pt-page-how .bottom-cta::before,
.pt-page-how .bottom-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-how .hero::before { width: 420px; height: 420px; top: -170px; right: -110px; background: #C2D0F5; opacity: .35; }
.pt-page-how .hero::after  { width: 220px; height: 220px; bottom: -90px; left: -70px;  background: #C2D0F5; opacity: .20; }
.pt-page-how .hero-content::before { width: 110px; height: 110px; bottom: -52px; right: -200px; background: #F4714A; opacity: .07; }
.pt-page-how .concept::before { width: 480px; height: 480px; top: -200px; right: -140px; background: #3B50D5; opacity: .18; }
.pt-page-how .concept::after  { width: 240px; height: 240px; bottom: -80px; left: -60px;  background: #F4714A; opacity: .08; }
.pt-page-how .steps-section::before { width: 340px; height: 340px; top: -130px; left: -90px;   background: #C2D0F5; opacity: .22; }
.pt-page-how .steps-section::after  { width: 200px; height: 200px; bottom: -60px; right: 100px; background: #F4714A; opacity: .05; }
.pt-page-how .bottom-cta::before { width: 400px; height: 400px; top: -180px; right: -120px; background: #3B50D5; opacity: .22; }
.pt-page-how .bottom-cta::after  { width: 220px; height: 220px; bottom: -80px; left: -60px;  background: #F4714A; opacity: .10; }

/* -- HERO -- */
.pt-page-how .hero-content { position: relative; z-index: 2; max-width: 680px; margin-inline: auto; }

/* -- CONCEPT -- */
.pt-page-how .concept-inner {
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 2;
}
.pt-page-how .concept-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-page-how .stat-card.accent { grid-column: span 2; }
.pt-page-how .stat-card.accent .stat-accent-icon { flex: none; }

/* -- STEPS -- */
.pt-page-how .section-header { max-width: 1060px; margin-inline: auto; position: relative; z-index: 2; }
.pt-page-how .section-sub { max-width: 520px; margin-inline: auto; }
.pt-page-how .steps-track { max-width: 1060px; margin-inline: auto; position: relative; z-index: 2; }
.pt-page-how .step-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}
.pt-page-how .step-row.reverse .step-visual  { order: 2; }
.pt-page-how .step-row.reverse .step-content { order: 1; }
.pt-page-how .step-visual { position: relative; }

/* the numbered tile with its offset orange shadow */
.pt-page-how .step-num { position: relative; width: 44px; height: 44px; flex: none; }
.pt-page-how .step-num-shadow { position: absolute; bottom: 0; right: 0; width: 38px; height: 38px; }
.pt-page-how .step-num-main   { position: absolute; top: 0; left: 0; width: 38px; height: 38px; z-index: 1; }
.pt-page-how .step-num-main p { margin: 0; }

/* the dashed connector between two step rows */
.pt-page-how .step-divider { display: flex; align-items: center; justify-content: center; }
.pt-page-how .step-divider-line { width: 0; }

/* -- MOCKUP: listing card -- */
.pt-page-how .mockup-listing,
.pt-page-how .mockup-listing-tags { max-width: 360px; margin-inline: auto; }
.pt-page-how .mockup-chat  { max-width: 360px; margin-inline: auto; }
.pt-page-how .mockup-email { max-width: 380px; margin-inline: auto; }
.pt-page-how .ml-badge-icon { flex: none; }

/* -- MOCKUP: WhatsApp chat -- */
.pt-page-how .mc-avatar { flex: none; }
.pt-page-how .mc-info { flex: 1; }
.pt-page-how .mc-msg { max-width: 82%; }
.pt-page-how .mc-msg.received { align-self: flex-start; }
.pt-page-how .mc-msg.sent     { align-self: flex-end; }
.pt-page-how .mc-input { flex: 1; }

/* -- MOCKUP: email client -- */
.pt-page-how .me-sender-avatar { flex: none; }
.pt-page-how .me-url { flex: 1; }
.pt-page-how .me-from-row > .me-sender-meta { flex: 1; }

/* -- WHY -- */
.pt-page-how .why-grid {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.pt-page-how .why-card { transition: box-shadow .2s, transform .2s; }
.pt-page-how .why-card:hover {
	box-shadow: 0 8px 28px rgba(11, 29, 110, 0.08);
	transform: translateY(-3px);
}
.pt-page-how .why-icon { width: fit-content; }

/* -- CUSTOM REQUEST CALLOUT -- */
.pt-page-how .custom-callout-inner {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 48px;
}
.pt-page-how .custom-callout-icon { width: fit-content; }
.pt-page-how .custom-callout-body { max-width: 540px; }
.pt-page-how .custom-callout-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pt-page-how .custom-callout-btn .wp-block-button__link:hover { transform: translateY(-2px); }

/* -- BOTTOM CTA -- */
.pt-page-how .cta-content { position: relative; z-index: 2; }
/* core/button cannot hold an image block, so these two icons are CSS masks
   tinted with currentColor — they follow the button's editable text colour. */
.pt-page-how .cta-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-how .cta-btn .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.pt-page-how .cta-btn.primary .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.pt-page-how .cta-btn.secondary .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.pt-page-how .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }

/* -- RESPONSIVE --
   Layout-only rules need no !important (they are not block attributes). */
@media (max-width: 1024px) {
	.pt-page-how .concept-inner { grid-template-columns: 1fr; gap: 48px; }
	.pt-page-how .step-row { grid-template-columns: 1fr; gap: 40px; }
	.pt-page-how .step-row.reverse .step-visual  { order: 1; }
	.pt-page-how .step-row.reverse .step-content { order: 2; }
	.pt-page-how .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.pt-page-how .why-grid { grid-template-columns: 1fr; }
	.pt-page-how .custom-callout-inner { grid-template-columns: 1fr; gap: 28px; }

	/* ⚠️ !important is required here — see the note at the top of this block.
	   These mirror the comp's own 720px breakpoint values exactly. */
	.pt-page-how .hero            { padding: 72px 24px 64px !important; }
	.pt-page-how .hero-title      { font-size: 36px !important; }
	.pt-page-how .concept         { padding: 64px 24px !important; }
	.pt-page-how .concept-title   { font-size: 28px !important; }
	.pt-page-how .steps-section   { padding: 72px 24px !important; }
	.pt-page-how .section-title   { font-size: 30px !important; }
	.pt-page-how .step-h          { font-size: 24px !important; }
	.pt-page-how .why-section     { padding: 72px 24px !important; }
	.pt-page-how .custom-callout  { padding: 64px 24px !important; }
	.pt-page-how .custom-callout-inner { padding: 36px 28px !important; }
	.pt-page-how .bottom-cta      { padding: 72px 24px !important; }
	.pt-page-how .cta-title       { font-size: 30px !important; }
}

/* How It Works — small structural bits the block layout engine does not cover.
   The mockups need overflow clipping so the cover image respects the card's
   editable border-radius, and the tiny dots/divider are empty groups sized by
   their padding, so they must not be stretched by their flex parent. */
.pt-page-how .mockup-listing,
.pt-page-how .mockup-chat,
.pt-page-how .mockup-email { overflow: hidden; }
.pt-page-how .step-divider-inner { align-items: center; }
.pt-page-how .step-divider-dot,
.pt-page-how .me-dot,
.pt-page-how .ml-dot { flex: none; }
/* the chat bubbles opt out of the column's stretch so align-self can place them */
.pt-page-how .mc-messages { align-items: flex-start; }

/* ==========================================================================
   PAGE: FAQ  (patterns/page-faq.php)
   ==========================================================================
   Same division of labour as the other ported comps — see README §9. The BLOCKS
   own every colour, size, padding, border and radius; this file holds only
   geometry a core block cannot express.

   Three notes specific to this page:

   1. The accordion is core/details. Those blocks share a `name` attribute, so
      one-open-at-a-time is enforced by the BROWSER — no JavaScript, and it keeps
      working with JS disabled.
   2. core/details supports border colour/width/style but NOT border-radius, so
      the 14px radius is set here. That is allowed: there is no editor control to
      override, unlike a colour.
   3. The circular +/x toggle is a ::after on the <summary>. It has no content,
      so it is deliberately not a block.

   ⚠️ Do not move a colour or a size into this file — CSS out-specifies the block
      attribute and the editor control stops doing anything.
   ========================================================================== */

.pt-page-faq {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--style--block-gap: 0;
}
#pt-content .pt-page-faq { padding-left: 0; padding-right: 0; }
.pt-page-faq .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-faq .faq-hero,
.pt-page-faq .faq-cta { position: relative; overflow: hidden; }
.pt-page-faq .faq-hero::before,
.pt-page-faq .faq-hero::after,
.pt-page-faq .hero-content::before,
.pt-page-faq .faq-cta::before,
.pt-page-faq .faq-cta::after,
.pt-page-faq .cta-content::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-faq .faq-hero::before { width: 380px; height: 380px; top: -160px; right: -100px; background: #C2D0F5; opacity: .38; }
.pt-page-faq .faq-hero::after  { width: 200px; height: 200px; bottom: -80px; left: -60px;  background: #C2D0F5; opacity: .22; }
.pt-page-faq .hero-content::before { width: 110px; height: 110px; bottom: -58px; right: -190px; background: #F4714A; opacity: .07; }
.pt-page-faq .faq-cta::before { width: 420px; height: 420px; top: -180px; right: -120px; background: #3B50D5; opacity: .22; }
.pt-page-faq .faq-cta::after  { width: 240px; height: 240px; bottom: -90px; left: -70px;  background: #F4714A; opacity: .10; }
.pt-page-faq .cta-content::before { width: 140px; height: 140px; top: -120px; left: -320px; background: #C2D0F5; opacity: .15; }

/* -- HERO -- */
.pt-page-faq .hero-content { position: relative; z-index: 2; }
.pt-page-faq .hero-sub { max-width: 460px; margin-inline: auto; }
/* Search pill. The pill itself, its icon and its placeholder copy are all real
   blocks — background, border, radius and padding live in the block attributes.
   Only the geometry and the <input> live here: assets/js/pages.js swaps the
   placeholder paragraph for a real search input on load (see the note in
   patterns/page-faq.php). Until it does, the pill stays hidden, so a JS-less
   visitor never sees a search box that cannot search. */
.pt-page-faq .hero-search { display: none; }
.pt-page-faq .hero-search.is-ready {
	display: flex;
	max-width: 480px;
	margin-inline: auto;
	transition: border-color .2s, box-shadow .2s;
}
.pt-page-faq .hero-search:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(59, 80, 213, 0.1);
}
.pt-page-faq .hero-search .wp-block-image { flex: none; }
.pt-page-faq .hero-search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--navy);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.pt-page-faq .hero-search input::placeholder { color: var(--wp--preset--color--muted); }
.pt-page-faq .hero-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* -- LAYOUT -- */
.pt-page-faq .faq-layout {
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 56px;
	align-items: start;
}
.pt-page-faq .faq-nav { position: sticky; top: 32px; }
.pt-page-faq .faq-nav-list { list-style: none; margin: 0; padding: 0; }
.pt-page-faq .faq-nav-list li { margin: 0; }
.pt-page-faq .faq-nav-list li + li { margin-top: 2px; }
.pt-page-faq .faq-nav-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition: background .2s, color .2s;
}
.pt-page-faq .faq-nav-list a:hover,
.pt-page-faq .faq-nav-list a.active {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
}
/* the leading dot and the trailing count pill */
.pt-page-faq .faq-nav-list a::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--line);
	transition: background .2s;
}
.pt-page-faq .faq-nav-list a:hover::before,
.pt-page-faq .faq-nav-list a.active::before { background: var(--wp--preset--color--primary); }
.pt-page-faq .faq-nav-list .nav-count {
	margin-left: auto;
	border-radius: 20px;
	padding: 2px 7px;
	background: var(--wp--preset--color--base);
	transition: background .2s, color .2s;
}
.pt-page-faq .faq-nav-list a:hover .nav-count,
.pt-page-faq .faq-nav-list a.active .nav-count {
	background: rgba(59, 80, 213, 0.12);
	color: var(--wp--preset--color--primary);
}

/* -- CATEGORY HEADER -- */
.pt-page-faq .category-icon { flex: none; }
.pt-page-faq .category-count { margin-left: auto; }

/* WordPress's vertical flex layout hard-codes `align-items: flex-start`, which
   made every accordion card shrink to the width of its own question — the
   staircase. The comp is a plain column of full-width cards, so stretch them
   back. Geometry only; nothing here touches a colour or a size. */
.pt-page-faq .faq-content,
.pt-page-faq .faq-list { align-items: stretch; }

/* -- ACCORDION (core/details) -- */
.pt-page-faq .faq-list .wp-block-details {
	border-radius: 14px; /* see note 2 at the top of this block */
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.pt-page-faq .faq-list .wp-block-details[open] {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 4px 24px rgba(59, 80, 213, 0.09);
}
.pt-page-faq .faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	list-style: none;
	transition: color .25s;
}
.pt-page-faq .faq-list summary::-webkit-details-marker,
.pt-page-faq .faq-list summary::marker { display: none; content: ""; }
.pt-page-faq .faq-list .wp-block-details[open] > summary { color: var(--wp--preset--color--primary); }
/* the circular + that becomes an x */
.pt-page-faq .faq-list summary::after {
	content: "";
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background-color: #fff0eb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4714A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	transition: transform .3s ease, background-color .25s;
}
.pt-page-faq .faq-list .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
	background-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
/* JS hides filtered-out items and empty categories with the [hidden] attribute */
.pt-page-faq .no-results[hidden],
.pt-page-faq .faq-category[hidden],
.pt-page-faq .wp-block-details[hidden] { display: none; }

/* -- CLOSING CTA -- */
.pt-page-faq .cta-content { position: relative; z-index: 2; }
/* core/button cannot hold an image, so this icon is a mask tinted with
   currentColor — it follows the button's editable text colour. */
.pt-page-faq .cta-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-faq .cta-btn .wp-block-button__link::before {
	content: "";
	width: 17px;
	height: 17px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.pt-page-faq .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }

/* -- RESPONSIVE -- */
@media (max-width: 900px) {
	.pt-page-faq .faq-layout { grid-template-columns: 1fr; gap: 32px; }
	.pt-page-faq .faq-nav { position: static; }
	.pt-page-faq .faq-nav-label { display: none; }
	.pt-page-faq .faq-nav-list { display: flex; flex-wrap: wrap; gap: 8px; }
	.pt-page-faq .faq-nav-list li + li { margin-top: 0; }
	.pt-page-faq .faq-nav-list a {
		background: var(--wp--preset--color--surface);
		border: 1.5px solid var(--wp--preset--color--line);
		white-space: nowrap;
		font-size: 13px;
		padding: 8px 12px;
	}
	.pt-page-faq .faq-nav-list .nav-count { display: none; }
	/* see README §9 — only !important can beat a block's inline style */
	.pt-page-faq .faq-layout { padding: 40px 24px 64px !important; }
}
@media (max-width: 640px) {
	.pt-page-faq .faq-hero { padding: 72px 24px 56px !important; }
	.pt-page-faq .hero-title { font-size: 34px !important; }
	.pt-page-faq .faq-cta { padding: 64px 24px !important; }
	.pt-page-faq .cta-title { font-size: 28px !important; }
}

/* ==========================================================================
   PAGE: CONTACT (patterns/page-contact.php)

   Exact port of the approved comp. Everything visual lives in the block
   attributes; this block owns only what a block cannot express:
     1. The two-column grid (1fr / 1.55fr) and the max-width.
     2. The decorative circles (no content, so deliberately not blocks).
     3. The form markup that comes from [phototrips_contact_form] - the editor
        never sees it, so its styling has to live here.

   The 44px icon tiles are groups: 11px padding + an 18px image = 40px, and the
   radius and background stay editable.

   Do not move a colour or a size into this file - CSS out-specifies a block
   attribute and the editor control silently stops working.
   ========================================================================== */

.pt-page-contact {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--style--block-gap: 0;
}
#pt-content .pt-page-contact { padding-left: 0; padding-right: 0; }
.pt-page-contact .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-contact .contact-hero,
.pt-page-contact .info-panel,
.pt-page-contact .bottom-cta { position: relative; overflow: hidden; }
.pt-page-contact .contact-hero::before,
.pt-page-contact .contact-hero::after,
.pt-page-contact .hero-content::before,
.pt-page-contact .info-panel::before,
.pt-page-contact .info-panel::after,
.pt-page-contact .bottom-cta::before,
.pt-page-contact .bottom-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-contact .contact-hero::before { width: 380px; height: 380px; top: -160px; right: -100px; background: #C2D0F5; opacity: .38; }
.pt-page-contact .contact-hero::after  { width: 200px; height: 200px; bottom: -80px; left: -60px;  background: #C2D0F5; opacity: .22; }
.pt-page-contact .hero-content::before { width: 110px; height: 110px; bottom: -58px; right: -210px; background: #F4714A; opacity: .07; }
.pt-page-contact .info-panel::before { width: 260px; height: 260px; bottom: -100px; right: -80px; background: #3B50D5; opacity: .25; }
.pt-page-contact .info-panel::after  { width: 130px; height: 130px; top: -40px; left: -40px; background: #F4714A; opacity: .12; }
.pt-page-contact .bottom-cta::before { width: 400px; height: 400px; top: -180px; right: -120px; background: #3B50D5; opacity: .22; }
.pt-page-contact .bottom-cta::after  { width: 220px; height: 220px; bottom: -80px; left: -60px;  background: #F4714A; opacity: .10; }

/* -- hero -- */
.pt-page-contact .hero-content { position: relative; z-index: 2; }
.pt-page-contact .hero-sub { max-width: 440px; margin-inline: auto; }

/* -- two-column layout -- */
.pt-page-contact .contact-inner {
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1.55fr;
	gap: 28px;
	align-items: start;
}

/* -- navy info panel -- */
.pt-page-contact .info-panel > * { position: relative; z-index: 2; }
.pt-page-contact .info-items { align-items: stretch; }
.pt-page-contact .info-icon,
.pt-page-contact .social-link { flex: none; }
.pt-page-contact .social-links { flex-wrap: nowrap; }

/* -- CTA button icon: a mask tinted with the button's own text colour, because
      core/button cannot contain an image block -- */
.pt-page-contact .cta-content { position: relative; z-index: 2; }
.pt-page-contact .cta-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-contact .cta-btn .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.pt-page-contact .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }

/* ---------- The form ([phototrips_contact_form]) ----------
   Not blocks - core has no input/textarea block. See inc/contact-form.php. */
/* minmax(0,1fr), not 1fr: a grid track defaults to min-width:auto, so an input
   whose padding makes it wide (the budget field with its $ and USD) would push
   its column past its share and break the alignment of the whole row. */
.pt-form .form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pt-form .form-group { min-width: 0; }
.pt-form input, .pt-form select, .pt-form textarea { min-width: 0; box-sizing: border-box; }
.pt-form .form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.pt-form label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}
.pt-form .optional-badge {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--base);
	border-radius: 20px;
	padding: 2px 8px;
}
.pt-form input[type="text"],
.pt-form input[type="email"],
.pt-form input[type="tel"],
.pt-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 12px 14px;
	outline: none;
	appearance: none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.pt-form input::placeholder,
.pt-form textarea::placeholder { color: #A0AABF; }
.pt-form input:focus,
.pt-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 3px rgba(59, 80, 213, 0.1);
}
.pt-form textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

/* Contact Form 7 wearing the same skin — the shortcode carries
   html_class="pt-form", so everything above applies; these rules only map
   CF7's own wrappers and status messages onto the design. CF7's wpautop
   sprinkles <p> and <br> between the groups, which doubled the spacing:
   the groups' own margin is the single source of rhythm here. */
.pt-form.wpcf7-form p { margin: 0; }
.pt-form.wpcf7-form > br,
.pt-form.wpcf7-form p > br:only-child { display: none; }
.pt-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.pt-form .wpcf7-not-valid-tip { font-size: 12.5px; color: #B91C1C; margin-top: 5px; }
.pt-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #86D3A5;
	background: var(--wp--preset--color--success-bg);
	color: #15803D;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #E5A3A3;
	background: #FDF2F2;
	color: #B91C1C;
}
.pt-form .wpcf7-spinner { display: block; margin: 10px auto 0; }

/* phone field: a prefix chip welded to the input */
.pt-form .phone-wrap { display: flex; }
.pt-form .phone-prefix {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	border-right: none;
	border-radius: 10px 0 0 10px;
	padding: 12px 14px;
}
.pt-form .phone-prefix svg { width: 16px; height: 16px; }
.pt-form .phone-wrap input { border-radius: 0 10px 10px 0; border-left: none; }
.pt-form .phone-wrap input:focus { border-left: none; }

/* submit */
.pt-form .submit-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--accent);
	border: none;
	border-radius: 50px;
	padding: 15px 24px;
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.pt-form .submit-btn:hover {
	background: var(--wp--preset--color--accent-hover);
	transform: translateY(-2px);
}
.pt-form .submit-btn svg { width: 17px; height: 17px; }

/* success panel, revealed by assets/js/pages.js */
.pt-form-wrap .form-success { text-align: center; padding: 48px 24px; }
.pt-form-wrap .success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pt-form-wrap .success-icon svg { width: 28px; height: 28px; }
.pt-form-wrap .success-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin-bottom: 10px;
}
.pt-form-wrap .success-text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}
.pt-form-wrap .success-text a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}
/* a field the visitor left empty on submit */
.pt-form .is-invalid { border-color: #EF4444; }

/* -- responsive -- */
@media (max-width: 900px) {
	.pt-page-contact .contact-inner { grid-template-columns: 1fr; gap: 24px; }
	/* the comp puts the form first on narrow screens */
	.pt-page-contact .form-card { order: -1; }
	/* see README section 9 - only !important can beat a block's inline style */
	.pt-page-contact .info-panel { padding: 36px 28px !important; }
}
@media (max-width: 640px) {
	.pt-page-contact .contact-hero { padding: 72px 24px 56px !important; }
	.pt-page-contact .hero-title { font-size: 34px !important; }
	.pt-page-contact .contact-section { padding: 48px 24px 72px !important; }
	.pt-page-contact .form-card { padding: 28px 24px !important; }
	.pt-page-contact .info-panel { padding: 32px 24px !important; }
	.pt-page-contact .bottom-cta { padding: 64px 24px !important; }
	.pt-page-contact .cta-title { font-size: 28px !important; }
	.pt-form .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGE: CUSTOM PHOTOSHOOT REQUEST (patterns/page-custom-request.php)

   Same division of labour as every ported page: the blocks own the look, this
   owns the geometry. Shared with the Contact page: the .pt-form rules above
   style both forms, so only what is specific to this one lives here.
   ========================================================================== */

.pt-page-request {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--style--block-gap: 0;
}
#pt-content .pt-page-request { padding-left: 0; padding-right: 0; }
.pt-page-request .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-request .req-hero,
.pt-page-request .info-panel,
.pt-page-request .bottom-cta { position: relative; overflow: hidden; }
.pt-page-request .req-hero::before,
.pt-page-request .req-hero::after,
.pt-page-request .hero-content::before,
.pt-page-request .info-panel::before,
.pt-page-request .info-panel::after,
.pt-page-request .bottom-cta::before,
.pt-page-request .bottom-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-request .req-hero::before { width: 380px; height: 380px; top: -160px; right: -100px; background: #C2D0F5; opacity: .38; }
.pt-page-request .req-hero::after  { width: 200px; height: 200px; bottom: -80px; left: -60px;  background: #C2D0F5; opacity: .22; }
.pt-page-request .hero-content::before { width: 120px; height: 120px; bottom: -64px; right: -190px; background: #F4714A; opacity: .07; }
.pt-page-request .info-panel::before { width: 260px; height: 260px; bottom: -100px; right: -80px; background: #3B50D5; opacity: .22; }
.pt-page-request .info-panel::after  { width: 120px; height: 120px; top: -40px; left: -40px; background: #F4714A; opacity: .10; }
.pt-page-request .bottom-cta::before { width: 400px; height: 400px; top: -180px; right: -120px; background: #3B50D5; opacity: .22; }
.pt-page-request .bottom-cta::after  { width: 220px; height: 220px; bottom: -80px; left: -60px;  background: #F4714A; opacity: .10; }

/* -- hero -- */
.pt-page-request .hero-content { position: relative; z-index: 2; }
.pt-page-request .hero-sub { max-width: 520px; margin-inline: auto; }
.pt-page-request .chip { flex: none; }

/* -- two-column layout -- */
.pt-page-request .main-inner {
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1.65fr;
	gap: 28px;
	align-items: start;
}

/* -- navy panel + numbered timeline -- */
.pt-page-request .info-panel > * { position: relative; z-index: 2; }
.pt-page-request .step { align-items: stretch; }
.pt-page-request .step-left { flex: none; align-items: center; }
/* the 36px tile: 9px padding around an 18px line-box */
.pt-page-request .step-num { flex: none; min-width: 36px; }
/* the connector: a 2px rule that stretches to fill whatever is left */
.pt-page-request .step-line { width: 2px; flex: 1 1 auto; }
.pt-page-request .step-body { flex: 1 1 auto; }
.pt-page-request .panel-note-icon { flex: none; margin-top: 1px; }

/* -- CTA button icons: masks tinted with each button's own text colour -- */
.pt-page-request .cta-content { position: relative; z-index: 2; }
.pt-page-request .cta-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-request .cta-btn .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.pt-page-request .cta-btn.is-camera .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}
.pt-page-request .cta-btn.is-question .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.pt-page-request .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }
.pt-page-request .cta-btn.is-question .wp-block-button__link:hover { background-color: rgba(255,255,255,0.08) !important; }

/* ---------- request-form-only pieces ----------
   The shared .pt-form rules live in the Contact block above. */
.pt-request-form .field-section { margin-bottom: 28px; }
.pt-request-form .field-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pt-request-form .form-group { margin-bottom: 16px; }
.pt-request-form .form-group:last-child { margin-bottom: 0; }
.pt-request-form input[type="number"],
.pt-request-form input[type="date"],
.pt-request-form select {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 12px 14px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.pt-request-form select { padding-right: 36px; cursor: pointer; }
.pt-request-form input[type="number"]:focus,
.pt-request-form input[type="date"]:focus,
.pt-request-form select:focus {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 3px rgba(59, 80, 213, 0.1);
}
/* the select's caret */
.pt-request-form .select-wrap { position: relative; }
.pt-request-form .select-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--wp--preset--color--muted);
	pointer-events: none;
}
/* the budget field's $ and USD */
.pt-request-form .input-prefix-wrap { position: relative; }
.pt-request-form .input-prefix,
.pt-request-form .input-suffix {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}
.pt-request-form .input-prefix { left: 14px; font-size: 14px; font-weight: 700; z-index: 1; }
.pt-request-form .input-suffix { right: 14px; font-size: 12px; font-weight: 600; }
.pt-request-form .input-prefix-wrap input { padding-left: 28px; padding-right: 44px; }
.pt-request-form textarea { min-height: 140px; line-height: 1.65; }
.pt-request-form .submit-btn { margin-top: 28px; }
.pt-request-form .privacy-note {
	text-align: center;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin-top: 14px;
}
.pt-request-form .privacy-note a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}
/* this page's success tick is orange, not blue */
.form-success.is-accent .success-icon { background: #FFF0EB; }

/* -- responsive -- */
@media (max-width: 900px) {
	.pt-page-request .main-inner { grid-template-columns: 1fr; gap: 24px; }
	.pt-page-request .form-card { order: -1; }
	/* see README section 9 - only !important can beat a block's inline style */
	.pt-page-request .info-panel { padding: 36px 28px !important; }
}
@media (max-width: 640px) {
	.pt-page-request .req-hero { padding: 72px 24px 56px !important; }
	.pt-page-request .hero-title { font-size: 34px !important; }
	.pt-page-request .main-section { padding: 48px 24px 72px !important; }
	.pt-page-request .form-card { padding: 28px 22px !important; }
	.pt-page-request .info-panel { padding: 32px 22px !important; }
	.pt-page-request .bottom-cta { padding: 64px 24px !important; }
	.pt-page-request .cta-title { font-size: 28px !important; }
	.pt-request-form .form-row { grid-template-columns: 1fr; }

	/* Stacked, every field gets the SAME rhythm. The desktop rule zeroes the
	   margin of each row's last field (it sits beside its pair there), which
	   on a phone glued "Email", "City" and "Duration" to the label below. */
	.pt-request-form .form-row { gap: 0; }
	.pt-request-form .form-group,
	.pt-request-form .form-group:last-child { margin-bottom: 20px; }
	.pt-request-form .field-section > .form-group:last-child,
	.pt-request-form .field-section > .form-row:last-child .form-group:last-child { margin-bottom: 0; }
	.pt-request-form .form-group { gap: 8px; }
	.pt-request-form .field-section { margin-bottom: 32px; }
	.pt-request-form .field-section-label { margin-bottom: 18px; }

	/* One height for every control. An EMPTY date input on iPhone renders
	   shorter than a text field unless its native look is switched off. */
	.pt-request-form :is(input, select) { min-height: 50px; }
	.pt-request-form input[type="date"] {
		-webkit-appearance: none;
		appearance: none;
		display: block;
		width: 100%;
		line-height: 1.3;
		text-align: left;
	}
	.pt-request-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}

/* ==========================================================================
   PAGE: BROWSE EXPERIENCES (patterns/page-browse.php)

   Blocks own the look; this owns the grid, the photo overlay, and the hover.
   The whole card is clickable via a stretched pseudo-element on the single
   real link inside it - see the note in the pattern.
   ========================================================================== */

.pt-page-browse {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--style--block-gap: 0;
}
#pt-content .pt-page-browse { padding-left: 0; padding-right: 0; }
.pt-page-browse .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-browse .browse-hero,
.pt-page-browse .browse-cta { position: relative; overflow: hidden; }
.pt-page-browse .browse-hero::before,
.pt-page-browse .browse-hero::after,
.pt-page-browse .hero-content::before,
.pt-page-browse .browse-cta::before,
.pt-page-browse .browse-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-browse .browse-hero::before { width: 420px; height: 420px; top: -170px; right: -100px; background: #C2D0F5; opacity: .30; }
.pt-page-browse .browse-hero::after  { width: 200px; height: 200px; bottom: -80px; left: -60px;  background: #C2D0F5; opacity: .18; }
.pt-page-browse .hero-content::before { width: 100px; height: 100px; bottom: -58px; right: -200px; background: #F4714A; opacity: .07; }
.pt-page-browse .browse-cta::before { width: 380px; height: 380px; top: -150px; right: -100px; background: #3B50D5; opacity: .20; }
.pt-page-browse .browse-cta::after  { width: 200px; height: 200px; bottom: -70px; left: -50px;  background: #F4714A; opacity: .09; }

/* -- hero -- */
.pt-page-browse .hero-content { position: relative; z-index: 2; max-width: 680px; margin-inline: auto; }
.pt-page-browse .hero-count { width: fit-content; margin-inline: auto; }
.pt-page-browse .hero-count-sep { width: 1px; flex: none; }

/* -- country blocks -- */
.pt-page-browse .destinations { max-width: 1160px; margin-inline: auto; }
.pt-page-browse .country-name { flex: 1; }
/* the comp pushes "View all experiences" to the far right of the header */
.pt-page-browse .country-view-all { margin-left: auto; transition: background .2s, transform .2s; }
.pt-page-browse .country-view-all a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pt-page-browse .country-view-all a::after {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	background-color: currentColor;
	transition: transform .2s;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
.pt-page-browse .country-view-all:hover { background-color: #d4daff !important; transform: translateY(-1px); }
.pt-page-browse .country-view-all:hover a::after { transform: translateX(2px); }

/* -- city grid -- */
.pt-page-browse .city-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.pt-page-browse .city-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* -- city card -- */
.pt-page-browse .city-card {
	position: relative;
	overflow: hidden;
	transition: box-shadow .25s, transform .25s;
}
.pt-page-browse .city-card:hover {
	box-shadow: 0 16px 48px rgba(11, 29, 110, 0.12);
	transform: translateY(-4px);
}
.pt-page-browse .city-photo { position: relative; overflow: hidden; }
.pt-page-browse .city-photo img { width: 100%; display: block; transition: transform .4s ease; }
.pt-page-browse .city-card:hover .city-photo img { transform: scale(1.05); }
/* the gradient scrim over the photo: decoration, so not a block */
.pt-page-browse .city-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(11, 29, 110, 0.55) 0%, transparent 55%);
}
/* one real link per card, stretched to cover the whole card */
.pt-page-browse .city-cta a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap .2s;
}
.pt-page-browse .city-cta a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.pt-page-browse .city-cta a::after {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background-color: currentColor;
	transition: transform .2s;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
.pt-page-browse .city-card:hover .city-cta a { gap: 10px; }
.pt-page-browse .city-card:hover .city-cta a::after { transform: translateX(3px); }

/* -- CTA button icons -- */
.pt-page-browse .cta-content { position: relative; z-index: 2; }
.pt-page-browse .cta-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-browse .cta-btn .wp-block-button__link::before {
	content: "";
	width: 15px;
	height: 15px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.pt-page-browse .cta-btn.is-pencil .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}
.pt-page-browse .cta-btn.is-question .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.pt-page-browse .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }
.pt-page-browse .cta-btn.is-question .wp-block-button__link:hover { background-color: rgba(255,255,255,0.08) !important; }

/* -- responsive -- */
@media (max-width: 1024px) {
	.pt-page-browse .city-grid,
	.pt-page-browse .city-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	/* see README section 9 - only !important can beat a block's inline style */
	.pt-page-browse .browse-hero { padding: 72px 24px 64px !important; }
	.pt-page-browse .hero-title { font-size: 36px !important; }
	.pt-page-browse .destinations { padding: 56px 24px !important; }
	.pt-page-browse .city-grid,
	.pt-page-browse .city-grid.two-col { grid-template-columns: minmax(0, 1fr); }
	.pt-page-browse .browse-cta { padding: 64px 24px !important; }
	.pt-page-browse .cta-title { font-size: 28px !important; }
	.pt-page-browse .hero-count { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   PAGE: REVIEWS (patterns/page-reviews.php)

   Blocks own the look; this owns the masonry columns, the decoration and the
   welded stat pill. The filter buttons and "Load more" ship as core/button
   blocks and are converted to real <button> elements by assets/js/pages.js -
   see the note in the pattern.
   ========================================================================== */

.pt-page-reviews {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--style--block-gap: 0;
}
#pt-content .pt-page-reviews { padding-left: 0; padding-right: 0; }
.pt-page-reviews .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-reviews .rev-hero,
.pt-page-reviews .bottom-cta { position: relative; overflow: hidden; }
.pt-page-reviews .rev-hero::before,
.pt-page-reviews .rev-hero::after,
.pt-page-reviews .hero-content::before,
.pt-page-reviews .bottom-cta::before,
.pt-page-reviews .bottom-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-reviews .rev-hero::before { width: 420px; height: 420px; top: -170px; right: -110px; background: #C2D0F5; opacity: .36; }
.pt-page-reviews .rev-hero::after  { width: 220px; height: 220px; bottom: -90px; left: -70px;  background: #C2D0F5; opacity: .20; }
.pt-page-reviews .hero-content::before { width: 120px; height: 120px; bottom: -52px; right: -230px; background: #F4714A; opacity: .07; }
.pt-page-reviews .bottom-cta::before { width: 400px; height: 400px; top: -180px; right: -120px; background: #3B50D5; opacity: .22; }
.pt-page-reviews .bottom-cta::after  { width: 220px; height: 220px; bottom: -80px; left: -60px;  background: #F4714A; opacity: .10; }

/* -- hero -- */
.pt-page-reviews .hero-content { position: relative; z-index: 2; max-width: 700px; margin-inline: auto; }
.pt-page-reviews .stats-row { width: fit-content; margin-inline: auto; }
/* the chips are welded together by a divider on every chip but the first */
.pt-page-reviews .stat-chip { flex: none; white-space: nowrap; }
.pt-page-reviews .stat-chip + .stat-chip { border-left: 1.5px solid var(--wp--preset--color--line); }

/* -- filter bar -- */
.pt-page-reviews .filter-bar { max-width: 1160px; margin-inline: auto; justify-content: space-between; }
.pt-page-reviews .filter-label { flex: none; }
/* the block ships an <a>; pages.js swaps in a <button>. Style both so the page
   never flashes an unstyled control. */
.pt-page-reviews .filter-btn .wp-block-button__link,
.pt-page-reviews .filter-btn button {
	font-family: inherit;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.pt-page-reviews .filter-btn:not(.is-active) .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* -- masonry wall -- */
.pt-page-reviews .reviews-grid {
	max-width: 1160px;
	margin-inline: auto;
	columns: 3;
	column-gap: 20px;
}
.pt-page-reviews .review-card {
	break-inside: avoid;
	transition: box-shadow .2s, transform .2s;
}
.pt-page-reviews .review-card:hover {
	box-shadow: 0 8px 28px rgba(11, 29, 110, 0.09);
	transform: translateY(-2px);
}
/* JS hides filtered-out cards and the not-yet-loaded ones with [hidden] */
.pt-page-reviews .review-card[hidden],
.pt-page-reviews .load-more-wrap[hidden] { display: none; }

/* the 40px initial circle: 10px padding around a 20px line-box */
.pt-page-reviews .reviewer-avatar { flex: none; min-width: 40px; }
.pt-page-reviews .reviewer-info { flex: 1; min-width: 0; }
.pt-page-reviews .experience-link { transition: background-color .15s; }
.pt-page-reviews .experience-link:hover { background-color: var(--wp--preset--color--tint) !important; }
.pt-page-reviews .experience-link .wp-block-image { flex: none; }
.pt-page-reviews .experience-link a { text-decoration: none; }
/* the comp clamps the experience name to two lines */
.pt-page-reviews .experience-link p {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* -- load more -- */
.pt-page-reviews .load-more-wrap { margin-top: 8px; }
.pt-page-reviews .load-more-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-reviews .load-more-btn .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.pt-page-reviews .load-more-btn .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--navy) !important;
	border-color: var(--wp--preset--color--navy) !important;
	color: #fff !important;
}

/* -- CTA button icons -- */
.pt-page-reviews .cta-content { position: relative; z-index: 2; }
.pt-page-reviews .cta-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-reviews .cta-btn .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.pt-page-reviews .cta-btn.is-search .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.pt-page-reviews .cta-btn.is-pencil .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}
.pt-page-reviews .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }
.pt-page-reviews .cta-btn.is-pencil .wp-block-button__link:hover { background-color: rgba(255,255,255,0.08) !important; }

/* -- responsive -- */
@media (max-width: 1024px) {
	.pt-page-reviews .reviews-grid { columns: 2; padding-left: 32px !important; padding-right: 32px !important; }
	.pt-page-reviews .filter-bar { padding-left: 32px !important; padding-right: 32px !important; padding-top: 32px !important; }
}
@media (max-width: 720px) {
	/* see README section 9 - only !important can beat a block's inline style */
	.pt-page-reviews .rev-hero { padding: 72px 24px 56px !important; }
	.pt-page-reviews .hero-title { font-size: 32px !important; }
	.pt-page-reviews .stats-row { flex-direction: column; border-radius: 16px !important; }
	.pt-page-reviews .stat-chip + .stat-chip { border-left: none; border-top: 1.5px solid var(--wp--preset--color--line); }
	.pt-page-reviews .reviews-grid { columns: 1; padding: 24px 20px 48px !important; }
	.pt-page-reviews .filter-bar { padding: 24px 20px 0 !important; flex-direction: column; align-items: flex-start; }
	.pt-page-reviews .bottom-cta { padding: 64px 24px !important; }
	.pt-page-reviews .cta-title { font-size: 28px !important; }
}

/* ==========================================================================
   PAGE: BECOME A PHOTOGRAPHER (patterns/page-recruitment.php)

   Blocks own the look; this owns the two split grids, the benefits grid, the
   dashed step connector, the founder photo's offset accent block and the
   accordion chevron.

   The FAQ is core/details sharing name="photog-faq", so one-open-at-a-time is
   the browser's job - there is no JavaScript on this page at all.
   ========================================================================== */

.pt-page-photog {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--style--block-gap: 0;
}
#pt-content .pt-page-photog { padding-left: 0; padding-right: 0; }
.pt-page-photog .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-photog .ph-hero,
.pt-page-photog .requirements,
.pt-page-photog .founder-msg,
.pt-page-photog .ph-cta { position: relative; overflow: hidden; }
.pt-page-photog .ph-hero::before,
.pt-page-photog .ph-hero::after,
.pt-page-photog .hero-content::before,
.pt-page-photog .requirements::before,
.pt-page-photog .requirements::after,
.pt-page-photog .founder-msg::before,
.pt-page-photog .founder-msg::after,
.pt-page-photog .ph-cta::before,
.pt-page-photog .ph-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-photog .ph-hero::before { width: 440px; height: 440px; top: -180px; right: -120px; background: #C2D0F5; opacity: .32; }
.pt-page-photog .ph-hero::after  { width: 220px; height: 220px; bottom: -80px; left: -60px;  background: #C2D0F5; opacity: .18; }
.pt-page-photog .hero-content::before { width: 100px; height: 100px; bottom: -48px; right: -260px; background: #F4714A; opacity: .07; }
.pt-page-photog .requirements::before { width: 500px; height: 500px; top: -200px; right: -200px; background: #3B50D5; opacity: .07; }
.pt-page-photog .requirements::after  { width: 300px; height: 300px; bottom: -100px; left: -100px; background: #F4714A; opacity: .05; }
.pt-page-photog .founder-msg::before { width: 500px; height: 500px; top: -200px; right: -150px; background: #3B50D5; opacity: .07; }
.pt-page-photog .founder-msg::after  { width: 300px; height: 300px; bottom: -100px; left: -80px;  background: #F4714A; opacity: .05; }
.pt-page-photog .ph-cta::before { width: 500px; height: 500px; top: -200px; right: -150px; background: #3B50D5; opacity: .08; }
.pt-page-photog .ph-cta::after  { width: 300px; height: 300px; bottom: -100px; left: -80px;  background: #F4714A; opacity: .06; }

/* -- hero -- */
.pt-page-photog .hero-content { position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
.pt-page-photog .hero-sub { max-width: 580px; margin-inline: auto; }
.pt-page-photog .hero-pill { flex: none; }
.pt-page-photog .hero-pill .dot { width: 6px; flex: none; }

/* -- requirements split -- */
.pt-page-photog .requirements-inner {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 2;
}
.pt-page-photog .req-badge { width: fit-content; }
.pt-page-photog .req-item { align-items: flex-start; transition: background-color .2s, border-color .2s; }
.pt-page-photog .req-item:hover {
	background-color: rgba(255,255,255,0.07) !important;
	border-color: rgba(255,255,255,0.14) !important;
}
/* the 48px icon tile: 13px padding around a 20px image (+2px border) */
.pt-page-photog .req-icon { flex: none; }
.pt-page-photog .req-item-body-wrap { flex: 1 1 auto; min-width: 0; }

/* -- section headers -- */
.pt-page-photog .section-sub { max-width: 520px; margin-inline: auto; }

/* -- benefits grid -- */
.pt-page-photog .benefits-grid {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.pt-page-photog .benefit-card { transition: box-shadow .2s, transform .2s; }
.pt-page-photog .benefit-card:hover {
	box-shadow: 0 10px 32px rgba(11, 29, 110, 0.08);
	transform: translateY(-3px);
}
/* the 52px icon tile: 14px padding around a 24px image */
.pt-page-photog .benefit-icon { width: fit-content; }

/* -- the seven steps -- */
.pt-page-photog .how-it-works { background: var(--wp--preset--color--base); }
.pt-page-photog .steps-list { max-width: 760px; margin-inline: auto; }
.pt-page-photog .step-item { position: relative; align-items: flex-start; }
/* the dashed connector between the numbers: decoration, so not a block */
.pt-page-photog .step-item:not(.is-last)::after {
	content: "";
	position: absolute;
	left: 31px;
	top: 64px;
	width: 2px;
	height: calc(100% - 48px);
	border-left: 2px dashed var(--wp--preset--color--line);
}
/* the 64px number tile: 17px padding around a 26px line-box (+2px border) */
.pt-page-photog .step-num { flex: none; min-width: 64px; position: relative; z-index: 1; }
.pt-page-photog .step-body { flex: 1 1 auto; min-width: 0; }

/* -- founder message -- */
.pt-page-photog .founder-msg-inner {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 72px;
	align-items: center;
	position: relative;
	z-index: 2;
}
.pt-page-photog .founder-photo-wrap { position: relative; }
/* the orange block peeking out behind the photo: pure decoration */
.pt-page-photog .founder-photo-wrap::before {
	content: "";
	position: absolute;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	bottom: -12px;
	right: -12px;
	background: var(--wp--preset--color--accent);
	border-radius: 24px;
}
.pt-page-photog .founder-photo { position: relative; z-index: 1; overflow: hidden; }
.pt-page-photog .founder-photo img { width: 100%; display: block; object-position: center top; }
.pt-page-photog .founder-msg-sig-line { width: 36px; flex: none; }

/* -- FAQ accordion (core/details) -- */
.pt-page-photog .faq-list { max-width: 760px; margin-inline: auto; align-items: stretch; }
.pt-page-photog .faq-list .wp-block-details {
	border-radius: 16px; /* core/details has no radius control, so it lives here */
	overflow: hidden;
	transition: border-color .2s;
}
.pt-page-photog .faq-list .wp-block-details[open] { border-color: var(--wp--preset--color--primary) !important; }
.pt-page-photog .faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.pt-page-photog .faq-list summary::-webkit-details-marker,
.pt-page-photog .faq-list summary::marker { display: none; content: ""; }
/* the round chevron that flips when the answer opens */
.pt-page-photog .faq-list summary::after {
	content: "";
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--base);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1D6E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	transition: transform .25s, background-color .2s, border-color .2s;
}
.pt-page-photog .faq-list .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
	background-color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B50D5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}

/* -- CTA -- */
.pt-page-photog .cta-content { position: relative; z-index: 2; }
/* the arrow sits AFTER the label on this page, unlike the other CTAs */
.pt-page-photog .cta-btn.is-arrow .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-photog .cta-btn.is-arrow .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	margin-left: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3'/%3E%3C/svg%3E");
}
.pt-page-photog .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }
.pt-page-photog .cta-btn.is-style-outline .wp-block-button__link:hover { background-color: rgba(255,255,255,0.08) !important; }

/* -- responsive -- */
@media (max-width: 960px) {
	.pt-page-photog .requirements-inner,
	.pt-page-photog .founder-msg-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.pt-page-photog .founder-photo-wrap { max-width: 360px; margin-inline: auto; }
	.pt-page-photog .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	/* see README section 9 - only !important can beat a block's inline style */
	.pt-page-photog .ph-hero { padding: 72px 24px 64px !important; }
	.pt-page-photog .hero-title { font-size: 36px !important; }
	.pt-page-photog .requirements { padding: 64px 24px !important; }
	.pt-page-photog .benefits { padding: 64px 24px !important; }
	.pt-page-photog .benefits-grid { grid-template-columns: minmax(0, 1fr); }
	.pt-page-photog .how-it-works { padding: 64px 24px !important; }
	.pt-page-photog .founder-msg { padding: 64px 24px !important; }
	.pt-page-photog .ph-faq { padding: 64px 24px !important; }
	.pt-page-photog .ph-cta { padding: 72px 24px !important; }
	.pt-page-photog .cta-title { font-size: 28px !important; }
	.pt-page-photog .section-title { font-size: 28px !important; }
	.pt-page-photog .req-title { font-size: 26px !important; }
	.pt-page-photog .founder-msg-title { font-size: 22px !important; }
}

/* ==========================================================================
   PAGES: LEGAL (User Terms, Photographer Terms, Privacy Policy)
   patterns/page-user-terms.php, page-photographer-terms.php, page-privacy.php
   built by phototrips_legal_pattern() in inc/legal-doc.php

   The hero, the contents sidebar and the CTA are blocks, so their colours and
   sizes stay in the block attributes as usual. The document body comes from
   [phototrips_legal_doc] and the editor never sees it, so ALL of its styling
   has to live here - that is the exception you approved for these three pages.
   ========================================================================== */

.pt-page-legal {
	font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--style--block-gap: 0;
}
#pt-content .pt-page-legal { padding-left: 0; padding-right: 0; }
.pt-page-legal .wp-block-image { margin: 0; }

/* -- decorative circles (background only, intentionally not blocks) -- */
.pt-page-legal .legal-hero,
.pt-page-legal .bottom-cta { position: relative; overflow: hidden; }
.pt-page-legal .legal-hero::before,
.pt-page-legal .legal-hero::after,
.pt-page-legal .bottom-cta::before,
.pt-page-legal .bottom-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pt-page-legal .legal-hero::before { width: 400px; height: 400px; top: -170px; right: -110px; background: #C2D0F5; opacity: .34; }
.pt-page-legal .legal-hero::after  { width: 200px; height: 200px; bottom: -80px; left: -60px;  background: #C2D0F5; opacity: .20; }
.pt-page-legal .bottom-cta::before { width: 400px; height: 400px; top: -180px; right: -120px; background: #3B50D5; opacity: .22; }
.pt-page-legal .bottom-cta::after  { width: 220px; height: 220px; bottom: -80px; left: -60px;  background: #F4714A; opacity: .10; }

.pt-page-legal .hero-content { position: relative; z-index: 2; }
.pt-page-legal .meta-chip { flex: none; }

/* -- sidebar + document -- */
.pt-page-legal .doc-layout {
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.pt-page-legal .toc { position: sticky; top: 32px; }
.pt-page-legal .toc-list { list-style: none; margin: 0; padding: 0; }
.pt-page-legal .toc-list li { margin: 0; }
.pt-page-legal .toc-list li + li { margin-top: 2px; }
.pt-page-legal .toc-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 10px;
	line-height: 1.4;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition: background .2s, color .2s;
}
.pt-page-legal .toc-list a:hover,
.pt-page-legal .toc-list a.active {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
}
.pt-page-legal .toc-num {
	width: 18px;
	flex: none;
	font-size: 10px;
	font-weight: 800;
	color: var(--wp--preset--color--line);
	transition: color .2s;
}
.pt-page-legal .toc-list a:hover .toc-num,
.pt-page-legal .toc-list a.active .toc-num { color: var(--wp--preset--color--accent); }

/* ---------- the document body ([phototrips_legal_doc]) ---------- */
.pt-page-legal .doc-intro {
	padding-bottom: 36px;
	margin-bottom: 36px;
	border-bottom: 1.5px solid var(--wp--preset--color--line);
}
.pt-page-legal .doc-intro p { font-size: 15.5px; color: var(--wp--preset--color--muted); line-height: 1.8; }
.pt-page-legal .doc-intro a { color: var(--wp--preset--color--primary); font-weight: 600; text-decoration: none; }
.pt-page-legal .doc-intro a:hover { text-decoration: underline; }

.pt-page-legal .doc-section {
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	scroll-margin-top: 32px;
}
.pt-page-legal .doc-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pt-page-legal .section-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 8px;
}
.pt-page-legal .doc-content .section-title {
	font-size: 19px;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin-bottom: 16px;
	line-height: 1.3;
}
.pt-page-legal .doc-section p {
	font-size: 15px;
	color: var(--wp--preset--color--muted);
	line-height: 1.85;
	margin-bottom: 12px;
}
.pt-page-legal .doc-section p:last-child { margin-bottom: 0; }
.pt-page-legal .doc-section a { color: var(--wp--preset--color--primary); font-weight: 600; text-decoration: none; }
.pt-page-legal .doc-section a:hover { text-decoration: underline; }

/* bulleted lists: the dot is a pseudo-element so the text stays plain */
.pt-page-legal .doc-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
}
.pt-page-legal .doc-list:last-child { margin-bottom: 0; }
/* The bullet is absolutely positioned rather than a flex item. The comp made
   the <li> a flex container, which turns every inline link inside it into its
   own flex item and blows a 10px gap either side of it — you can see it on the
   "contact us at <email>" bullets. Same look, correct text flow. */
.pt-page-legal .doc-list li {
	position: relative;
	padding-left: 16px;
	font-size: 15px;
	color: var(--wp--preset--color--muted);
	line-height: 1.75;
}
.pt-page-legal .doc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* numbered sub-sections: the number chip is content-driven, via data-num */
.pt-page-legal .sub-sections { display: flex; flex-direction: column; gap: 24px; }
.pt-page-legal .sub-title,
.pt-page-legal .sub-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin-bottom: 10px;
}
.pt-page-legal .sub-heading { font-size: 14px; margin: 20px 0 10px; }
.pt-page-legal .sub-title::before,
.pt-page-legal .sub-heading::before {
	content: attr(data-num);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 6px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	font-size: 11px;
	font-weight: 800;
}

/* callout box */
.pt-page-legal .highlight-box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--wp--preset--color--tint);
	border-radius: 12px;
	padding: 16px 18px;
	margin-top: 16px;
}
.pt-page-legal .highlight-box svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--wp--preset--color--primary); }
.pt-page-legal .highlight-box p {
	font-size: 13.5px;
	color: var(--wp--preset--color--primary);
	line-height: 1.65;
	margin: 0 !important;
}
.pt-page-legal .highlight-box a { color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: underline; }

/* the contact block at the end of each document */
.pt-page-legal .doc-contact {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 24px 28px;
	margin-top: 40px;
}
.pt-page-legal .doc-contact-title { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy); margin-bottom: 12px; }
.pt-page-legal .contact-items { display: flex; flex-direction: column; gap: 6px; }
.pt-page-legal .contact-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}
.pt-page-legal .contact-item svg { width: 15px; height: 15px; flex: none; color: var(--wp--preset--color--accent); }
.pt-page-legal .contact-item a { color: var(--wp--preset--color--primary); font-weight: 600; text-decoration: none; }
.pt-page-legal .contact-item a:hover { text-decoration: underline; }

/* ---------- Privacy Policy only ---------- */
.pt-page-legal .retention-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 4px;
	font-size: 14px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 10px;
	overflow: hidden;
}
.pt-page-legal .retention-table th {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 10px 16px;
	text-align: left;
	border-bottom: 1.5px solid var(--wp--preset--color--line);
}
.pt-page-legal .retention-table td {
	padding: 12px 16px;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--line);
	line-height: 1.6;
	vertical-align: top;
}
.pt-page-legal .retention-table tr:last-child td { border-bottom: none; }
.pt-page-legal .retention-table td:first-child { font-weight: 600; color: var(--wp--preset--color--navy); white-space: nowrap; }

.pt-page-legal .processor-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 0; }
.pt-page-legal .processor-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 12px 14px;
}
.pt-page-legal .processor-name { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy); min-width: 100px; flex: none; }
.pt-page-legal .processor-desc { font-size: 13.5px; color: var(--wp--preset--color--muted); line-height: 1.55; }
.pt-page-legal .processor-desc a { color: var(--wp--preset--color--primary); font-weight: 600; text-decoration: none; }

.pt-page-legal .cookie-types { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pt-page-legal .cookie-type {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--wp--preset--color--line);
}
.pt-page-legal .cookie-badge {
	font-size: 11px;
	font-weight: 700;
	border-radius: 20px;
	padding: 3px 10px;
	white-space: nowrap;
	flex: none;
	margin-top: 1px;
}
.pt-page-legal .cookie-badge.required  { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); }
.pt-page-legal .cookie-badge.analytics { background: #FFF0EB; color: var(--wp--preset--color--accent); }
.pt-page-legal .cookie-badge.marketing { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.pt-page-legal .cookie-body { flex: 1; }
.pt-page-legal .cookie-name { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy); margin-bottom: 4px; }
.pt-page-legal .cookie-desc { font-size: 13.5px; color: var(--wp--preset--color--muted); line-height: 1.55; }

/* -- CTA button icons -- */
.pt-page-legal .cta-content { position: relative; z-index: 2; }
.pt-page-legal .cta-btn .wp-block-button__link { display: inline-flex; align-items: center; }
.pt-page-legal .cta-btn .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 8px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.pt-page-legal .cta-btn.is-mail .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.pt-page-legal .cta-btn.is-question .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.pt-page-legal .cta-btn.is-file .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
.pt-page-legal .cta-btn .wp-block-button__link:hover { transform: translateY(-2px); }
.pt-page-legal .cta-btn.is-style-outline .wp-block-button__link:hover { background-color: rgba(255,255,255,0.08) !important; }

/* -- responsive -- */
@media (max-width: 960px) {
	.pt-page-legal .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 24px 72px !important; }
	.pt-page-legal .toc { position: static; }
	.pt-page-legal .toc-label { display: none; }
	.pt-page-legal .toc-list { display: flex; flex-wrap: wrap; gap: 6px; }
	.pt-page-legal .toc-list li + li { margin-top: 0; }
	.pt-page-legal .toc-list a {
		background: var(--wp--preset--color--surface);
		border: 1.5px solid var(--wp--preset--color--line);
		white-space: nowrap;
		font-size: 12px;
		padding: 6px 12px;
	}
	.pt-page-legal .toc-num { display: none; }
}
@media (max-width: 640px) {
	/* see README section 9 - only !important can beat a block's inline style */
	.pt-page-legal .legal-hero { padding: 72px 24px 56px !important; }
	.pt-page-legal .hero-title { font-size: 34px !important; }
	.pt-page-legal .doc-content { padding: 32px 24px !important; }
	.pt-page-legal .bottom-cta { padding: 64px 24px !important; }
	.pt-page-legal .cta-title { font-size: 28px !important; }
	.pt-page-legal .retention-table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   HOMEPAGE — block conversion adjustments

   The homepage sections used to be wp:html blocks. They are now native blocks,
   which changed the DOM: an <a class="pt-hp-ctile"> became a group with a real
   core/image and real paragraphs inside, an inline <svg> became a core/image,
   and the FAQ accordion became core/details.

   Everything below re-attaches the original look to the new markup. Colours,
   sizes and spacing now live in the block attributes — what is left here is
   geometry, decoration and hover, exactly as README §9 requires.
   ========================================================================== */

/* -- "more" pill at the foot of a section (core/button now) -- */
.pt-morelink-btn .wp-block-button__link { display: inline-flex; align-items: center; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.pt-morelink-btn .wp-block-button__link::after {
	content: "";
	width: 15px;
	height: 15px;
	margin-left: 8px;
	flex: none;
	background-color: currentColor;
	transition: transform .2s ease;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
.pt-morelink-btn .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
.pt-morelink-btn .wp-block-button__link:hover::after { transform: translateX(3px); }

/* -- closing CTA band (core/button now; the arrow points up) -- */
.pt-hp-cta-btn .wp-block-button__link { display: inline-flex; align-items: center; white-space: nowrap; transition: background-color .2s ease, transform .2s ease; }
.pt-hp-cta-btn .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	margin-left: 8px;
	flex: none;
	background-color: currentColor;
	transition: transform .2s ease;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E");
}
.pt-hp-cta-btn .wp-block-button__link:hover { background-color: var(--wp--preset--color--accent-hover) !important; transform: translateY(-2px); }
.pt-hp-cta-btn .wp-block-button__link:hover::after { transform: translateY(-2px); }
.pt-hp-cta-text { flex: 1 1 320px; }
.pt-hp-cta .wp-block-buttons { flex: none; }

/* -- trust band: the number keeps its star inline -- */
.pt-hp-stats > .wp-block-group { margin: 0; }
.pt-hp-stat .wp-block-image { margin: 0; }

/* -- three steps: the number tile is a group now, the connector a bare group -- */
.pt-hiw2-num { width: 84px; height: 84px; box-sizing: border-box; margin-inline: auto; }
/* The connector between steps: the comp draws a 2px dashed rule. It used to be
   an empty <span>; now it is a pseudo-element on the empty group, which is the
   same picture with one element less. */
.pt-hiw2-conn { align-self: flex-start; }
.pt-hiw2-conn::before {
	content: "";
	display: block;
	border-top: 2px dashed var(--wp--preset--color--line);
}
.pt-hiw2-badge { width: fit-content; margin-inline: auto; }

/* -- why cards: the icon is a core/image inside the tinted tile -- */
.pt-hp-whyic { width: 46px; height: 46px; box-sizing: border-box; }
.pt-hp-whyic .wp-block-image { margin: 0; line-height: 0; }

/* -- testimonials: avatar is a core/image -- */
.pt-hp-testi-who .wp-block-image { margin: 0; flex: none; }
.pt-hp-testi-who .wp-block-image img { display: block; object-fit: cover; }

/* -- city / style tiles: group + image + caption, whole tile clickable -- */
.pt-hp-ctile,
.pt-hp-stile { position: relative; overflow: hidden; display: block; }
.pt-hp-ctile .wp-block-image,
.pt-hp-stile .wp-block-image { margin: 0; line-height: 0; }
.pt-hp-ctile .wp-block-image img,
.pt-hp-stile .wp-block-image img {
	width: 100%;
	display: block;
	transition: transform .5s ease;
}
.pt-hp-ctile:hover .wp-block-image img,
.pt-hp-stile:hover .wp-block-image img { transform: scale(1.06); }
/* the scrim over the photo — decoration, so a pseudo-element */
.pt-hp-ctile::after,
.pt-hp-stile::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(11,29,110,.78) 0%, rgba(11,29,110,.25) 45%, transparent 70%);
	transition: opacity .3s ease;
}
.pt-hp-ctile-body,
.pt-hp-stile-body {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 2;
}
.pt-hp-ctile-name a,
.pt-hp-stile-name a { text-decoration: none; }
/* one real link per tile, stretched over the whole card */
.pt-hp-ctile-name a::before,
.pt-hp-stile-name a::before { content: ""; position: absolute; inset: 0; z-index: 3; }
/* the arrow that slides in on hover */
.pt-hp-ctile-name a::after,
.pt-hp-stile-name a::after {
	content: "\2192";
	margin-left: 8px;
	opacity: 0;
	display: inline-block;
	transform: translateX(-4px);
	transition: opacity .3s ease, transform .3s ease;
}
.pt-hp-ctile:hover .pt-hp-ctile-name a::after,
.pt-hp-stile:hover .pt-hp-stile-name a::after { opacity: 1; transform: translateX(0); }
/* The whole tile navigates (pages.js forwards the click to the tile's link);
   the pointer advertises it. */
.pt-hp-ctile,
.pt-hp-stile { cursor: pointer; }

/* -- "Choose a City" style hero buttons: arrow slides in on hover -- */
.pt-btn-arrow .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .3s ease, transform .3s ease;
}
.pt-btn-arrow .wp-block-button__link:hover::after { opacity: 1; transform: translateX(0); }

/* -- photoshoot cards -- */
.pt-hp-shoot { position: relative; }
.pt-hp-shoot .pt-hp-shoot-media .wp-block-image { margin: 0; line-height: 0; }
.pt-hp-shoot .pt-hp-shoot-media > .wp-block-image img { width: 100%; display: block; transition: transform .5s ease; }
.pt-hp-shoot:hover .pt-hp-shoot-media > .wp-block-image img { transform: scale(1.05); }
/* the photographer chip sits on top of the photo */
.pt-hp-shoot-by .wp-block-image { margin: 0; flex: none; }
.pt-hp-shoot-by .wp-block-image img { display: block; object-fit: cover; border: 2px solid rgba(255,255,255,.85); }
.pt-hp-shoot-title a { text-decoration: none; }

/* The card title is a heading that happens to be clickable, not a link — so it
   is text colour everywhere the card appears (homepage, landings, wherever
   else), matching the .sc-t title on the catalogue cards. Same value, one look.
 *
 * ⚠️ The !important is not laziness. WordPress prints its preset colour classes
 * as `.has-navy-color { color: … !important }`, and the saved markup on the
 * homepage carries that class. Without matching weight this rule loses. The
 * cleaner route — changing the block attribute — only fixes the cards that are
 * rendered on the fly; the ones already written into a page's content would
 * keep the old colour. */
.pt-hp-shoot-title,
.pt-hp-shoot-title a,
.pt-hp-shoot-title.has-navy-color { color: var(--wp--preset--color--foreground) !important; }
.pt-hp-shoot-title a::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.pt-hp-tag .wp-block-image { margin: 0; line-height: 0; }

/* -- homepage FAQ, now core/details (no JavaScript) -- */
.pt-faq2-list .wp-block-details {
	border-radius: 14px; /* core/details has no radius control */
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}
.pt-faq2-list .wp-block-details[open] {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 4px 24px rgba(59, 80, 213, .09);
}
.pt-faq2-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	list-style: none;
	transition: color .25s;
}
.pt-faq2-list summary::-webkit-details-marker,
.pt-faq2-list summary::marker { display: none; content: ""; }
.pt-faq2-list .wp-block-details[open] > summary { color: var(--wp--preset--color--primary); }
.pt-faq2-list summary::after {
	content: "";
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background-color: #fff0eb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4714A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	transition: transform .3s ease, background-color .25s;
}
.pt-faq2-list .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
	background-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* -- gallery collage: core/image blocks inside the column layout -- */
.pt-hp-gallery .wp-block-image { margin: 0 0 var(--pt-gallery-gap, 12px); break-inside: avoid; }



/* WordPress's vertical flex layout hard-codes `align-items: flex-start`, so
   every accordion card shrank to the width of its own question - the staircase
   on the landing pages' FAQ. The comp is a plain column of full-width cards. */
.pt-faq2-list { align-items: stretch; }


/* ==========================================================================
   Block-conversion clean-up — four alignment fixes that all trace back to the
   same cause: the markup changed shape when these sections became blocks, and
   a few of the old rules now land on a different element than they used to.
   ========================================================================== */

/* 1 · ICONS SITTING LOW INSIDE PILLS AND CHIPS
   An <img> is inline by default, so it rests on the text baseline and the
   <figure> keeps a line-box underneath it — which is why every icon inside a
   pill looked two or three pixels low. Scoped to resized images (all our
   icons) and to images inside a flex row, so captioned content images keep
   their normal line-height. */
.wp-block-image.is-resized,
.is-layout-flex > .wp-block-image { line-height: 0; }
.wp-block-image.is-resized > img,
.is-layout-flex > .wp-block-image > img { display: block; }

/* 2 · ICON TILES (contact rows, social buttons, why cards, category headers)
   A single icon inside a square tile: centre it. Only when the image is the
   tile's only child, so an icon that sits next to a label in a flex row is
   left alone — `margin-inline: auto` there would push the label away. */
.wp-block-group.is-layout-flow > .wp-block-image.is-resized:only-child { margin-inline: auto; }

/* 3 · THE MOCKUP AVATARS ON "HOW IT WORKS"
   They are paragraphs with a 50% radius, and their padding was asymmetric
   (9/12 and 10/9), so the circle came out as an oval. A fixed square box with
   the letters centred keeps them round whatever the initials are. */
.mc-avatar,
.me-sender-avatar {
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	padding: 0 !important;
	display: grid;
	place-items: center;
}

/* 4 · THE CLOSING CTA BUTTON WAS DOUBLE-PADDED
   `.pt-hp-cta-btn` used to be the <a> itself. It is now the core/button
   WRAPPER, so its old padding stacked on top of the link's own and made the
   button roughly half again as tall as the comp. The wrapper is layout only. */
.wp-block-button.pt-hp-cta-btn {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.pt-hp-cta .wp-block-buttons { align-self: center; }

/* ==========================================================================
   MOBILE — the closing CTA had a tall empty gap between its copy and its
   button.

   `.pt-hp-cta-text` carries `flex: 1 1 320px`. In a row that 320px is a width,
   which is what it was written for — but this band turns into a COLUMN at
   781px, and in a column flex-basis is a HEIGHT. The text block was reserving
   320px of vertical space and shoving the button to the bottom of it.
   ========================================================================== */
@media (max-width: 781px) {
	.pt-hp-cta-text { flex: 0 1 auto; }
}

/* Hero padding on phones. The cover blocks carry their desktop padding as an
   inline style, so only !important can reduce it here. */
@media (max-width: 767px) {
	.wp-block-cover.alignwide { padding: 16px !important; }
}

/* A two-tone number is core's inline-colour format: <mark class="has-inline-color">.
   It ships with `background-color:rgba(0,0,0,0)` inline, but WordPress strips
   that declaration from <mark> when the content is saved to the database — so
   the browser's default yellow highlight came back. Clearing it here is the
   only place that survives a save. */mark.has-inline-color { background-color: transparent; }


/* =========================================================================
   CATALOGUE PAGES - Explore, Experience, Photographer Profile
   =========================================================================

   These three pages are database-driven: one record = one URL. Their markup is
   produced by PHP from the record's own fields, so - unlike the ported Pages -
   there are no block attributes to carry the design and the whole visual layer
   lives here, lifted from the approved comps.

   Everything is scoped to .pt-page-explore / .pt-page-experience /
   .pt-page-profile so none of these very generic class names (.card, .grid,
   .meta) can reach any other page of the site.
   ========================================================================= */

.pt-page-explore,
.pt-page-experience,
.pt-page-profile,
.pt-cards {
	--pt-navy: #0B1D6E;
	--pt-royal: #3B50D5;
	--pt-royal-hover: #2E40BE;
	--pt-accent: #F4714A;
	--pt-accent-bg: #FFF0EB;
	--pt-royal-bg: #EEF0FF;
	--pt-page-bg: #F4F6FD;
	--pt-white: #FFFFFF;
	--pt-tint: #EEF0FF;
	--pt-foreground: #323F4B;
	--pt-muted: #64748B;
	--pt-border: #E2E8F0;
	--pt-deco-blue: #C2D0F5;
	--pt-star: #F7C948;
	--pt-green: #20A06A;
	--pt-card-shadow: inset 0 0 0 1px var(--pt-border), 0 4px 24px rgba(3, 12, 87, .04);

	/* The gutter the rest of the site uses. Reading WordPress's own root-padding
	   variable means this follows the site automatically, including the 16px it
	   drops to on mobile — rather than hard-coding a number that then drifts. */
	--pt-gutter: var(--wp--style--root--padding-left, 36px);

	/* ⚠️ MATCHES THE HEADER AND FOOTER EXACTLY, and it has to be written this
	   way to do it. The header bar is `max-width: 1440px` centred INSIDE the
	   root padding, so its content spans the full 1440 with no padding of its
	   own. A box of `max-width: 1440px; padding: 0 36px` looks aligned on a
	   1440 screen and is 36px narrower on every larger one, which is the
	   misalignment you spotted. Capping the width instead of padding the box
	   keeps the two edges together at every viewport.

	   The comps drew these pages at 1200px, but matching the site beats
	   matching the comp's canvas — the header sitting 120px wider than the
	   content is the thing you actually see. */
	max-width: min( 1440px, calc( 100% - var( --pt-gutter ) * 2 ) );
	margin-inline: auto;
	padding-inline: 0;
	color: var(--pt-navy);
	line-height: 1.5;
}

.pt-page-explore img,
.pt-page-experience img,
.pt-page-profile img,
.pt-cards img {
	display: block;
	max-width: 100%;
}

.pt-page-explore a,
.pt-page-experience a,
.pt-page-profile a,
.pt-cards a {
	color: inherit;
	text-decoration: none;
}

.pt-page-explore *,
.pt-page-experience *,
.pt-page-profile *,
.pt-cards * {
	box-sizing: border-box;
}

/* -- breadcrumb ------------------------------------------------------- */
.pt-page-explore .crumbs,
.pt-page-experience .crumbs,
.pt-page-profile .crumbs {
	padding: 18px 0 4px;
	font-size: 13px;
	color: var(--pt-muted);
	font-weight: 600;
}
.pt-page-explore .crumbs a:hover,
.pt-page-experience .crumbs a:hover,
.pt-page-profile .crumbs a:hover { color: var(--pt-royal); }
.pt-page-explore .crumbs span,
.pt-page-experience .crumbs span,
.pt-page-profile .crumbs span { margin: 0 7px; color: var(--pt-deco-blue); }

/* -- shared card + buttons -------------------------------------------- */
.pt-page-experience .card,
.pt-page-profile .card {
	background: var(--pt-white);
	border-radius: 20px;
	box-shadow: var(--pt-card-shadow);
	padding: 24px 26px;
}

.pt-page-explore .btn-ghost,
.pt-page-experience .btn-ghost,
.pt-page-profile .btn-ghost {
	border: 2px solid var(--pt-royal);
	background: none;
	color: var(--pt-royal);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	padding: 12px 28px;
	border-radius: 50px;
	cursor: pointer;
	display: inline-block;
}
.pt-page-explore .btn-ghost:hover,
.pt-page-experience .btn-ghost:hover,
.pt-page-profile .btn-ghost:hover { background: var(--pt-tint); color: var(--pt-royal); }
.pt-page-explore .btn-ghost.hide,
.pt-page-experience .btn-ghost.hide,
.pt-page-profile .btn-ghost.hide { display: none; }

/* -- the verified tick ------------------------------------------------ */
.pt-page-experience .vf,
.pt-page-profile .vf {
	width: 21px;
	height: 21px;
	background: var(--pt-royal);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	flex-shrink: 0;
}
.pt-page-experience .pg-name .vf { width: 16px; height: 16px; font-size: 9px; }
.pt-page-profile .vf.is-small { width: 17px; height: 17px; font-size: 10px; }

/* =========================================================================
   The photoshoot card (.sc) - Explore, Similar Photoshoots, My Offers
   ========================================================================= */
.pt-page-explore .sc,
.pt-page-experience .sc,
.pt-page-profile .sc,
.pt-cards .sc {
	background: var(--pt-white);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--pt-card-shadow);
	display: flex;
	flex-direction: column;
}
.pt-page-explore .sc:hover,
.pt-page-experience .sc:hover,
.pt-page-profile .sc:hover,
.pt-cards .sc:hover {
	box-shadow: inset 0 0 0 1px #c7d0e8, 0 10px 28px rgba(3, 12, 87, .09);
}
.pt-page-explore .sc-img,
.pt-page-experience .sc-img,
.pt-page-profile .sc-img,
.pt-cards .sc-img { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.pt-page-explore .sc-img > img,
.pt-page-experience .sc-img > img,
.pt-page-profile .sc-img > img,
.pt-cards .sc-img > img { width: 100%; height: 100%; object-fit: cover; }
.pt-page-explore .sc-pg,
.pt-page-experience .sc-pg,
.pt-page-profile .sc-pg,
.pt-cards .sc-pg { position: absolute; top: 11px; left: 11px; display: flex; align-items: center; gap: 9px; }
.pt-page-explore .sc-pg img,
.pt-page-experience .sc-pg img,
.pt-page-profile .sc-pg img,
.pt-cards .sc-pg img {
	width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
	border: 2px solid rgba(255, 255, 255, .92);
}
.pt-page-explore .sc-pg span,
.pt-page-experience .sc-pg span,
.pt-page-profile .sc-pg span,
.pt-cards .sc-pg span {
	color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 5px rgba(0, 0, 0, .65);
}
.pt-page-explore .sc-city,
.pt-page-experience .sc-city,
.pt-page-profile .sc-city,
.pt-cards .sc-city {
	position: absolute; top: 11px; right: 11px; background: var(--pt-accent); color: #fff;
	font-size: 10.5px; font-weight: 800; letter-spacing: .07em; padding: 4px 11px; border-radius: 50px;
}
/* The body is a fixed sequence of rows — title (2 lines), specs, bookings/NEW,
   price footer — and every row reserves its height even when empty, so a grid
   of cards lines up whatever data each listing has. */
.pt-page-explore .sc-b,
.pt-page-experience .sc-b,
.pt-page-profile .sc-b,
.pt-cards .sc-b { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pt-page-explore .sc-t,
.pt-page-experience .sc-t,
.pt-page-profile .sc-t,
.pt-cards .sc-t {
	font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--pt-foreground); margin-bottom: 10px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 45px;
}
.pt-page-explore .sc-specs,
.pt-page-experience .sc-specs,
.pt-page-profile .sc-specs,
.pt-cards .sc-specs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; min-height: 24px; }
.pt-page-explore .sc-bkline,
.pt-page-experience .sc-bkline,
.pt-page-profile .sc-bkline,
.pt-cards .sc-bkline { margin-bottom: 12px; }
.pt-page-explore .sc-s,
.pt-page-experience .sc-s,
.pt-page-profile .sc-s,
.pt-cards .sc-s {
	display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pt-muted);
	font-weight: 600; line-height: 1.8;
}
.pt-page-explore .sc-s svg,
.pt-page-experience .sc-s svg,
.pt-page-profile .sc-s svg,
.pt-cards .sc-s svg { width: 14px; height: 14px; stroke: var(--pt-royal); flex-shrink: 0; }
.pt-page-explore .sc-s.bk svg,
.pt-page-experience .sc-s.bk svg,
.pt-page-profile .sc-s.bk svg,
.pt-cards .sc-s.bk svg { width: 15px; height: 15px; stroke: var(--pt-green); stroke-width: 1.9; }
.pt-page-explore .sc-f,
.pt-page-experience .sc-f,
.pt-page-profile .sc-f,
.pt-cards .sc-f { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.pt-page-explore .sc-p,
.pt-page-experience .sc-p,
.pt-page-profile .sc-p,
.pt-cards .sc-p { font-size: 17px; font-weight: 800; }
.pt-page-explore .sc-p small,
.pt-page-experience .sc-p small,
.pt-page-profile .sc-p small,
.pt-cards .sc-p small { font-size: 11.5px; color: var(--pt-muted); font-weight: 600; }
.pt-page-explore .sc-new,
.pt-page-experience .sc-new,
.pt-page-profile .sc-new,
.pt-cards .sc-new {
	display: inline-flex; align-items: center; background: var(--pt-accent-bg); color: var(--pt-accent);
	font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 50px; line-height: 1.6;
}
.pt-page-explore .sc-r,
.pt-page-experience .sc-r,
.pt-page-profile .sc-r,
.pt-cards .sc-r { font-size: 12.5px; font-weight: 700; color: var(--pt-navy); }
.pt-page-explore .sc-r i,
.pt-page-experience .sc-r i,
.pt-page-profile .sc-r i,
.pt-cards .sc-r i { color: var(--pt-star); font-style: normal; }
.pt-page-explore .sc-r em,
.pt-page-experience .sc-r em,
.pt-page-profile .sc-r em,
.pt-cards .sc-r em { color: var(--pt-muted); font-style: normal; font-weight: 600; }

.pt-page-experience .sim { padding: 26px 0 60px; }
.pt-page-experience .sim-t { font-size: clamp(24px, 2.3vw, 28px); font-weight: 600; line-height: 1.35; margin-bottom: 18px; }
.pt-page-experience .sim-grid,
.pt-page-profile .sim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pt-page-experience .sim-cta { text-align: center; margin-top: 26px; }

/* =========================================================================
   Reviews - shared by the experience and the profile
   ========================================================================= */
.pt-page-experience .rv-sum,
.pt-page-profile .rv-sum,
.pt-cards .rv-sum { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.pt-page-experience .rv-score,
.pt-page-profile .rv-score,
.pt-cards .rv-score {
	display: flex; align-items: center; gap: 6px; background: var(--pt-accent-bg); border-radius: 50px;
	padding: 6px 14px; font-size: 14px; font-weight: 800; color: var(--pt-accent);
}
.pt-page-experience .rv-count,
.pt-page-profile .rv-count,
.pt-cards .rv-count { font-size: 14px; color: var(--pt-muted); font-weight: 600; line-height: 1.8; }
.pt-page-profile .rv-lede,
.pt-cards .rv-lede {
	font-size: 17px; color: var(--pt-muted); font-weight: 400; line-height: 1.6; margin-bottom: 20px;
}
.pt-page-experience .rv-grid,
.pt-page-profile .rv-grid,
.pt-cards .rv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pt-page-experience .rv-card,
.pt-page-profile .rv-card,
.pt-cards .rv-card {
	background: var(--pt-page-bg); border-radius: 16px; padding: 19px 21px 17px;
	display: flex; flex-direction: column;
}
.pt-page-experience .rv-card.is-hidden,
.pt-page-profile .rv-card.is-hidden,
.pt-cards .rv-card.is-hidden { display: none; }
.pt-page-experience .rv-top,
.pt-page-profile .rv-top,
.pt-cards .rv-top { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.pt-page-experience .rv-av,
.pt-page-profile .rv-av,
.pt-cards .rv-av {
	width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
	justify-content: center; font-size: 15px; font-weight: 800; background: var(--pt-royal-bg); color: var(--pt-royal);
}
.pt-page-experience .rv-av.alt,
.pt-page-profile .rv-av.alt,
.pt-cards .rv-av.alt { background: var(--pt-accent-bg); color: var(--pt-accent); }
.pt-page-experience .rv-name,
.pt-page-profile .rv-name,
.pt-cards .rv-name { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.pt-page-experience .rv-date,
.pt-page-profile .rv-date,
.pt-cards .rv-date { font-size: 13px; color: var(--pt-muted); font-weight: 400; line-height: 1.8; margin-top: 2px; }
.pt-page-experience .rv-stars,
.pt-page-profile .rv-stars,
.pt-cards .rv-stars { margin-left: auto; font-size: 12px; color: var(--pt-accent); letter-spacing: 1px; }
.pt-page-experience .rv-stars-off,
.pt-page-profile .rv-stars-off,
.pt-cards .rv-stars-off { color: #D6DCEA; }
.pt-page-experience .rv-text,
.pt-page-profile .rv-text,
.pt-cards .rv-text {
	font-size: 16px; line-height: 1.7; color: var(--pt-foreground);
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-page-experience .rv-text.open,
.pt-page-profile .rv-text.open,
.pt-cards .rv-text.open { -webkit-line-clamp: unset; overflow: visible; }
.pt-page-experience .rv-more,
.pt-page-profile .rv-more,
.pt-cards .rv-more {
	align-self: flex-start; margin-top: 8px; background: none; border: 0; padding: 0; cursor: pointer;
	font-family: inherit; font-size: 13px; font-weight: 700; color: var(--pt-royal);
}
.pt-page-experience .rv-more:hover,
.pt-page-profile .rv-more:hover,
.pt-cards .rv-more:hover { text-decoration: underline; }
.pt-page-experience .rv-more.hide,
.pt-page-profile .rv-more.hide,
.pt-cards .rv-more.hide { display: none; }
.pt-page-experience .rv-foot,
.pt-page-profile .rv-foot,
.pt-cards .rv-foot { margin-top: 20px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.pt-page-experience .rv-left,
.pt-page-profile .rv-left,
.pt-cards .rv-left { font-size: 13.5px; color: var(--pt-muted); font-weight: 600; }

/* =========================================================================
   Lightbox - shared
   ========================================================================= */
.pt-page-experience .lb,
.pt-page-profile .lb {
	display: none; position: fixed; inset: 0; background: rgba(6, 12, 40, .93); z-index: 1000;
	align-items: center; justify-content: center; padding: 34px;
}
.pt-page-experience .lb.on,
.pt-page-profile .lb.on { display: flex; }
.pt-page-experience .lb img,
.pt-page-profile .lb img { max-width: 88vw; max-height: 86vh; object-fit: contain; border-radius: 10px; }
.pt-page-experience .lb-x, .pt-page-experience .lb-p, .pt-page-experience .lb-n,
.pt-page-profile .lb-x, .pt-page-profile .lb-p, .pt-page-profile .lb-n {
	position: absolute; background: rgba(255, 255, 255, .14); border: 0; color: #fff; width: 46px; height: 46px;
	border-radius: 50%; font-size: 22px; cursor: pointer; font-family: inherit;
}
.pt-page-experience .lb-x, .pt-page-profile .lb-x { top: 22px; right: 22px; }
.pt-page-experience .lb-p, .pt-page-profile .lb-p { left: 22px; top: 50%; margin-top: -23px; }
.pt-page-experience .lb-n, .pt-page-profile .lb-n { right: 22px; top: 50%; margin-top: -23px; }

/* =========================================================================
   EXPLORE
   ========================================================================= */
.pt-page-explore h1 {
	font-size: clamp(34px, 3.6vw, 44px); font-weight: 800; line-height: 1.22;
	letter-spacing: -.01em; margin: 6px 0 10px;
}
.pt-page-explore .lede {
	font-size: 17px; color: var(--pt-muted); font-weight: 400; line-height: 1.6;
	max-width: 640px; margin-bottom: 26px;
}

.pt-page-explore .fbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pt-page-explore .fdrop { position: relative; }
.pt-page-explore .fbtn {
	display: inline-flex; align-items: center; gap: 10px; background: var(--pt-white); border: 0;
	box-shadow: inset 0 0 0 1px var(--pt-border); border-radius: 50px; padding: 13px 20px; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 600; color: var(--pt-navy);
	min-width: 186px; justify-content: space-between;
}
.pt-page-explore .fbtn:hover { box-shadow: inset 0 0 0 1px var(--pt-deco-blue); }
.pt-page-explore .fbtn.on { box-shadow: inset 0 0 0 2px var(--pt-royal); color: var(--pt-royal); }
.pt-page-explore .fbtn svg {
	width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4;
	transition: transform .2s; flex-shrink: 0;
}
.pt-page-explore .fdrop.open .fbtn svg { transform: rotate(180deg); }
.pt-page-explore .fpanel {
	display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 120; min-width: 232px;
	max-height: 330px; overflow-y: auto; background: var(--pt-white); border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--pt-border), 0 18px 44px rgba(3, 12, 87, .16); padding: 8px;
}
.pt-page-explore .fdrop.open .fpanel { display: block; }
.pt-page-explore .fopt {
	display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; cursor: pointer;
	font-family: inherit; text-align: left; font-size: 15px; font-weight: 600; color: var(--pt-navy);
	padding: 10px 12px; border-radius: 10px; line-height: 1.5;
}
.pt-page-explore .fopt:hover { background: var(--pt-tint); color: var(--pt-royal); }
.pt-page-explore .fopt.sel { color: var(--pt-royal); }
/* A city that belongs to another country is hidden entirely rather than greyed
   out: once a country is chosen, a list of eight unavailable cities is noise,
   not information. The class is only ever added by the script, so the served
   HTML still contains every city link for a crawler to follow. */
.pt-page-explore .fopt.is-off,
.pt-page-explore .fopt[hidden] { display: none; }
.pt-page-explore .fbox {
	width: 19px; height: 19px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--pt-border); flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800;
}
.pt-page-explore .fopt.sel .fbox { background: var(--pt-royal); box-shadow: none; }
.pt-page-explore .fsep { height: 1px; background: var(--pt-border); margin: 6px 4px; }

.pt-page-explore .fmob { display: none; }
.pt-page-explore .fmob-btn {
	display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center;
	background: var(--pt-white); border: 0; box-shadow: inset 0 0 0 1px var(--pt-border); border-radius: 50px;
	padding: 14px 22px; cursor: pointer; font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--pt-navy);
}
.pt-page-explore .fmob-btn.on { box-shadow: inset 0 0 0 2px var(--pt-royal); color: var(--pt-royal); }
.pt-page-explore .fmob-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.pt-page-explore .fmob-n {
	background: var(--pt-royal); color: #fff; border-radius: 50px; min-width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; padding: 0 6px;
}
.pt-page-explore .fsheet { display: none; position: fixed; inset: 0; z-index: 600; }
.pt-page-explore .fsheet.on { display: block; }
.pt-page-explore .fsheet-bg { position: absolute; inset: 0; background: rgba(6, 12, 40, .45); }
.pt-page-explore .fsheet-in {
	position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; display: flex; flex-direction: column;
	background: var(--pt-page-bg); border-radius: 22px 22px 0 0;
}
.pt-page-explore .fsheet-hd {
	display: flex; align-items: center; padding: 18px 20px 14px;
	border-bottom: 1px solid var(--pt-border); flex-shrink: 0;
}
.pt-page-explore .fsheet-hd h3 { font-size: 20px; font-weight: 600; line-height: 1.45; }
.pt-page-explore .fsheet-x {
	margin-left: auto; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--pt-muted);
	font-family: inherit; line-height: 1; padding: 0 4px;
}
.pt-page-explore .fsheet-body { overflow-y: auto; padding: 6px 20px 18px; flex: 1; }
.pt-page-explore .fgroup { padding: 18px 0; border-bottom: 1px solid var(--pt-border); }
.pt-page-explore .fgroup:last-child { border-bottom: 0; }
.pt-page-explore .fgroup h4 { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--pt-foreground); margin-bottom: 12px; }
.pt-page-explore .fpills { display: flex; flex-wrap: wrap; gap: 9px; }
.pt-page-explore .fpill {
	background: var(--pt-white); border: 0; box-shadow: inset 0 0 0 1px var(--pt-border); border-radius: 50px;
	padding: 11px 17px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--pt-navy);
	cursor: pointer; line-height: 1.5;
}
.pt-page-explore .fpill.sel { background: var(--pt-royal); color: #fff; box-shadow: none; }
.pt-page-explore .fpill[disabled] { opacity: .35; cursor: default; }
.pt-page-explore .fsheet-ft {
	flex-shrink: 0; display: flex; gap: 12px; align-items: center;
	padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--pt-border); background: var(--pt-white);
}
.pt-page-explore .fsheet-clear {
	background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700;
	color: var(--pt-muted); text-decoration: underline; text-underline-offset: 3px; padding: 12px 4px; white-space: nowrap;
}
.pt-page-explore .fsheet-clear:hover { color: var(--pt-accent); }
.pt-page-explore .fsheet-go {
	flex: 1; border: 0; background: var(--pt-royal); color: #fff; font-family: inherit; font-size: 16px;
	font-weight: 700; padding: 15px; border-radius: 14px; cursor: pointer;
}
.pt-page-explore .fsheet-go:hover { background: var(--pt-royal-hover); }

.pt-page-explore .chips { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.pt-page-explore .chips:empty { display: none; }
.pt-page-explore .chip {
	display: inline-flex; align-items: center; gap: 8px; background: var(--pt-tint); color: var(--pt-royal);
	border-radius: 50px; padding: 8px 8px 8px 15px; font-size: 14px; font-weight: 700; line-height: 1.5;
}
.pt-page-explore .chip button {
	background: none; border: 0; cursor: pointer; color: inherit; font-family: inherit; font-size: 16px;
	line-height: 1; width: 20px; height: 20px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
}
.pt-page-explore .chip button:hover { background: var(--pt-royal); color: #fff; }
.pt-page-explore .chip-clear {
	background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
	color: var(--pt-muted); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px;
}
.pt-page-explore .chip-clear:hover { color: var(--pt-accent); }

.pt-page-explore .rescount {
	font-size: 17px; font-weight: 700; color: var(--pt-navy); margin-bottom: 16px; line-height: 1.6;
}
.pt-page-explore .rescount span { color: var(--pt-muted); font-weight: 400; }
.pt-page-explore .grid,
.pt-cards .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* .pt-cards is the explore card DESIGN carried onto the landing pages, without
   the explore PAGE's geometry. The scope block above hands it the tokens and
   the card rules; these two lines take back the page-width framing, because on
   a landing the grid lives inside a section that is already aligned — capping
   it again would shrink it 72px out of line with its own heading. */
.pt-cards { max-width: none; margin-inline: 0; padding-inline: 0; }
/* The landing editor box offers 3 or 4 columns; explore itself is always 4. */
.pt-cards.is-3 .grid { grid-template-columns: repeat(3, 1fr); }

/* "Show all photoshoots" under a landing grid — the road to Explore with this
   page's filter already applied. Outline pill, matching the header's account
   button: the solid royal treatment stays reserved for booking actions. */
.pt-cards-more { text-align: center; margin-top: 28px; }
.pt-cards-all {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 12px 26px;
	border: 2px solid var(--pt-border);
	border-radius: 50px;
	background: var(--pt-white);
	color: var(--pt-navy);
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.pt-cards-all:hover,
.pt-cards-all:focus-visible {
	border-color: var(--pt-royal);
	color: var(--pt-royal);
}

/* --------------------------------------------------------------------------
   THE standard review card, everywhere. The rv-* base rules live with the
   photoshoot page (and reach other pages through the .pt-cards scope); these
   are the pieces the standardisation added on top.
   -------------------------------------------------------------------------- */

/* A reviewer photo in the avatar slot instead of the initial. */
.rv-card .rv-av.is-photo { object-fit: cover; background: none; }

/* The optional headline, between the header row and the text. */
.rv-card .rv-title {
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--pt-navy);
}

/* On a tinted page background the card's own tint would vanish — this variant
   is the white-card skin the home, landings and /reviews/ use. */
.rv-card.on-base {
	background: var(--pt-white);
	box-shadow: var(--pt-card-shadow);
}

/* The citation: which photoshoot this review belongs to. A quiet link, pinned
   to the card's bottom edge so a row of cards keeps a straight base line —
   deliberately NOT a button, because it is a reference, not a call to action. */
.rv-card .rv-src {
	margin-top: auto;
	padding-top: 11px;
	border-top: 1px solid var(--pt-border);
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pt-muted);
	text-decoration: none;
	transition: color .15s ease;
}
.rv-card .rv-src svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.rv-card .rv-src span {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.rv-card .rv-src:hover { color: var(--pt-royal); }
/* Breathing room between the text/Read more and the citation. The pinning to
   the bottom comes from margin-top:auto above; this keeps a minimum gap when
   the card is exactly as tall as its content. */
.rv-card .rv-text { margin-bottom: 2px; }
.rv-card .rv-text + .rv-more { margin-bottom: 12px; }
.rv-card .rv-src { padding-top: 14px; }

/* Stars pinned to the card's top-right corner, not centred on the avatar row. */
.rv-card .rv-top { align-items: flex-start; }
.rv-card .rv-stars { margin-top: 3px; }

/* The three-across row on the home and landing pages. */
.pt-rvrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1024px) { .pt-rvrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pt-rvrow { grid-template-columns: 1fr; } }
.pt-page-explore .sc.is-hidden,
.pt-cards .sc.is-hidden { display: none; }
.pt-page-explore .more-wrap { text-align: center; margin: 30px 0 60px; }
.pt-page-explore .btn-ghost { font-size: 15px; padding: 14px 34px; }
.pt-page-explore .empty {
	background: var(--pt-white); border-radius: 20px; box-shadow: var(--pt-card-shadow);
	padding: 52px 30px; text-align: center; display: none;
}
.pt-page-explore .empty.on { display: block; }
.pt-page-explore .empty h3 { font-size: 20px; font-weight: 600; line-height: 1.45; margin-bottom: 8px; }
.pt-page-explore .empty p { font-size: 16px; color: var(--pt-muted); line-height: 1.7; margin-bottom: 20px; }

/* =========================================================================
   EXPERIENCE
   ========================================================================= */
.pt-page-experience .tag {
	display: inline-block; background: var(--pt-accent); color: #fff; font-size: 11.5px; font-weight: 800;
	letter-spacing: .07em; padding: 5px 13px; border-radius: 50px; margin: 18px 0 11px;
}
.pt-page-experience .title-row { display: flex; align-items: baseline; gap: 24px; padding: 0 0 18px; }
.pt-page-experience h1 {
	font-size: clamp(34px, 3.6vw, 44px); font-weight: 800; line-height: 1.22;
	letter-spacing: -.01em; max-width: 900px;
}
.pt-page-experience .meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pt-page-experience .meta-score {
	display: inline-flex; align-items: center; gap: 6px; background: var(--pt-accent-bg); color: var(--pt-accent);
	border-radius: 50px; padding: 7px 15px; font-size: 16px; font-weight: 800; line-height: 1.4;
}
.pt-page-experience .meta-rev {
	font-size: 17px; font-weight: 700; color: var(--pt-navy); text-decoration: underline;
	text-decoration-color: var(--pt-deco-blue); text-underline-offset: 3px;
}
.pt-page-experience .meta-rev:hover { color: var(--pt-royal); text-decoration-color: var(--pt-royal); }
.pt-page-experience .meta-bk {
	display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 700; color: var(--pt-navy);
}
.pt-page-experience .meta-bk svg { width: 17px; height: 17px; stroke: var(--pt-green); stroke-width: 1.9; flex-shrink: 0; }
.pt-page-experience .title-side { margin-left: auto; text-align: right; flex-shrink: 0; }
.pt-page-experience .price-big { font-size: 29px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.pt-page-experience .price-big small { font-size: 16px; color: var(--pt-muted); font-weight: 700; }
.pt-page-experience .price-lab { font-size: 13px; color: var(--pt-muted); font-weight: 600; margin-top: 4px; }

.pt-page-experience .gal {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: relative;
}
.pt-page-experience .gal img {
	width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; cursor: pointer; transition: opacity .18s;
}
.pt-page-experience .gal img:hover { opacity: .9; }
.pt-page-experience .gal img:nth-child(n+5) { display: none; }
.pt-page-experience .gal-all {
	position: absolute; right: 16px; bottom: 16px; background: var(--pt-white); border: 0; border-radius: 50px;
	padding: 10px 20px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--pt-navy);
	cursor: pointer; box-shadow: 0 4px 16px rgba(3, 12, 87, .16);
}

/* The booking rail is a fixed width, not a fraction: the Bubble panel inside it
   has its own breakpoints, and a column that shifts by a few pixels with the
   viewport lands on the wrong side of them. 460px is ~34% of the 1368px content
   area at 1440. Widen in steps here and nothing else needs touching. */
.pt-page-experience .cols {
	display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 30px; align-items: start; padding: 34px 0 20px;
}
.pt-page-experience .stack > * + * { margin-top: 16px; }
.pt-page-experience h2 { font-size: clamp(24px, 2.3vw, 28px); font-weight: 600; line-height: 1.35; margin-bottom: 18px; }
.pt-page-experience h2.is-flush { margin: 0; }

.pt-page-experience .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pt-page-experience .fact {
	background: var(--pt-white); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--pt-border); padding: 15px 16px;
}
.pt-page-experience .fact-l {
	display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1.8;
	color: var(--pt-muted); margin-bottom: 4px;
}
.pt-page-experience .fact-l svg { width: 15px; height: 15px; stroke: var(--pt-royal); flex-shrink: 0; }
.pt-page-experience .fact-v { font-size: 18px; font-weight: 700; line-height: 1.45; }
/* "From 20 edited photos" must stay on one line: the card measures itself and
   drops the word "edited" when too narrow for the full phrase, then eases the
   size down on the very narrowest cards. */
.pt-page-experience .fact.is-photos { container-type: inline-size; }
.pt-page-experience .fact.is-photos .fact-v { white-space: nowrap; }
@container (max-width: 215px) {
	.pt-page-experience .fact.is-photos .fact-opt { display: none; }
}
@container (max-width: 145px) {
	.pt-page-experience .fact.is-photos .fact-v { font-size: 14px; }
}

.pt-page-experience .expect { margin: 0; padding: 0; }
.pt-page-experience .expect li {
	list-style: none; position: relative; padding-left: 28px; margin-bottom: 11px;
	font-size: 16px; line-height: 1.7; color: var(--pt-foreground);
}
.pt-page-experience .expect li:last-child { margin-bottom: 0; }
.pt-page-experience .expect li::before {
	content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px;
	border-radius: 50%; background: var(--pt-accent);
}
.pt-page-experience .desc p { font-size: 16px; line-height: 1.72; color: var(--pt-foreground); margin-bottom: 16px; }
.pt-page-experience .desc p:last-child { margin-bottom: 0; }

.pt-page-experience .hiw-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px;
}
.pt-page-experience .hiw-link { font-size: 14px; font-weight: 600; color: var(--pt-royal); white-space: nowrap; }
.pt-page-experience .hiw-link:hover { text-decoration: underline; }
.pt-page-experience .hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.pt-page-experience .hiw-step { position: relative; padding-right: 28px; }
.pt-page-experience .hiw-step:last-child { padding-right: 0; }
.pt-page-experience .badge { position: relative; width: 44px; height: 42px; margin-bottom: 13px; }
.pt-page-experience .badge i { position: absolute; width: 34px; height: 34px; border-radius: 11px; display: block; }
.pt-page-experience .badge .bs { background: var(--pt-accent); bottom: 2px; right: 8px; }
.pt-page-experience .badge .bm {
	background: var(--pt-royal); top: 0; left: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 15px; font-weight: 800; font-style: normal;
}
.pt-page-experience .hiw-step h4 {
	font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--pt-foreground); margin-bottom: 7px;
}
.pt-page-experience .hiw-step p { font-size: 15px; color: var(--pt-muted); line-height: 1.7; }

.pt-page-experience .faq-i { border-bottom: 1px solid var(--pt-border); }
.pt-page-experience .faq-i:last-of-type { border-bottom: 0; }
.pt-page-experience .faq-q {
	width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left;
	font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--pt-foreground);
	padding: 18px 34px 18px 0; position: relative;
}
.pt-page-experience .faq-q::after {
	content: "+"; position: absolute; right: 6px; top: 14px; font-size: 20px; font-weight: 700; color: var(--pt-royal);
}
.pt-page-experience .faq-i.open .faq-q::after { content: "\2212"; }
.pt-page-experience .faq-a {
	display: none; font-size: 16px; line-height: 1.72; color: var(--pt-foreground); padding: 0 20px 20px 0;
}
.pt-page-experience .faq-i.open .faq-a { display: block; }
.pt-page-experience .faq-foot { margin-top: 18px; }

/* -- booking rail ------------------------------------------------------ */
.pt-page-experience .rail {
	position: sticky; top: auto; bottom: 20px; display: flex; flex-direction: column; gap: 14px;
}
.pt-page-experience .rail-scroll { display: flex; flex-direction: column; gap: 14px; }
.pt-page-experience .rail-pin { flex-shrink: 0; }
.pt-page-experience .pg-card { display: flex; align-items: center; gap: 13px; }
/* One photographer card per width: in the rail on desktop, between Description
   and How it Works on mobile (where the rail is the booking sheet). */
.pt-page-experience .pg-card.is-stack { display: none; }
@media (max-width: 1000px) {
	.pt-page-experience .pg-card.is-stack { display: flex; }
	.pt-page-experience .pg-card.is-rail { display: none; }
}
.pt-page-experience .pg-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.pt-page-experience .pg-name { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pt-page-experience .pg-sub { font-size: 12.8px; color: var(--pt-muted); font-weight: 600; margin-top: 3px; }
.pt-page-experience .pg-btn {
	margin-left: auto; border: 2px solid var(--pt-royal); color: var(--pt-royal); font-size: 13.5px;
	font-weight: 700; padding: 9px 18px; border-radius: 50px;
}
.pt-page-experience .pg-btn:hover { background: var(--pt-tint); }
.pt-page-experience .pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pt-page-experience .pk {
	border: 2px solid var(--pt-border); border-radius: 15px; padding: 13px 8px; text-align: center;
	cursor: pointer; background: var(--pt-white); font-family: inherit;
}
.pt-page-experience .pk.on { border-color: var(--pt-royal); background: var(--pt-royal-bg); }
.pt-page-experience .pk-n { font-size: 14px; font-weight: 700; }
.pt-page-experience .pk-p { font-size: 12.3px; color: var(--pt-muted); font-weight: 600; margin: 3px 0 5px; }
.pt-page-experience .pk-pr { font-size: 15px; font-weight: 800; color: var(--pt-royal); }
.pt-page-experience .lab { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.pt-page-experience .lab.is-spaced { margin-top: 18px; }
.pt-page-experience .cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pt-page-experience .cal-m { font-size: 14.5px; font-weight: 700; }
.pt-page-experience .cal-nav {
	background: none; border: 0; cursor: pointer; color: var(--pt-royal); font-size: 17px;
	font-weight: 800; padding: 2px 8px; font-family: inherit;
}
.pt-page-experience .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.pt-page-experience .cal b { font-size: 11px; color: var(--pt-muted); font-weight: 700; padding: 5px 0; }
.pt-page-experience .cal button {
	border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 0;
	border-radius: 9px; cursor: pointer; color: var(--pt-navy);
}
.pt-page-experience .cal button:disabled { color: #C5CCE0; cursor: default; }
.pt-page-experience .cal button.av { background: var(--pt-royal-bg); color: var(--pt-royal); font-weight: 700; }
.pt-page-experience .cal button.on { background: var(--pt-royal); color: #fff; }
.pt-page-experience .legend { display: flex; gap: 16px; margin-top: 12px; font-size: 12.3px; color: var(--pt-muted); font-weight: 600; }
.pt-page-experience .legend i {
	width: 13px; height: 13px; border-radius: 4px; display: inline-block; vertical-align: -2px; margin-right: 6px;
}
.pt-page-experience .legend i.is-av { background: var(--pt-royal-bg); }
.pt-page-experience .legend i.is-un { background: #EFF1F7; }
.pt-page-experience .slots { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-page-experience .slot {
	border: 2px solid var(--pt-border); background: none; border-radius: 11px; padding: 9px 15px;
	font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--pt-navy);
}
.pt-page-experience .slot.on { background: var(--pt-royal); border-color: var(--pt-royal); color: #fff; }
.pt-page-experience .xtra {
	display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 15px;
	border-top: 1px solid var(--pt-border);
}
.pt-page-experience .xtra-n { font-size: 14px; font-weight: 700; }
.pt-page-experience .xtra-p { font-size: 13.5px; font-weight: 700; color: var(--pt-royal); margin-left: auto; }
.pt-page-experience .sw {
	width: 42px; height: 24px; border-radius: 50px; background: var(--pt-border); border: 0; cursor: pointer;
	position: relative; flex-shrink: 0;
}
.pt-page-experience .sw::after {
	content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff;
	top: 3px; left: 3px; transition: left .16s;
}
.pt-page-experience .sw.on { background: var(--pt-royal); }
.pt-page-experience .sw.on::after { left: 21px; }
.pt-page-experience .tot { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.pt-page-experience .tot span:first-child { font-size: 15.5px; font-weight: 700; }
.pt-page-experience .tot span:last-child { font-size: 25px; font-weight: 800; }
.pt-page-experience .btn-book {
	display: block; width: 100%; text-align: center; border: 0; border-radius: 14px; background: var(--pt-royal);
	color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; padding: 16px; cursor: pointer;
}
.pt-page-experience .btn-book:hover { background: var(--pt-royal-hover); color: #fff; }
.pt-page-experience .policy { background: var(--pt-royal-bg); border-radius: 15px; padding: 15px 17px; margin-top: 13px; }
.pt-page-experience .policy h5 { font-size: 16px; font-weight: 600; line-height: 1.45; margin-bottom: 8px; }
.pt-page-experience .policy p { font-size: 14px; color: var(--pt-foreground); line-height: 1.8; }

/* -- the Bubble booking embed ------------------------------------------ */

/* Nothing of ours is painted here. No background, no border, no shadow: the
   panel inside the frame draws its own card, so ours only ever showed as a rim
   around it. `transparent` is stated rather than left to the default because a
   browser paints an iframe white unless both sides opt out — so if the band
   under the panel is still visible, it is Bubble's page background, and the fix
   is on that side. */
.pt-page-experience .pt-embed-wrap {
	position: relative;
	background: transparent;
	border-radius: 20px;
	overflow: hidden;
}
.pt-page-experience .pt-embed {
	display: block;
	width: 100%;
	/* FIXED, not measured. The script no longer applies Bubble's reported
	   height: the panel used to resize every time a date was picked, and a
	   booking panel that jumps mid-flow is worse than one that is too tall.
	   Tall enough for the panel at its fullest — see
	   phototrips_booking_embed_height(), which is where this number lives. */
	height: 1800px;
	background: transparent;
	border: 0;
}

/* -- the skeleton, until Bubble has drawn ------------------------------- */
.pt-page-experience .pt-embed-loading {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--pt-white);
	border-radius: 20px;
	box-shadow: var(--pt-card-shadow);
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* Removed the moment the panel is real. Fading out rather than vanishing stops
   the swap from registering as a flicker. */
.pt-page-experience .pt-embed-wrap.is-loaded .pt-embed-loading {
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}
/* The loader scene: a camera whose shutter opens and closes while a small
   plane flies its dotted route. Brand colours, pure CSS/SVG, no image. */
.pt-page-experience .pt-embed-loading { justify-content: flex-start; align-items: center; text-align: center; padding-top: 56px; gap: 6px; }
.pt-page-experience .pt-ld { width: 200px; height: auto; overflow: visible; margin-bottom: 10px; }
.pt-page-experience .pt-ld-route { fill: none; stroke: #C9D1F5; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.pt-page-experience .pt-ld-plane path { fill: var(--pt-accent, #F4714A); }
.pt-page-experience .pt-ld-plane {
	offset-path: path('M18 96 C 60 20, 150 10, 202 58');
	offset-rotate: auto;
	animation: pt-ld-fly 2.6s ease-in-out infinite;
}
.pt-page-experience .pt-ld-body { fill: var(--pt-navy, #0B1D6E); }
.pt-page-experience .pt-ld-flash { fill: var(--pt-accent, #F4714A); animation: pt-ld-blink 2.6s ease-in-out infinite; }
.pt-page-experience .pt-ld-lens { fill: #fff; stroke: var(--pt-royal, #3B50D5); stroke-width: 3; }
.pt-page-experience .pt-ld-shutter path { fill: var(--pt-royal, #3B50D5); stroke: #fff; stroke-width: .8; }
.pt-page-experience .pt-ld-shutter { transform-origin: 32px 30px; transform-box: view-box; animation: pt-ld-shutter 2.6s ease-in-out infinite; }
.pt-page-experience .pt-ld-t { margin: 0; font-size: 18px; font-weight: 700; color: var(--pt-navy); }
.pt-page-experience .pt-ld-s { margin: 0; font-size: 14px; color: var(--pt-muted); }
@keyframes pt-ld-fly {
	0%   { offset-distance: 0%; opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}
@keyframes pt-ld-shutter {
	0%, 40%, 100% { transform: scale(1) rotate(0deg); }
	55%, 70%      { transform: scale(.28) rotate(60deg); }
}
@keyframes pt-ld-blink {
	0%, 50%, 100% { opacity: 1; }
	60%           { opacity: .2; }
}
@media ( prefers-reduced-motion: reduce ) {
	.pt-page-experience .pt-ld-plane,
	.pt-page-experience .pt-ld-shutter,
	.pt-page-experience .pt-ld-flash { animation: none; }
	.pt-page-experience .pt-ld-plane { offset-distance: 55%; }
}.pt-page-experience .policy.is-flush { margin-top: 0; }
.pt-page-experience .rail.has-embed .rail-pin:empty { display: none; }

/* The close button belongs to the mobile sheet; on desktop the panel is just
   part of the page and there is nothing to close. */
.pt-page-experience .rail-head { display: none; }

/* -- mobile booking bar + sheet ---------------------------------------- */
.pt-page-experience .mbar {
	display: none; position: fixed; left: 0; right: 0; bottom: 0; background: var(--pt-white);
	border-top: 1px solid var(--pt-border); padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
	z-index: 800; align-items: center; gap: 14px; box-shadow: 0 -4px 20px rgba(3, 12, 87, .08);
}
.pt-page-experience .mbar-p { font-size: 12.5px; color: var(--pt-muted); font-weight: 600; }
.pt-page-experience .mbar-p b { display: block; font-size: 20px; font-weight: 800; color: var(--pt-navy); }
.pt-page-experience .mbar-p b small { font-size: 12.5px; color: var(--pt-muted); font-weight: 600; }
.pt-page-experience .mbar button {
	margin-left: auto; border: 0; border-radius: 12px; background: var(--pt-royal); color: #fff;
	font-family: inherit; font-size: 15px; font-weight: 700; padding: 14px 26px; cursor: pointer;
}
.pt-page-experience .sheet { display: none; position: fixed; inset: 0; z-index: 850; }
.pt-page-experience .sheet.on { display: block; }
/* The sheet is only the dimmed backdrop now — the panel itself is the rail,
   repositioned in the mobile block below rather than moved into here. */
.pt-page-experience .sheet-bg { position: absolute; inset: 0; background: rgba(6, 12, 40, .45); }

/* =========================================================================
   PHOTOGRAPHER PROFILE
   ========================================================================= */
.pt-page-profile .phead { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 6px 0 20px; }
.pt-page-profile .phead h1 {
	font-size: clamp(34px, 3.6vw, 44px); font-weight: 800; line-height: 1.22; letter-spacing: -.01em;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pt-page-profile .phead-sub { font-size: 17px; color: var(--pt-muted); font-weight: 400; line-height: 1.6; margin-top: 7px; }
.pt-page-profile .phead-act { margin-left: auto; display: flex; gap: 10px; }
.pt-page-profile .btn-line {
	border: 2px solid var(--pt-royal); background: none; color: var(--pt-royal); font-family: inherit;
	font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: 50px; cursor: pointer;
	display: inline-flex; align-items: center; gap: 7px;
}
.pt-page-profile .btn-line:hover { background: var(--pt-tint); }
.pt-page-profile .btn-line.is-copied::after { content: " \2713"; }
.pt-page-profile .btn-fill {
	border: 0; background: var(--pt-royal); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700;
	padding: 12px 22px; border-radius: 50px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.pt-page-profile .btn-fill:hover { background: var(--pt-royal-hover); color: #fff; }
.pt-page-profile .btn-line svg,
.pt-page-profile .btn-fill svg { width: 15px; height: 15px; stroke: currentColor; }

.pt-page-profile .cols {
	display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: 18px;
}
.pt-page-profile .stack > * + * { margin-top: 18px; }
.pt-page-profile h2 { font-size: clamp(24px, 2.3vw, 28px); font-weight: 600; line-height: 1.35; margin-bottom: 18px; }
.pt-page-profile h2.is-tight { margin-bottom: 8px; }
.pt-page-profile .sec { margin-bottom: 18px; }

.pt-page-profile .pc { display: flex; gap: 16px; align-items: center; }
.pt-page-profile .pc-av { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pt-page-profile .pc-name {
	font-size: 20px; font-weight: 700; line-height: 1.4; display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
}
.pt-page-profile .pc-stats {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; margin-bottom: 8px;
}
.pt-page-profile .pc-stats i { font-style: normal; color: var(--pt-muted); font-weight: 600; }
.pt-page-profile .pc-ic { display: inline-flex; align-items: center; gap: 5px; }
.pt-page-profile .pc-ic svg { width: 15px; height: 15px; stroke-width: 1.9; }
.pt-page-profile .pc-ic.is-booked svg { stroke: var(--pt-green); }
.pt-page-profile .pc-rate { text-decoration: none; white-space: nowrap; color: var(--pt-star); }
.pt-page-profile .pc-rate span { color: var(--pt-navy); }
.pt-page-profile .pc-rate i { text-decoration: underline; text-decoration-color: var(--pt-deco-blue); text-underline-offset: 3px; }
.pt-page-profile .pc-rate:hover i { color: var(--pt-royal); text-decoration-color: var(--pt-royal); }
.pt-page-profile .pc-loc {
	display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--pt-muted); font-weight: 600; line-height: 1.8;
}
.pt-page-profile .pc-loc svg { width: 15px; height: 15px; stroke: var(--pt-accent); }

.pt-page-profile .lang-h {
	display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; line-height: 1.45;
	color: var(--pt-foreground); margin-bottom: 16px;
}
.pt-page-profile .lang-h svg { width: 18px; height: 18px; stroke: var(--pt-royal); }
.pt-page-profile .lang-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 16px; }
.pt-page-profile .lang-g div { font-size: 16px; line-height: 1.6; }
.pt-page-profile .lang-g b { font-weight: 700; }
.pt-page-profile .lang-g span { color: var(--pt-muted); font-weight: 600; }

.pt-page-profile .bio-card { display: flex; flex-direction: column; }
.pt-page-profile .bio-box {
	background: var(--pt-page-bg); border-radius: 16px; padding: 20px 22px; overflow: hidden; position: relative;
}
.pt-page-profile .bio-box p { font-size: 16px; line-height: 1.72; color: var(--pt-foreground); margin-bottom: 15px; }
.pt-page-profile .bio-box p:last-of-type { margin-bottom: 0; }
.pt-page-profile .bio-box.clipped::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
	background: linear-gradient(to bottom, rgba(244, 246, 253, 0), var(--pt-page-bg));
}
.pt-page-profile .bio-more {
	background: none; border: 0; padding: 0; margin-top: 10px; align-self: flex-start; cursor: pointer;
	font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--pt-royal);
}
.pt-page-profile .bio-more:hover { text-decoration: underline; }

/* Portfolio: uniform squares (the old tall/wide mosaic spans are neutralised
   because the markup still carries those classes). */
.pt-page-profile .pf {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.pt-page-profile .pf figure { margin: 0; overflow: hidden; border-radius: 16px; position: relative; cursor: pointer; aspect-ratio: 1 / 1; }
.pt-page-profile .pf img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pt-page-profile .pf figure:hover img { transform: scale(1.045); }
.pt-page-profile .pf .tall { grid-row: auto; }
.pt-page-profile .pf .wide { grid-column: auto; }
.pt-page-profile .pf figure.is-hidden { display: none; }
.pt-page-profile .pf-zoom {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(11, 29, 110, .32); opacity: 0; transition: opacity .25s;
}
.pt-page-profile .pf figure:hover .pf-zoom { opacity: 1; }
.pt-page-profile .pf-zoom svg { width: 34px; height: 34px; stroke: #fff; }
.pt-page-profile .pf-foot { text-align: center; margin-top: 20px; }

.pt-page-profile .eq-h {
	display: flex; align-items: center; gap: 10px; font-size: clamp(24px, 2.3vw, 28px); font-weight: 600;
	line-height: 1.35; margin-bottom: 18px;
}
.pt-page-profile .eq-h svg { width: 24px; height: 24px; stroke: var(--pt-royal); }
/* One card per gear type (Cameras / Lenses / Other gear), sharing the full
   width whether there are one, two or three of them. */
.pt-page-profile .eq-g { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.pt-page-profile .eq { background: var(--pt-page-bg); border-radius: 16px; padding: 18px 20px; }
/* margin reset on both sides — the browser's default h5 margin-top was what
   made the card look heavier above the title than below the list */
.pt-page-profile .eq h5 { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--pt-foreground); margin: 0 0 11px; }
.pt-page-profile .eq ul { margin: 0; padding: 0; }
.pt-page-profile .eq li {
	list-style: none; position: relative; padding-left: 18px; font-size: 16px;
	color: var(--pt-foreground); line-height: 1.75;
}
.pt-page-profile .eq li::before {
	content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
	border-radius: 50%; background: var(--pt-accent);
}

/* =========================================================================
   Responsive - the comps' own breakpoints, unchanged
   ========================================================================= */
/* The empty state a landing page shows before its photoshoots are published. */
.pt-lp-empty {
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px #E2E8F0;
	padding: 34px 28px;
	text-align: center;
}
.pt-lp-empty p { color: #64748B; font-size: 16px; line-height: 1.7; margin: 0; }
.pt-lp-empty p + p { margin-top: 10px; }
.pt-lp-empty-link { color: #3B50D5; font-weight: 700; text-decoration: none; }
.pt-lp-empty-link:hover { text-decoration: underline; }

@media (max-width: 1000px) {
	.pt-page-experience .cols { grid-template-columns: 1fr; gap: 20px; padding-top: 26px; }

	/* ⚠️ HIDDEN WITH visibility, NOT display:none, and never moved in the DOM.
	   The booking panel is an iframe; taking it out of the layout tree or
	   reparenting it makes the browser reload it and throw away whatever the
	   visitor had already selected. This keeps the element exactly where it is
	   and only changes how it is painted. */
	.pt-page-experience .rail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 851;
		visibility: hidden;
		pointer-events: none;
		/* Sized to the VISIBLE screen (dvh). 92vh counted the area behind iPhone
		   Safari's toolbars, which pushed the top of the sheet — and its close
		   button — out of reach. vh stays as the fallback for older browsers. */
		max-height: 86vh;
		max-height: calc(100dvh - 40px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		/* Vertical swipes are the sheet's to scroll (pinch-zoom still allowed). */
		touch-action: pan-y pinch-zoom;
		background: var(--pt-page-bg);
		border-radius: 22px 22px 0 0;
		padding: 0 18px calc(20px + env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform .22s ease, visibility .22s;
	}
	.pt-page-experience .rail.is-sheet {
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
	.pt-page-experience .rail .rail-scroll { display: block; }
	.pt-page-experience .rail .rail-scroll > * + * { margin-top: 14px; }
	.pt-page-experience .rail .rail-pin { margin-top: 14px; }

	/* Header bar: sticks to the top of the sheet while the panel scrolls, so
	   the close button can never leave the screen. */
	.pt-page-experience .rail-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 5;
		margin: 0 -18px 12px;
		padding: 14px 14px 12px 20px;
		background: var(--pt-page-bg);
		border-bottom: 1px solid var(--pt-border);
	}
	.pt-page-experience .rail-head-t { font-size: 17px; font-weight: 700; color: var(--pt-navy); }
	.pt-page-experience .rail-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex: none;
		border: 0;
		border-radius: 50%;
		background: var(--pt-white);
		box-shadow: inset 0 0 0 1.5px var(--pt-border);
		color: var(--pt-navy);
		cursor: pointer;
		padding: 0;
	}
	.pt-page-experience .rail-close svg { width: 20px; height: 20px; }
	.pt-page-experience .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pt-page-experience .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pt-page-experience .gal img:nth-child(n+4) { display: none; }
	.pt-page-experience .gal img:nth-child(-n+3) { display: block; }
	.pt-page-experience .title-side { display: none; }
	.pt-page-experience .mbar { display: flex; }
	.pt-page-experience .sim-grid { grid-template-columns: repeat(2, 1fr); }

.pt-page-explore .grid,
.pt-cards .grid { grid-template-columns: repeat(2, 1fr); }

	.pt-page-profile .cols { grid-template-columns: 1fr; gap: 18px; }
	.pt-page-profile .pf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pt-page-profile .eq-g { grid-auto-flow: row; grid-template-columns: 1fr; }
	.pt-page-profile .sim-grid { grid-template-columns: repeat(2, 1fr); }
	.pt-page-profile .phead-act { margin-left: 0; width: 100%; }
}

/* The mobile booking bar is fixed to the bottom of the viewport, so the page
   needs to end above it or the last section is unreachable. */
body:has( .pt-page-experience ) { padding-bottom: 82px; }

@media (min-width: 1001px) {
	body:has( .pt-page-experience ) { padding-bottom: 0; }
}

@media (max-width: 640px) {
	.pt-page-experience .hiw-steps { grid-template-columns: 1fr; row-gap: 20px; }
	.pt-page-experience .hiw-step { padding-right: 0; }
.pt-page-experience .rv-grid,
.pt-cards .rv-grid { grid-template-columns: 1fr; }
	.pt-page-experience .card { padding: 20px 18px; }
	.pt-page-experience #gal {
		display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
	}
	.pt-page-experience #gal::-webkit-scrollbar { display: none; }
	.pt-page-experience #gal img { display: block; flex: 0 0 auto; width: 64%; min-width: 0; scroll-snap-align: start; }
	.pt-page-experience .gal-all { display: none; }

	.pt-page-explore .fbar { display: none; }
	.pt-page-explore .fmob { display: block; margin-bottom: 16px; }

	/* Phones: one photoshoot card per row, everywhere cards appear. */
	.pt-page-explore .grid,
	.pt-cards .grid,
	.pt-cards.is-3 .grid,
	.pt-page-experience .sim-grid,
	.pt-page-profile .sim-grid { grid-template-columns: 1fr; }

	.pt-page-profile .card { padding: 20px 18px; }
	.pt-page-profile .pf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pt-page-profile .rv-grid,
.pt-cards .rv-grid { grid-template-columns: 1fr; }
	.pt-page-profile .lang-g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
	.pt-page-profile .btn-line,
	.pt-page-profile .btn-fill { flex: 1; justify-content: center; }
}

/* --------------------------------------------------------------------------
   REVIEWS FROM THE REVIEWS TABLE
   [phototrips_reviews] renders plain HTML rather than block markup, so the
   look that used to come from block attributes lives here instead. The class
   names are unchanged, so the signed-off design is the same design.
   -------------------------------------------------------------------------- */

/* stars — text, not the 5-star sprite, because a sprite cannot show a four */
.pt-rv-stars { letter-spacing: 2px; white-space: nowrap; }
.pt-rv-stars-off { opacity: .28; }
.review-stars .pt-rv-stars { color: var(--wp--preset--color--star); font-size: 15px; }
.review-stars { margin: 0; }

/* the reviewer's photo, or their initial when there is none */
.pt-rv-av {
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}
.pt-rv-av.is-initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--wp--preset--font-family--rethink);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.pt-reviews-empty {
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	margin: 0;
	padding: 24px 0;
}

/* -- the masonry wall on /reviews/ --
   The wall renders the STANDARD review card (rv-card, via the .pt-cards
   scope); `review-card` remains on each card only as the hook pages.js drives
   the city filter and "Load More" with. Only the masonry mechanics live here. */
.pt-page-reviews .review-card { margin-bottom: 20px; }

/* the wall's own padding moved to the wrapper when the grid became dynamic */
@media (max-width: 1024px) {
	.pt-page-reviews #pt-reviews { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 640px) {
	.pt-page-reviews #pt-reviews { padding: 24px 20px 48px !important; }
}

/* ==========================================================================
   BUTTON SYSTEM — one default and one hover per button family.
   Loaded last on purpose: the variants below were drawn at different times
   (and many carry inline styles baked into page content), so these rules
   settle them into two families and win over whatever each one had.
   ========================================================================== */

/* -- Family A: outline pills — "see more / load more" links --------------- */
.pt-morelink-btn .wp-block-button__link,
.pt-page-reviews .load-more-btn .wp-block-button__link,
.pt-cards-all,
.pt-page-explore .btn-ghost,
.pt-page-experience .btn-ghost,
.pt-page-profile .btn-ghost {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 13px 28px !important;
	border: 1.5px solid var(--wp--preset--color--primary) !important;
	border-radius: 50px !important;
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--primary) !important;
	font-family: var(--wp--preset--font-family--jakarta) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
/* The display:inline-flex !important above also beat the scripts' "hide"
   class, so "Load more" stayed on screen with nothing left to load (Explore,
   and "Load more reviews" on photoshoot and profile pages). */
.pt-page-explore .btn-ghost.hide,
.pt-page-experience .btn-ghost.hide,
.pt-page-profile .btn-ghost.hide,
.pt-page-explore .btn-ghost[hidden],
.pt-page-experience .btn-ghost[hidden],
.pt-page-profile .btn-ghost[hidden] { display: none !important; }
.pt-morelink-btn .wp-block-button__link:hover,
.pt-morelink-btn .wp-block-button__link:focus-visible,
.pt-page-reviews .load-more-btn .wp-block-button__link:hover,
.pt-page-reviews .load-more-btn .wp-block-button__link:focus-visible,
.pt-cards-all:hover,
.pt-cards-all:focus-visible,
.pt-page-explore .btn-ghost:hover,
.pt-page-experience .btn-ghost:hover,
.pt-page-profile .btn-ghost:hover {
	background: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
/* Touch screens have no hover, but a tap leaves the button in :hover until the
   next tap elsewhere — so a "Load more" turned solid blue after one tap and
   stayed that way. On touch devices the button keeps its outline look and
   only fills while the finger is actually down (:active). */
@media (hover: none) {
	.pt-morelink-btn .wp-block-button__link:hover,
	.pt-page-reviews .load-more-btn .wp-block-button__link:hover,
	.pt-cards-all:hover,
	.pt-page-explore .btn-ghost:hover,
	.pt-page-experience .btn-ghost:hover,
	.pt-page-profile .btn-ghost:hover {
		background: var(--wp--preset--color--surface) !important;
		border-color: var(--wp--preset--color--primary) !important;
		color: var(--wp--preset--color--primary) !important;
		transform: none;
	}
	.pt-morelink-btn .wp-block-button__link:active,
	.pt-page-reviews .load-more-btn .wp-block-button__link:active,
	.pt-cards-all:active,
	.pt-page-explore .btn-ghost:active,
	.pt-page-experience .btn-ghost:active,
	.pt-page-profile .btn-ghost:active {
		background: var(--wp--preset--color--primary) !important;
		color: #fff !important;
	}
}
/* The arrow: on the links that go somewhere (a "Load more" keeps its chevron). */
.pt-morelink-btn .wp-block-button__link::after,
.pt-cards-all::after,
.pt-page-explore a.btn-ghost::after,
.pt-page-experience a.btn-ghost::after,
.pt-page-profile a.btn-ghost::after,
.wp-block-button.is-style-accent .wp-block-button__link::after,
.pt-hp-cta-btn .wp-block-button__link::after,
.wp-block-button.is-style-outline:not([class*="btn"]) > .wp-block-button__link::after,
.wp-block-button:not([class*="btn"]):not([class*="is-style"]) > .wp-block-button__link::after {
	content: "";
	width: 15px;
	height: 15px;
	margin-left: 0;
	flex: none;
	opacity: 1;
	background-color: currentColor;
	transform: none;
	transition: transform .2s ease;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
.pt-morelink-btn .wp-block-button__link:hover::after,
.pt-cards-all:hover::after,
.pt-page-explore a.btn-ghost:hover::after,
.pt-page-experience a.btn-ghost:hover::after,
.pt-page-profile a.btn-ghost:hover::after,
.wp-block-button.is-style-accent .wp-block-button__link:hover::after,
.pt-hp-cta-btn .wp-block-button__link:hover::after,
.wp-block-button.is-style-outline:not([class*="btn"]) > .wp-block-button__link:hover::after,
.wp-block-button:not([class*="btn"]):not([class*="is-style"]) > .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* -- Family B: filled CTAs — orange accent, and the plain blue default ----- */
.wp-block-button.is-style-accent .wp-block-button__link,
.pt-hp-cta-btn .wp-block-button__link,
.wp-block-button:not([class*="btn"]):not([class*="is-style"]) > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 13px !important;
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 700 !important;
	white-space: nowrap;
	transition: background-color .2s ease, transform .2s ease;
}
.wp-block-button.is-style-accent .wp-block-button__link,
.pt-hp-cta-btn .wp-block-button__link {
	background-color: var(--wp--preset--color--accent) !important;
	color: #fff !important;
}
.wp-block-button.is-style-accent .wp-block-button__link:hover,
.wp-block-button.is-style-accent .wp-block-button__link:focus-visible,
.pt-hp-cta-btn .wp-block-button__link:hover,
.pt-hp-cta-btn .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-hover) !important;
	transform: translateY(-2px);
}
.wp-block-button:not([class*="btn"]):not([class*="is-style"]) > .wp-block-button__link:hover,
.wp-block-button:not([class*="btn"]):not([class*="is-style"]) > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary-hover) !important;
	transform: translateY(-2px);
}
@media (max-width: 480px) {
	.wp-block-button.is-style-accent .wp-block-button__link,
	.pt-hp-cta-btn .wp-block-button__link { white-space: normal; }
}

/* ==========================================================================
   SUBTITLE WIDTH — one rule for every page's intro lines.
   A subtitle may run wider than its title (never past its section), so short
   ones sit on one line on desktop and long ones take two, not three. Narrow
   screens still wrap naturally.
   ========================================================================== */
.pt-page-about .hero-sub,
.pt-page-faq .hero-sub,
.pt-page-contact .hero-sub,
.pt-page-photog .hero-sub,
.pt-page-about .section-sub,
.pt-page-how .section-sub,
.pt-page-photog .section-sub {
	max-width: min(760px, 100%);
	text-wrap: pretty;
}
/* Two lines, broken after "photoshoot." — as asked in the review. */
.pt-page-request .hero-sub { max-width: min(600px, 100%); }
/* Explore's lede fits on one line on desktop. */
.pt-page-explore .lede { max-width: min(960px, 100%); }

/* Section titles on the photoshoot / profile pages start flush with their
   card's padding, the way "How it Works" does. Without this they inherit the
   browser's default heading margin (~0.83em) and sit lower than their peers. */
.pt-page-experience h2,
.pt-page-profile h2 { margin-top: 0; }

/* ==========================================================================
   TEXT → BUTTON SPACING
   Buttons under a paragraph sit as far from it as the paragraph sits from its
   title (they were 4–10px away). Heroes, banners and the split "Join Us"
   cards; paragraph margins collapse into this, so it is never doubled.
   ========================================================================== */
.wp-block-cover p + .wp-block-buttons,
.pt-card p + .wp-block-buttons { margin-top: 28px !important; }

/* ==========================================================================
   FAQ ACCORDIONS — one look site-wide (the homepage's), and no extra gap
   under an open question.
   ========================================================================== */
/* core/details is a flow layout, so the answer inherited a block gap on top
   of the summary's own padding. */
.wp-block-details > summary + * { margin-block-start: 0 !important; }

/* The photoshoot page's FAQ, redrawn as the homepage's cards. */
.pt-page-experience .card .faq-i {
	border: 1.5px solid var(--pt-border);
	border-radius: 14px;
	background: var(--pt-white);
	margin-bottom: 8px;
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}
.pt-page-experience .card .faq-i.open {
	border-color: var(--pt-royal);
	box-shadow: 0 4px 24px rgba(59, 80, 213, .09);
}
.pt-page-experience .card .faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pt-navy);
	transition: color .25s;
}
.pt-page-experience .card .faq-i.open .faq-q { color: var(--pt-royal); }
.pt-page-experience .card .faq-q::after,
.pt-page-experience .card .faq-i.open .faq-q::after {
	content: "";
	position: static;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background-color: #fff0eb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4714A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	transition: transform .3s ease, background-color .25s;
}
.pt-page-experience .card .faq-i.open .faq-q::after {
	transform: rotate(45deg);
	background-color: var(--pt-royal);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.pt-page-experience .card .faq-a {
	padding: 16px 22px 22px;
	border-top: 1px solid var(--pt-border);
	font-size: 15px;
	line-height: 1.78;
	color: var(--pt-muted);
}
.pt-page-experience .card .faq-foot { margin-top: 20px; }
.wp-block-button.is-style-outline:not([class*="btn"]) > .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; }


/* =========================================================================
   TYPOGRAPHY SYSTEM — brand type scale (applies to every page)
   -------------------------------------------------------------------------
   H1 36–48 · 800 · 1.2      H2 28–32 · 700 · 1.3      H3 20–24 · 600 · 1.4
   H4 20 / H5 18 / H6 16 · 400 · 1.4      Body 16 · 1.7      Captions 12–14
   Most page content carries inline font sizes baked in by the comps, so the
   scale has to win over inline styles (!important) AND over the page-scoped
   component rules (.pt-page-x h2 { … !important }). The :not(#pt-ts) adds
   ID-level specificity without matching anything; exceptions below repeat it
   so they still win.
   ========================================================================= */
:root {
	--pt-fs-h1: clamp(32px, 2.4vw + 14px, 48px);
	--pt-fs-h2: clamp(26px, 1.6vw + 12px, 32px);
	--pt-fs-h3: clamp(20px, 0.8vw + 12px, 24px);
}
body h1:not(#pt-ts) { font-size: var(--pt-fs-h1) !important; font-weight: 800 !important; line-height: 1.2 !important; }
body h2:not(#pt-ts) { font-size: var(--pt-fs-h2) !important; font-weight: 700 !important; line-height: 1.3 !important; }
body h3:not(#pt-ts) { font-size: var(--pt-fs-h3) !important; font-weight: 600 !important; line-height: 1.4 !important; }
body h4:not(#pt-ts) { font-size: 20px !important; font-weight: 400 !important; line-height: 1.4 !important; }
body h5:not(#pt-ts) { font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important; }
body h6:not(#pt-ts) { font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; }

/* Headings that are really labels or decoration keep their own treatment:
   footer column titles and other kickers are captions, the About tagline is
   a display word, and the How-it-works mockups imitate other apps' UI. */
body .pt-kicker:not(#pt-ts),
body .fst-heading:not(#pt-ts) { font-size: 13px !important; font-weight: 800 !important; line-height: 1.8 !important; }
body .fst-heading:not(#pt-ts) { font-size: 14px !important; line-height: 1.4 !important; }
body .tagline-word:not(#pt-ts) { font-size: clamp(32px, 5vw, 58px) !important; font-weight: 800 !important; line-height: 1.1 !important; }
body [class*="mockup"] :is(h1, h2, h3, h4, h5, h6):not(#pt-ts) { font-size: 16px !important; font-weight: 800 !important; line-height: 1.3 !important; }

/* Body text — 16px, line-height 1.7. Inline-sized paragraphs first (the comps
   used 13.5–15.5px for running text), then the component classes that set
   sub-16 body copy in this stylesheet. Mockups and separators are left alone. */
main p:is([style*="font-size:13.5px"], [style*="font-size:14.5px"], [style*="font-size:15px"], [style*="font-size:15.5px"]):not([class*="mockup"] *):not(.has-faint-color):not([class*="-meta"]):not([class*="badge"]),
main p[style*="font-size:14px"]:is([class*="-body"], [class*="-text"], [class*="-desc"]),
.pt-faq .pt-faq-answer,
.pt-faq2-answer,
.pt-page-experience .card .faq-a,
.pt-page-experience .hiw-step p,
.pt-page-experience .policy p,
.pt-hiw2-step p,
.pt-why2-card p,
.pt-why-text p,
.pt-card-text,
.pt-review-quote,
.pt-rev-text,
.pt-tiplist li,
.pt-browse-carddesc,
.pt-panel-desc,
.pt-formcard-sub,
.pt-proc-desc,
.pt-cookie-desc,
.pt-doc-intro p,
.pt-doc-section p,
.pt-doc-list li,
.pt-page-legal .doc-intro p,
.pt-page-legal .doc-section p,
.pt-page-legal .doc-list li,
.pt-page-legal .processor-desc,
.pt-page-legal .cookie-desc,
.pt-article-body p,
.pt-article-body li {
	font-size: 16px !important;
	line-height: 1.7 !important;
}

/* Form fields read as body text too (and 16px stops iOS zooming on focus). */
.pt-form :is(input, textarea, select),
.pt-request-form :is(input, textarea, select),
.pt-page-faq .hero-search input,
.pt-faq2-search input { font-size: 16px !important; }

/* Captions — 12–14px. The comps' 11px labels/eyebrows come up to the 12px
   floor; anything already 12–14px is inside the range and stays. */
main [style*="font-size:11px"]:not([class*="mockup"] *),
.pt-hp-statlabel,
.pt-hp-cta-eyebrow,
.pt-toc-label,
.pt-faq2-nav-label,
.pt-doc-eyebrow,
.pt-panel-eyebrow,
.pt-panel-label,
.pt-panel-social-label,
.pt-page-legal .section-eyebrow,
.pt-request-form .field-section-label,
.pt-mega-label { font-size: 12px !important; }
.wp-caption .wp-caption-text,
.wp-element-caption,
figcaption { font-size: 14px; line-height: 1.8; }
/* Body text, pass 2. WordPress rewrites the comps' inline px sizes into fluid
   clamp() values, so the attribute selectors above miss most of them — these
   catch the same paragraphs by role instead. */
main p:is([class*="-body"], [class*="-desc"], [class*="subtitle"], .step-p, .pt-intro-p, .req-item-title, .step-title, .info-value, .founder-role, .wp-block-post-excerpt__excerpt),
main details p,
main details summary,
main .rv-name,
footer p:not([style*="font-size:13px"]),
footer .wp-block-navigation-item a,
footer li:not(.wp-social-link) a {
	font-size: 16px !important;
}
main p:is([class*="-body"], [class*="-desc"], .step-p, .pt-intro-p, .wp-block-post-excerpt__excerpt),
main details p { line-height: 1.7 !important; }

/* Card titles stay h3-sized even where the markup uses an h2. */
body .pt-guide-title:not(#pt-ts) { font-size: var(--pt-fs-h3) !important; line-height: 1.4 !important; }

/* Tiny badges and tags up to the 12px caption floor. */
.pt-cards .sc-city,
.sc-city,
.optional-badge,
.cookie-badge,
.toc-num,
.pt-guide-tag,
.pt-guide-tag a { font-size: 12px !important; }
.pt-inline-cta p { font-size: 16px !important; line-height: 1.7 !important; }

/* =========================================================================
   FOOTER (v2 layout) — logo + blurb + socials | Destinations (country →
   indented cities) | Popular Styles | Company; legal links bottom-right.
   ========================================================================= */
.pt-footer a { color: rgba(255, 255, 255, 0.74); text-decoration: none; }
.pt-footer a:hover { color: #fff; }
.pt-footer .pt-footer-about { max-width: 340px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.pt-footer .pt-kicker { color: #fff; margin: 0 0 16px; }
.pt-footer .pt-footer-list > li + li { margin-top: 9px; }
.pt-footer .pt-footer-dest > li + li { margin-top: 14px; }
.pt-footer .pt-footer-dest > li > a { color: #fff; font-weight: 700; font-size: 15px !important; }
.pt-footer .pt-footer-dest ul {
	list-style: none;
	margin: 8px 0 0 8px;
	padding: 0 0 0 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.pt-footer .pt-footer-dest ul li + li { margin-top: 5px; }
.pt-footer .wp-block-social-links .wp-social-link {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.14) !important;
}
.pt-footer .wp-block-social-links .wp-social-link:hover { background: var(--wp--preset--color--primary) !important; }
.pt-footer .wp-block-social-links .wp-social-link svg { width: 17px; height: 17px; }
.pt-footer .pt-footer-bottom p { font-size: 14px !important; color: rgba(255, 255, 255, 0.74); margin: 0; }
.pt-footer .pt-footer-legal a + a { margin-left: 18px; }
@media (min-width: 782px) and (max-width: 1100px) {
	/* Four columns get tight here: the blurb column takes a full row. */
	.pt-footer .pt-footer-cols { flex-wrap: wrap !important; }
	.pt-footer .pt-footer-cols > .wp-block-column:first-child { flex-basis: 100% !important; }
}

/* Blog search — a pill under the blog hero (and on the results page). */
.pt-blog-search { width: 100%; max-width: 560px; margin-inline: auto; }
.pt-blog-search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--surface);
	border: 1.5px solid var(--wp--preset--color--line) !important;
	border-radius: 50px !important;
	padding: 5px !important;
	transition: border-color .2s, box-shadow .2s;
}
.pt-blog-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 80, 213, 0.1);
}
.pt-blog-search .wp-block-search__input {
	border: 0 !important;
	background: transparent;
	padding: 10px 18px !important;
	font-family: inherit;
	font-size: 16px !important;
	color: var(--wp--preset--color--navy);
	outline: none;
}
.pt-blog-search .wp-block-search__button {
	margin: 0 !important;
	border: 0;
	border-radius: 50px !important;
	width: 46px; height: 46px;
	padding: 0 !important;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}
.pt-blog-search .wp-block-search__button:hover { background: var(--wp--preset--color--primary-hover) !important; }
.pt-blog-search .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }
.pt-blog-listing { transition: opacity .15s ease; }

/* One typeface everywhere. Browsers do not hand the page font to form
   controls on their own, so buttons, inputs, selects and text areas are told
   to inherit it. (The old Inter / Plus Jakarta presets now resolve to Rethink
   Sans in theme.json, which covers every block and rule that named them.) */
button,
input,
select,
textarea,
.wp-element-button,
.wp-block-button__link { font-family: var(--wp--preset--font-family--rethink); }

/* Footer: the custom-shoot nudge between the blurb and the social icons. */
.pt-footer .pt-footer-custom { max-width: 340px; font-size: 15px !important; line-height: 1.6; color: rgba(255, 255, 255, 0.74); margin-bottom: 0; }
.pt-footer .pt-footer-custom a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	white-space: nowrap;
	transition: color .2s;
}
.pt-footer .pt-footer-custom a:hover { color: var(--wp--preset--color--accent); }
/* Request form: honeypot (off-screen, not display:none — some bots skip
   hidden fields), the error line, and the button while it sends. */
.pt-request-form .pt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pt-request-form .pt-form-error {
	margin: 20px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: #FEF2F2;
	color: #B91C1C;
	font-size: 15px !important;
	line-height: 1.5;
}
.pt-request-form .submit-btn.is-sending { opacity: .6; cursor: progress; }
/* =========================================================================
   TITLE → SUBTITLE SPACING (one rhythm everywhere)
   Measured across 11 pages the gap under a section title ran anywhere from
   8px to 26px, depending on which comp the section came from. Now:
     section title (h2) → its subtitle: 14px
     page heading (h1)  → its subtitle: 18px
   Cards and blocks where the "subtitle" is really something else keep their
   own spacing (founder name → role, FAQ category counters, the founder's
   quote), and so does running text inside blog articles.
   ========================================================================= */
main h2:has(+ p:not(.category-count, .founder-role, .founder-msg-body)):not(.pt-article-body *),
main h1:has(+ p) { margin-bottom: 0 !important; }
main h2 + p:not(.category-count, .founder-role, .founder-msg-body):not(.pt-article-body *) { margin-top: 14px !important; }
main h1 + p:not(.pt-article-body *) { margin-top: 18px !important; }
/* Photoshoot cards, every screen size: price and rating are what people
   compare, so they read larger than the specs (photos, duration, bookings). */
@media all {
	.pt-page-explore .sc-p,
	.pt-page-experience .sc-p,
	.pt-page-profile .sc-p,
	.pt-cards .sc-p { font-size: 22px; }
	.pt-page-explore .sc-p small,
	.pt-page-experience .sc-p small,
	.pt-page-profile .sc-p small,
	.pt-cards .sc-p small { font-size: 14px; }
	.pt-page-explore .sc-r,
	.pt-page-experience .sc-r,
	.pt-page-profile .sc-r,
	.pt-cards .sc-r { font-size: 16px; }
	.pt-page-explore .sc-r em,
	.pt-page-experience .sc-r em,
	.pt-page-profile .sc-r em,
	.pt-cards .sc-r em { font-size: 14px; }
}
/* =========================================================================
   ONE SIDE MARGIN ON PHONES — the homepage's 16px, on every page.
   The pages ported from the design comps (About, How it Works, FAQ, Reviews,
   Contact, Become a Photographer, Request, Legal) give each full-width
   section its OWN side padding — 48px on About, 24px on the others — so on
   a phone their content started 24–48px in, against 16px on the homepage and
   landing pages. Below 900px (the homepage's breakpoint) every full-width
   section of a page now uses 16px. Home and landing sections are alignwide
   and already at 16px, so they are left out; the inner padding of cards
   inside a section is untouched.
   ========================================================================= */
@media (max-width: 899px) {
	/* Each comp page wraps its sections in one full-width .pt-page-* group;
	   the sections are that wrapper's children. */
	body.page .wp-block-post-content > [class*="pt-page-"] > :is(.wp-block-group, .wp-block-cover) {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}
@media (max-width: 899px) {
	/* The reviews section on /reviews/ gets the standard 16px (rule above);
	   the grid inside it added another 20px of its own. */
	body.page .pt-page-reviews #pt-reviews .reviews-grid { padding-left: 0 !important; padding-right: 0 !important; }
	/* Older rules set this section's sides by its ID (32px tablet / 20px
	   phone), which beat the general rule — matched here, same 16px. */
	body.page .pt-page-reviews #pt-reviews { padding-left: 16px !important; padding-right: 16px !important; }
}
/* Photoshoot card: photos on the left, duration pushed to the right edge, so
   the row uses the card's full width and lines up with the rating below. */
.pt-page-explore .sc-specs:not(.sc-bkline),
.pt-page-experience .sc-specs:not(.sc-bkline),
.pt-page-profile .sc-specs:not(.sc-bkline),
.pt-cards .sc-specs:not(.sc-bkline) { justify-content: space-between; }