/*
Theme Name: Pirates For Hire
Theme URI: https://piratesforhire.com
Author: Pirates For Hire
Author URI: https://piratesforhire.com
Description: Custom cinematic theme for Pirates For Hire — live pirate entertainment for events. Built to match design-assets/PFH-home-page-design-mockup.png.
Version: 0.5.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: pirates-for-hire
*/

/* ==========================================================================
   1. Reset
   ========================================================================== */

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

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

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

/* NOTE: this must NOT be scoped to ul[class] — the nav/footer lists are
   plain <ul> elements and were rendering with default bullets. */
ul, ol { padding: 0; list-style: none; }

img, picture, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

/* ==========================================================================
   2. Design tokens — sampled from PFH-home-page-design-mockup.png
   ========================================================================== */

:root {
	/* Dark ground is a cool near-black, not a warm black */
	--ink: #0a0f14;
	--ink-deep: #070c11;
	--charcoal: #101820;
	--wood-dark: #171008;

	/* Parchment family */
	--parchment: #e8d8c4;
	--parchment-light: #f0e6d6;
	--parchment-panel: #dcc8ac;
	--parchment-card: #e4d4c0;

	/* Metals + blood */
	--brass: #a8813f;
	--gold: #c99a4a;
	--gold-bright: #e0b968;
	--blood-red: #6a1710;
	--blood-red-dark: #4d0f0a;

	/* Text */
	--text: #241c14;
	--text-muted: #6b5c4a;
	--text-inverse: #f2e7d5;
	--muted-on-dark: #a99b85;

	/* Type */
	--font-display: "Cinzel", "Trajan Pro", "LM Roman Caps 10", Georgia, serif;
	--font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Spacing */
	--section-pad-y: 64px;
	--grid-gap: 24px;
	--container-max: 1320px;
	--section-pad-top: 62px;
	--section-pad-bottom: 40px;
	--gutter: 24px;

	/* Motion */
	--ease: cubic-bezier(.2,.6,.2,1);
	--transition-fast: 200ms var(--ease);

	/* Header */
	--header-h: 108px;
	--header-h-stuck: 76px;
}

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

body {
	/* the off-canvas drawer is translated off-screen; without this it adds
	   horizontal scroll on mobile */
	overflow-x: hidden;
	background: var(--parchment-light);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--text);
	text-wrap: balance;
}

p { max-width: 68ch; }

.eyebrow {
	display: block;
	font-family: var(--font-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 10px;
}

/* ==========================================================================
   4. Layout utilities
   ========================================================================== */

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

.section { padding-block: var(--section-pad-top) var(--section-pad-bottom); }

.section--dark { background: var(--ink); color: var(--text-inverse); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--text-inverse); }

.section--parchment {
	background-color: var(--parchment);
	background-image: radial-gradient(rgba(120,95,60,.05) 1px, transparent 1px);
	background-size: 3px 3px;
}

.section-head { margin-bottom: 34px; }

.section-head--center {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
}

.section-head h2 {
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	letter-spacing: .01em;
}

.section-head__sub {
	color: var(--text-muted);
	font-size: 1rem;
	margin: 10px auto 0;
}

.section--dark .section-head__sub { color: var(--muted-on-dark); }

/* Heading with the mockup's small red arrow flourishes */
.flourish-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1.15;
	color: var(--text-inverse);
}

.flourish-heading--dark { color: var(--text); }

.flourish-heading::before,
.flourish-heading::after {
	content: "";
	flex: 0 0 46px;
	height: 7px;
	background: var(--blood-red);
	-webkit-mask: linear-gradient(#000 0 0) left center/28px 1px no-repeat,
		conic-gradient(from -45deg at 50% 50%, #000 0 90deg, transparent 0) right center/8px 8px no-repeat;
	mask: linear-gradient(#000 0 0) left center/28px 1px no-repeat,
		conic-gradient(from -45deg at 50% 50%, #000 0 90deg, transparent 0) right center/8px 8px no-repeat;
}

.flourish-heading::before { transform: scaleX(-1); }

.section-cta { margin-top: 26px; margin-inline: auto; text-align: center; }

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

.skip-link {
	position: absolute;
	top: -48px; left: 16px;
	z-index: 1000;
	background: var(--ink);
	color: var(--text-inverse);
	padding: 12px 20px;
	border-radius: 4px;
	transition: top var(--transition-fast);
}

.skip-link:focus { top: 16px; }

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

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 3px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
	background: var(--blood-red);
	color: var(--text-inverse);
	border-color: rgba(224,185,104,.35);
	box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.btn-primary:hover { background: var(--blood-red-dark); }

.btn-secondary {
	background: rgba(10,15,20,.45);
	color: var(--text-inverse);
	border-color: rgba(201,154,74,.55);
}

.btn-secondary:hover { border-color: var(--gold-bright); background: rgba(10,15,20,.7); }

.section--parchment .btn-secondary,
.section--light .btn-secondary { color: var(--text); border-color: rgba(36,28,20,.35); background: transparent; }

.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text);
	border: 1px solid rgba(36,28,20,.35);
	border-radius: 3px;
	padding: 12px 22px;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.btn-ghost:hover { border-color: var(--text); background: rgba(36,28,20,.05); }

.icon-inline { width: 15px; height: 15px; flex-shrink: 0; }
.btn .icon-inline { opacity: .9; }

/* ==========================================================================
   6. Site header
   ========================================================================== */

.site-header {
	position: fixed;
	inset-inline: 0; top: 0;
	z-index: 900;
	padding-block: 14px;
	background: linear-gradient(to bottom, rgba(6,10,14,.85) 0%, rgba(6,10,14,.35) 60%, transparent 100%);
	transition: background var(--transition-fast), padding var(--transition-fast), box-shadow var(--transition-fast);
}

.site-header.is-stuck {
	padding-block: 8px;
	background: rgba(8,12,17,.97);
	box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.site-header .container {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 28px;
	row-gap: 2px;
}

@media (min-width: 1080px) {
	.site-header .container { position: relative; grid-template-columns: 186px 1fr auto; }
	.site-branding { position: absolute; left: 0; top: -4px; }
}

.site-branding {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-inverse);
}

.site-branding__img {
	height: 185px;
	width: auto;
	transition: height var(--transition-fast);
}

.is-stuck .site-branding__img { height: 93px; }

/* Text fallback used only until a real logo file is uploaded */
.site-branding__text { display: flex; flex-direction: column; line-height: 1.05; }
.site-branding__name {
	font-family: var(--font-display);
	font-size: 1.25rem; font-weight: 700;
	white-space: nowrap;
	color: var(--text-inverse);
}
.site-branding__est {
	font-size: .625rem; letter-spacing: .18em;
	text-transform: uppercase; color: var(--gold);
}

.primary-nav { grid-column: 2; grid-row: 2; display: none; }

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 30px;
}

.primary-nav a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-inverse);
	padding: 6px 0;
	position: relative;
}

