/*
Theme Name: PHWO
Theme URI: https://phwo.org
Description: Custom theme for Peace and Humanity Welfare Organization — a fast, accessible, brand-driven NGO theme. Colours are controlled from PHWO → Settings.
Author: PHWO
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: phwo
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--phwo-color-primary: #0D5C63;
	--phwo-color-accent: #E8A33D;
	--phwo-color-support: #2A9D8F;
	--phwo-color-ink: #14262B;
	--phwo-color-mist: #F5F8F8;

	--phwo-line: #dde5e6;
	--phwo-muted: #6b7a80;
	--phwo-radius: 12px;
	--phwo-gutter: 24px;

	/* One width scale for the whole site. Three values, no ad-hoc numbers.
	   page  — header, footer, hero, card grids
	   wide  — section heads, CTA blocks, feature cards
	   text  — prose and forms, roughly 72 characters per line */
	--phwo-page: 1280px;
	--phwo-wide: 1040px;
	--phwo-text: 760px;

	/* Column widths for .phwo-container, gutter included on both sides
	   because containers are border-box and carry their own padding.
	   Written as plain values on purpose: CSS requires whitespace around the
	   + inside calc(), minifiers strip it, and the whole declaration is then
	   dropped, letting the page run full width. */
	--phwo-col-page: 1280px;
	--phwo-col-wide: 1088px;
	--phwo-col-text: 808px;

	--phwo-container: var(--phwo-col-page);

	/* Self-hosted in assets/fonts.css. Source Serif 4 carries headings and
	   long-form reading; Inter carries interface text, labels and forms. */
	--phwo-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--phwo-font-head: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--phwo-font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--phwo-color-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--phwo-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--phwo-color-support);
}

h1, h2, h3, h4 {
	font-family: var(--phwo-font-head);
	line-height: 1.22;
	color: var(--phwo-color-ink);
	margin: 0 0 .5em;
	font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

p { margin: 0 0 1.1em; }

:focus-visible {
	outline: 3px solid var(--phwo-color-accent);
	outline-offset: 2px;
}

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

.phwo-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--phwo-color-accent);
	color: var(--phwo-color-ink);
	padding: 12px 20px;
	z-index: 999;
	font-weight: 700;
}

.phwo-skip:focus {
	left: 0;
}

.phwo-container {
	max-width: var(--phwo-container);
	margin: 0 auto;
	padding: 0 var(--phwo-gutter);
}

/* Document pages run as a single reading column. The modifier absorbs the
   gutter so the text measure itself stays exactly --phwo-text, and the page
   heading lines up with the body copy beneath it. */
.phwo-container.is-narrow {
	max-width: var(--phwo-col-text);
}

.phwo-container.is-wide {
	max-width: var(--phwo-col-wide);
}

.phwo-section {
	padding: clamp(48px, 7vw, 84px) 0;
}

.phwo-section-mist {
	background: var(--phwo-color-mist);
}

.phwo-section-head {
	max-width: var(--phwo-wide);
	margin: 0 0 40px;
}

.phwo-section-head p {
	color: var(--phwo-muted);
	font-size: 1.05rem;
	margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.phwo-cta {
	display: inline-block;
	padding: 14px 28px;
	background: var(--phwo-color-accent);
	color: var(--phwo-color-ink);
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: transform .15s, filter .15s;
	border: 2px solid var(--phwo-color-accent);
}

.phwo-cta:hover {
	filter: brightness(1.07);
	transform: translateY(-1px);
	color: var(--phwo-color-ink);
}

.phwo-cta-ghost {
	background: transparent;
	border-color: var(--phwo-color-primary);
	color: var(--phwo-color-primary);
}

.phwo-cta-ghost:hover {
	background: var(--phwo-color-primary);
	color: #fff;
	filter: none;
}

.phwo-cta-ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .65);
	color: #fff;
}

.phwo-cta-ghost-light:hover {
	background: #fff;
	color: var(--phwo-color-primary);
	filter: none;
}

.phwo-link-arrow {
	display: inline-block;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--phwo-color-accent);
	padding-bottom: 2px;
}

.phwo-link-arrow::after {
	content: " \2192";
}

/* ==========================================================================
   Top bar + header
   ========================================================================== */

.phwo-topbar {
	background: var(--phwo-color-ink);
	color: rgba(255, 255, 255, .8);
	font-size: .82rem;
}

.phwo-topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 40px;
	flex-wrap: wrap;
}

.phwo-topbar a {
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
}

.phwo-topbar a:hover {
	color: var(--phwo-color-accent);
}

.phwo-topbar-contact {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.phwo-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--phwo-line);
}

.phwo-header.is-stuck {
	box-shadow: 0 2px 18px rgba(20, 38, 43, .08);
}

.phwo-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 78px;
}

.phwo-logo {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	flex: none;
}

.phwo-logo-img {
	max-height: 58px;
	width: auto;
}

.phwo-wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.phwo-wordmark-mark {
	font-family: var(--phwo-font-head);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--phwo-color-primary);
	letter-spacing: .04em;
}

.phwo-wordmark-name {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--phwo-muted);
	max-width: 30ch;
}

.phwo-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-left: auto;
}

.phwo-nav-list {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.phwo-nav-list a {
	text-decoration: none;
	color: var(--phwo-color-ink);
	font-weight: 600;
	font-size: .96rem;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	display: block;
}

.phwo-nav-list a:hover,
.phwo-nav-list .current-menu-item > a {
	color: var(--phwo-color-primary);
	border-bottom-color: var(--phwo-color-accent);
}

.phwo-nav-list li {
	position: relative;
}

.phwo-nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--phwo-line);
	border-radius: 10px;
	padding: 8px;
	list-style: none;
	margin: 8px 0 0;
	box-shadow: 0 12px 32px rgba(20, 38, 43, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: .16s;
	z-index: 20;
}

.phwo-nav-list li:hover > .sub-menu,
.phwo-nav-list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.phwo-nav-list .sub-menu a {
	padding: 9px 12px;
	border-radius: 6px;
	border-bottom: 0;
	font-weight: 500;
}

.phwo-nav-list .sub-menu a:hover {
	background: var(--phwo-color-mist);
}

.phwo-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--phwo-line);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	padding: 11px 10px;
	flex-direction: column;
	justify-content: space-between;
}

.phwo-nav-toggle span {
	display: block;
	height: 2px;
	background: var(--phwo-color-ink);
	border-radius: 2px;
	transition: .2s;
}

.phwo-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.phwo-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.phwo-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.phwo-hero {
	position: relative;
	background: var(--phwo-color-primary);
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: clamp(72px, 12vw, 150px) 0;
}

.phwo-hero.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(13, 92, 99, .93) 0%, rgba(13, 92, 99, .74) 48%, rgba(20, 38, 43, .55) 100%);
}

.phwo-hero-inner {
	position: relative;
	max-width: var(--phwo-wide);
}

.phwo-hero-eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .78rem;
	font-weight: 700;
	color: var(--phwo-color-accent);
	margin-bottom: 14px;
}

.phwo-hero h1 {
	color: #fff;
	margin-bottom: .45em;
}

.phwo-hero-text {
	font-size: clamp(1.03rem, 1.5vw, 1.2rem);
	color: rgba(255, 255, 255, .92);
	max-width: var(--phwo-text);
}

.phwo-hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.phwo-hero-actions .phwo-cta-ghost {
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

.phwo-hero-actions .phwo-cta-ghost:hover {
	background: #fff;
	color: var(--phwo-color-primary);
}

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */

.phwo-page-header {
	background: var(--phwo-color-mist);
	border-bottom: 1px solid var(--phwo-line);
	padding: clamp(34px, 5vw, 60px) 0;
}

.phwo-page-header h1 {
	margin: 0;
	max-width: var(--phwo-wide);
}

.phwo-page-sub {
	margin: 12px 0 0;
	color: var(--phwo-muted);
	font-size: 1.05rem;
	max-width: var(--phwo-text);
}

.phwo-breadcrumb {
	font-size: .84rem;
	color: var(--phwo-muted);
	margin-bottom: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.phwo-breadcrumb a {
	text-decoration: none;
}

/* ==========================================================================
   Founding statement
   ========================================================================== */

.phwo-founding-card {
	background: #fff;
	border: 1px solid var(--phwo-line);
	border-left: 5px solid var(--phwo-color-accent);
	border-radius: var(--phwo-radius);
	padding: clamp(26px, 4vw, 42px);
	max-width: var(--phwo-wide);
}

.phwo-founding-card h2 {
	margin-top: 0;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.phwo-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 26px;
}

.phwo-card {
	background: #fff;
	border: 1px solid var(--phwo-line);
	border-radius: var(--phwo-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s, box-shadow .18s;
}

.phwo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(20, 38, 43, .1);
}

.phwo-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--phwo-color-mist);
}

.phwo-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phwo-card-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, rgba(42, 157, 143, .22), transparent 60%),
		linear-gradient(135deg, var(--phwo-color-mist), #e6eeee);
}

.phwo-card-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.phwo-card-body h2,
.phwo-card-body h3 {
	font-size: 1.22rem;
	margin: 0;
}

.phwo-card-body h2 a,
.phwo-card-body h3 a {
	text-decoration: none;
	color: var(--phwo-color-ink);
}

.phwo-card-body h2 a:hover,
.phwo-card-body h3 a:hover {
	color: var(--phwo-color-primary);
}

.phwo-card-body p {
	color: var(--phwo-muted);
	font-size: .95rem;
	margin: 0;
}

.phwo-card-date {
	font-size: .8rem !important;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.phwo-badge {
	display: inline-block;
	align-self: flex-start;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 4px 11px;
	border-radius: 999px;
	background: #e8ecec;
	color: var(--phwo-muted);
}

.phwo-badge-planned {
	background: #eef3f3;
	color: #4d6167;
}

.phwo-badge-active {
	background: #d6f2ee;
	color: #10635a;
}

.phwo-badge-urgent {
	background: #fdecea;
	color: #a52f22;
}

.phwo-status-note {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--phwo-color-mist);
	border-radius: var(--phwo-radius);
	padding: 20px 24px;
	margin-bottom: 34px;
	flex-wrap: wrap;
}

.phwo-status-note p {
	margin: 0;
	font-size: .95rem;
	color: #46565c;
	flex: 1;
	min-width: 240px;
}

/* ==========================================================================
   Steps
   ========================================================================== */

.phwo-steps {
	max-width: var(--phwo-wide);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
}

.phwo-step-card {
	border-top: 3px solid var(--phwo-color-support);
	padding-top: 20px;
}

.phwo-step-num {
	font-family: var(--phwo-font-head);
	font-size: 2rem;
	font-weight: 700;
	color: var(--phwo-color-accent);
	display: block;
	line-height: 1;
	margin-bottom: 8px;
}

.phwo-step-card h3 {
	margin-bottom: .4em;
}

.phwo-step-card p {
	color: var(--phwo-muted);
	font-size: .96rem;
	margin: 0;
}

/* ==========================================================================
   CTA bands
   ========================================================================== */

.phwo-cta-band {
	background: var(--phwo-color-primary);
	color: #fff;
	padding: clamp(48px, 6vw, 78px) 0;
	text-align: center;
}

.phwo-cta-band h2 {
	color: #fff;
	margin-top: 0;
}

.phwo-cta-band p {
	max-width: var(--phwo-text);
	margin: 0 auto 26px;
	color: rgba(255, 255, 255, .9);
}

.phwo-cta-band-actions,
.phwo-inline-cta-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.phwo-inline-cta {
	margin-top: 46px;
	background: var(--phwo-color-mist);
	border-radius: var(--phwo-radius);
	padding: clamp(26px, 4vw, 40px);
	text-align: center;
}

.phwo-inline-cta h2 {
	margin-top: 0;
}

.phwo-inline-cta p {
	color: var(--phwo-muted);
	max-width: var(--phwo-text);
	margin: 0 auto 22px;
}

/* ==========================================================================
   Prose
   ========================================================================== */

.phwo-prose {
	/* Width is a container concern; .is-narrow supplies it. */
}

.phwo-prose h2 {
	margin-top: 1.8em;
}

.phwo-prose h3 {
	margin-top: 1.5em;
}

.phwo-prose ul,
.phwo-prose ol {
	padding-left: 1.3em;
	margin: 0 0 1.2em;
}

.phwo-prose li {
	margin-bottom: .5em;
}

.phwo-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--phwo-color-accent);
	color: #3d4d53;
	font-style: italic;
}

.phwo-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	font-size: .95rem;
}

.phwo-prose th,
.phwo-prose td {
	border: 1px solid var(--phwo-line);
	padding: 11px 14px;
	text-align: left;
}

.phwo-prose th {
	background: var(--phwo-color-mist);
}

.phwo-featured {
	margin: 0 0 2em;
}

.phwo-featured img {
	border-radius: var(--phwo-radius);
}

