/* =========================================================================
   Pictopia Studio — design system
   Source: Adobe XD 6-screen prototype (1920px desktop mock). All sizes below
   are built mobile-first with clamp()/rem scaling rather than copied 1:1 from
   the 1920px canvas — see README.md for the breakpoint rationale.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Self-hosted Poppins — the exact font files from the client's design
   package (PICTOPIA WEBSITE/FONT/*.otf, converted to WOFF2), not the Google
   Fonts CDN copy. Keeps the real font-hinting/metrics and works offline.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-MediumItalic.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-SemiBoldItalic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
	/* Brand palette — exact hex from Adobe XD specs panel, do not approximate. */
	--pt-white:      #FFFFFF;
	--pt-gray:       #707070;
	--pt-olive:      #635026;
	--pt-cream:      #F9F0DF;
	--pt-pink:       #E5A9AB;
	--pt-maroon:     #3E1A0E;
	--pt-yellow:     #EDE6A2;
	--pt-orange:     #F7824D;
	--pt-black:      #080808;
	--pt-dustyrose:  #E8D5CE;
	--pt-navy:       #252F38;
	--pt-ivory:      #FAF4E4;
	--pt-lavender:   #B7BBD8;

	/* Fonts (Google Fonts substitution plan — see brief) */
	--pt-font-sans:   'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pt-font-serif:  'Fraunces', Georgia, 'Times New Roman', serif;
	--pt-font-script: 'Caveat', cursive;

	/* Layout */
	--pt-container: 1320px;
	--pt-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--pt-radius-pill: 999px;

	/* Motion */
	--pt-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--pt-font-sans);
	font-weight: 400;
	color: var(--pt-black);
	background: var(--pt-white);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* the marquee intentionally bleeds past the edge */
}

h1, h2, h3, h4 {
	font-family: var(--pt-font-sans);
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 0.5em;
}

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
}

.pt-site {
	overflow-x: hidden;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.pt-section {
	position: relative;
	width: 100%;
	padding-block: clamp(2.5rem, 6vw, 6rem);
}

.pt-section--tight {
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.pt-inner {
	max-width: var(--pt-container);
	margin-inline: auto;
	padding-inline: var(--pt-gutter);
}

.pt-bg-cream    { background: var(--pt-cream); color: var(--pt-black); }
.pt-bg-ivory    { background: var(--pt-ivory); color: var(--pt-black); }
.pt-bg-maroon   { background: var(--pt-maroon); color: var(--pt-cream); }
.pt-bg-olive    { background: var(--pt-olive); color: var(--pt-ivory); }
.pt-bg-white    { background: var(--pt-white); color: var(--pt-black); }

/* -------------------------------------------------------------------------
   4. Buttons / pills
   ------------------------------------------------------------------------- */
.pt-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	border-radius: var(--pt-radius-pill);
	/* Exact XD measurement (hero "Book a Discovery Call"): pill 338x68px at
	   font-size 28px -> padding 20px/28=0.71em vertical, 32px/28=1.14em
	   horizontal. Font-size clamps up to the real 28px (1.75rem) instead of
	   capping at 1rem like the old value did — that cap was the main reason
	   every button on the site rendered visibly smaller than the design. */
	padding: 0.71em 1.14em;
	font-weight: 600;
	font-size: clamp(1rem, 1.3vw, 1.75rem);
	letter-spacing: 0.01em;
	border: none;
	cursor: pointer;
	transition: transform 0.25s var(--pt-ease), opacity 0.25s var(--pt-ease);
	white-space: normal;
	text-align: center;
}

.pt-pill:hover,
.pt-pill:focus-visible {
	transform: translateY(-2px);
	opacity: 0.92;
}

.pt-pill--maroon-on-cream  { background: var(--pt-maroon); color: var(--pt-cream); }
.pt-pill--maroon-bg-orange-text { background: var(--pt-maroon); color: var(--pt-orange); width: 50%; }
.pt-pill--cream-on-olive   { background: var(--pt-cream); color: var(--pt-olive); }
.pt-pill--orange-on-maroon { background: transparent; color: var(--pt-orange); border: 1.5px solid var(--pt-orange); }
.pt-pill--olive-on-cream   { background: var(--pt-olive); color: var(--pt-cream); }
.pt-pill--yellow-on-maroon { background: var(--pt-yellow); color: var(--pt-maroon); }
.pt-pill--outline-orange   { background: transparent; color: var(--pt-orange); border: 1.5px solid var(--pt-orange); }

.pt-pill--small {
	padding: 0.6em 1.1em;
	font-size: 0.75rem;
}

/* Small pill "tag" chips, e.g. "+branding" around the Home dark section headline */
.pt-tag {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--pt-orange);
	color: var(--pt-orange);
	border-radius: var(--pt-radius-pill);
	padding: 0.5em 1.1em;
	font-size: clamp(0.7rem, 1.3vw, 0.95rem);
	font-weight: 500;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   5. Placeholder image block (pt_placeholder_image())
   ------------------------------------------------------------------------- */
.pt-placeholder {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--pt-dustyrose);
	display: flex;
	align-items: flex-end;
	border-radius: 4px;
}