.primary-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-fast);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }

.icon-caret { width: 9px; height: 9px; opacity: .75; }

.header-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
.header-cta { grid-column: 3; grid-row: 2; justify-self: end; display: flex; align-items: center; gap: 12px; }
.header-cta .btn { padding: 11px 20px; font-size: .8125rem; }

/* Pirate Mode toggle */
.pirate-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted-on-dark);
}

.pirate-toggle__label { transition: color var(--transition-fast); }

.pirate-toggle[aria-pressed="true"] .pirate-toggle__label--pirate,
.pirate-toggle:not([aria-pressed="true"]) .pirate-toggle__label--en { color: var(--gold-bright); }

.pirate-toggle__track {
	position: relative;
	display: inline-block;
	width: 46px; height: 22px;
	border-radius: 999px;
	background: rgba(242,231,213,.14);
	border: 1px solid rgba(201,154,74,.5);
}

.pirate-toggle__knob {
	position: absolute;
	top: 2px; left: 2px;
	display: flex; align-items: center; justify-content: center;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--parchment-light);
	color: var(--ink);
	font-size: 10px; line-height: 1;
	transition: transform var(--transition-fast);
}

.pirate-toggle[aria-pressed="true"] .pirate-toggle__knob { transform: translateX(22px); }

.menu-toggle {
	grid-column: 3; grid-row: 1 / span 2;
	justify-self: end;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid rgba(242,231,213,.35);
	border-radius: 3px;
	color: var(--text-inverse);
}

.menu-toggle svg { width: 22px; height: 22px; }

@media (min-width: 1080px) {
	.primary-nav { display: block; }
	.menu-toggle { display: none; }
}

@media (max-width: 1079px) {
	.header-toggle, .header-cta { display: none; }
	.site-header .container { grid-template-rows: auto; }
	.site-branding { grid-row: 1; }
	.menu-toggle { grid-row: 1; }
	.site-branding__img { height: 70px; }
}

/* Mobile drawer */
.mobile-drawer {
	position: fixed; inset: 0; z-index: 950;
	background: var(--ink);
	color: var(--text-inverse);
	overflow-y: auto;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.mobile-drawer[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.mobile-drawer__top { display: flex; justify-content: flex-end; margin-bottom: 16px; }

.mobile-drawer__close {
	width: 44px; height: 44px;
	border: 1px solid rgba(242,231,213,.35);
	border-radius: 3px; color: var(--text-inverse);
}

.mobile-drawer nav ul { display: flex; flex-direction: column; }

.mobile-drawer nav a {
	display: block;
	padding: 15px 2px;
	font-family: var(--font-display);
	font-size: 1.125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(242,231,213,.12);
}

.mobile-drawer .btn-primary { margin-top: 22px; width: 100%; }
.pirate-toggle--drawer { margin-bottom: 18px; }
.mobile-drawer__contact { margin-top: 26px; color: var(--muted-on-dark); }

@media (min-width: 1080px) { .mobile-drawer { display: none; } }

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: clamp(560px, 46vw, 740px);
	color: var(--text-inverse);
	background: var(--ink);
	overflow: hidden;
}

.hero__media {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: auto;
	width: 68%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Feather the image's hard left edge so it dissolves into the ink panel. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
	mask-image: linear-gradient(to right, transparent 0%, #000 35%);
}

@media (max-width: 859px) {
	.hero__media { width: 100%; object-position: 68% center; -webkit-mask-image: none; mask-image: none; }
}

.hero::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(to right, var(--ink) 0%, var(--ink) 28%, rgba(10,15,20,.86) 38%, rgba(10,15,20,.35) 52%, rgba(10,15,20,.08) 66%, rgba(10,15,20,.5) 100%),
		linear-gradient(to top, rgba(10,15,20,.8) 0%, transparent 42%);
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 1;
	padding-bottom: clamp(40px, 6vw, 76px);
	padding-top: calc(var(--header-h) + 40px);
}

.hero-headline { color: var(--text-inverse); text-transform: uppercase; }

.hero-headline__line {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.35rem, 2.5vw, 2.25rem);
	letter-spacing: .02em;
	line-height: 1.14;
}

.hero-headline__line--emphasis {
	font-weight: 700;
	font-size: clamp(2.4rem, 5.2vw, 4.75rem);
	line-height: 1.04;
	margin-block: 2px;
}

.hero-subcopy {
	max-width: 44ch;
	margin-block: 20px 28px;
	font-family: var(--font-display);
	font-size: clamp(.875rem, 1.15vw, 1.0625rem);
	font-weight: 400;
	letter-spacing: .05em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--text-inverse);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   8. Credibility strip
   ========================================================================== */

.credibility-strip {
	background-color: var(--parchment);
	background-image: radial-gradient(rgba(120,95,60,.05) 1px, transparent 1px);
	background-size: 3px 3px;
	padding-block: 54px;
}

.credibility-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

.credibility-item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-inline: 2px;
}

.credibility-item__icon { width: 54px; height: auto; flex-shrink: 0; }
.credibility-item__text { display: flex; flex-direction: column; }

.credibility-item strong {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--text);
	letter-spacing: .01em;
	margin-bottom: 3px;
}