.phwo-meta {
	color: var(--phwo-muted);
	font-size: .9rem;
}

.phwo-empty {
	color: var(--phwo-muted);
}

/* ==========================================================================
   Campaign layout
   ========================================================================== */

.phwo-campaign-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 46px;
	align-items: start;
}

.phwo-campaign-side {
	position: sticky;
	top: 110px;
	background: var(--phwo-color-mist);
	border-radius: var(--phwo-radius);
	padding: 24px;
}

.phwo-campaign-side .phwo-cta {
	width: 100%;
	text-align: center;
	margin-top: 8px;
}

.phwo-campaign-deadline {
	font-size: .9rem;
	color: var(--phwo-muted);
}

/* ==========================================================================
   Pagination / post nav / search
   ========================================================================== */

.pagination,
.phwo-postnav {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 44px;
	justify-content: space-between;
}

.pagination {
	justify-content: center;
}

.page-numbers {
	display: inline-block;
	padding: 9px 15px;
	border: 1px solid var(--phwo-line);
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}

.page-numbers.current {
	background: var(--phwo-color-primary);
	border-color: var(--phwo-color-primary);
	color: #fff;
}

.phwo-search {
	display: flex;
	gap: 10px;
	max-width: 480px;
	margin-top: 20px;
}

.phwo-search input {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--phwo-line);
	border-radius: 8px;
	font: inherit;
	font-size: 1rem;
}

.phwo-search button {
	padding: 12px 22px;
	background: var(--phwo-color-primary);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.phwo-footer {
	background: var(--phwo-color-ink);
	color: rgba(255, 255, 255, .76);
	padding: clamp(48px, 6vw, 76px) 0 28px;
	font-size: .94rem;
}

.phwo-footer h2 {
	color: #fff;
	font-size: 1rem;
	font-family: var(--phwo-font);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 18px;
}

.phwo-footer a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}

.phwo-footer a:hover {
	color: var(--phwo-color-accent);
}

.phwo-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.phwo-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 44px;
}

.phwo-footer .phwo-wordmark-mark {
	color: #fff;
}

.phwo-footer .phwo-wordmark-name {
	color: rgba(255, 255, 255, .6);
}

.phwo-footer-tagline {
	font-family: var(--phwo-font-head);
	font-size: 1.1rem;
	color: #fff;
	margin-top: 18px;
}

.phwo-footer-nature {
	font-size: .88rem;
	color: rgba(255, 255, 255, .6);
}

.phwo-social {
	display: flex !important;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px !important;
	font-size: .88rem;
}

.phwo-footer address {
	font-style: normal;
	line-height: 1.7;
	margin-bottom: 12px;
}

.phwo-footer-hours {
	color: rgba(255, 255, 255, .6);
	font-size: .88rem;
}

.phwo-cta-footer {
	margin-top: 10px;
}

.phwo-footer-bar {
	margin-top: 46px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	font-size: .84rem;
	color: rgba(255, 255, 255, .58);
}

.phwo-footer-bar p {
	margin: 0 0 6px;
}

.phwo-reg,
.phwo-image-note {
	max-width: var(--phwo-text);
	line-height: 1.6;
}

.phwo-legal-menu {
	display: flex !important;
	gap: 20px;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {

	.phwo-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}

	.phwo-campaign-layout {
		grid-template-columns: 1fr;
	}

	.phwo-campaign-side {
		position: static;
	}
}

@media (max-width: 860px) {

	.phwo-nav-toggle {
		display: flex;
	}

	.phwo-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 86vw);
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 90px 26px 32px;
		transform: translateX(100%);
		transition: transform .24s ease;
		box-shadow: -12px 0 40px rgba(20, 38, 43, .16);
		overflow-y: auto;
		z-index: 90;
	}

	.phwo-nav.is-open {
		transform: none;
	}

	.phwo-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.phwo-nav-list > li {
		border-bottom: 1px solid var(--phwo-line);
	}

	.phwo-nav-list a {
		padding: 14px 0;
		border-bottom: 0;
		font-size: 1.02rem;
	}

	.phwo-nav-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 8px 14px;
		margin: 0;
	}

	.phwo-nav-actions {
		margin-top: 22px;
	}

	.phwo-nav-actions .phwo-cta {
		display: block;
		text-align: center;
	}

	.phwo-nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(20, 38, 43, .45);
		z-index: 80;
		border: 0;
		cursor: pointer;
	}

	body.phwo-nav-open {
		overflow: hidden;
	}
}

@media (max-width: 640px) {

	body {
		font-size: 16px;
	}

	.phwo-topbar-inner {
		justify-content: center;
		text-align: center;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.phwo-footer-grid {
		grid-template-columns: 1fr;
	}

	.phwo-hero-actions .phwo-cta,
	.phwo-cta-band-actions .phwo-cta {
		flex: 1 1 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {

	.phwo-topbar,
	.phwo-header,
	.phwo-footer,
	.phwo-cta-band,
	.phwo-inline-cta {
		display: none;
	}
}

/* ==========================================================================
   Article furniture — byline, advisory, table of contents, author box
   ========================================================================== */

.phwo-byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--phwo-line);
}

.phwo-byline-author {
	display: block;
	font-weight: 700;
	font-size: 1rem;
}

.phwo-byline-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	font-size: .88rem;
	color: var(--phwo-muted);
	margin-top: 2px;
}

.phwo-byline .phwo-badge {
	text-decoration: none;
	background: var(--phwo-color-mist);
	color: var(--phwo-color-primary);
}

.phwo-byline .phwo-badge:hover {
	background: var(--phwo-color-primary);
	color: #fff;
}

/* Advisory note on health and money articles. */

.phwo-advisory {
	background: #fff8ec;
	border-left: 4px solid var(--phwo-color-accent);
	border-radius: 10px;
	padding: 20px 24px;
	margin-bottom: 30px;
}

.phwo-advisory h2 {
	font-family: var(--phwo-font);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin: 0 0 8px;
	color: #8a5a11;
}

.phwo-advisory p {
	margin: 0;
	font-size: .95rem;
	color: #5c4a2c;
}

/* Table of contents. */

.phwo-toc {
	background: var(--phwo-color-mist);
	border-radius: 12px;
	padding: 22px 26px;
	margin-bottom: 34px;
}

.phwo-toc h2 {
	font-family: var(--phwo-font);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--phwo-muted);
	margin: 0 0 12px;
}

.phwo-toc ol {
	margin: 0;
	padding-left: 20px;
	display: grid;
	gap: 7px;
	font-size: .96rem;
}

.phwo-toc a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.phwo-toc a:hover {
	border-bottom-color: var(--phwo-color-accent);
}

/* Links inside article prose get a visible underline so they are
   obviously links, which matters for the external citations. */

.phwo-prose a {
	text-decoration: underline;
	text-decoration-color: rgba(13, 92, 99, .35);
	text-underline-offset: 3px;
}

.phwo-prose a:hover {
	text-decoration-color: currentColor;
}

/* Author / provenance box. */

.phwo-about-article {
	margin-top: 46px;
	padding: 26px 28px;
	border: 1px solid var(--phwo-line);
	border-top: 3px solid var(--phwo-color-primary);
	border-radius: 10px;
	background: #fff;
}

.phwo-about-article h2 {
	font-family: var(--phwo-font);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--phwo-muted);
	margin: 0 0 12px;
}

.phwo-about-article p {
	font-size: .95rem;
	color: #3d4d53;
}

.phwo-about-links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 0 !important;
	font-weight: 600;
	font-size: .92rem !important;
}

@media (max-width: 640px) {

	.phwo-byline {
		align-items: flex-start;
	}

	.phwo-toc,
	.phwo-about-article,
	.phwo-advisory {
		padding: 18px 20px;
	}
}

/* ==========================================================================
   Homepage — "The Register"

   Deliberately not the banded landing-page pattern used elsewhere: one light
   ground throughout, teal reserved for rules, numerals and labels, gold used
   only for the single donate action. The eight aims are a numbered register
   rather than a card grid, which also means the page does not depend on
   having a photograph for every programme.
   ========================================================================== */

/* The hero shares the page column rather than running full bleed, so its
   left edge lines up with every other section on the site. */
.phwo-reg-hero {
	max-width: var(--phwo-col-page);
	margin-inline: auto;
	padding-inline: var(--phwo-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: stretch;
	border-bottom: 1px solid var(--phwo-line);
}

.phwo-reg-hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(44px, 6vw, 88px) 0;
	max-width: none;
	margin-left: 0;
}

.phwo-reg-eyebrow {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--phwo-color-primary);
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--phwo-line);
}

.phwo-reg-hero h1 {
	font-size: clamp(2.1rem, 3.8vw, 3.35rem);
	line-height: 1.08;
	letter-spacing: -.015em;
	margin: 0 0 22px;
	text-wrap: balance;
}

.phwo-reg-hero-lede {
	font-size: clamp(1.02rem, 1.3vw, 1.16rem);
	color: #46565c;
	max-width: 46ch;
	margin-bottom: 32px;
}

.phwo-reg-hero-actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

/* The one gold action on the page. */
.phwo-reg-btn {
	display: inline-block;
	background: var(--phwo-color-accent);
	color: var(--phwo-color-ink);
	padding: 15px 30px;
	border-radius: 2px;
	font-weight: 700;
	text-decoration: none;
	font-size: 1rem;
	transition: filter .15s;
}

.phwo-reg-btn:hover {
	filter: brightness(1.06);
	color: var(--phwo-color-ink);
}

.phwo-reg-btn-text {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--phwo-color-primary);
	padding-bottom: 3px;
}

.phwo-reg-hero-media {
	position: relative;
	min-height: clamp(300px, 38vw, 540px);
	background: var(--phwo-color-mist);
	overflow: hidden;
	border-radius: 4px;
	margin-block: clamp(28px, 4vw, 56px);
}

.phwo-reg-hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phwo-reg-hero-placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 70% 30%, rgba(42, 157, 143, .16), transparent 62%),
		linear-gradient(160deg, var(--phwo-color-mist), #e4ecec);
}

/* ---------- Layout: reading column with a section rail ---------- */

.phwo-reg-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(32px, 6vw, 84px);
	max-width: var(--phwo-page);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) var(--phwo-gutter) clamp(56px, 7vw, 96px);
}

.phwo-reg-rail {
	position: sticky;
	top: 118px;
	align-self: start;
	font-size: .9rem;
}

.phwo-reg-rail-title {
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--phwo-muted);
	margin: 0 0 14px;
}

.phwo-reg-rail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	border-left: 1px solid var(--phwo-line);
}

.phwo-reg-rail a {
	display: block;
	padding: 7px 0 7px 16px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	text-decoration: none;
	color: var(--phwo-muted);
	transition: color .15s, border-color .15s;
}

.phwo-reg-rail a:hover,
.phwo-reg-rail a.is-current {
	color: var(--phwo-color-primary);
	border-left-color: var(--phwo-color-accent);
	font-weight: 600;
}

.phwo-reg-body {
	max-width: 780px;
}

/* ---------- Sections ---------- */

.phwo-reg-section {
	padding-bottom: clamp(46px, 6vw, 74px);
	margin-bottom: clamp(46px, 6vw, 74px);
	border-bottom: 1px solid var(--phwo-line);
	scroll-margin-top: 130px;
}

.phwo-reg-section.phwo-reg-last {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.phwo-reg-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--phwo-color-support);
	margin: 0 0 12px;
}

.phwo-reg-section h2 {
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	line-height: 1.18;
	letter-spacing: -.01em;
	margin: 0 0 18px;
	max-width: 24ch;
}

.phwo-reg-standfirst {
	font-size: 1.06rem;
	color: #46565c;
	max-width: 62ch;
	margin-bottom: 30px;
}

.phwo-reg-prose p {
	max-width: 66ch;
	color: #35464c;
}

.phwo-reg-more a,
.phwo-reg-note a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--phwo-color-accent);
	padding-bottom: 2px;
}

/* ---------- Facts strip ---------- */

.phwo-reg-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--phwo-line);
	border: 1px solid var(--phwo-line);
	margin: 34px 0 0;
}

.phwo-reg-facts > div {
	background: #fff;
	padding: 16px 18px;
}

.phwo-reg-facts dt {
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--phwo-muted);
	margin-bottom: 6px;
}

.phwo-reg-facts dd {
	margin: 0;
	font-family: var(--phwo-font-head);
	font-size: 1.12rem;
	font-weight: 700;
}

.phwo-reg-facts dd a {
	text-decoration: none;
	border-bottom: 1px solid var(--phwo-color-accent);
}

/* ---------- The register of aims ---------- */

.phwo-reg-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--phwo-color-primary);
}

.phwo-reg-list > li {
	border-bottom: 1px solid var(--phwo-line);
}