.pt-placeholder__pattern {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(62, 26, 14, 0.10) 0px,
		rgba(62, 26, 14, 0.10) 2px,
		transparent 2px,
		transparent 14px
	);
	background-color: var(--pt-cream);
}

.pt-placeholder__label {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	padding: 0.6em 0.8em;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pt-maroon);
	background: linear-gradient(0deg, rgba(249, 240, 223, 0.9), rgba(249, 240, 223, 0));
}

.pt-placeholder--instagram {
	border-radius: 2px;
}

.pt-placeholder--dark .pt-placeholder__pattern {
	background-color: var(--pt-maroon);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(249, 240, 223, 0.08) 0px,
		rgba(249, 240, 223, 0.08) 2px,
		transparent 2px,
		transparent 14px
	);
}

.pt-placeholder--dark .pt-placeholder__label {
	color: var(--pt-cream);
	background: linear-gradient(0deg, rgba(62, 26, 14, 0.85), rgba(62, 26, 14, 0));
}

/* Real photo variant (pt_photo()) — same wrapper/positioning as the striped
   placeholder above, just filled with an <img> instead of the pattern. */
.pt-placeholder--photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------------------
   6. MENU/ trigger + full-screen nav overlay (global, from header.php)
   ------------------------------------------------------------------------- */
.pt-menu-trigger {
	position: fixed;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 1000;
	background: rgba(8, 8, 8, 0.35);
	color: var(--pt-white);
	border: none;
	border-radius: var(--pt-radius-pill);
	padding: 0.5em 1em;
	font-family: var(--pt-font-sans);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	backdrop-filter: blur(2px);
}

.pt-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--pt-maroon);
	color: var(--pt-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.35s var(--pt-ease), transform 0.35s var(--pt-ease), visibility 0.35s;
}

.pt-nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pt-nav-overlay__inner {
	text-align: center;
}

.pt-nav-overlay .pt-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 3vw, 1.75rem);
}

.pt-nav-overlay .pt-nav-list a {
	font-family: var(--pt-font-serif);
	font-size: clamp(1.75rem, 6vw, 3.25rem);
	font-weight: 500;
	text-decoration: none;
	color: var(--pt-cream);
	transition: color 0.2s var(--pt-ease);
}

.pt-nav-overlay .pt-nav-list a:hover {
	color: var(--pt-orange);
}

.pt-nav-overlay__footer {
	margin-top: clamp(1.5rem, 4vw, 3rem);
}

.pt-nav-overlay__footer a {
	color: var(--pt-orange);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   7. Marquee (bleeding-edge looping text)
   ------------------------------------------------------------------------- */
.pt-marquee {
	overflow: hidden;
	width: 100%;
	padding-block: clamp(0.75rem, 2.5vw, 1.75rem);
}

.pt-marquee--cream  { background: var(--pt-cream); }
.pt-marquee--maroon { background: var(--pt-maroon); }

.pt-marquee--pink   .pt-marquee__item { color: var(--pt-pink); }
.pt-marquee--yellow .pt-marquee__item { color: var(--pt-yellow); }

.pt-marquee__track {
	display: flex;
	width: max-content;
	animation: pt-marquee-scroll 26s linear infinite;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.pt-marquee__track {
		animation: none;
	}
}

.pt-marquee__item {
	flex: 0 0 auto;
	font-family: var(--pt-font-sans);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 5vw, 3.25rem);
	letter-spacing: 0.01em;
	padding-inline: clamp(1rem, 3vw, 2.5rem);
	white-space: nowrap;
}

