/* ====================================================================
   THE ABOUT AND CONTACT PAGES

   Their own designs, not the homepage's sections. Built from the AboutB
   and ContactB artboards in design-drafts/ — the directions the owner
   chose — at the width they were drawn for.

   MOBILE FIRST, as CLAUDE.md requires: every base rule here is the phone
   layout, and the wider screens are the exception further down. Nothing
   in this file starts as a desktop layout with a breakpoint bolted on.
   ==================================================================== */

/* -------------------------------------------------------- ABOUT PAGE */

.df-apage__open {
	padding-block: var(--df-sp-8) var(--df-sp-7);
}

.df-apage__rule {
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--df-gold);
	vertical-align: middle;
	margin-right: var(--df-sp-3);
}

.df-apage__statement {
	font-family: var(--df-font-display);
	/* Reaches 29px at 390px wide, which is the artboard, and keeps growing
	   to a comfortable maximum rather than a heroic one. */
	font-size: clamp(1.65rem, 7.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.028em;
	margin: var(--df-sp-5) 0 var(--df-sp-5);
	text-wrap: pretty;
}

.df-apage__intro {
	margin: 0;
	font-size: var(--df-fs-body);
	line-height: 1.72;
	color: var(--df-fg-muted);
}

/* Three checkable numbers. A hairline band, not cards: cards would make
   them read as features rather than facts. */
.df-apage__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--df-bg-line);
	border-bottom: 1px solid var(--df-bg-line);
}

.df-apage__fact {
	padding: var(--df-sp-5) var(--df-sp-2);
	text-align: center;
	border-right: 1px solid var(--df-bg-line);
	min-width: 0;
}

.df-apage__fact:last-child { border-right: 0; }

.df-apage__fact-value {
	display: block;
	font-family: var(--df-font-display);
	font-size: clamp(1.35rem, 6vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--df-gold);
	line-height: 1;
}

.df-apage__fact-label {
	display: block;
	margin-top: 7px;
	font-size: var(--df-fs-tiny);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--df-fg-muted);
	line-height: 1.35;
}

/* The pause. Wide and short — which is exactly why the Control Center field
   asks for a landscape photo. A portrait cropped into this band is the blurry
   smear the owner reported, and no CSS can fix a photo of the wrong shape. */
.df-apage__plate {
	height: clamp(220px, 38vh, 380px);
	overflow: hidden;
}

.df-apage__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.df-apage__mission {
	padding-block: var(--df-sp-8);
	text-align: center;
}

.df-apage__mission-text {
	margin: var(--df-sp-5) auto 0;
	max-width: 30ch;
	font-family: var(--df-font-display);
	font-size: clamp(1.3rem, 5.6vw, 1.9rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.02em;
	text-wrap: pretty;
}

.df-apage__points {
	padding-block: var(--df-sp-7) var(--df-sp-8);
}

.df-apage__points-title {
	font-family: var(--df-font-display);
	font-size: clamp(1.25rem, 5.2vw, 1.65rem);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 var(--df-sp-6);
	text-wrap: pretty;
}

.df-apage__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Numbered rows. The number says "three things", so the reader can see
   where the end is — which a bullet cannot do. */
.df-apage__point {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--df-sp-4);
	padding: var(--df-sp-5) 0;
	border-top: 1px solid var(--df-bg-line);
}

.df-apage__point:last-child { border-bottom: 1px solid var(--df-bg-line); }

.df-apage__point-num {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-small);
	font-weight: 800;
	color: var(--df-gold);
	letter-spacing: .04em;
	padding-top: 3px;
}

.df-apage__point-title {
	font-family: var(--df-font-body);
	font-size: var(--df-fs-body);
	font-weight: 700;
	margin: 0 0 var(--df-sp-2);
}

.df-apage__point-text {
	margin: 0;
	font-size: var(--df-fs-small);
	line-height: 1.68;
	color: var(--df-fg-muted);
}

.df-apage__team {
	padding-block: var(--df-sp-7) var(--df-sp-8);
	background: var(--df-bg-elevated);
}

.df-apage__team-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--df-sp-6);
	align-items: center;
}