.credibility-item span:last-child {
	font-size: .75rem;
	line-height: 1.38;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

@media (min-width: 640px) { .credibility-grid { grid-template-columns: repeat(2,1fr); } }

@media (min-width: 1080px) {
	.credibility-grid { grid-template-columns: repeat(5,1fr); gap: 0; }
	.credibility-item + .credibility-item { border-left: 1px solid rgba(36,28,20,.16); padding-left: 18px; }
}

/* ==========================================================================
   9. Experience cards
   ========================================================================== */

.card-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: var(--grid-gap);
}

@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1080px) { .card-grid--6up { grid-template-columns: repeat(6,1fr); gap: 14px; } }

.card {
	position: relative;
	display: block;
	aspect-ratio: 125 / 201;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid rgba(201,154,74,.32);
	background: var(--charcoal);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover, .card:focus-within {
	transform: translateY(-4px);
	border-color: var(--gold);
	box-shadow: 0 18px 34px rgba(0,0,0,.5);
}

.card__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

.card__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,12,17,.96) 22%, rgba(8,12,17,.6) 48%, rgba(8,12,17,.08) 78%);
}

.card__body {
	position: absolute;
	inset-inline: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 10px 22px;
	text-align: center;
}

.card__icon { width: 34px; height: auto; color: var(--gold); }

.card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3125rem;
	line-height: 1.18;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--text-inverse);
}

.card__title a::before { content: ""; position: absolute; inset: 0; }

/* ==========================================================================
   10. Build Your Pirate World — icon grid
   ========================================================================== */

.icon-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 40px 24px;
	text-align: center;
}

@media (min-width: 700px) { .icon-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1080px) { .icon-grid { grid-template-columns: repeat(6,1fr); gap: 28px 18px; } }

.icon-grid__item { display: flex; flex-direction: column; align-items: center; }
.icon-grid__icon { height: 74px; width: auto; margin-bottom: 16px; }

.icon-grid__item h3 {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: .03em;
	margin-bottom: 9px;
}

.icon-grid__item p {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--text-muted);
	max-width: 23ch;
}

/* --- Live Action: crossed swords strike on hover ---------------------------
   assets/images/sword-l.png and sword-r.png are icon-swords.png cut in two
   along each blade's own axis, so the pair looks identical at rest but each
   sword can pivot on its own pommel. Hovering anywhere on the card — icon,
   title or copy — runs one 2s exchange: wind up, strike, ring, strike, settle.
   The global prefers-reduced-motion rule in section 1 disables it. */

.sword-clash {
	position: relative;
	display: block;
	height: 74px;
	width: 76.6px;          /* 74px x the source icon's 180:174 aspect */
	margin-bottom: 16px;
}

.sword-clash__blade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: transform 220ms var(--ease);   /* eases back if the pointer leaves mid-swing */
}

.sword-clash__blade--l { transform-origin: 15% 87.4%; }    /* left pommel */
.sword-clash__blade--r { transform-origin: 77.8% 87.4%; }  /* right pommel */

.sword-clash__spark {
	position: absolute;
	top: 46%; left: 50%;
	width: 38px; height: 38px;
	margin: -19px 0 0 -19px;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255,250,228,.95) 0%,
		rgba(255,216,124,.55) 32%,
		rgba(255,190,70,0) 68%);
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) {
	.icon-grid__item--swords:hover .sword-clash__blade--l { animation: pfh-clash-l 2s both; }
	.icon-grid__item--swords:hover .sword-clash__blade--r { animation: pfh-clash-r 2s both; }
	.icon-grid__item--swords:hover .sword-clash__spark    { animation: pfh-clash-spark 2s both; }
}

@keyframes pfh-clash-l {
	0%   { transform: rotate(0deg); }
	14%  { transform: rotate(-14deg); animation-timing-function: cubic-bezier(.55,0,.85,.2); }  /* wind up, then accelerate in */
	28%  { transform: rotate(6deg); }    /* STRIKE 1 */
	33%  { transform: rotate(1deg); }    /* ring */
	36%  { transform: rotate(3.5deg); }
	44%  { transform: rotate(-11deg); animation-timing-function: cubic-bezier(.55,0,.85,.2); }
	57%  { transform: rotate(6deg); }    /* STRIKE 2 */
	62%  { transform: rotate(1deg); }
	65%  { transform: rotate(3deg); }
	74%  { transform: rotate(-4deg); }
	86%  { transform: rotate(1.5deg); }
	100% { transform: rotate(0deg); }
}

@keyframes pfh-clash-r {
	0%   { transform: rotate(0deg); }
	14%  { transform: rotate(14deg); animation-timing-function: cubic-bezier(.55,0,.85,.2); }
	28%  { transform: rotate(-6deg); }
	33%  { transform: rotate(-1deg); }
	36%  { transform: rotate(-3.5deg); }
	44%  { transform: rotate(11deg); animation-timing-function: cubic-bezier(.55,0,.85,.2); }
	57%  { transform: rotate(-6deg); }
	62%  { transform: rotate(-1deg); }
	65%  { transform: rotate(-3deg); }
	74%  { transform: rotate(4deg); }
	86%  { transform: rotate(-1.5deg); }
	100% { transform: rotate(0deg); }
}

@keyframes pfh-clash-spark {
	0%, 26%   { opacity: 0; transform: scale(.35); }
	29%       { opacity: 1; transform: scale(1); }
	37%       { opacity: 0; transform: scale(1.6); }
	55%       { opacity: 0; transform: scale(.35); }
	58%       { opacity: 1; transform: scale(1); }
	66%, 100% { opacity: 0; transform: scale(1.6); }
}

/* ==========================================================================
   11. Proof section — filmstrip + quick-inquiry panel
   ========================================================================== */

.proof-section { position: relative; z-index: 2; overflow: visible; }

.proof-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

.proof-layout > * { min-width: 0; }
.proof-filmstrip, .filmstrip-track { min-width: 0; max-width: 100%; }

/* The panel is taller than the filmstrip row by design — let it hang into
   the testimonials section instead of stretching this one. */
@media (min-width: 1180px) {
	.proof-layout { align-items: start; }
}

.proof-text h2 { font-size: clamp(1.5rem, 2.2vw, 2.125rem); }
.proof-text p { color: var(--muted-on-dark); margin-top: 14px; max-width: 26ch; }
.proof-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; }
.proof-ctas .btn { min-width: 210px; justify-content: flex-start; }