@keyframes pt-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* -------------------------------------------------------------------------
   8. Hero (shared shell across all 6 pages)
   ------------------------------------------------------------------------- */
.pt-hero {
	position: relative;
	width: 100%;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	color: var(--pt-white);
	overflow: hidden;
}

.pt-hero--tall { min-height: 86vh; }

/* Centered hero variant (Services, Meet Pictopia — a single centered line
   block over the photo, per the XD design, vs. Contact/Home's left-aligned
   bottom-pinned treatment). */
.pt-hero--center {
	align-items: center;
}

.pt-hero--center .pt-hero__content {
	text-align: center;
}

.pt-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pt-hero__bg .pt-placeholder {
	height: 100%;
	border-radius: 0;
	aspect-ratio: auto !important;
}

.pt-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 8, 8, 0) 40%, rgba(8, 8, 8, 0.55) 100%);
	z-index: 1;
}

.pt-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: clamp(1.5rem, 5vw, 3.5rem) var(--pt-gutter) clamp(2rem, 6vw, 4rem);
}

.pt-hero__heading {
	font-family: var(--pt-font-sans);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2.5rem, 9vw, 7.5rem);
	line-height: 0.95;
	margin: 0 0 0.3em;
	color: var(--pt-white);
}

.pt-hero__heading em,
.pt-hero__heading .pt-italic-accent {
	font-family: var(--pt-font-serif);
	font-style: italic;
	font-weight: 500;
	text-transform: none;
}

/* Inline script-font word inside a pale-yellow pill, e.g. "GAIT." on Services hero */
.pt-hero__heading .pt-pill-word {
	display: inline-block;
	font-family: var(--pt-font-script);
	font-style: italic;
	font-weight: 600;
	text-transform: none;
	background: var(--pt-yellow);
	color: var(--pt-maroon);
	border-radius: var(--pt-radius-pill);
	padding: 0.05em 0.5em 0.15em;
	line-height: 1.2;
	font-size: 0.85em;
}

.pt-hero__tagline {
	font-family: var(--pt-font-sans);
	/* "One ___ Every Touchpoint." is Poppins SemiBold (600), not Medium. */
	font-weight: 600;
	/* Exact XD measurement: 87px at the 1920px canvas = 4.53vw / 5.4375rem —
	   the old 1.75rem cap was less than a third of the real size. Height for
	   the 2-line block was 165px = 82.5px/line, i.e. line-height ~0.95, not
	   the browser default ~1.2 that was leaving the two lines too far apart. */
	font-size: clamp(1.25rem, 4.53vw, 5.4375rem);
	line-height: 0.95;
	margin-bottom: 0.6em;
}

/* "Studio" is set in Chapaza Italic in the design — Fraunces italic is our
   substitute (see README's font table), not an italicized Poppins. */
.pt-hero__tagline em {
	font-family: var(--pt-font-serif);
	font-style: italic;
	font-weight: 500;
}

.pt-hero__body {
	max-width: 46ch;
	/* Exact XD measurement: 28px at the 1920px canvas = 1.458vw / 1.75rem. */
	font-size: clamp(0.95rem, 1.458vw, 1.75rem);
	margin-bottom: 1.4em;
}

.pt-hero__tag-corner {
	position: absolute;
	z-index: 2;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--pt-white);
}

.pt-hero__tag-corner--br {
	right: var(--pt-gutter);
	bottom: clamp(1rem, 3vw, 2rem);
}

.pt-hero__client {
	font-family: var(--pt-font-sans);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 5vw, 3.5rem);
	margin-bottom: 0.15em;
	color: var(--pt-maroon);
}

.pt-hero__service-tag {
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: clamp(0.8rem, 1.4vw, 1rem);
	color: var(--pt-maroon);
}