.df-apage__team-media {
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.df-apage__team-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.df-apage__team-title {
	font-family: var(--df-font-display);
	font-size: clamp(1.25rem, 5.2vw, 1.65rem);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 var(--df-sp-4);
	text-wrap: pretty;
}

.df-apage__team-text {
	margin: 0;
	font-size: var(--df-fs-small);
	line-height: 1.72;
	color: var(--df-fg-muted);
}

.df-apage__close {
	padding-block: var(--df-sp-8);
}

.df-apage__outro {
	margin: 0 0 var(--df-sp-5);
	font-size: var(--df-fs-h4);
	line-height: 1.6;
	color: var(--df-fg-muted);
	text-wrap: pretty;
}

/* Underlined, not a filled button: the header already carries the one gold
   button on the page, and two compete. */
.df-apage__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--df-sp-3);
	min-height: 44px;
	padding-bottom: var(--df-sp-2);
	border-bottom: 2px solid var(--df-gold);
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h4);
	font-weight: 700;
	color: var(--df-fg);
}

.df-apage__cta .df-icon {
	color: var(--df-gold);
	transition: transform 0.35s var(--df-ease-out);
}

.df-apage__cta:hover .df-icon { transform: translateX(5px); }

/* ------------------------------------------------------ CONTACT PAGE */

.df-cpage { padding-block: var(--df-sp-7) 0; }

/* One wide green button and nothing competing with it. People recognise
   the colour before they read the label, and in Egypt this is how a family
   gets in touch first. */
.df-cpage__wa {
	display: flex;
	align-items: center;
	gap: var(--df-sp-4);
	background: #25D366;
	color: #08160C;
	padding: var(--df-sp-5);
	border-radius: var(--df-radius);
	min-height: 44px;
}

.df-cpage__wa:hover { background: #1EBE5A; color: #08160C; }

.df-cpage__wa-icon { display: inline-flex; flex-shrink: 0; }

.df-cpage__wa-body { min-width: 0; }

.df-cpage__wa-title {
	display: block;
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h4);
	font-weight: 800;
	letter-spacing: -.015em;
}

.df-cpage__wa-sub {
	display: block;
	margin-top: 2px;
	font-size: var(--df-fs-small);
	color: rgba(8, 22, 12, .72);
	line-height: 1.45;
}

.df-cpage__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--df-sp-2);
	margin-top: var(--df-sp-2);
}

.df-cpage__tile {
	display: block;
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius);
	padding: var(--df-sp-5) var(--df-sp-4);
	min-height: 44px;
	min-width: 0;
}

a.df-cpage__tile:hover { border-color: var(--df-gold); }

.df-cpage__tile-icon { display: inline-flex; color: var(--df-gold); }

.df-cpage__tile-label {
	display: block;
	margin-top: var(--df-sp-3);
	font-family: var(--df-font-display);
	font-size: var(--df-fs-body);
	font-weight: 700;
	color: var(--df-fg);
}

.df-cpage__tile-value {
	display: block;
	margin-top: 3px;
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.df-cpage__band {
	margin-top: var(--df-sp-7);
	padding-block: var(--df-sp-6);
	border-top: 1px solid var(--df-bg-line);
	border-bottom: 1px solid var(--df-bg-line);
}

.df-cpage__hours {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--df-sp-2) var(--df-sp-3);
}

.df-cpage__hours-label {
	font-size: var(--df-fs-tiny);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--df-gold);
}

.df-cpage__hours-value {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h4);
	font-weight: 700;
	letter-spacing: -.015em;
}

.df-cpage__note {
	margin: var(--df-sp-4) 0 0;
	font-size: var(--df-fs-small);
	line-height: 1.7;
	color: var(--df-fg-muted);
	max-width: 52ch;
}

.df-cpage__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-sp-2) var(--df-sp-5);
	list-style: none;
	margin: var(--df-sp-5) 0 0;
	padding: 0;
}

.df-cpage__link {
	display: inline-flex;
	align-items: center;
	gap: var(--df-sp-2);
	min-height: 44px;
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	overflow-wrap: anywhere;
}

.df-cpage__link:hover { color: var(--df-gold); }
.df-cpage__link .df-icon { color: var(--df-gold); flex-shrink: 0; }

.df-cpage__form-wrap { padding-block: var(--df-sp-8); }