.phwo-reg-list a {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 0 20px;
	align-items: baseline;
	padding: 20px 8px 20px 0;
	text-decoration: none;
	color: inherit;
	transition: background .15s, padding-left .15s;
}

.phwo-reg-list a:hover {
	background: var(--phwo-color-mist);
	padding-left: 10px;
}

.phwo-reg-num {
	font-family: var(--phwo-font-head);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--phwo-color-accent);
	letter-spacing: .04em;
}

.phwo-reg-entry-title {
	display: block;
	font-family: var(--phwo-font-head);
	font-size: 1.28rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 5px;
}

.phwo-reg-list a:hover .phwo-reg-entry-title {
	color: var(--phwo-color-primary);
}

.phwo-reg-entry-desc {
	display: block;
	font-size: .95rem;
	color: var(--phwo-muted);
	max-width: 58ch;
}

.phwo-reg-entry-state {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--phwo-muted);
	white-space: nowrap;
	padding-top: 4px;
}

/* ---------- Definition list for the commitments ---------- */

.phwo-reg-defs {
	margin: 0 0 28px;
	border-top: 1px solid var(--phwo-line);
}

.phwo-reg-defs > div {
	display: grid;
	grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
	gap: 10px 32px;
	padding: 22px 0;
	border-bottom: 1px solid var(--phwo-line);
}

.phwo-reg-defs dt {
	font-family: var(--phwo-font-head);
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--phwo-color-primary);
}

.phwo-reg-defs dd {
	margin: 0;
	color: #46565c;
	font-size: .98rem;
}

/* ---------- Giving steps ---------- */

.phwo-reg-steps {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 2px;
}

.phwo-reg-steps > li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 16px 18px;
	background: var(--phwo-color-mist);
	font-size: .98rem;
	color: #46565c;
}

.phwo-reg-step-n {
	font-family: var(--phwo-font-head);
	font-weight: 700;
	color: var(--phwo-color-primary);
	font-size: 1.05rem;
	line-height: 1.5;
}

.phwo-reg-steps strong {
	color: var(--phwo-color-ink);
}

.phwo-reg-note {
	font-size: .95rem;
	color: var(--phwo-muted);
	border-left: 3px solid var(--phwo-color-accent);
	padding-left: 18px;
	max-width: 64ch;
}

.phwo-reg-appeals {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--phwo-line);
}

.phwo-reg-appeal h3 {
	font-size: 1.2rem;
	margin: 0 0 10px;
}

.phwo-reg-appeal h3 a {
	text-decoration: none;
}

/* ---------- Routes to take part ---------- */

.phwo-reg-routes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	background: var(--phwo-line);
	border: 1px solid var(--phwo-line);
}

.phwo-reg-routes a {
	display: block;
	background: #fff;
	padding: 22px 24px;
	height: 100%;
	text-decoration: none;
	color: inherit;
	transition: background .15s;
}

.phwo-reg-routes a:hover {
	background: var(--phwo-color-mist);
}

.phwo-reg-routes strong {
	display: block;
	font-family: var(--phwo-font-head);
	font-size: 1.16rem;
	margin-bottom: 6px;
	color: var(--phwo-color-primary);
}

.phwo-reg-routes span {
	display: block;
	font-size: .93rem;
	color: var(--phwo-muted);
}

/* Editorial block from the page editor keeps the reading measure. */

.phwo-reg-editorial > * {
	max-width: 68ch;
}

.phwo-reg-editorial h2 {
	max-width: 24ch;
}

.phwo-reg-editorial blockquote {
	border-left: 3px solid var(--phwo-color-accent);
	padding-left: 20px;
	margin-left: 0;
	font-style: italic;
	color: #35464c;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

	.phwo-reg-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.phwo-reg-rail {
		display: none;
	}

	.phwo-reg-body {
		max-width: none;
	}
}

@media (max-width: 860px) {

	.phwo-reg-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.phwo-reg-hero-text {
		margin-left: 0;
		max-width: none;
		order: 2;
	}

	.phwo-reg-hero-media {
		order: 1;
		min-height: 280px;
	}
}

@media (max-width: 620px) {

	.phwo-reg-list a {
		grid-template-columns: 34px minmax(0, 1fr);
		row-gap: 8px;
	}

	.phwo-reg-entry-state {
		grid-column: 2;
		padding-top: 0;
	}

	.phwo-reg-defs > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}
}

/* ==========================================================================
   Inner pages in the register language

   The old coloured page banner is replaced by a document masthead, and
   archives use the same hairline register as the homepage instead of cards.
   ========================================================================== */

.phwo-page-head {
	padding: clamp(30px, 4.5vw, 54px) 0 clamp(26px, 3.5vw, 40px);
	border-bottom: 1px solid var(--phwo-line);
	background: #fff;
}

.phwo-crumbs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: .8rem;
	color: var(--phwo-muted);
	margin-bottom: 18px;
}

.phwo-crumbs a {
	text-decoration: none;
}

.phwo-crumbs a:hover {
	text-decoration: underline;
}

.phwo-crumbs [aria-current="page"] {
	color: var(--phwo-color-ink);
}

.phwo-page-head h1 {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: -.015em;
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}

.phwo-page-standfirst {
	margin: 16px 0 0;
	font-size: 1.05rem;
	color: #46565c;
	max-width: 64ch;
}

/* Register on archives: no numerals, a date in their place. */

.phwo-reg-list.is-plain {
	border-top-color: var(--phwo-color-primary);
}

.phwo-reg-date {
	font-family: var(--phwo-font);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--phwo-muted);
	white-space: nowrap;
}

.phwo-reg-list.is-plain a {
	grid-template-columns: 96px minmax(0, 1fr) auto;
}

.phwo-reg-note-spaced {
	margin-top: 36px;
}

.phwo-reg-tail {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--phwo-line);
}

/* Document pages: tighten the rhythm of long policy and about copy. */

.phwo-doc h2 {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	margin-top: 2em;
	padding-top: .6em;
	border-top: 1px solid var(--phwo-line);
	scroll-margin-top: 130px;
}

.phwo-doc h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.phwo-doc h3 {
	font-size: 1.14rem;
	margin-top: 1.7em;
}

.phwo-doc ul,
.phwo-doc ol {
	padding-left: 1.15em;
}

.phwo-doc li {
	margin-bottom: .55em;
}

.phwo-doc blockquote {
	border-left: 3px solid var(--phwo-color-accent);
	margin-left: 0;
	padding-left: 20px;
	font-style: italic;
	color: #35464c;
}

.phwo-doc .phwo-lede {
	font-size: 1.1rem;
	color: #35464c;
}

/* Pagination in the register language: no filled pills. */

.pagination {
	margin-top: 40px;
	justify-content: flex-start;
	gap: 8px;
}

.page-numbers {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 6px 10px;
	font-weight: 600;
	color: var(--phwo-muted);
}

.page-numbers:hover {
	color: var(--phwo-color-primary);
	border-bottom-color: var(--phwo-line);
}

.page-numbers.current {
	background: transparent;
	color: var(--phwo-color-ink);
	border-bottom-color: var(--phwo-color-accent);
}

@media (max-width: 620px) {

	.phwo-reg-list.is-plain a {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}

	.phwo-reg-list.is-plain .phwo-reg-date {
		order: -1;
	}
}

/* ==========================================================================
   Width guarantee

   Plugin components render inside page content, so they must respect the
   same scale as the theme rather than running to the full viewport. Nothing
   below introduces a new number: every value comes from the three tokens.
   ========================================================================== */

.phwo-zakat {
	max-width: var(--phwo-wide, 1040px);
	margin-inline: auto;
}

.phwo-faq,
.phwo-complaints,
.phwo-form,
.phwo-public-form,
.phwo-instructions,
.phwo-thankyou,
.phwo-donor-login,
.phwo-soon {
	max-width: var(--phwo-text, 760px);
	margin-inline: auto;
}

.phwo-donor-dashboard {
	max-width: var(--phwo-wide, 1040px);
	margin-inline: auto;
}

/* The newsletter band sits inside its own wide container in the footer. */
.phwo-newsletter {
	max-width: var(--phwo-wide, 1040px);
	margin-inline: auto;
}

/* Nothing should ever push the page sideways. */
body {
	overflow-x: hidden;
}

.phwo-doc table,
.phwo-prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ==========================================================================
   Alignment guarantee

   A heading and the copy beneath it must share one left edge. On railed
   pages the masthead borrows the same grid as the body so the title sits
   over the reading column, not over the rail.
   ========================================================================== */

.phwo-page-head.is-railed > .phwo-container {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(32px, 6vw, 84px);
}

.phwo-page-head.is-railed > .phwo-container > * {
	grid-column: 2;
	max-width: 780px;
}

/* The newsletter band now shares the footer's full width. */
.phwo-newsletter {
	max-width: none;
}

/* ==========================================================================
   Section index — the other pages in this part of the site
   ========================================================================== */

.phwo-section-index {
	margin-top: 56px;
	padding-top: 30px;
	border-top: 1px solid var(--phwo-line);
}

.phwo-section-index ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--phwo-line);
	border: 1px solid var(--phwo-line);
}

.phwo-section-index a {
	display: block;
	height: 100%;
	background: #fff;
	padding: 18px 20px;
	text-decoration: none;
	color: inherit;
	transition: background .15s;
}

.phwo-section-index a:hover {
	background: var(--phwo-color-mist);
}

.phwo-section-index strong {
	display: block;
	font-family: var(--phwo-font-head);
	font-size: 1.08rem;
	color: var(--phwo-color-primary);
	margin-bottom: 5px;
	line-height: 1.25;
}

.phwo-section-index span {
	display: block;
	font-size: .9rem;
	color: var(--phwo-muted);
	line-height: 1.5;
}

@media (max-width: 1024px) {

	.phwo-page-head.is-railed > .phwo-container {
		display: block;
	}

	.phwo-page-head.is-railed > .phwo-container > * {
		max-width: none;
	}
}

/* ==========================================================================
   Mobile hardening

   Everything below exists because a phone is the primary device for most of
   this audience. Nothing here changes the desktop layout.
   ========================================================================== */

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

/* Long URLs, IBANs and unbroken strings must not push the page sideways. */
.phwo-prose,
.phwo-doc,
.phwo-reg-body,
.phwo-reg-entry-desc,
.phwo-footer {
	overflow-wrap: anywhere;
}

/* Embeds behave like images. */
iframe,
video,
embed,
object {
	max-width: 100%;
}

/* Anything that must scroll does so inside itself, never the page. */
.phwo-table-wrap,
.phwo-doc table,
.phwo-prose table,
pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- Tablet and below ---------- */