/* Home-only hero: 50/50 color+photo split with a full-width heading that
   bleeds across both halves (distinct from the shared full-bleed .pt-hero
   used on Services/Meet Pictopia/Contact — see the XD design, screen 1). */
.pt-hero-split {
	position: relative;
	display: flex;
	min-height: 100vh;
	overflow: hidden;
}

.pt-hero-split__heading {
	position: absolute;
	/* Exact XD measurement: top:81px, font-size:201px at the 1920px canvas —
	   converted to vw against that same 1920 reference (81/1920=4.22vw,
	   201/1920=10.47vw) so it scales to the same real proportion instead of
	   the old, much-too-conservative cap (was maxing out at 7.5rem/120px). */
	top: clamp(1rem, 4.22vw, 5rem);
	left: var(--pt-gutter);
	right: var(--pt-gutter);
	z-index: 3;
	font-family: var(--pt-font-sans);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2.5rem, 10.47vw, 12.5625rem);
	line-height: 0.95;
	color: var(--pt-cream);
	margin: 0;
	pointer-events: none;
}

.pt-hero-split__color {
	width: 50%;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(7rem, 12vw, 9rem) var(--pt-gutter) clamp(2rem, 6vw, 3rem);
}

/* Exact colors per XD specs mode (clicked element-by-element, not eyeballed):
   tagline + body are #EDE6A2 (--pt-yellow), NOT cream. */
.pt-hero-split .pt-hero__tagline,
.pt-hero-split .pt-hero__body {
	color: var(--pt-yellow);
}

.pt-hero-split__photo {
	width: 50%;
	position: relative;
	min-height: 320px;
}

.pt-hero-split__photo .pt-placeholder {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto !important;
	border-radius: 0;
}

@media (max-width: 780px) {
	.pt-hero-split {
		flex-direction: column;
	}

	.pt-hero-split__color,
	.pt-hero-split__photo {
		width: 100%;
	}

	.pt-hero-split__photo {
		min-height: 280px;
	}

	.pt-hero-split__color {
		padding-top: clamp(6rem, 42vw, 9rem);
	}
}

/* Light-background hero variant (Portfolio, Case Study, some Home states) */
.pt-hero--on-cream {
	color: var(--pt-maroon);
	background: var(--pt-cream);
}

.pt-hero--on-cream .pt-hero__heading {
	color: var(--pt-olive);
}

/* Heading-only hero variant (Portfolio / Case Study / archive "PICTOPIA STUDIO" label) */
.pt-hero--label-only .pt-inner {
	padding-top: clamp(2rem, 6vw, 4rem);
	padding-bottom: 0.5rem;
}

.pt-hero__heading--small {
	font-size: clamp(2rem, 6vw, 4.5rem);
}

.pt-hero__heading--wrap {
	font-size: clamp(2rem, 6.5vw, 5.5rem);
}

.pt-hero__heading--yellow {
	color: var(--pt-yellow);
}

.pt-hero__marquee-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

/* -------------------------------------------------------------------------
   9. Home — "Nothing great is built alone" band + tags
   ------------------------------------------------------------------------- */
.pt-statement {
	position: relative;
	text-align: center;
}

/* Mobile: tags stack as a normal wrapped pill row above the heading. */
.pt-statement__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
}

.pt-statement__heading-wrap {
	margin-bottom: 1rem;
}

.pt-statement__heading {
	font-family: var(--pt-font-serif);
	font-weight: 400;
	color: var(--pt-yellow);
	/* Exact XD measurement: 115px at the 1920px canvas = 5.99vw / 7.1875rem —
	   the old 5rem cap undersized it by ~30%. */
	font-size: clamp(2rem, 5.99vw, 7.1875rem);
	line-height: 1.05;
	margin-bottom: 0;
}

/* Desktop: tags scatter around the heading at their exact XD position (each
   .pt-tag carries an inline left/top %, measured relative to the heading's
   own bounding box — see the founder-teaser comment above for the method:
   click each element in XD specs mode, don't eyeball it). */