.proof-filmstrip { position: relative; display: flex; align-items: center; }

.filmstrip-track {
	display: flex;
	gap: 3px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: 5px;
	border: 1px solid rgba(201,154,74,.35);
	padding: 5px;
	background: rgba(0,0,0,.35);
}

.filmstrip-track::-webkit-scrollbar { display: none; }

.filmstrip-slide {
	flex: 0 0 auto;
	width: 19%;
	min-width: 96px;
	aspect-ratio: 68 / 180;
	scroll-snap-align: start;
	overflow: hidden;
}

.filmstrip-slide img { width: 100%; height: 100%; object-fit: cover; }

.filmstrip-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(8,12,17,.85);
	border: 1px solid rgba(201,154,74,.6);
	color: var(--parchment);
}

.filmstrip-nav--prev { left: -14px; }
.filmstrip-nav--next { right: -14px; }
.filmstrip-nav svg { width: 16px; height: 16px; }

/* Quick-inquiry parchment panel — a weathered sheet with rolled scroll ends.
   Two generated assets do the work:
     assets/images/parchment.jpg — mottled fibre/tea-stain texture, scaled to cover
     assets/images/scroll.svg    — silhouette mask: torn side edges, curled ends
   The texture and the mask are separate on purpose: the texture is scaled with
   `cover` so it never distorts, while the mask stretches to whatever height the
   form ends up being. The drop-shadow lives on the panel (not the ::before) so
   it follows the torn silhouette instead of a rectangle — a box-shadow here
   would be clipped away by the mask. */
.proof-form-panel {
	position: relative;
	background: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--text);
	padding: 68px 48px 64px;
	filter: drop-shadow(0 20px 38px rgba(0,0,0,.55));
}

.proof-form-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--parchment-panel);
	background-image:
		/* top roll: dark outer lip, highlight along the curve, crease shadow */
		linear-gradient(to bottom, rgba(74,50,24,.42) 0px, rgba(122,94,56,.20) 6px, rgba(255,248,232,.50) 15px, rgba(198,172,134,.06) 24px, rgba(70,48,24,.30) 33px, rgba(0,0,0,0) 46px),
		/* bottom roll */
		linear-gradient(to top,    rgba(74,50,24,.42) 0px, rgba(122,94,56,.20) 6px, rgba(255,248,232,.50) 15px, rgba(198,172,134,.06) 24px, rgba(70,48,24,.30) 33px, rgba(0,0,0,0) 46px),
		/* aged darkening toward the torn edges */
		radial-gradient(118% 98% at 50% 50%, rgba(0,0,0,0) 50%, rgba(92,64,32,.34) 100%),
		url(assets/images/parchment.jpg);
	background-size: 100% 52px, 100% 52px, 100% 100%, cover;
	background-position: top, bottom, center, center;
	background-repeat: no-repeat;
	-webkit-mask-image: url(assets/images/scroll.svg);
	        mask-image: url(assets/images/scroll.svg);
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

.quick-inquiry-form { position: relative; z-index: 1; }

.proof-form-panel__compass {
	position: absolute;
	top: 46px; right: 44px;
	width: 40px; height: auto;
	z-index: 1;
	opacity: .85;
	mix-blend-mode: multiply;
	/* The comp-cut PNG has an opaque parchment background; feather its square
	   edges away so it sits in the paper rather than on top of it. */
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, rgba(0,0,0,0) 76%);
	        mask-image: radial-gradient(circle at 50% 50%, #000 52%, rgba(0,0,0,0) 76%);
}

.quick-inquiry-form .eyebrow { color: var(--blood-red); margin-bottom: 2px; }

.quick-inquiry-form h3 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1rem;
	color: var(--text-muted);
	margin-bottom: 16px;
}

.form-row { margin-bottom: 10px; }
.form-row--2up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	background: rgba(253,248,238,.62);
	border: 1px solid rgba(74,52,28,.34);
	border-radius: 2px;
	padding: 10px 12px;
	font-size: .875rem;
	color: var(--text);
	box-shadow: inset 0 1px 2px rgba(74,52,28,.10);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(107,92,74,.85); }

.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--brass); outline-offset: 1px; }

.quick-inquiry-form__submit { width: 100%; margin-top: 6px; }
.form-microcopy { margin-top: 10px; font-size: .75rem; color: var(--text-muted); text-align: center; }
.form-success { margin-top: 10px; font-size: .875rem; text-align: center; color: var(--blood-red); font-weight: 700; }

/* These are homepage-grid placement rules, not part of the panel component —
   scope them to .proof-layout so reusing .proof-form-panel elsewhere (the
   booking page) doesn't inherit the overlap margins. */
@media (min-width: 860px) {
	.proof-layout { grid-template-columns: minmax(180px, .8fr) 1.6fr; }
	.proof-layout .proof-form-panel { grid-column: 1 / -1; }
}