@media (max-width: 860px) {

	/* The drawer is narrow, so submenus size to it rather than to a fixed
	   desktop width. */
	.phwo-nav-list .sub-menu {
		min-width: 0;
	}

	/* Comfortable, thumb-sized targets in the drawer. */
	.phwo-nav-list > li > a {
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	.phwo-nav-list .sub-menu a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {

	/* Single column for every card-style grid; 260px minimums are wider than
	   the usable width on a small handset. */
	.phwo-cards-grid,
	.phwo-reg-routes,
	.phwo-section-index ul,
	.phwo-steps,
	.phwo-howto {
		grid-template-columns: minmax(0, 1fr);
	}

	.phwo-reg-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Every button and standalone link is at least a 44px target. */
	.phwo-cta,
	.phwo-reg-btn,
	.phwo-submit,
	.phwo-btn,
	.phwo-search button,
	.phwo-newsletter button {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.phwo-reg-hero-actions {
		gap: 16px;
	}

	.phwo-reg-hero-actions .phwo-reg-btn {
		width: 100%;
	}

	/* Reading measure and rhythm on a small screen. */
	.phwo-reg-section h2,
	.phwo-page-head h1,
	.phwo-reg-hero h1 {
		max-width: none;
	}

	.phwo-reg-standfirst,
	.phwo-page-standfirst {
		font-size: 1rem;
	}

	.phwo-doc h2 {
		margin-top: 1.6em;
	}

	/* Register rows: number above the entry rather than beside it. */
	.phwo-reg-list a {
		padding-right: 0;
	}

	.phwo-reg-num {
		font-size: .95rem;
	}

	/* The byline should not crowd the category chip. */
	.phwo-byline {
		gap: 12px;
	}

	/* Donation and Zakat figures stay readable. */
	.phwo-zakat-total strong {
		font-size: 28px;
	}

	.phwo-summary-amount strong {
		font-size: 27px;
	}

	.phwo-donor-head strong {
		font-size: 22px;
	}

	/* Footer breathing room above the sticky bar. */
	.phwo-footer-bar {
		margin-top: 34px;
	}
}

/* ---------- Small phones ---------- */

@media (max-width: 400px) {

	:root {
		--phwo-gutter: 18px;
	}

	/* The name is kept even here; it is the mark that gives way instead. */
	.phwo-lockup .phwo-logo-img {
		height: 44px;
		max-height: 44px;
	}

	.phwo-wordmark-mark {
		font-size: 1.25rem;
	}

	.phwo-topbar {
		font-size: .76rem;
	}

	.phwo-reg-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.phwo-reg-steps > li,
	.phwo-reg-defs > div {
		padding-inline: 14px;
	}

	.phwo-newsletter-fields {
		flex-direction: column;
	}

	.phwo-newsletter button {
		width: 100%;
	}

	.phwo-stickybar a {
		font-size: 14px;
	}
}

/* ---------- Landscape phones ---------- */

@media (max-height: 480px) and (orientation: landscape) {

	.phwo-header {
		position: static;
	}

	.phwo-reg-hero-media {
		min-height: 220px;
	}
}

/* ==========================================================================
   Typography with the real typefaces loaded

   Long-form reading moves to Source Serif 4, the way a publication sets its
   articles; interface text, labels, forms and data stay in Inter so they
   read as controls rather than prose.
   ========================================================================== */

body {
	font-family: var(--phwo-font);
	font-size: 17px;
	letter-spacing: -.003em;
}

h1, h2, h3, h4 {
	font-family: var(--phwo-font-head);
	font-weight: 700;
	letter-spacing: -.014em;
}

/* Reading columns get the serif at a comfortable size. */

.phwo-prose,
.phwo-doc,
.phwo-reg-prose,
.phwo-reg-standfirst,
.phwo-page-standfirst,
.phwo-reg-hero-lede,
.phwo-founding-card p,
.phwo-about-article p {
	font-family: var(--phwo-font-head);
}

.phwo-prose,
.phwo-doc {
	font-size: 1.085rem;
	line-height: 1.72;
}

.phwo-prose li,
.phwo-doc li {
	line-height: 1.68;
}

.phwo-reg-hero-lede {
	line-height: 1.6;
}

.phwo-reg-standfirst,
.phwo-page-standfirst {
	line-height: 1.6;
}

/* Interface text stays in the sans, including anything inside prose that is
   really a control or a piece of data rather than a sentence. */

.phwo-nav-list,
.phwo-topbar,
.phwo-crumbs,
.phwo-reg-label,
.phwo-reg-rail,
.phwo-reg-entry-state,
.phwo-reg-date,
.phwo-badge,
.phwo-byline-meta,
.phwo-toc,
.phwo-section-index span,
.phwo-footer,
.phwo-cta,
.phwo-reg-btn,
.phwo-submit,
.phwo-btn,
.phwo-doc table,
.phwo-prose table,
.phwo-reg-facts dt,
.phwo-form,
.phwo-public-form,
.phwo-zakat,
.phwo-newsletter p,
input,
select,
textarea,
button {
	font-family: var(--phwo-font);
	letter-spacing: normal;
}

/* Numerals line up in the money and Zakat figures. */

.phwo-reg-facts dd,
.phwo-zakat-total strong,
.phwo-zakat-result-grid strong,
.phwo-summary-amount strong,
.phwo-donor-head strong,
.phwo-progress-stats strong {
	font-variant-numeric: tabular-nums;
}

/* The wordmark is a lockup, not prose. */

.phwo-wordmark-mark {
	font-family: var(--phwo-font-head);
	letter-spacing: .01em;
}

.phwo-wordmark-name {
	font-family: var(--phwo-font);
}

/* ==========================================================================
   Logo lockup sizing — the mark was too small to read as a logo
   ========================================================================== */

/* Mark on the left, a hairline rule, then the name. The display value lives
   here and nowhere else, so a cascade cleanup cannot silently drop it and
   leave the mark stacked above the text. */
.phwo-lockup {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.phwo-lockup > span {
	display: flex;
	align-items: center;
	padding-left: 16px;
	border-left: 1px solid var(--phwo-line);
	min-height: 48px;
}

.phwo-lockup .phwo-logo-img {
	height: 66px;
	max-height: 66px;
}

.phwo-lockup .phwo-wordmark-mark {
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: .045em;
}

.phwo-lockup .phwo-wordmark-name {
	font-size: .615rem;
	line-height: 1.35;
	letter-spacing: .085em;
	max-width: 30ch;
	margin-top: 4px;
}

.phwo-header-inner {
	min-height: 92px;
}

.phwo-logo-footer .phwo-lockup .phwo-logo-img {
	height: 52px;
	max-height: 52px;
}

/* The hairline has to lift on the dark ground to stay visible. */
.phwo-logo-footer .phwo-lockup > span {
	border-left-color: rgba(255, 255, 255, .22);
	min-height: 44px;
}

.phwo-logo-footer .phwo-lockup .phwo-wordmark-mark {
	font-size: 1.6rem;
}

@media (max-width: 860px) {

	.phwo-header-inner {
		min-height: 78px;
	}

	.phwo-lockup .phwo-logo-img {
		height: 52px;
		max-height: 52px;
	}

	.phwo-lockup .phwo-wordmark-mark {
		font-size: 1.5rem;
	}

	.phwo-lockup .phwo-wordmark-name {
		max-width: 20ch;
		font-size: .58rem;
	}
}

@media (max-width: 480px) {

	.phwo-lockup {
		gap: 10px;
	}

	.phwo-lockup > span {
		padding-left: 10px;
		min-height: 34px;
	}

	/* The full name stays on phones too: a welfare organization asking for
	   money should be named in full wherever it appears. It is set smaller
	   and allowed to run to two lines rather than being hidden. */
	.phwo-lockup .phwo-wordmark-name {
		display: block;
		font-size: .5rem;
		letter-spacing: .055em;
		line-height: 1.32;
		max-width: 17ch;
		margin-top: 3px;
	}

	.phwo-lockup .phwo-logo-img {
		height: 50px;
		max-height: 50px;
	}

	.phwo-lockup .phwo-wordmark-mark {
		font-size: 1.35rem;
	}

	/* The footer has the full width to itself, so it can breathe. */
	.phwo-logo-footer .phwo-lockup .phwo-wordmark-name {
		font-size: .6rem;
		max-width: 28ch;
	}

	.phwo-logo-footer .phwo-lockup .phwo-logo-img {
		height: 62px;
		max-height: 62px;
	}
}

/* ==========================================================================
   Mobile corrections

   Four faults found on a 393px phone. Each is fixed at the point that
   caused it, and this block sits last so nothing downstream can undo it.
   ========================================================================== */

@media (max-width: 780px) {

	/* The sticky Donate bar is fixed to the bottom of the viewport, so the
	   last of the page was sitting underneath it. Reserve its height. */
	body {
		padding-bottom: 78px;
	}
}

@media (max-width: 620px) {

	/* Date-led register rows (news and the writing list) stack in a single
	   column. The state chip has to come back to column one with them,
	   otherwise it is stranded in an implicit second column. */
	.phwo-reg-list.is-plain a {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}

	.phwo-reg-list.is-plain .phwo-reg-entry-state {
		grid-column: 1;
		padding-top: 2px;
	}

	/* A date cannot sit in the 34px column the numerals use: at nowrap it
	   overflowed and ran underneath the headline. Let it wrap instead, so
	   the rows stay legible even if the collapse above is ever lost. */
	.phwo-reg-date {
		white-space: normal;
	}
}

@media (max-width: 400px) {

	/* The newsletter fields switch to a column here. The inputs carry
	   flex: 1 1 180px, and once the axis turns vertical that basis becomes
	   a 180px HEIGHT, which is what inflated the boxes. Reset the flex so
	   each field is sized by its own padding again. */
	.phwo-newsletter-fields input[type="text"],
	.phwo-newsletter-fields input[type="email"] {
		flex: 0 0 auto;
		width: 100%;
	}

	.phwo-newsletter-fields button {
		flex: 0 0 auto;
	}
}

@media (max-width: 780px) {

	/* The newsletter band carried both the section's padding and the block's
	   own 40px margin, which stacked into an empty white gap above the
	   footer on phones. One source of spacing is enough. */
	.phwo-newsletter-band {
		padding-block: 34px;
	}

	.phwo-newsletter {
		margin: 0;
	}
}

/* ==========================================================================
   Portrait — a named person beside their introduction
   ========================================================================== */

.phwo-portrait {
	float: right;
	width: 236px;
	margin: 4px 0 26px 34px;
	padding: 0;
}

.phwo-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--phwo-line);
	border-radius: 10px;
	background: #fff;
}

.phwo-portrait figcaption {
	margin-top: 12px;
	padding-left: 12px;
	border-left: 2px solid var(--phwo-color-accent);
	font-family: var(--phwo-font);
	font-size: .8rem;
	line-height: 1.45;
	color: var(--phwo-muted);
}

.phwo-portrait figcaption span {
	display: block;
	margin-top: 3px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--phwo-color-primary);
}

/* Headings start a new section, so they must clear the floated portrait. */
.phwo-doc h2,
.phwo-prose h2 {
	clear: both;
}

@media (max-width: 620px) {

	/* Too narrow to wrap text around: it sits above the introduction. */
	.phwo-portrait {
		float: none;
		width: 190px;
		margin: 0 0 24px;
	}
}

/* Archive introductions.
   The programmes and writing indexes sit in a wide container, so the intro
   copy needs its own reading measure rather than the full grid width. */
.phwo-archive-intro {
	max-width: 62ch;
	margin: 0 0 2.5rem;
}

.phwo-archive-intro p {
	margin: 0 0 1rem;
}

.phwo-archive-intro p:last-child {
	margin-bottom: 0;
}

/* "Last reviewed" line closing a page. Quiet, but present on every document
   so a reader can see how current it is. */
.phwo-reviewed {
	margin: 2.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(20, 38, 43, 0.12);
	font-size: 0.875rem;
	color: rgba(20, 38, 43, 0.65);
}

/* The footer used to be four fixed columns. Now that the link columns come
   from the menu, their number can change, so the grid has to flex rather than
   assume. The brand column keeps its extra width; the rest share what is left
   and wrap on narrower screens instead of squeezing. */
.phwo-footer-grid {
	grid-template-columns: minmax(220px, 1.35fr) repeat(auto-fit, minmax(140px, 1fr));
	gap: 32px 28px;
}

.phwo-footer-brand {
	grid-column: auto;
}

@media (max-width: 1100px) {
	.phwo-footer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 24px;
	}

	.phwo-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.phwo-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* contact links with icons (topbar + footer) */
.phwo-contact-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	white-space: nowrap;
}

.phwo-ci {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--phwo-color-accent);
}

.phwo-topbar .phwo-ci {
	width: 16px;
	height: 16px;
}

.phwo-footer-contact p {
	margin: 0 0 .45rem;
}