@media (min-width: 900px) {
	.pt-statement__heading-wrap {
		position: relative;
		/* Must shrink to the heading's own rendered width — the tag % offsets
		   below are measured relative to the HEADING's box (XD specs), not
		   the full .pt-inner container, or they land in the wrong place.
		   Clearance uses MARGIN, not padding: .pt-statement__tags below is
		   `inset:0` on this wrap, which sizes to the padding box — any
		   padding here would get included in the tags' 0-100% reference
		   frame and throw off every measured position. Margin sits outside
		   the padding box, so it's the only safe way to add clearance.
		   Asymmetric because tags extend from -21% (above) to 148% (below)
		   of the heading's own height — the bottom needs more room. */
		width: fit-content;
		max-width: 100%;
		margin: 3.5rem auto 7rem;
	}

	.pt-statement__tags {
		position: absolute;
		inset: 0;
		margin-bottom: 0;
		display: block;
	}

	.pt-statement__tags .pt-tag {
		position: absolute;
		transform: translate(-50%, -50%);
		white-space: nowrap;
	}
}

.pt-statement__heading em {
	font-style: italic;
	font-weight: 500;
}

.pt-statement__body {
	max-width: 62ch;
	margin-inline: auto;
	color: var(--pt-orange);
	font-size: clamp(0.9rem, 1.4vw, 1.05rem);
}

/* -------------------------------------------------------------------------
   10. What we do — example project card
   ------------------------------------------------------------------------- */
.pt-what-we-do__heading {
	text-align: right;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.05;
	font-size: clamp(1.75rem, 5.5vw, 4.25rem);
	color: var(--pt-olive);
	margin-bottom: 1.5rem;
}

.pt-project-card {
	position: relative;
}