@media (min-width: 1180px) {
	.proof-layout { grid-template-columns: minmax(205px,.92fr) 1.42fr minmax(330px,1.05fr); gap: 30px; }
	.proof-layout .proof-form-panel { grid-column: 3; margin-top: -18px; margin-bottom: -232px; }
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

.testimonials { position: relative; z-index: 1; overflow: hidden; }

.testimonials__ship {
	position: absolute;
	left: 0; bottom: 0;
	width: clamp(140px, 14vw, 205px);
	height: auto;
	z-index: 0;
	opacity: .72;
	mix-blend-mode: multiply;
	pointer-events: none;
	/* Fades the hard right and top edges of the comp crop into the parchment. */
	-webkit-mask-image:
		linear-gradient(to right, #000 70%, rgba(0,0,0,0) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%);
	mask-image:
		linear-gradient(to right, #000 70%, rgba(0,0,0,0) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%);
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
}

/* From the 3-up card layout upward the section is short enough that the ship
   can span it top to bottom without swallowing the cards. */
@media (min-width: 760px) {
	.testimonials__ship {
		top: 0;
		height: 100%;
		width: auto;
		max-width: 46%;
		object-fit: cover;
		object-position: left bottom;
		/* Spans the full height, so only the right edge needs feathering. */
		-webkit-mask-image: linear-gradient(to right, #000 55%, rgba(0,0,0,0) 100%);
		        mask-image: linear-gradient(to right, #000 55%, rgba(0,0,0,0) 100%);
		-webkit-mask-composite: source-over;
		        mask-composite: add;
	}
}

.testimonials .container { position: relative; z-index: 1; }

.testimonial-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.testimonial-card {
	background: rgba(250,246,238,.92);
	border: 1px solid rgba(36,28,20,.16);
	border-radius: 3px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.testimonial-card__quote {
	font-size: .84375rem;
	line-height: 1.65;
	color: var(--text);
	max-width: none;
}

.testimonial-card__attribution { display: flex; align-items: center; gap: 12px; }
.testimonial-card__logo { height: 22px; width: auto; }

.testimonial-card__name {
	font-family: var(--font-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text);
}

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

@media (min-width: 1180px) {
	.testimonials__inner { max-width: 66%; }
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-footer {
	position: relative;
	background: var(--ink-deep);
	color: var(--muted-on-dark);
	padding-block: 52px 22px;
	font-size: .875rem;
	overflow: hidden;
}

.site-footer__seal {
	position: absolute;
	top: -34px; right: 0;
	width: clamp(120px, 13vw, 190px);
	height: auto;
	pointer-events: none;
}

.site-footer .container { position: relative; z-index: 1; }

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	padding-bottom: 30px;
}

.footer-col h3 {
	font-family: var(--font-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 16px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--text-inverse); }

.footer-logo { display: block; margin-bottom: 18px; }
.footer-logo__img { width: 248px; max-width: 100%; height: auto; margin-inline: auto; }
.footer-blurb {
	color: var(--muted-on-dark);
	font-size: .8125rem;
	line-height: 1.65;
	max-width: 34ch;
	margin-inline: auto;
	text-align: center;
}

.footer-contact li { display: flex; }
.footer-contact a, .footer-contact span { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact .icon-inline { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }

.footer-bottom {
	display: grid;
	gap: 14px;
	padding-top: 22px;
	border-top: 1px solid rgba(201,154,74,.22);
	font-size: .78125rem;
}

.footer-motto { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted-on-dark); }
.footer-motto__skull { width: 20px; height: auto; opacity: .8; }
.footer-bottom__right { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.footer-legal a:hover, .back-to-top:hover { color: var(--text-inverse); }
.back-to-top { color: inherit; font: inherit; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: var(--muted-on-dark); transition: color var(--transition-fast); }
.footer-social a:hover { color: var(--gold-bright); }
.footer-social svg { width: 17px; height: 17px; }

@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2,1fr); } }

@media (min-width: 1080px) {
	.footer-grid { grid-template-columns: 1.55fr 1fr 1fr 1.25fr; gap: 40px; }
	.footer-col--links { border-left: 1px solid rgba(201,154,74,.18); padding-left: 40px; }
	.footer-bottom { grid-template-columns: 1fr auto 1fr; align-items: center; }
	.footer-bottom__right { justify-self: end; }
	.footer-copyright { justify-self: start; }
}

/* ==========================================================================
   14. Responsive spacing
   ========================================================================== */

@media (max-width: 1079px) {
	:root { --section-pad-y: 80px; --header-h: 98px; }
}

@media (max-width: 639px) {
	:root { --section-pad-y: 64px; --gutter: 20px; --grid-gap: 16px; }
	.hero { height: auto; min-height: 560px; }
	.proof-ctas .btn { width: 100%; }
}

/* ==========================================================================
   15. Section rhythm calibrated against PFH-home-page-design-mockup.png
   ========================================================================== */

.credibility-strip + .section--dark { --section-pad-top: 62px; --section-pad-bottom: 34px; }
.section--parchment { --section-pad-top: 56px; --section-pad-bottom: 46px; }
.proof-section { --section-pad-top: 62px; --section-pad-bottom: 62px; }
.testimonials { --section-pad-top: 54px; --section-pad-bottom: 26px; }

@media (max-width: 1179px) {
	.testimonials { --section-pad-bottom: 54px; }
}

/* ==========================================================================
   16. Interior pages — added with the archive/single templates
   ========================================================================== */

/* --- Layout helpers ------------------------------------------------------ */

.container--measure { max-width: 820px; }
.section--tight { --section-pad-top: 46px; --section-pad-bottom: 46px; }

/* --- Breadcrumbs --------------------------------------------------------- */

.breadcrumbs { margin-bottom: 18px; }

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-family: var(--font-display);
	color: var(--muted-on-dark);
}

.breadcrumbs__item { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs__item a { color: var(--gold); }
.breadcrumbs__item a:hover { color: var(--gold-bright); }
.breadcrumbs__item [aria-current] { color: var(--text-inverse); }
.breadcrumbs__sep { width: 10px; height: 10px; opacity: .5; }

/* --- Interior page header ------------------------------------------------ */

.page-hero {
	position: relative;
	background: var(--ink);
	color: var(--text-inverse);
	padding-block: calc(var(--header-h) + 46px) 54px;
	overflow: hidden;
}

.page-hero--compact { padding-block: calc(var(--header-h) + 34px) 38px; }

.page-hero__media {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .3;
	z-index: 0;
}

/* Keeps the headline legible over whatever photography lands here later. */
.page-hero--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(10,15,20,.94) 0%, rgba(10,15,20,.72) 55%, rgba(10,15,20,.45) 100%);
	z-index: 0;
}

.page-hero__inner { position: relative; z-index: 1; }
.page-hero__eyebrow { color: var(--gold); }

.page-hero__title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	color: var(--text-inverse);
	max-width: 20ch;
}

.page-hero__lead {
	margin-top: 14px;
	max-width: 58ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--muted-on-dark);
}

/* --- Prose sections ------------------------------------------------------ */

.prose-sections { display: flex; flex-direction: column; gap: 40px; }

.prose-section__heading {
	font-size: 1.375rem;
	margin-bottom: 10px;
}

.prose-section__body p { color: var(--text-muted); line-height: 1.7; }
.prose-section__body p + p { margin-top: 12px; }