/* ---- topbar polish ---- */
.phwo-topbar {
	background: linear-gradient(90deg, #0f2226 0%, var(--phwo-color-ink) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	letter-spacing: .01em;
}
.phwo-topbar-inner { min-height: 42px; }
.phwo-topbar-area {
	display: inline-flex; align-items: center; gap: .45rem;
	color: rgba(255, 255, 255, .78);
}
.phwo-topbar-area .phwo-ci { width: 15px; height: 15px; }
.phwo-topbar-contact { gap: 8px; align-items: center; }
.phwo-topbar-contact .phwo-contact-link {
	padding: .28rem .7rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .05);
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.phwo-topbar-contact .phwo-contact-link:hover {
	background: rgba(232, 163, 61, .14);
	border-color: rgba(232, 163, 61, .5);
	color: #fff;
}
.phwo-topbar-contact .phwo-contact-link span { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
	.phwo-topbar-contact .phwo-contact-link { padding: .22rem .55rem; }
	.phwo-topbar-contact .phwo-contact-link span { font-size: .78rem; }
}
/* ---- footer links read as links: chevron, muted -> white on hover ---- */
.phwo-footer-col ul { display: grid; gap: 8px; }
.phwo-footer-col ul a {
	position: relative; display: inline-block; padding-left: 16px;
	color: rgba(255, 255, 255, .78); text-decoration: none;
	transition: color .12s ease, transform .12s ease;
}
.phwo-footer-col ul a::before {
	content: "›"; position: absolute; left: 0; top: -1px;
	color: var(--phwo-color-accent); font-weight: 700; opacity: .85;
	transition: transform .12s ease;
}
.phwo-footer-col ul a:hover { color: #fff; transform: translateX(2px); }
.phwo-footer-col ul a:hover::before { transform: translateX(2px); }
.phwo-footer-col h2 { letter-spacing: .08em; }
.phwo-footer-col h2::after { content: ""; display: block; width: 28px; height: 2px; background: var(--phwo-color-accent); margin-top: 8px; border-radius: 2px; opacity: .9; }

/* footer CTA: a button, not a slab -- one line, compact, with an arrow */
.phwo-footer .phwo-cta-footer {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1.25rem; font-size: .92rem; font-weight: 700;
	border-radius: 999px; white-space: nowrap; line-height: 1.2;
	box-shadow: 0 6px 18px rgba(232, 163, 61, .25);
}
.phwo-footer .phwo-cta-footer::after { content: "\2192"; font-weight: 400; transition: transform .12s ease; }
.phwo-footer .phwo-cta-footer:hover::after { transform: translateX(3px); }

/* ---- vertical rhythm at the top of every page (18 Sep 2026) ---- */
.phwo-header-inner { min-height: 76px; }
.phwo-page-head { padding: clamp(22px, 3vw, 34px) 0 clamp(18px, 2.5vw, 28px); }
.phwo-hero { padding: clamp(48px, 8vw, 96px) 0; }
.phwo-section { padding: clamp(32px, 5vw, 56px) 0; }
.phwo-reg-layout { padding-top: clamp(20px, 3vw, 32px); }
.phwo-rishta-page .phwo-section { padding-top: clamp(20px, 3vw, 32px); }
.phwo-rishta-page .phwo-rishta-hero { margin-top: 0; }

/* ---- footer logo + CTA: final sizes (18 Sep 2026). These sit after the
   desktop media query that re-grew the logo to 62px, and beat the 48px
   min-height on every .phwo-cta. ---- */
.phwo-footer .phwo-logo-footer .phwo-lockup .phwo-logo-img { height: 40px !important; max-height: 40px !important; width: auto; }
.phwo-footer .phwo-logo-footer .phwo-lockup > span { min-height: 0; padding-left: 12px; }
.phwo-footer .phwo-logo-footer .phwo-lockup .phwo-wordmark-mark { font-size: 1.15rem; }
.phwo-footer .phwo-logo-footer .phwo-lockup .phwo-wordmark-name { font-size: .5rem; margin-top: 2px; }
.phwo-footer a.phwo-cta-footer { min-height: 0 !important; padding: .5rem 1.05rem !important; font-size: .86rem; line-height: 1.1; margin-top: 6px; }

/* header Donate: a compact pill, not a 48px slab (18 Sep 2026) */
.phwo-nav-actions a.phwo-cta { min-height: 0 !important; padding: .5rem 1.15rem !important; font-size: .9rem; line-height: 1.15; border-radius: 999px; display: inline-flex; align-items: center; }
@media (max-width: 860px) { .phwo-nav-actions a.phwo-cta { display: flex; justify-content: center; padding: .65rem 1rem !important; } }

/* ==========================================================================
   Mega menu + Rishta Desk highlight (20 Sep 2026)
   ========================================================================== */
.phwo-header-inner { position: relative; }
.phwo-nav-list > li { position: static; }
.phwo-nav-list > li > a { display: inline-flex; align-items: center; gap: 5px; }
.phwo-nav-list > li.phwo-has-mega > a:not(.phwo-nav-rishta a)::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; margin-left: 2px; transition: transform .15s; }
.phwo-nav-list > li.phwo-has-mega:hover > a::after, .phwo-nav-list > li.is-open > a::after { transform: rotate(225deg) translateY(-1px); }
.phwo-nav-list > li.phwo-nav-rishta > a::after { display: none; }

.phwo-mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 40; }
.phwo-nav-list > li:hover > .phwo-mega, .phwo-nav-list > li:focus-within > .phwo-mega, .phwo-nav-list > li.is-open > .phwo-mega { opacity: 1; visibility: visible; transform: none; }
.phwo-mega::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; } /* hover bridge */
.phwo-mega-inner { background: #fff; border: 1px solid var(--phwo-line); border-radius: 20px; box-shadow: 0 28px 70px rgba(20, 38, 43, .18), 0 2px 8px rgba(20, 38, 43, .06); display: grid; grid-template-columns: 280px 1fr; overflow: hidden; }
.phwo-mega-intro { background: linear-gradient(160deg, #0D5C63, #14807f); color: #fff; padding: 28px 26px; display: flex; flex-direction: column; justify-content: center; }
.phwo-mega-intro.is-rishta { background: linear-gradient(160deg, #0D5C63 0%, #0b4d53 60%, #1a2b2f 100%); }
.phwo-mega-kicker { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--phwo-color-accent); font-weight: 700; margin: 0 0 .4rem; }
.phwo-mega-intro h3 { font-family: var(--phwo-font-head); font-size: 1.35rem; margin: 0 0 .5rem; color: #fff; line-height: 1.2; }
.phwo-mega-intro p { margin: 0 0 1rem; font-size: .9rem; line-height: 1.55; opacity: .92; }
.phwo-mega-intro > a { color: var(--phwo-color-accent); font-weight: 700; text-decoration: none; border: 0; padding: 0; display: inline-flex; gap: .3rem; align-items: center; }
.phwo-mega-intro > a:hover { color: #fff; }
.phwo-mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; padding: 18px; margin: 0; list-style: none; align-content: start; }
.phwo-mega-grid li { position: static; }
.phwo-mega-grid a { display: block; padding: 12px 14px; border-radius: 12px; border-bottom: 0; line-height: 1.35; transition: background .12s, transform .12s; }
.phwo-mega-grid a strong { display: flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--phwo-color-ink); font-size: .95rem; }
.phwo-mega-grid a span { display: block; font-size: .8rem; color: var(--phwo-muted); font-weight: 400; margin-top: 3px; }
.phwo-mega-grid a strong .phwo-mega-ico { font-size: 1rem; }
.phwo-mega-grid a:hover { background: var(--phwo-color-mist); transform: translateX(2px); }
.phwo-mega-grid a:hover strong { color: var(--phwo-color-primary); }
.phwo-mega-grid .current-menu-item > a { background: var(--phwo-color-mist); }

/* Rishta Desk pill in the header */
.phwo-nav-list > li.phwo-nav-rishta > a { background: linear-gradient(135deg, #0D5C63, #14807f); color: #fff; padding: 8px 14px 8px 12px; border-radius: 999px; border-bottom: 0; box-shadow: 0 6px 16px rgba(13, 92, 99, .28); transition: transform .15s, box-shadow .15s; }
.phwo-nav-list > li.phwo-nav-rishta > a:hover, .phwo-nav-list > li.phwo-nav-rishta.current-menu-item > a { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(13, 92, 99, .35); border-bottom: 0; }
.phwo-nav-heart { font-size: .95rem; line-height: 1; }
.phwo-nav-badge { background: var(--phwo-color-accent); color: var(--phwo-color-ink); font-size: .62rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }

/* Mobile: drawer becomes accordions; Rishta Desk becomes a card on top */
.phwo-nav-more { display: none; }
@media (max-width: 860px) {
	.phwo-nav { padding-top: 84px; }
	.phwo-nav-list > li { position: relative; display: block; }
	.phwo-nav-list > li > a { display: flex; align-items: center; justify-content: space-between; padding-right: 48px; }
	.phwo-nav-list > li.phwo-has-mega > a::after { display: none; }
	.phwo-nav-more { display: grid; place-items: center; position: absolute; right: 0; top: 6px; width: 40px; height: 40px; border: 0; background: var(--phwo-color-mist); border-radius: 10px; cursor: pointer; color: var(--phwo-color-primary); }
	.phwo-nav-more::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
	.phwo-nav-list > li.is-open > .phwo-nav-more::before { transform: rotate(225deg) translateY(-1px); }
	.phwo-mega { position: static; padding: 0; opacity: 1; visibility: visible; transform: none; display: none; }
	.phwo-nav-list > li.is-open > .phwo-mega { display: block; }
	.phwo-nav-list > li:hover > .phwo-mega:not(.is-open) { }
	.phwo-mega-inner { grid-template-columns: 1fr; border: 0; box-shadow: none; border-radius: 12px; background: var(--phwo-color-mist); margin: 0 0 12px; }
	.phwo-mega-intro { padding: 14px 16px; border-radius: 12px 12px 0 0; }
	.phwo-mega-intro h3 { font-size: 1.05rem; }
	.phwo-mega-intro p { font-size: .84rem; margin-bottom: .5rem; }
	.phwo-mega-grid { grid-template-columns: 1fr; padding: 8px; gap: 2px; }
	.phwo-mega-grid a { padding: 10px 12px; font-size: .95rem; }
	.phwo-mega-grid a span { display: none; }
	/* Rishta card pinned to the top of the drawer */
	.phwo-nav-list > li.phwo-nav-rishta { order: -1; border: 0; margin: 0 0 8px; }
	.phwo-nav-list > li.phwo-nav-rishta > a { display: inline-flex; justify-content: flex-start; padding: 10px 16px 10px 14px; margin: 4px 0 6px; }
	.phwo-nav-list > li.phwo-nav-rishta > .phwo-nav-more { top: 4px; }
	.phwo-nav-list { display: flex; }
}

/* Footer: the Rishta Desk link stands apart */
.phwo-footer-col ul a.phwo-footer-rishta { display: inline-flex; align-items: center; gap: .45rem; background: rgba(232, 163, 61, .12); border: 1px solid rgba(232, 163, 61, .55); color: #fff; padding: .4rem .8rem .4rem .7rem; border-radius: 999px; margin: 2px 0 4px; }
.phwo-footer-col ul a.phwo-footer-rishta::before { content: "💍"; color: var(--phwo-color-accent); transform: none; }
.phwo-footer-col ul a.phwo-footer-rishta:hover { background: var(--phwo-color-accent); color: var(--phwo-color-ink); transform: none; }
.phwo-footer-col ul a.phwo-footer-rishta em { font-style: normal; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--phwo-color-accent); color: var(--phwo-color-ink); padding: 1px 6px; border-radius: 999px; }
.phwo-footer-col ul a.phwo-footer-rishta:hover em { background: var(--phwo-color-ink); color: #fff; }
/* mega menu: keep the bar on one line */
@media (min-width: 861px) {
	.phwo-nav { gap: 18px; }
	.phwo-nav-list { gap: 18px; }
	.phwo-nav-list > li > a { white-space: nowrap; font-size: .93rem; }
	.phwo-nav-list > li.phwo-nav-rishta > a { padding: 7px 12px 7px 10px; }
	.phwo-nav-actions a.phwo-cta { white-space: nowrap; }
}
@media (min-width: 861px) and (max-width: 1100px) {
	.phwo-nav, .phwo-nav-list { gap: 12px; }
	.phwo-nav-list > li > a { font-size: .88rem; }
	.phwo-lockup .phwo-wordmark-name { display: none; }
}
.phwo-nav-heart svg { width: 16px; height: 16px; display: block; }

/* topbar account links: Sign up | Sign in | phone | email (21 Sep 2026) */
.phwo-topbar-account { display: inline-flex; align-items: center; gap: .55rem; margin-left: .55rem; padding-left: .7rem; border-left: 1px solid rgba(255, 255, 255, .28); }
.phwo-topbar-account a { display: inline-flex; align-items: center; gap: .3rem; color: #fff; text-decoration: none; font-weight: 600; font-size: .82rem; opacity: .92; }
.phwo-topbar-account a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.phwo-topbar-account .phwo-ci { width: 15px; height: 15px; }
.phwo-topbar-account .phwo-topbar-sep { opacity: .45; }
@media (max-width: 640px) {
	.phwo-topbar-account { margin-left: .3rem; padding-left: .45rem; gap: .4rem; }
	.phwo-topbar-account a { font-size: .76rem; }
}


/* ==========================================================================
   Phone corrections (24 Sep 2026)

   Three faults reported from a real handset, none of them visible on a
   desktop because each one needs a narrow column to appear.
   ========================================================================== */

@media (max-width: 860px) {

	/* 1. The newsletter fields. They carry flex: 1 1 180px. On a phone the
	   row turns into a column, and a flex-basis on the cross axis becomes a
	   180px HEIGHT — three enormous boxes. The reset existed only below
	   400px, so every ordinary phone (412px, 414px, 430px) still got them. */
	.phwo-newsletter-fields {
		flex-direction: column;
	}

	.phwo-newsletter-fields input[type="text"],
	.phwo-newsletter-fields input[type="email"],
	.phwo-newsletter-fields button {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		min-height: 48px;
	}

	/* 2. The footer's Rishta Desk link is a pill. Once "Rishta Desk (free)"
	   wraps inside a half-width footer column the pill inflates into an oval
	   blob and the Free tag becomes a circle. On a phone it goes back to
	   being a link with a small tag beside it. */
	.phwo-footer-col ul a.phwo-footer-rishta {
		display: inline;
		background: none;
		border: 0;
		border-radius: 0;
		padding: 0;
		margin: 0;
	}

	.phwo-footer-col ul a.phwo-footer-rishta::before {
		content: "\1F48D";
		margin-right: .35rem;
	}

	.phwo-footer-col ul a.phwo-footer-rishta em {
		display: inline-block;
		font-size: .58rem;
		padding: .05rem .3rem;
		border-radius: 4px;
		vertical-align: middle;
		margin-left: .3rem;
		letter-spacing: .04em;
	}
}


/* ==========================================================================
   Donate button, and the newsletter's new home (24 Sep 2026)
   ========================================================================== */

/* The Rishta Desk pill was the brightest thing in the chrome and Donate was a
   flat rectangle beside it. Donating is the action that funds everything, so
   it is now the loudest: a heart, a lift, a ring of accent around it, and a
   slow breath so the eye catches it without the page feeling noisy. */
.phwo-cta-donate {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: 13px 30px;
	border-radius: 999px;
	font-weight: 800;
	letter-spacing: .01em;
	box-shadow: 0 6px 18px rgba(232, 163, 61, .38);
	animation: phwo-donate-breathe 3.6s ease-in-out infinite;
}

.phwo-cta-donate .phwo-cta-heart {
	font-size: 1.02em;
	line-height: 1;
	transform: translateY(-.5px);
}

.phwo-cta-donate:hover,
.phwo-cta-donate:focus-visible {
	animation: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(232, 163, 61, .55);
}

@keyframes phwo-donate-breathe {
	0%, 100% { box-shadow: 0 6px 18px rgba(232, 163, 61, .34); }
	50%      { box-shadow: 0 6px 22px rgba(232, 163, 61, .62); }
}

/* Anyone who has asked not to see movement gets the button, not the motion. */
@media (prefers-reduced-motion: reduce) {
	.phwo-cta-donate { animation: none; }
}

/* The mobile-bar copy is hidden on desktop, where the nav already has one. */
.phwo-cta-mobile { display: none; }

@media (max-width: 960px) {
	.phwo-cta-mobile {
		display: inline-flex;
		margin-left: auto;
		margin-right: 12px;
		padding: 10px 20px;
		font-size: .95rem;
	}

	/* Two Donate buttons on one screen is one too many: the menu keeps the
	   full-width one, the bar keeps the compact one. */
	.phwo-nav-actions .phwo-cta-donate { justify-content: center; }
}

@media (max-width: 380px) {
	.phwo-cta-mobile { padding: 9px 15px; font-size: .88rem; }
}

/* Newsletter, now a quiet strip inside the footer instead of a band of its
   own above it. It fills the space that was empty beside Contact. */
.phwo-footer-news {
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.phwo-footer-news .phwo-newsletter {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
}

.phwo-footer-news .phwo-newsletter > * { margin: 0; }

/* The shortcode wraps the text and the form in .phwo-newsletter-copy and
   .phwo-newsletter-action, so those are the two flex children — not the
   heading and the form themselves. */
.phwo-footer-news .phwo-newsletter-copy { flex: 1 1 320px; min-width: 0; }
.phwo-footer-news .phwo-newsletter-action { flex: 1 1 400px; min-width: 0; }

.phwo-footer-news .phwo-newsletter h2,
.phwo-footer-news .phwo-newsletter h3 {
	color: #fff;
	font-size: 1.1rem;
	margin: 0 0 4px;
}

.phwo-footer-news .phwo-newsletter p {
	color: rgba(255, 255, 255, .68);
	font-size: .86rem;
	line-height: 1.5;
	margin: 0;
}

.phwo-footer-news .phwo-newsletter-privacy {
	margin-top: 8px;
	font-size: .78rem;
	color: rgba(255, 255, 255, .55);
}

.phwo-footer-news .phwo-newsletter form { margin: 0; }

.phwo-footer-news .phwo-newsletter-fields {
	display: flex;
	gap: 10px;
	max-width: 620px;
}

.phwo-footer-news .phwo-newsletter-fields input[type="text"],
.phwo-footer-news .phwo-newsletter-fields input[type="email"] {
	flex: 1 1 0;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	font-size: .92rem;
}

.phwo-footer-news .phwo-newsletter-fields button {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 22px;
	font-size: .92rem;
	white-space: nowrap;
}

@media (min-width: 981px) {
	.phwo-footer-news .phwo-newsletter { flex-wrap: nowrap; align-items: center; }
}

@media (max-width: 860px) {
	.phwo-footer-news { margin-top: 30px; padding-top: 22px; }
	.phwo-footer-news .phwo-newsletter { gap: 10px; }
	.phwo-footer-news .phwo-newsletter-fields { flex-direction: column; }
	.phwo-footer-news .phwo-newsletter-fields input[type="text"],
	.phwo-footer-news .phwo-newsletter-fields input[type="email"],
	.phwo-footer-news .phwo-newsletter-fields button {
		width: 100%;
		height: 48px;
	}
}


/* ==========================================================================
   Donate button, second pass — and the mobile header it was breaking
   (26 Sep 2026)
   ========================================================================== */

/* THE BUG THIS FIXES: the header is a three-child flex row with a 24px gap,
   and nothing in it was allowed to shrink. Adding the Donate button pushed the
   total past a phone's width, so the burger was carried off the right edge and
   the menu could not be opened at all. The logo now yields, the gap closes up,
   and the toggle is pinned at its own size. */
@media (max-width: 860px) {

	.phwo-header-inner {
		gap: 10px;
		flex-wrap: nowrap;
	}

	.phwo-logo {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
	}

	.phwo-nav-toggle {
		flex: 0 0 44px;
		margin-left: 0;
	}

	/* Matches the breakpoint the burger appears at, so the two are never
	   on screen together in the wrong combination. */
	.phwo-cta-mobile {
		display: inline-flex;
		flex: 0 0 auto;
		margin-left: auto;
		margin-right: 0;
		padding: 10px 16px;
		font-size: .88rem;
	}
}

@media (min-width: 861px) and (max-width: 960px) {
	.phwo-cta-mobile { display: none; }
}

/* Narrow phones: the word alone, no heart, so the burger always has its 44px. */
@media (max-width: 400px) {
	.phwo-cta-mobile { padding: 9px 12px; font-size: .84rem; gap: 0; }
	.phwo-cta-mobile .phwo-cta-heart { display: none; }
}

/* --------------------------------------------------------------------------
   The button itself. A flat amber rectangle read as a label rather than an
   invitation, so: a gradient with depth, a highlight sweeping across it every
   few seconds the way a coin catches light, a heart that beats, and a ring
   that breathes. Motion is what makes the eye land here first — which is the
   whole point, since this button funds everything else on the site.
   -------------------------------------------------------------------------- */
.phwo-cta-donate {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(135deg, #f0b45a 0%, var(--phwo-color-accent, #e8a33d) 46%, #d6892a 100%);
	border-color: #d6892a;
	color: #3a2a10;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
	box-shadow:
		0 6px 18px rgba(232, 163, 61, .42),
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -2px 0 rgba(120, 76, 12, .18);
	animation: phwo-donate-breathe 3.2s ease-in-out infinite;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* The sweep. A single soft band crossing the button, then a long pause. */
.phwo-cta-donate .phwo-cta-shine {
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -40%;
	width: 34%;
	z-index: -1;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	animation: phwo-donate-shine 4.6s ease-in-out infinite;
}

.phwo-cta-donate .phwo-cta-heart {
	display: inline-block;
	color: #b6321f;
	font-size: 1.04em;
	line-height: 1;
	transform-origin: center;
	animation: phwo-donate-beat 2.1s ease-in-out infinite;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .45));
}

.phwo-cta-donate .phwo-cta-label { white-space: nowrap; }

.phwo-cta-donate:hover,
.phwo-cta-donate:focus-visible {
	color: #33250e;
	transform: translateY(-2px);
	filter: saturate(1.06);
	box-shadow:
		0 12px 28px rgba(232, 163, 61, .58),
		inset 0 1px 0 rgba(255, 255, 255, .6),
		inset 0 -2px 0 rgba(120, 76, 12, .2);
}

.phwo-cta-donate:hover .phwo-cta-shine { animation-duration: 1.5s; }
.phwo-cta-donate:hover .phwo-cta-heart { animation-duration: .85s; }
.phwo-cta-donate:active { transform: translateY(0); }

/* The desktop one carries the longer label, so it gets a little more room. */
.phwo-cta-hero { padding-left: 24px; padding-right: 24px; letter-spacing: .005em; }

@keyframes phwo-donate-shine {
	0%   { left: -40%; }
	/* Crosses in the first fifth, then waits — a constant glint is noise. */
	22%  { left: 116%; }
	100% { left: 116%; }
}

@keyframes phwo-donate-beat {
	0%, 64%, 100% { transform: scale(1); }
	72%           { transform: scale(1.22); }
	80%           { transform: scale(1); }
	88%           { transform: scale(1.14); }
}

@keyframes phwo-donate-breathe {
	0%, 100% { box-shadow: 0 6px 18px rgba(232, 163, 61, .38), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(120, 76, 12, .18); }
	50%      { box-shadow: 0 8px 26px rgba(232, 163, 61, .68), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(120, 76, 12, .18); }
}

/* Movement is a choice the visitor gets to decline. */
@media (prefers-reduced-motion: reduce) {
	.phwo-cta-donate,
	.phwo-cta-donate .phwo-cta-shine,
	.phwo-cta-donate .phwo-cta-heart {
		animation: none;
	}
	.phwo-cta-donate .phwo-cta-shine { display: none; }
}


/* ==========================================================================
   Donate button, third pass — the enterprise treatment (26 Sep 2026)

   Two things were wrong. The heart was an emoji codepoint with no glyph in
   Inter, so it drew as a speck — it is an inline SVG now. And the button was
   a coloured rectangle competing with a Rishta Desk pill that has depth, an
   icon and a badge; it lost. This gives it a deeper base, a real icon, a ring
   that pings outward, and an arrow that commits on hover.
   ========================================================================== */

.phwo-cta-donate {
	--phwo-donate-ink: #2c1d05;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 12px 26px;
	border-radius: 999px;
	overflow: visible;                 /* the halo needs to escape the pill */
	isolation: isolate;
	font-weight: 800;
	letter-spacing: .012em;
	color: var(--phwo-donate-ink);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 52%),
		linear-gradient(135deg, #f7bd63 0%, #eda63f 44%, #d98a1f 100%);
	border: 1px solid #c87d16;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .34);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .7) inset,
		0 -2px 0 rgba(150, 94, 14, .22) inset,
		0 4px 10px rgba(180, 116, 20, .28),
		0 10px 24px rgba(216, 138, 31, .32);
	animation: none;                   /* the halo carries the motion now */
	transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, filter .2s ease;
}

/* A ring that expands out of the edge and fades — a slow, deliberate ping
   rather than a constant glow. It sits behind the pill and never shifts it. */
.phwo-cta-donate .phwo-cta-halo {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid rgba(216, 138, 31, .6);
	z-index: -2;
	pointer-events: none;
	animation: phwo-donate-ping 3.4s cubic-bezier(.22, .61, .36, 1) infinite;
}

/* The highlight sweep, clipped to the pill by a wrapper of its own. */
.phwo-cta-donate .phwo-cta-shine {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	z-index: -1;
	pointer-events: none;
}

.phwo-cta-donate .phwo-cta-shine::before {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -45%;
	width: 38%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .66) 50%, rgba(255, 255, 255, 0));
	transform: skewX(-18deg);
	animation: phwo-donate-shine 5s ease-in-out infinite;
}

.phwo-cta-donate .phwo-cta-heart {
	flex: 0 0 auto;
	color: #b32d1b;
	transform-origin: center;
	animation: phwo-donate-beat 2.4s ease-in-out infinite;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
}

.phwo-cta-donate .phwo-cta-label { white-space: nowrap; }

/* The arrow is absent until the pointer arrives, then slides in and the pill
   widens to meet it — the small commitment cue enterprise buttons use. */
.phwo-cta-donate .phwo-cta-arrow {
	flex: 0 0 auto;
	width: 0;
	opacity: 0;
	transform: translateX(-4px);
	transition: width .2s ease, opacity .2s ease, transform .2s ease;
}

.phwo-cta-donate:hover,
.phwo-cta-donate:focus-visible {
	color: var(--phwo-donate-ink);
	transform: translateY(-2px);
	filter: saturate(1.05);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .75) inset,
		0 -2px 0 rgba(150, 94, 14, .24) inset,
		0 6px 14px rgba(180, 116, 20, .34),
		0 16px 34px rgba(216, 138, 31, .46);
}

.phwo-cta-donate:hover .phwo-cta-arrow,
.phwo-cta-donate:focus-visible .phwo-cta-arrow {
	width: 15px;
	opacity: 1;
	transform: translateX(0);
}

.phwo-cta-donate:hover .phwo-cta-heart { animation-duration: 1s; }
.phwo-cta-donate:hover .phwo-cta-shine::before { animation-duration: 1.6s; }
.phwo-cta-donate:hover .phwo-cta-halo { animation-duration: 1.4s; }

.phwo-cta-donate:active { transform: translateY(0); }

.phwo-cta-donate:focus-visible {
	outline: 3px solid rgba(20, 38, 43, .55);
	outline-offset: 3px;
}

.phwo-cta-hero { padding: 13px 28px; font-size: 1rem; }

@keyframes phwo-donate-ping {
	0%        { transform: scale(1); opacity: .75; }
	55%, 100% { transform: scale(1.19); opacity: 0; }
}

@keyframes phwo-donate-shine {
	0%   { left: -45%; }
	20%  { left: 118%; }
	100% { left: 118%; }
}

@keyframes phwo-donate-beat {
	0%, 62%, 100% { transform: scale(1); }
	70%           { transform: scale(1.24); }
	78%           { transform: scale(1); }
	86%           { transform: scale(1.15); }
}

/* On a phone the pill is compact and the arrow never appears. */
@media (max-width: 860px) {
	.phwo-cta-mobile { padding: 10px 17px; gap: .4rem; }
	.phwo-cta-mobile .phwo-cta-arrow,
	.phwo-cta-mobile .phwo-cta-halo { display: none; }
}

@media (max-width: 400px) {
	.phwo-cta-mobile { padding: 9px 13px; }
	.phwo-cta-mobile .phwo-cta-heart { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.phwo-cta-donate .phwo-cta-halo,
	.phwo-cta-donate .phwo-cta-shine::before,
	.phwo-cta-donate .phwo-cta-heart {
		animation: none;
	}
	.phwo-cta-donate .phwo-cta-halo,
	.phwo-cta-donate .phwo-cta-shine::before { display: none; }
}


/* ==========================================================================
   Donate button, final — PHWO green, still, and one of it (26 Sep 2026)
   ========================================================================== */

/* THE DUPLICATE: .phwo-cta-mobile was hidden by a single-class rule, then the
   later .phwo-cta-donate block set display:inline-flex. Same specificity, and
   later wins — so the phone button reappeared on the desktop beside the real
   one. Two classes beat one, and this sits at the end of the file. */
.phwo-cta-donate.phwo-cta-mobile { display: none; }

@media (max-width: 860px) {
	.phwo-cta-donate.phwo-cta-mobile { display: inline-flex; }
}

/* The amber read as a warning colour next to the teal pill, and lost to it.
   Donate now uses the same PHWO green the Rishta Desk pill uses, so the two
   read as one family — and Donate is the larger, heavier of the pair. */
.phwo-cta-donate {
	--phwo-donate-ink: #ffffff;
	background: linear-gradient(135deg, #0D5C63 0%, #14807f 100%);
	border: 1px solid #0a4c52;
	color: #fff;
	text-shadow: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .16) inset,
		0 6px 16px rgba(13, 92, 99, .30);
}

.phwo-cta-donate .phwo-cta-label { color: #fff; }

/* A white heart on the green reads instantly; the red one disappeared on it. */
.phwo-cta-donate .phwo-cta-heart {
	color: #fff;
	filter: none;
}

/* No breathing, no ping, no sweep — the owner asked for a still button. */
.phwo-cta-donate,
.phwo-cta-donate .phwo-cta-heart,
.phwo-cta-donate .phwo-cta-halo,
.phwo-cta-donate .phwo-cta-shine,
.phwo-cta-donate .phwo-cta-shine::before {
	animation: none !important;
}

.phwo-cta-donate .phwo-cta-halo,
.phwo-cta-donate .phwo-cta-shine { display: none; }

/* Movement only where a person asks for it, by pointing at the button. */
.phwo-cta-donate:hover,
.phwo-cta-donate:focus-visible {
	background: linear-gradient(135deg, #0a4c52 0%, #116b6b 100%);
	color: #fff;
	transform: translateY(-1px);
	filter: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .18) inset,
		0 10px 24px rgba(13, 92, 99, .40);
}

.phwo-cta-donate:hover .phwo-cta-arrow,
.phwo-cta-donate:focus-visible .phwo-cta-arrow {
	width: 15px;
	opacity: 1;
	transform: translateX(0);
}

.phwo-cta-donate:active { transform: translateY(0); }

.phwo-cta-donate:focus-visible {
	outline: 3px solid rgba(13, 92, 99, .45);
	outline-offset: 3px;
}


/* ==========================================================================
   Shape and contrast pass (26 Sep 2026)
   ========================================================================== */

/* A full 999px pill read as a tag rather than a control. A small radius is
   what enterprise software uses for a primary action. */
.phwo-cta-donate { border-radius: 10px; }
.phwo-cta-donate .phwo-cta-halo,
.phwo-cta-donate .phwo-cta-shine { border-radius: 10px; }

@media (max-width: 400px) {
	.phwo-cta-donate.phwo-cta-mobile { border-radius: 9px; }
}

/* Rishta Desk keeps its shape, its icon, its FREE badge and its spacing —
   only the green ground comes off, so the Donate button is the single filled
   thing in the row and nothing competes with it. */
.phwo-nav-list > li.phwo-nav-rishta > a {
	background: none;
	color: var(--phwo-color-primary);
	box-shadow: none;
	font-weight: 700;
}

.phwo-nav-list > li.phwo-nav-rishta > a:hover,
.phwo-nav-list > li.phwo-nav-rishta.current-menu-item > a {
	background: none;
	color: var(--phwo-color-primary);
	box-shadow: none;
	transform: none;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

/* The badge was gold on green; on white it needs its own edge to stay crisp. */
.phwo-nav-list > li.phwo-nav-rishta .phwo-nav-badge {
	background: var(--phwo-color-accent);
	color: var(--phwo-color-ink);
	border: 1px solid rgba(160, 104, 20, .35);
}

/* The drawer version was a card on a white panel, so it loses the fill too. */
@media (max-width: 860px) {
	.phwo-nav-list > li.phwo-nav-rishta > a {
		background: none;
		color: var(--phwo-color-primary);
		box-shadow: none;
	}
}


/* ==========================================================================
   Corner radius, settled at 5px (26 Sep 2026)

   The owner does not want rounded controls. Five pixels keeps the edge from
   looking unfinished without the shape reading as a pill or a tag.
   ========================================================================== */

.phwo-cta-donate { border-radius: 5px; }
.phwo-cta-donate .phwo-cta-halo,
.phwo-cta-donate .phwo-cta-shine { border-radius: 5px; }

@media (max-width: 400px) {
	.phwo-cta-donate.phwo-cta-mobile { border-radius: 5px; }
}

/* The phone and email chips in the top bar, to match. */
.phwo-topbar-contact .phwo-contact-link { border-radius: 5px; }

/* WHY THIS EXISTS: an older rule, `.phwo-nav-actions a.phwo-cta`, pins the
   header Donate button to 999px. Two classes and an element beat the single
   class the 5px rule used, so the pill shape survived every attempt to square
   it off. Matching that specificity, later in the file, is what settles it. */
.phwo-nav-actions a.phwo-cta,
.phwo-nav-actions a.phwo-cta-donate { border-radius: 5px; }

/* Donate button contents in PHWO gold on the green, at normal weight
   (owner, 26 Sep 2026). Selectors carry the same weight as the older header
   rules so this is not silently overridden again. */
.phwo-nav-actions a.phwo-cta-donate,
.phwo-nav-actions a.phwo-cta-donate:hover,
.phwo-nav-actions a.phwo-cta-donate:focus-visible,
a.phwo-cta-donate.phwo-cta-mobile,
a.phwo-cta-donate.phwo-cta-mobile:hover,
a.phwo-cta-donate.phwo-cta-mobile:focus-visible {
	color: var(--phwo-color-accent, #E8A33D);
	font-weight: 400;
}

.phwo-nav-actions a.phwo-cta-donate .phwo-cta-label,
.phwo-nav-actions a.phwo-cta-donate .phwo-cta-heart,
.phwo-nav-actions a.phwo-cta-donate .phwo-cta-arrow,
a.phwo-cta-donate.phwo-cta-mobile .phwo-cta-label,
a.phwo-cta-donate.phwo-cta-mobile .phwo-cta-heart {
	color: var(--phwo-color-accent, #E8A33D);
	font-weight: 400;
}

/* Gold on green was not legible enough — contents back to white, weight
   stays normal (owner, 26 Sep 2026). */
.phwo-nav-actions a.phwo-cta-donate,
.phwo-nav-actions a.phwo-cta-donate:hover,
.phwo-nav-actions a.phwo-cta-donate:focus-visible,
a.phwo-cta-donate.phwo-cta-mobile,
a.phwo-cta-donate.phwo-cta-mobile:hover,
a.phwo-cta-donate.phwo-cta-mobile:focus-visible,
.phwo-nav-actions a.phwo-cta-donate .phwo-cta-label,
.phwo-nav-actions a.phwo-cta-donate .phwo-cta-heart,
.phwo-nav-actions a.phwo-cta-donate .phwo-cta-arrow,
a.phwo-cta-donate.phwo-cta-mobile .phwo-cta-label,
a.phwo-cta-donate.phwo-cta-mobile .phwo-cta-heart {
	color: #fff;
	font-weight: 400;
}


/* ==========================================================================
   Homepage appeal hero (26 Sep 2026)

   Built the way the large international charities build theirs: one
   full-bleed photograph, the need stated in a sentence, trust stated in a
   sentence, and the donation able to begin from the hero itself. Nothing
   moves on its own — the owner asked for a still page — and corners follow
   the site's 5px rule.
   ========================================================================== */

.phwo-appeal {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 80vh, 780px);
	overflow: hidden;
	color: #fff;
	background: #0a3438;
	isolation: isolate;
}

.phwo-appeal-media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.phwo-appeal-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The people in the photograph stand right of centre; keep them in frame
	   while the copy takes the left. */
	object-position: 68% 38%;
	display: block;
}

/* A deep teal wash from the left, clearing to the right, so white text reads
   at WCAG AA over any part of the photograph without hiding its subject. */
.phwo-appeal-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			rgba(7, 36, 40, .94) 0%,
			rgba(7, 36, 40, .86) 34%,
			rgba(7, 36, 40, .48) 60%,
			rgba(7, 36, 40, .12) 100%),
		linear-gradient(0deg, rgba(7, 36, 40, .45) 0%, rgba(7, 36, 40, 0) 38%);
}

.phwo-appeal-inner {
	width: 100%;
	max-width: var(--phwo-page, 1280px);
	margin: 0 auto;
	padding: 72px 24px;
}

.phwo-appeal-copy { max-width: 640px; }

.phwo-appeal-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .86);
}

.phwo-appeal-eyebrow::before {
	content: "";
	flex: 0 0 32px;
	height: 2px;
	background: #7fd1c9;
}

.phwo-appeal h1 {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(2.1rem, 4.3vw, 3.55rem);
	line-height: 1.08;
	letter-spacing: -.01em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.phwo-appeal-lede {
	margin: 0 0 28px;
	max-width: 34em;
	font-size: clamp(1.02rem, 1.3vw, 1.16rem);
	line-height: 1.62;
	color: rgba(255, 255, 255, .9);
}

/* Quick amounts: pick one and the donation form opens with it filled in. */
.phwo-appeal-give {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
}

.phwo-appeal-amt {
	padding: 11px 18px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 5px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.phwo-appeal-amt:hover,
.phwo-appeal-amt:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--phwo-color-primary, #0D5C63);
}

.phwo-appeal-amt-other { font-weight: 500; }

.phwo-appeal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 26px;
}

.phwo-appeal-btn,
.phwo-appeal-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 30px;
	border-radius: 5px;
	font-weight: 600;
	font-size: 1.02rem;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.phwo-appeal-btn {
	background: #fff;
	color: var(--phwo-color-primary, #0D5C63);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.phwo-appeal-btn:hover,
.phwo-appeal-btn:focus-visible {
	background: #e9f6f4;
	color: var(--phwo-color-primary, #0D5C63);
	transform: translateY(-1px);
}

.phwo-appeal-btn-ghost {
	border: 1.5px solid rgba(255, 255, 255, .75);
	color: #fff;
}

.phwo-appeal-btn-ghost:hover,
.phwo-appeal-btn-ghost:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.phwo-appeal a:focus-visible {
	outline: 3px solid #7fd1c9;
	outline-offset: 3px;
}

.phwo-appeal-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
	color: rgba(255, 255, 255, .86);
}

.phwo-appeal-trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.phwo-appeal-trust li::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	border-radius: 50%;
	background: #7fd1c9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%230a3438' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---- Phones: the photograph sits behind a darker, vertical wash, and the
   amounts become a tidy two-by-two so every one is a comfortable tap. ---- */
@media (max-width: 760px) {

	.phwo-appeal {
		min-height: 0;
		align-items: flex-end;
	}

	.phwo-appeal-img { object-position: 62% 30%; }

	.phwo-appeal-shade {
		background: linear-gradient(180deg,
			rgba(7, 36, 40, .55) 0%,
			rgba(7, 36, 40, .82) 42%,
			rgba(7, 36, 40, .96) 100%);
	}

	.phwo-appeal-inner { padding: 120px 18px 40px; }

	.phwo-appeal-eyebrow { font-size: .72rem; margin-bottom: 14px; }
	.phwo-appeal-eyebrow::before { flex-basis: 22px; }

	.phwo-appeal h1 { font-size: clamp(1.8rem, 7.4vw, 2.3rem); }

	.phwo-appeal-lede { margin-bottom: 22px; }

	.phwo-appeal-give {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.phwo-appeal-amt { text-align: center; padding: 12px 10px; }

	.phwo-appeal-actions { flex-direction: column; }

	.phwo-appeal-btn,
	.phwo-appeal-btn-ghost { width: 100%; }

	.phwo-appeal-trust { flex-direction: column; gap: 8px; font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
	.phwo-appeal-btn:hover { transform: none; }
}


/* ==========================================================================
   Donate page (26 Sep 2026)

   Not a full-screen hero: a rich appeal band that says what a gift does in
   real prices, with each price one click from a pre-filled form. Still, no
   motion, 5px corners — the owner's rules for the whole site.
   ========================================================================== */

.phwo-give-hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	background: #0a3438;
	overflow: hidden;
}

/* The homepage photograph, held far back behind a deep teal wash, so the
   band has depth without competing with the words. */
.phwo-give-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--phwo-give-bg, none) 70% 35% / cover no-repeat;
	opacity: .55;
}

.phwo-give-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(7, 36, 40, .96) 0%, rgba(7, 36, 40, .88) 46%, rgba(7, 36, 40, .72) 100%);
}

.phwo-give-hero-inner {
	max-width: var(--phwo-page, 1280px);
	margin: 0 auto;
	padding: 56px 24px 60px;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.phwo-give-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.phwo-give-eyebrow::before {
	content: "";
	flex: 0 0 32px;
	height: 2px;
	background: #7fd1c9;
}

.phwo-give-hero h1 {
	margin: 0 0 16px;
	color: #fff;
	font-size: clamp(1.9rem, 3.4vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.phwo-give-lede {
	margin: 0 0 24px;
	max-width: 32em;
	font-size: 1.06rem;
	line-height: 1.62;
	color: rgba(255, 255, 255, .88);
}

.phwo-give-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .88rem;
	color: rgba(255, 255, 255, .86);
}

.phwo-give-trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.phwo-give-trust li::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	border-radius: 50%;
	background: #7fd1c9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%230a3438' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---- What a gift does ---------------------------------------------- */
.phwo-give-impact {
	background: #fff;
	color: var(--phwo-color-ink, #14262B);
	border-radius: 5px;
	padding: 22px 22px 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.phwo-give-impact-title {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--phwo-color-primary, #0D5C63);
}

.phwo-give-tile {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 14px;
	margin-bottom: 8px;
	border: 1px solid var(--phwo-line, #dde5e6);
	border-radius: 5px;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.phwo-give-tile:hover,
.phwo-give-tile:focus-visible {
	border-color: var(--phwo-color-primary, #0D5C63);
	background: rgba(13, 92, 99, .04);
	color: inherit;
}

.phwo-give-tile:focus-visible {
	outline: 3px solid rgba(13, 92, 99, .35);
	outline-offset: 2px;
}

.phwo-give-tile-amt {
	min-width: 6.4em;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--phwo-color-primary, #0D5C63);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.phwo-give-tile-what {
	font-size: .93rem;
	line-height: 1.4;
}

.phwo-give-tile-go {
	font-size: 1.1rem;
	color: var(--phwo-color-primary, #0D5C63);
	opacity: .55;
	transition: opacity .15s ease, transform .15s ease;
}

.phwo-give-tile:hover .phwo-give-tile-go {
	opacity: 1;
	transform: translateX(2px);
}

.phwo-give-tile-any .phwo-give-tile-amt { font-size: 1rem; }

.phwo-give-impact-note {
	margin: 6px 2px 0;
	font-size: .76rem;
	color: var(--phwo-muted, #6b7a80);
}

/* ---- Form and the cards beside it ------------------------------------ */
.phwo-give-main {
	max-width: var(--phwo-page, 1280px);
	margin: 0 auto;
	padding: 44px 24px 64px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	align-items: start;
	scroll-margin-top: 90px;
}

.phwo-give-form { min-width: 0; }

.phwo-give-aside {
	position: sticky;
	top: 100px;
	display: grid;
	gap: 14px;
}

.phwo-give-card {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--phwo-line, #dde5e6);
	border-radius: 5px;
}

.phwo-give-card h2 {
	margin: 0 0 8px;
	font-size: 1rem;
	line-height: 1.3;
}

.phwo-give-card p,
.phwo-give-card li {
	margin: 0;
	font-size: .9rem;
	line-height: 1.58;
	color: #3c4d52;
}

.phwo-give-card ul {
	margin: 0 0 10px;
	padding-left: 1.05rem;
}

.phwo-give-card li { margin-bottom: 6px; }

.phwo-give-link {
	display: inline-block;
	margin-top: 8px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--phwo-color-primary, #0D5C63);
	text-decoration: none;
}

.phwo-give-link:hover { text-decoration: underline; }

.phwo-give-card-warn {
	border-left: 4px solid #b7412b;
	background: #fdf7f5;
}

.phwo-give-org {
	margin: 4px 2px 0;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--phwo-muted, #6b7a80);
}

.phwo-give-org a { color: inherit; }

/* ---- Tablet and phone ------------------------------------------------ */
@media (max-width: 980px) {
	.phwo-give-hero-inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 20px 44px;
	}

	.phwo-give-main {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 32px 18px 48px;
	}

	.phwo-give-aside { position: static; }
}

@media (max-width: 560px) {
	.phwo-give-hero h1 { font-size: clamp(1.65rem, 7vw, 2rem); }
	.phwo-give-trust { flex-direction: column; gap: 8px; }
	.phwo-give-impact { padding: 18px 14px 12px; }
	.phwo-give-tile { gap: 10px; padding: 12px 10px; }
	.phwo-give-tile-amt { min-width: 5.6em; font-size: 1.02rem; }
	.phwo-give-tile-what { font-size: .88rem; }
}


/* ==========================================================================
   Floating controls and footer tidy-up (26 Sep 2026)
   ========================================================================== */

/* Desktop: the assistant launcher sat on top of the Privacy / Terms row at the
   foot of every page. It is lifted clear of it, and the language pill — when a
   page has one — sits at exactly the same height on the opposite side. */
@media (min-width: 861px) {
	.phwo-assist:not(.is-open) { bottom: 88px; }
	/* Language switch stacked under the assistant, on the same right edge. */
	body .phwo-lang-pill { top: auto !important; bottom: 30px !important; right: 22px !important; left: auto !important; }
}

/* Phones: the pill and the full "PHWO Assistant" launcher do not both fit on a
   360px screen, so where the pill is shown the launcher drops to its icon. */
@media (max-width: 860px) {
	body:has(.phwo-lang-pill) .phwo-assist:not(.is-open) .pa-launch-text { display: none; }
	/* Phones: the bottom bar owns the foot of the screen, so the switch sits
	   just above the assistant icon, both on the right, clear of page content. */
	body .phwo-lang-pill { top: auto !important; bottom: 150px !important; right: 14px !important; left: auto !important; }
	body:not(.has-stickybar) .phwo-lang-pill { bottom: 142px !important; }
	body:has(.phwo-assist.is-open) .phwo-lang-pill { display: none !important; }
}

/* Footer legal row: more air, and a divider between each link. */
.phwo-legal-menu { gap: 6px 0 !important; }
.phwo-legal-menu li { display: inline-flex; align-items: center; }
.phwo-legal-menu li + li::before {
	content: "|";
	margin: 0 14px;
	color: rgba(255, 255, 255, .35);
}

/* The ring on the footer Rishta Desk link inherited the chevron's absolute
   position at left: 0, so wherever the pill had no left padding it was drawn
   on top of the "R". It now sits in the line like any other character. */
.phwo-footer-col ul a.phwo-footer-rishta::before {
	position: static;
	top: auto;
	left: auto;
	display: inline-block;
}

@media (max-width: 860px) {
	.phwo-footer-col ul a.phwo-footer-rishta::before { margin-right: .4rem; }
}

/* ---------------------------------------------------------------- Homepage: volunteers wanted */
.phwo-vol { background: linear-gradient(180deg, #f3f8f8 0%, #ffffff 100%); border-top: 1px solid #e3ecec; border-bottom: 1px solid #e3ecec; padding: 56px 16px; }
.phwo-vol-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 44px; align-items: center; }
.phwo-vol-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0D5C63; }
.phwo-vol h2 { margin: 0 0 14px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; color: #101c20; }
.phwo-vol-lead { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: #33454a; max-width: 60ch; }
.phwo-vol-law { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start; padding: 16px 18px; background: #fff; border: 1px solid #f0d9ad; border-left: 5px solid #E8A33D; border-radius: 5px; text-decoration: none; color: #101c20; box-shadow: 0 4px 16px rgba(232,163,61,.12); }
.phwo-vol-law:hover { border-color: #E8A33D; }
.phwo-vol-law-ico { grid-row: 1 / span 2; font-size: 28px; line-height: 1; padding-top: 2px; }
.phwo-vol-law strong { display: block; font-size: 17px; }
.phwo-vol-law small { display: block; margin-top: 4px; color: #5d6d72; font-size: 14.5px; line-height: 1.5; }
.phwo-vol-law em { grid-column: 2; font-style: normal; font-weight: 700; color: #0D5C63; margin-top: 6px; }
.phwo-vol-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: #33454a; font-size: 15px; }
.phwo-vol-points li::before { content: "✓"; color: #0D5C63; font-weight: 700; margin-right: 6px; }

.phwo-vol-form { background: #fff; border: 1px solid #dfe8e9; border-radius: 5px; padding: 24px; box-shadow: 0 10px 30px rgba(13,92,99,.10); }
.phwo-vol-form-title { margin: 0; font-size: 20px; font-weight: 700; color: #101c20; }
.phwo-vol-form-sub { margin: 4px 0 12px; color: #5d6d72; font-size: 14.5px; }
.phwo-vol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.phwo-vol-chips label { position: relative; cursor: pointer; }
.phwo-vol-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.phwo-vol-chips span { display: inline-block; padding: 9px 12px; border: 1px solid #cfdcdd; border-radius: 5px; font-size: 14px; color: #33454a; background: #fff; }
.phwo-vol-chips input:checked + span { background: #0D5C63; border-color: #0D5C63; color: #fff; }
.phwo-vol-chips input:focus-visible + span { outline: 2px solid #E8A33D; outline-offset: 2px; }
.phwo-vol-field { display: block; margin-bottom: 12px; }
.phwo-vol-field span { display: block; font-size: 14px; font-weight: 600; color: #33454a; margin-bottom: 4px; }
.phwo-vol-field input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid #cfdcdd; border-radius: 5px; font-size: 16px; }
.phwo-vol-field input:focus { outline: none; border-color: #0D5C63; box-shadow: 0 0 0 3px rgba(13,92,99,.15); }
.phwo-vol-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phwo-vol-form button { width: 100%; min-height: 50px; border: 0; border-radius: 5px; background: #0D5C63; color: #fff; font-size: 17px; font-weight: 600; cursor: pointer; }
.phwo-vol-form button:hover { background: #0a4a50; }
.phwo-vol-note { margin: 10px 0 0; font-size: 13px; color: #6a7a7f; text-align: center; }

@media (max-width: 900px) {
	.phwo-vol { padding: 40px 16px; }
	.phwo-vol-inner { grid-template-columns: 1fr; gap: 26px; }
	.phwo-vol-two { grid-template-columns: 1fr; gap: 0; }
}


/* Footer Rishta Desk button: one line, badge never wraps (27 Sep 2026). */
.phwo-footer-col ul a.phwo-footer-rishta,
.phwo-footer-col ul a.phwo-footer-rishta:hover {
	display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important;
	gap: 8px !important; width: auto !important; max-width: 100% !important;
	white-space: nowrap !important; line-height: 1.2 !important;
	padding: 8px 12px !important; border-radius: 5px !important;
}
.phwo-footer-col ul a.phwo-footer-rishta::before { margin: 0 !important; flex: none; font-size: 1rem; line-height: 1; }
.phwo-footer-col ul a.phwo-footer-rishta em {
	flex: none !important; display: inline-block !important; white-space: nowrap !important;
	width: auto !important; height: auto !important; min-width: 0 !important;
	padding: 3px 7px !important; border-radius: 5px !important; line-height: 1.2 !important; font-size: .66rem !important;
}


/* Page and post titles: use the width that is there (28 Sep 2026). */
.phwo-page-head h1 { max-width: 34ch; }
@media (max-width: 860px) { .phwo-page-head h1 { max-width: none; } }