.pt-project-card .pt-placeholder {
	aspect-ratio: 21/9;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   9b. Founder teaser (Since '18 + signature + bio + 2 photos) — sits between
   the "Nothing great is built alone" statement and "What We Do", per the XD
   design (this whole block was missing from an earlier pass; verified
   element-by-element against XD specs mode, not eyeballed).
   ------------------------------------------------------------------------- */
.pt-founder-teaser__since {
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

.pt-founder-teaser__squiggle {
	width: clamp(10rem, 22vw, 16rem);
	color: var(--pt-orange);
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.pt-founder-teaser__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
	align-items: center;
}

@media (min-width: 780px) {
	.pt-founder-teaser__grid {
		grid-template-columns: 1fr 1.4fr 1fr;
	}
}

.pt-founder-teaser__photo .pt-placeholder {
	aspect-ratio: 4/5;
}

.pt-founder-teaser__signature {
	font-family: var(--pt-font-script);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	transform: rotate(-4deg);
	margin-bottom: 0.75rem;
	color: var(--pt-black);
}

.pt-founder-teaser__bio {
	font-size: 0.95rem;
	line-height: 1.5;
}

.pt-project-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	padding-top: 1rem;
	font-size: clamp(0.75rem, 1.2vw, 0.9rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pt-project-card__more {
	display: block;
	text-align: center;
	margin-top: 2rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: clamp(0.85rem, 1.4vw, 1rem);
}

/* -------------------------------------------------------------------------
   11. Testimonials — "Client love"
   ------------------------------------------------------------------------- */
.pt-testimonials {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 1rem;
}

@media (min-width: 780px) {
	.pt-testimonials {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pt-testimonial-card {
	border-radius: 18px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.pt-testimonial-card--rose   { background: var(--pt-dustyrose); color: var(--pt-maroon); }
.pt-testimonial-card--olive  { background: var(--pt-olive); color: var(--pt-ivory); }
.pt-testimonial-card--navy   { background: var(--pt-navy); color: var(--pt-white); }

/* Scattered/fanned rotation, per XD specs (measured ~8deg on the middle card). */
.pt-testimonial-card--rotate-a { transform: rotate(-8deg); }
.pt-testimonial-card--rotate-b { transform: rotate(8deg); }

@media (min-width: 700px) {
	.pt-testimonials {
		padding-block: 2rem;
	}
}

.pt-testimonial-card__label {
	font-family: var(--pt-font-script);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 1rem;
}

.pt-testimonial-card__quote {
	font-style: italic;
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
	opacity: 0.9;
}

.pt-testimonial-card__name {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

/* -------------------------------------------------------------------------
   12. Find your gait — tier cards
   ------------------------------------------------------------------------- */
.pt-gait {
	text-align: center;
}

.pt-gait__heading {
	font-family: var(--pt-font-sans);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 5vw, 3rem);
	color: var(--pt-cream);
	margin-bottom: 0.4em;
}

.pt-gait__subhead {
	max-width: 60ch;
	margin: 0 auto 2rem;
	color: var(--pt-cream);
	opacity: 0.9;
}

.pt-tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--pt-maroon);
}

@media (min-width: 860px) {
	.pt-tiers {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pt-tier {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	color: var(--pt-white);
	text-align: left;
	overflow: hidden;
}

.pt-tier .pt-placeholder {
	position: absolute;
	inset: 0;
	border-radius: 0;
	aspect-ratio: auto !important;
	height: 100%;
}

.pt-tier__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8,8,8,0) 30%, rgba(8,8,8,0.75) 100%);
}

.pt-tier__content {
	position: relative;
	z-index: 1;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.pt-tier__name {
	font-family: var(--pt-font-sans);
	font-weight: 300;
	text-transform: uppercase;
	font-size: clamp(2rem, 5vw, 3.25rem);
	margin-bottom: 0.4em;
	letter-spacing: 0.02em;
}

.pt-tier__copy {
	font-size: 0.85rem;
	line-height: 1.5;
	max-width: 40ch;
}

.pt-tier__copy strong {
	display: block;
	margin-top: 0.6em;
}

/* -------------------------------------------------------------------------
   13. FAQ
   ------------------------------------------------------------------------- */
.pt-faq__heading {
	color: var(--pt-orange);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: 1.5rem;
}

.pt-faq-item {
	border-top: 1px solid rgba(249, 240, 223, 0.35);
	padding-block: 1.5rem;
	text-align: center;
}

.pt-faq-item:last-child {
	border-bottom: 1px solid rgba(249, 240, 223, 0.35);
}

.pt-faq-item__q {
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--pt-cream);
}

.pt-faq-item__a {
	max-width: 70ch;
	margin-inline: auto;
	color: var(--pt-ivory);
	font-size: 0.95rem;
	text-align: left;
}

/* -------------------------------------------------------------------------
   14. CTA band (template-parts/cta-band.php)
   ------------------------------------------------------------------------- */
.pt-cta-band {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	padding-block: clamp(2rem, 5vw, 4rem);
}

.pt-cta-band--cream { background: var(--pt-cream); color: var(--pt-black); }
.pt-cta-band--olive { background: var(--pt-olive); color: var(--pt-ivory); }

.pt-cta-band__heading {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 4.5vw, 2.75rem);
	max-width: 22ch;
	margin: 0;
}

.pt-cta-band--button-only {
	align-items: flex-end;
}

.pt-cta-band--split {
	flex-direction: column;
}

@media (min-width: 780px) {
	.pt-cta-band--split {
		flex-direction: row;
		align-items: center;
		gap: 3rem;
	}

	.pt-cta-band--split .pt-cta-band__image {
		flex: 0 0 260px;
	}

	.pt-cta-band--split .pt-cta-band__image .pt-placeholder {
		border-radius: 12px;
	}
}

/* -------------------------------------------------------------------------
   15. Services page — numbered rows
   ------------------------------------------------------------------------- */
.pt-services-intro {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	font-size: clamp(1rem, 2.2vw, 1.4rem);
	font-weight: 700;
	text-transform: uppercase;
}

.pt-services-intro__eyebrow {
	color: var(--pt-pink);
}

.pt-services-intro__headline {
	color: var(--pt-black);
}

.pt-service-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	position: relative;
}

.pt-service-row--dark { background: var(--pt-maroon); color: var(--pt-orange); }
.pt-service-row--light { background: var(--pt-cream); color: var(--pt-orange); }

.pt-service-row--dark .pt-service-row__heading,
.pt-service-row--dark .pt-service-row__body { color: var(--pt-orange); }

.pt-service-row--light .pt-service-row__heading,
.pt-service-row--light .pt-service-row__body { color: var(--pt-maroon); }

.pt-service-row__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

/* Desktop: heading pinned top-left, body copy in its own right-hand column
   (vertically centered against the row) — matches the XD design's
   asymmetric two-zone layout, not a simple stacked heading+paragraph. */
@media (min-width: 780px) {
	.pt-service-row__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 3rem;
		align-items: center;
	}

	.pt-service-row__heading-wrap {
		align-self: start;
	}
}

.pt-service-row__heading-wrap {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	position: relative;
}

.pt-service-row__heading {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 5vw, 3.25rem);
	line-height: 1.05;
	margin: 0;
	max-width: 12ch;
}