.prose-section--media { display: grid; gap: 24px; align-items: center; }

@media (min-width: 780px) {
	.prose-section--media { grid-template-columns: 1fr 1fr; gap: 40px; }
	.prose-section--flip .prose-section__media { order: 2; }
}

.prose-section__media img { width: 100%; height: auto; border-radius: 3px; }

.prose p { color: var(--text-muted); line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose h2 { font-size: 1.375rem; margin: 28px 0 10px; }

/* Editor-only. Never shown to visitors — see template-parts/components/sections.php. */
.review-flag {
	margin-top: 10px;
	padding: 7px 11px;
	border-left: 3px solid var(--gold);
	background: rgba(201,154,74,.12);
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* --- Standing note (safety / availability callouts) ---------------------- */

.standing-note {
	display: flex;
	gap: 14px;
	margin-top: 36px;
	padding: 20px 22px;
	border: 1px solid rgba(106,23,16,.35);
	border-left: 4px solid var(--blood-red);
	background: rgba(106,23,16,.06);
	border-radius: 3px;
}

.standing-note__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--blood-red); margin-top: 2px; }
.standing-note p { font-size: .875rem; line-height: 1.65; color: var(--text); margin: 0; }

/* --- Feature cards (experience archives) --------------------------------
   Extends the homepage `.card` tile rather than duplicating it, so the
   archives read as the same component at a larger size. */

@media (min-width: 700px) { .card-grid--3up { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1080px) { .card-grid--3up { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.card--feature { aspect-ratio: 4 / 5; }

.card--feature .card__body {
	align-items: flex-start;
	text-align: left;
	padding: 0 20px 22px;
	gap: 6px;
}

.card--feature .card__title { font-size: 1.1875rem; }

.card__desc {
	font-family: var(--font-body);
	font-size: .8125rem;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted-on-dark);
}

.card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-family: var(--font-display);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}

.card__more .icon-inline { width: 11px; height: 11px; }

/* On the parchment sections the tile still needs a dark ground to sit on,
   which the scrim provides — but the border should warm up to match. */
.section--parchment .card { border-color: rgba(168,129,63,.45); }

/* --- Service cards ------------------------------------------------------- */

.service-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

@media (min-width: 700px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .service-grid--lg { grid-template-columns: repeat(2, 1fr); gap: 28px; } }

.service-card {
	background: var(--parchment-card);
	border: 1px solid rgba(36,28,20,.16);
	border-radius: 3px;
	overflow: hidden;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.section--dark .service-card {
	background: rgba(232,216,196,.06);
	border-color: rgba(201,154,74,.25);
}

.service-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.service-card__link { display: flex; flex-direction: column; height: 100%; }
.service-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(36,28,20,.06); }
.service-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.service-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }

.service-card__title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	letter-spacing: .02em;
}

.section--dark .service-card__title { color: var(--text-inverse); }
.service-card__desc { font-size: .875rem; line-height: 1.6; color: var(--text-muted); }
.section--dark .service-card__desc { color: var(--muted-on-dark); }

.service-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	font-family: var(--font-display);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brass);
}

/* --- Crew ---------------------------------------------------------------- */

.crew-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

@media (min-width: 700px) { .crew-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .crew-grid { grid-template-columns: repeat(4, 1fr); } }

.crew-card { text-align: center; }
.crew-card__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; background: rgba(36,28,20,.08); }
.crew-card__media img { width: 100%; height: 100%; object-fit: cover; }

.crew-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	background: linear-gradient(160deg, rgba(36,28,20,.10), rgba(36,28,20,.02));
}

.crew-card__skull { width: 42px; height: auto; opacity: .3; }
.crew-card__body { display: block; padding-top: 12px; }
.crew-card__name { font-family: var(--font-display); font-size: 1rem; letter-spacing: .03em; }
.crew-card__role { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.crew-empty { color: var(--text-muted); max-width: 52ch; }

.crew-single { padding-block: calc(var(--header-h) + 40px) 48px; }
.crew-single__layout { display: grid; gap: 26px; }

@media (min-width: 760px) {
	.crew-single__layout { grid-template-columns: 280px 1fr; gap: 44px; align-items: center; }
}

.crew-single__portrait { border-radius: 3px; overflow: hidden; aspect-ratio: 3 / 4; background: rgba(232,216,196,.08); }
.crew-single__portrait img { width: 100%; height: 100%; object-fit: cover; }
.crew-single__name { font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: var(--text-inverse); }
.crew-single__character { margin-top: 6px; color: var(--gold); font-size: .9375rem; }
.crew-single__lead { margin-top: 14px; color: var(--muted-on-dark); line-height: 1.65; max-width: 52ch; }

.crew-facts { display: grid; gap: 30px; margin-top: 34px; }
@media (min-width: 640px) { .crew-facts { grid-template-columns: repeat(2, 1fr); } }
.crew-facts h2 { font-size: 1.0625rem; margin-bottom: 12px; }

.tick-list { display: flex; flex-direction: column; gap: 9px; }
.tick-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--text-muted); }
.tick-list__icon { width: 15px; height: 15px; color: var(--brass); flex-shrink: 0; margin-top: 3px; }

/* --- FAQ accordion ------------------------------------------------------- */

.faq__heading { font-size: 1.5rem; margin-bottom: 20px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }

.faq__details {
	border: 1px solid rgba(36,28,20,.18);
	border-radius: 3px;
	background: rgba(250,246,238,.55);
	overflow: hidden;
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--text);
	list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }
.faq__caret { width: 14px; height: 14px; flex-shrink: 0; color: var(--brass); transition: transform var(--transition-fast); }
.faq__details[open] .faq__caret { transform: rotate(180deg); }
.faq__details[open] .faq__question { border-bottom: 1px solid rgba(36,28,20,.12); }
.faq__answer { padding: 14px 18px 17px; }
.faq__answer p { font-size: .875rem; line-height: 1.7; color: var(--text-muted); }

/* --- Gallery ------------------------------------------------------------- */