.df-cpage__form-title {
	font-family: var(--df-font-display);
	font-size: clamp(1.45rem, 6.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -.025em;
	margin: 0 0 var(--df-sp-3);
	text-wrap: pretty;
}

.df-cpage__form-lead {
	margin: 0 0 var(--df-sp-6);
	font-size: var(--df-fs-small);
	line-height: 1.6;
	color: var(--df-fg-muted);
}

/* The page supplies its own frame, so the shared form must not bring a
   second card of its own. */
.df-cpage .df-contact__form {
	background: none;
	border: 0;
	padding: 0;
}

.df-cpage .df-contact__form-title { display: none; }

/* The page carries its own reassurance under the button, so the form's
   built-in one would print two lines of the same promise, stacked. */
.df-cpage .df-contact__note { display: none; }

.df-cpage__reassure {
	margin: var(--df-sp-4) 0 0;
	text-align: center;
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint, var(--df-fg-muted));
}

/* ------------------------------------------------- wider than a phone */

@media (min-width: 760px) {
	.df-apage__open { padding-block: var(--df-sp-9) var(--df-sp-8); }
	.df-apage__fact { padding-block: var(--df-sp-6); }
	.df-apage__mission { padding-block: var(--df-sp-9); }
	.df-apage__points { padding-block: var(--df-sp-8) var(--df-sp-9); }
	.df-apage__point { gap: var(--df-sp-5); padding-block: var(--df-sp-6); }
	.df-apage__team { padding-block: var(--df-sp-9); }
	.df-apage__team-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--df-sp-8); }
	.df-apage__close { padding-block: var(--df-sp-9); }

	.df-cpage { padding-block: var(--df-sp-8) 0; }
	.df-cpage__wa { padding: var(--df-sp-6); }
	.df-cpage__tiles { gap: var(--df-sp-3); }
	.df-cpage__band { padding-block: var(--df-sp-7); }
	.df-cpage__form-wrap { padding-block: var(--df-sp-9); }
}

@media (prefers-reduced-motion: reduce) {
	.df-apage__cta .df-icon { transition: none; }
	.df-apage__cta:hover .df-icon { transform: none; }
}

/* ====================================================================
   MOTION

   Two tiers, and the split matters on a phone.

   Tier one is scroll-DRIVEN: the browser ties the animation to scroll
   position with animation-timeline, off the main thread, with no
   JavaScript at all and nothing to load. Chrome, Edge and Safari 26 have
   it. Everything here is decoration, so a browser without it simply gets
   the page without the decoration -- which is why none of it is behind a
   polyfill.

   Tier two is the reveal-on-arrival in reveal.js, ~1KB, which every
   browser gets.

   Both stop dead under prefers-reduced-motion.
   ==================================================================== */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		/* The wide photograph drifts as it passes, so a still image is not a
		   dead rectangle. Scaled up first: without the overscale, translating
		   would drag the photo's own edges into view. */
		.df-apage__plate img,
		.df-apage__team-media img {
			animation: df-page-drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
			will-change: transform;
		}

		@keyframes df-page-drift {
			from { transform: scale(1.16) translateY(-2.2%); }
			to   { transform: scale(1.16) translateY(2.2%); }
		}

		/* Each fact lifts slightly as the band arrives. */
		.df-apage__fact {
			animation: df-fact-lift linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 90%;
		}

		@keyframes df-fact-lift {
			from { opacity: .35; transform: translateY(14px); }
			to   { opacity: 1; transform: none; }
		}
	}

	@supports (animation-timeline: scroll()) {

		/* How far through the page you are, as a gold line across the top.
		   The homepage has one of these driven by GSAP (.df-scroll-progress in
		   motion.css); this is the same bar, same height, same glow, same
		   stacking order -- just tied to the scroll position by the browser
		   instead of by 165KB of JavaScript. Matching it matters: two progress
		   bars that look slightly different read as a bug. */
		.df-apage::before,
		.df-cpage::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			height: 3px;
			width: 100%;
			transform-origin: 0 50%;
			background: var(--df-gold-gradient);
			box-shadow: 0 0 12px var(--df-gold);
			z-index: 9998;
			pointer-events: none;
			animation: df-page-progress linear both;
			animation-timeline: scroll(root block);
		}

		@keyframes df-page-progress {
			from { transform: scaleX(0); }
			to   { transform: scaleX(1); }
		}
	}
}

/* The numbers count up when the band arrives — reveal.js drives this, and
   the tabular figures stop the row jittering as the digits change. */
.df-apage__fact-value[data-df-count] {
	font-variant-numeric: tabular-nums;
}