.pt-service-row__number {
	font-weight: 400;
	font-size: clamp(1rem, 2vw, 1.5rem);
	opacity: 0.8;
}

.pt-service-row__body {
	max-width: 46ch;
	font-size: clamp(0.9rem, 1.4vw, 1.05rem);
}

.pt-service-row__view-more {
	margin-top: 1rem;
}

/* -------------------------------------------------------------------------
   16. Portfolio (exact 4-section structure from the XD design — Social
   Media Management's 3-column x 2x2 Instagram-collage grid, then Content
   Creation / Photography / Videography each as a heading + simple 3-photo
   row. No filter UI and no Branding/Website/Brand Strategy sections here —
   the XD Portfolio screen only ever shows these 4 categories.)
   ------------------------------------------------------------------------- */
.pt-portfolio-hero-label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	color: var(--pt-maroon);
	margin-bottom: 1.5rem;
}

.pt-portfolio-category {
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.pt-portfolio-category__heading {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	color: var(--pt-maroon);
	margin-bottom: 1rem;
}

/* Social Media Management: 3 columns, each its own 2x2 photo collage. */
.pt-portfolio-collage {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: clamp(0.5rem, 1.5vw, 1rem);
}

@media (min-width: 700px) {
	.pt-portfolio-collage {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pt-portfolio-collage__column {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.3rem, 0.8vw, 0.5rem);
}

.pt-portfolio-collage__column .pt-placeholder {
	aspect-ratio: 1/1;
}

/* Content Creation / Photography / Videography: one simple 3-across row. */
.pt-portfolio-row {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: clamp(0.4rem, 1vw, 0.75rem);
}

@media (min-width: 700px) {
	.pt-portfolio-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pt-portfolio-row .pt-placeholder {
	aspect-ratio: 4/3;
}

/* -------------------------------------------------------------------------
   17. Single case study
   ------------------------------------------------------------------------- */
.pt-case-strip {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 0.5rem;
	margin-top: 2rem;
}

@media (min-width: 780px) {
	.pt-case-strip {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pt-case-strip__item {
	position: relative;
}

.pt-case-strip__item .pt-placeholder {
	aspect-ratio: 3/4;
	border-radius: 2px;
}

.pt-play-icon {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(255,255,255,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pt-play-icon::before {
	content: '';
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent var(--pt-maroon);
	margin-left: 2px;
}

.pt-case-strip__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 0.75rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pt-white);
	background: linear-gradient(0deg, rgba(8,8,8,0.6), transparent);
}

.pt-case-rhythm {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-block: 0.5rem;
}

.pt-case-rhythm__wide .pt-placeholder {
	aspect-ratio: 21/9;
	border-radius: 2px;
}

.pt-case-rhythm__pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}

@media (min-width: 700px) {
	.pt-case-rhythm__pair {
		grid-template-columns: 1fr 1fr;
	}
}

.pt-case-rhythm__pair .pt-placeholder {
	aspect-ratio: 16/9;
	border-radius: 2px;
}

.pt-pullquote {
	max-width: 62ch;
	margin: clamp(2rem, 6vw, 4rem) auto;
	text-align: center;
	font-family: var(--pt-font-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 3vw, 2rem);
	line-height: 1.35;
	color: var(--pt-maroon);
}

/* -------------------------------------------------------------------------
   18. Meet Pictopia — founder bio
   ------------------------------------------------------------------------- */
.pt-bio {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 780px) {
	.pt-bio {
		flex-direction: row;
		align-items: center;
		gap: 3rem;
	}

	.pt-bio__image { flex: 0 0 44%; }
	.pt-bio__text  { flex: 1; }
}

.pt-bio__image .pt-placeholder {
	aspect-ratio: 4/5;
	border-radius: 6px;
}

.pt-bio__text p {
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   19. Contact page
   ------------------------------------------------------------------------- */
.pt-contact-intro {
	max-width: 60ch;
	margin: 0 auto 2rem;
	text-align: center;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.pt-contact-mailto {
	display: flex;
	justify-content: center;
	margin-bottom: 3rem;
}

.pt-form {
	max-width: 640px;
	margin-inline: auto;
	display: grid;
	gap: 1.1rem;
}

.pt-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pt-form__field label {
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.pt-form__field input,
.pt-form__field textarea {
	font-family: var(--pt-font-sans);
	font-size: 1rem;
	padding: 0.85em 1em;
	border: 1.5px solid var(--pt-gray);
	border-radius: 10px;
	background: var(--pt-white);
	color: var(--pt-black);
	resize: vertical;
}

.pt-form__field input:focus,
.pt-form__field textarea:focus {
	outline: 2px solid var(--pt-orange);
	outline-offset: 1px;
}

.pt-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pt-form__submit {
	justify-self: start;
	border: none;
}

.pt-form__status {
	margin-top: 0.5rem;
	font-weight: 600;
	display: none;
}

.pt-form__status.is-visible {
	display: block;
}

.pt-form__status--success { color: #2f6b3a; }
.pt-form__status--error   { color: #a3312c; }

.pt-logo-strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin-top: 3rem;
}

@media (min-width: 700px) {
	.pt-logo-strip {
		grid-template-columns: repeat(4, 1fr);
	}
}

.pt-logo-strip .pt-placeholder {
	aspect-ratio: 1/1;
}

/* -------------------------------------------------------------------------
   20. Footer (shared)
   ------------------------------------------------------------------------- */
.pt-footer {
	background: var(--pt-maroon);
	color: var(--pt-cream);
}

.pt-footer__nav {
	border-bottom: 1px solid rgba(249, 240, 223, 0.25);
}

.pt-footer .pt-nav-list {
	list-style: none;
	margin: 0;
	padding: 1.25rem var(--pt-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	justify-content: center;
	font-size: clamp(0.7rem, 1.4vw, 0.9rem);
	font-weight: 600;
	letter-spacing: 0.03em;
}

.pt-footer .pt-nav-list a {
	text-decoration: none;
	color: var(--pt-cream);
	transition: color 0.2s var(--pt-ease);
}

.pt-footer .pt-nav-list a:hover {
	color: var(--pt-orange);
}

.pt-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding: clamp(2rem, 5vw, 3.5rem) var(--pt-gutter);
}

@media (min-width: 780px) {
	.pt-footer__columns {
		grid-template-columns: 1fr 1.4fr auto;
		align-items: start;
	}
}

.pt-wordmark {
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.pt-wordmark__main {
	display: block;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	letter-spacing: 0.02em;
}

.pt-wordmark__squiggle {
	display: block;
	color: var(--pt-orange);
	font-size: 1.25rem;
	margin-block: 0.15em;
}

.pt-wordmark__caption {
	display: block;
	font-family: var(--pt-font-script);
	font-size: clamp(1.1rem, 2.5vw, 1.5rem);
	color: var(--pt-pink);
}

.pt-instagram-label {
	display: block;
	writing-mode: horizontal-tb;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pt-cream);
	margin-bottom: 0.75rem;
}

@media (min-width: 780px) {
	.pt-instagram-label {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		display: inline-block;
		margin-right: 1rem;
		margin-bottom: 0;
	}

	.pt-footer__col--instagram {
		display: flex;
		align-items: flex-end;
	}
}

.pt-instagram-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	max-width: 320px;
}

.pt-back-to-top {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pt-footer__bottom {
	border-top: 1px solid rgba(249, 240, 223, 0.25);
	padding: 1.25rem var(--pt-gutter);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.8rem;
	text-align: center;
}

@media (min-width: 780px) {
	.pt-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

.pt-footer__bottom-item a {
	color: var(--pt-orange);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   21. Utility grid used by "What we do" / general 2-col content blocks
   ------------------------------------------------------------------------- */
.pt-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 3vw, 2rem);
}

@media (min-width: 780px) {
	.pt-grid-2 { grid-template-columns: 1fr 1fr; }
}