.gallery__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.gallery__filter {
	padding: 8px 15px;
	border: 1px solid rgba(36,28,20,.24);
	border-radius: 2px;
	font-family: var(--font-display);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.gallery__filter:hover { border-color: var(--brass); color: var(--text); }
.gallery__filter.is-active { background: var(--blood-red); border-color: var(--blood-red); color: var(--text-inverse); }

.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.gallery__item.is-hidden { display: none; }

.gallery__open {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(36,28,20,.08);
}

.gallery__open img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-fast); }
.gallery__open:hover img { transform: scale(1.05); }

.gallery__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10,15,20,.35);
	color: var(--parchment-light);
}

.gallery__play svg { width: 34px; height: 34px; }
.gallery-empty { color: var(--text-muted); padding: 22px 0; }

/* --- Lightbox ------------------------------------------------------------ */

.lightbox { position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(6,10,14,.92); }

.lightbox__panel {
	position: relative;
	z-index: 1;
	max-width: min(1100px, 92vw);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lightbox__stage img,
.lightbox__stage iframe {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: 3px;
	margin-inline: auto;
}

.lightbox__stage iframe { width: min(960px, 88vw); aspect-ratio: 16 / 9; height: auto; border: 0; }
.lightbox__caption { text-align: center; color: var(--muted-on-dark); font-size: .875rem; }

.lightbox__close {
	position: absolute;
	top: -42px; right: 0;
	color: var(--parchment-light);
	padding: 6px;
}

.lightbox__close svg { width: 24px; height: 24px; }

/* --- CTA band ------------------------------------------------------------ */

.cta-band { --section-pad-top: 54px; --section-pad-bottom: 54px; }
.cta-band__inner { text-align: center; }
.cta-band__heading { font-size: clamp(1.5rem, 2.8vw, 2.125rem); color: var(--text-inverse); }
.cta-band__sub { margin: 10px auto 0; max-width: 46ch; color: var(--muted-on-dark); }

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 24px;
}

/* --- Booking page -------------------------------------------------------- */

.booking { display: grid; gap: 34px; }

@media (min-width: 1000px) {
	.booking { grid-template-columns: 1.35fr .8fr; gap: 46px; align-items: start; }
}

.booking__panel { max-width: none; }
.booking__form-title { font-family: var(--font-display); font-size: 1.375rem; margin-bottom: 18px; }

/* Muted brown on the parchment panel measures ~3.2:1 — under AA for text this
   small. The labels use full-strength ink instead (~7.6:1). */
.booking__form .form-field label,
.form-fieldset legend {
	display: block;
	margin-bottom: 5px;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-family: var(--font-display);
	color: var(--text);
}

.booking__form .req { color: var(--blood-red); }

.form-fieldset { border: 0; padding: 0; margin-bottom: 10px; }

.form-fieldset legend { padding: 0; margin-bottom: 8px; }

.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--text); }
.checkbox input { width: 15px; height: 15px; accent-color: var(--blood-red); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.booking__success { text-align: center; padding: 26px 8px; }
.booking__success h2 { font-size: 1.5rem; margin-bottom: 10px; }
.booking__success p { color: var(--text-muted); max-width: 40ch; margin-inline: auto; }

.booking__aside-title { font-size: 1.125rem; margin-bottom: 14px; }
.booking__contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.booking__contact a { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: .9375rem; }
.booking__contact a:hover { color: var(--blood-red); }
.booking__contact .icon-inline { width: 16px; height: 16px; color: var(--brass); }
.booking__note { margin-bottom: 28px; }
.booking__note h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 12px; }

/* --- Search + 404 -------------------------------------------------------- */

.search-results { display: flex; flex-direction: column; gap: 24px; }
.search-result { padding-bottom: 22px; border-bottom: 1px solid rgba(36,28,20,.14); }
.search-result__title { font-size: 1.125rem; }
.search-result__title a:hover { color: var(--blood-red); }

.search-result__type {
	margin-top: 3px;
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-family: var(--font-display);
	color: var(--brass);
}

.search-result__excerpt { margin-top: 8px; font-size: .875rem; color: var(--text-muted); line-height: 1.6; }
.search-empty h2 { font-size: 1.375rem; margin-bottom: 12px; }
.search-empty p { color: var(--text-muted); max-width: 56ch; line-height: 1.7; }

.error-404 { --section-pad-top: calc(var(--header-h) + 56px); --section-pad-bottom: 72px; }
.error-404__inner { text-align: center; max-width: 620px; margin-inline: auto; }
.error-404__compass { width: 68px; height: auto; margin: 0 auto 22px; opacity: .8; }
.error-404__title { font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--text-inverse); }
.error-404__lead { margin: 14px auto 0; max-width: 46ch; color: var(--muted-on-dark); line-height: 1.65; }

.error-404__prompt {
	margin-top: 30px;
	font-family: var(--font-display);
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
}

.error-404__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
}

.error-404__links a { display: inline-flex; align-items: center; gap: 7px; color: var(--text-inverse); font-size: .9375rem; }
.error-404__links a:hover { color: var(--gold-bright); }
.error-404__links .icon-inline { width: 13px; height: 13px; color: var(--brass); }

.error-404__search { display: flex; gap: 10px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

.error-404__search input {
	flex: 1 1 240px;
	max-width: 320px;
	background: rgba(232,216,196,.08);
	border: 1px solid rgba(201,154,74,.35);
	border-radius: 2px;
	padding: 12px 14px;
	color: var(--text-inverse);
	font-size: .875rem;
}

.error-404__search input::placeholder { color: rgba(169,155,133,.8); }

/* --- Pagination ---------------------------------------------------------- */

.pagination { margin-top: 34px; }

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	font-family: var(--font-display);
	font-size: .875rem;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid rgba(36,28,20,.22);
	border-radius: 2px;
	color: var(--text-muted);
}

.nav-links .page-numbers.current { background: var(--blood-red); border-color: var(--blood-red); color: var(--text-inverse); }
.nav-links a.page-numbers:hover { border-color: var(--brass); color: var(--text); }

/* ==========================================================================
   17. Header logo clearance
   --------------------------------------------------------------------------
   From 1080px the header's badge logo is absolutely positioned and hangs to
   ~195px down the page, well past the 108px header band. Every interior page
   header has to start below that or its first line renders behind the skull.
   These live at the end of the sheet deliberately: .crew-single and
   .error-404 set their own padding later in the file, and at equal
   specificity the last declaration wins.
   ========================================================================== */

@media (min-width: 1080px) {
	.page-hero { padding-block: 232px 54px; }
	.page-hero--compact { padding-block: 216px 40px; }
	.crew-single { padding-block: 232px 48px; }
	.error-404 { --section-pad-top: 236px; }
}

/* ==========================================================================
   18. Navigation — dropdowns and drawer accordions
   --------------------------------------------------------------------------
   The header previously rendered a flat list with a decorative caret and no
   submenu, which left every CPT single unreachable from the menu. These
   styles cover both the real WordPress menu and the fallback tree; the markup
   is identical either way (see inc/navigation.php).
   ========================================================================== */

.primary-nav__list { display: flex; align-items: center; gap: 30px; }
.primary-nav .menu-item { position: relative; display: flex; align-items: center; }

/* The caret is a real button so touch and keyboard can open a submenu whose
   parent link still needs to navigate to the section landing. */
.primary-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 2px 6px 5px;
	color: var(--text-inverse);
	line-height: 1;
}

.primary-nav__toggle .icon-caret { transition: transform var(--transition-fast); }
.primary-nav .menu-item-has-children:hover > .primary-nav__toggle .icon-caret,
.primary-nav .menu-item-has-children.is-open > .primary-nav__toggle .icon-caret { transform: rotate(180deg); }

.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	/* Centred under the parent's *word*, not the whole item box: the box also
	   contains the caret button, so centring on it would sit ~8px right of the
	   label. Half the caret width is subtracted to correct for that. */
	--nav-caret-w: 16px;
	left: 50%;
	z-index: 40;
	min-width: 232px;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 8px 0;
	margin-top: 10px;
	background: rgba(8,12,17,.98);
	border: 1px solid rgba(201,154,74,.3);
	border-radius: 3px;
	box-shadow: 0 18px 38px rgba(0,0,0,.55);
	opacity: 0;
	visibility: hidden;
	transform: translate(calc(-50% - var(--nav-caret-w) / 2 + var(--nav-shift, 0px)), -6px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

/* A transparent bridge over the 10px gap, so the pointer can travel from the
   parent down to the submenu without it closing underneath.

   The bridge belongs to the SUBMENU, not to the menu item. Hanging it off the
   item meant every parent — open or not — carried an invisible 260px-wide
   hit area. "About" is only 75px wide, so its bridge overlapped Contact's by
   144px, and because Contact comes later in the DOM it won the hit test:
   moving down from About into its own dropdown landed on Contact's bridge, so
   About closed and Contact opened instead.

   On the submenu, the bridge inherits `visibility: hidden` while closed, so a
   closed dropdown has no hit area at all and cannot steal the pointer. */
.primary-nav .sub-menu::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 12px;   /* the 10px gap, plus 2px of overlap so there is no seam */
}

.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(calc(-50% - var(--nav-caret-w) / 2 + var(--nav-shift, 0px)), 0);
}

/* Keyboard support without JS: focus anywhere in the item opens its submenu.
   Scoped to the no-JS case on purpose — once main.js adds .pfh-js-nav the
   toggle button owns open/closed state, and leaving :focus-within active
   would fight it: the button keeps DOM focus after a click or after Escape,
   which forced the submenu straight back open (and let two sit open at once).
   With JS, the button is a normal disclosure — Tab to it, Enter to open. */
html:not(.pfh-js-nav) .primary-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(calc(-50% - var(--nav-caret-w) / 2 + var(--nav-shift, 0px)), 0);
}

.primary-nav .sub-menu .menu-item { display: block; }

.primary-nav .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: .78125rem;
	letter-spacing: .06em;
	white-space: nowrap;
	color: var(--muted-on-dark);
}

.primary-nav .sub-menu a::after { display: none; }
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus-visible { color: var(--gold-bright); background: rgba(201,154,74,.1); }

/* Without JS there is nothing to measure the viewport, so the last item —
   the one most likely to overhang — is right-aligned instead of centred.
   With JS, pfh nudges any overhanging submenu back into view and this is
   overridden by --nav-shift. */
html:not(.pfh-js-nav) .primary-nav > ul > .menu-item:last-child .sub-menu {
	left: auto;
	right: 0;
	transform: translate(0, -6px);
}

html:not(.pfh-js-nav) .primary-nav > ul > .menu-item:last-child:hover .sub-menu,
html:not(.pfh-js-nav) .primary-nav > ul > .menu-item:last-child:focus-within .sub-menu {
	transform: translate(0, 0);
}

/* --- Mobile drawer accordions ------------------------------------------- */

.drawer-menu { display: flex; flex-direction: column; gap: 2px; }
.drawer-menu .menu-item { display: flex; flex-wrap: wrap; align-items: center; }

.drawer-menu > .menu-item > a {
	flex: 1;
	padding: 13px 0;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-inverse);
}

.drawer-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;   /* comfortable touch target */
	color: var(--gold);
}

.drawer-menu__toggle .icon-caret { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.drawer-menu .menu-item.is-open > .drawer-menu__toggle .icon-caret { transform: rotate(180deg); }

/* NOTE: the grid-template-rows 0fr -> 1fr reveal only collapses the FIRST
   child. A <ul> has one <li> per link, so the rest spilled into implicit auto
   rows and stayed visible while the accordion read as closed. Plain
   display toggling is correct here; the fade covers the lack of a height
   transition. */
.drawer-menu .sub-menu {
	flex-basis: 100%;
	display: none;
}

.drawer-menu .menu-item.is-open > .sub-menu {
	display: block;
	animation: pfh-submenu-in 180ms var(--ease) both;
}

@keyframes pfh-submenu-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.drawer-menu .sub-menu .menu-item { display: block; }

.drawer-menu .sub-menu a {
	display: block;
	padding: 10px 0 10px 16px;
	border-left: 1px solid rgba(201,154,74,.28);
	margin-left: 2px;
	font-size: .9375rem;
	color: var(--muted-on-dark);
}

.drawer-menu .sub-menu a:hover { color: var(--gold-bright); }