/**
 * Dog Father Pro — Homepage section styling.
 * The premium look. Tokens come from tokens.css, motion attrs from motion.css.
 */

/* Section heading rhythm */
.df-section__head {
	max-width: 720px;
	margin-bottom: var(--df-sp-9);
}
.df-section__title {
	margin-bottom: var(--df-sp-5);
}
.df-section__lead {
	font-size: var(--df-fs-h4);
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
}

/* ================================================================== */
/* HEADER                                                              */
/* ================================================================== */
.df-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-block: var(--df-sp-4);
	transition: padding var(--df-dur-base) var(--df-ease-out);
}

/* The frosted bar is painted by a pseudo-element rather than by .df-header
   itself, and this is load-bearing rather than tidiness.
   
   backdrop-filter makes an element the containing block for every
   position:fixed descendant it has -- exactly like transform does. The mobile
   drawer (.df-header__nav) is fixed and lives inside this header, so while
   .is-scrolled put backdrop-filter here, the drawer's top:0/bottom:0 resolved
   against the ~116px header box instead of the viewport. Measured on a 390px
   viewport: the drawer collapsed from 844px tall to 116px, and overflow-y
   clipped everything below it. Home stayed tappable; Gallery, Blog, About Us
   and Contact Us were clipped out of the drawer, so taps fell through to the
   dimming overlay behind, which closes the menu. The menu opened, the visitor
   tapped a page, and the menu just shut again.
   
   The header only ever becomes .is-scrolled after 60px of scrolling, which is
   why this looked fine at the top of the page and broke for every real
   visitor.
   
   Keep backdrop-filter, filter, transform and will-change OFF .df-header for
   as long as the drawer is a fixed child of it. */
.df-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: rgba(10, 10, 11, 0.75);
	backdrop-filter: var(--df-blur-card);
	-webkit-backdrop-filter: var(--df-blur-card);
	border-bottom: 1px solid var(--df-bg-line);
	transition: opacity var(--df-dur-base) var(--df-ease-out);
	pointer-events: none;
}
.df-header.is-scrolled::before { opacity: 1; }
.df-header.is-scrolled {
	padding-block: var(--df-sp-3);
}
.df-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-sp-5);
}
.df-header__logo {
	display: flex;
	align-items: center;
	gap: var(--df-sp-3);
	color: var(--df-fg);
	font-family: var(--df-font-display);
	font-weight: 700;
	font-size: var(--df-fs-h4);
	letter-spacing: var(--df-ls-tight);
}
.df-header__logo-mark {
	display: flex;
	color: var(--df-gold);
	transition: transform var(--df-dur-base) var(--df-ease-spring);
}
.df-header__logo:hover .df-header__logo-mark { transform: rotate(-8deg) scale(1.05); }
.df-header__logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.df-header__logo-name {
	font-family: var(--df-font-display);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: var(--df-ls-tight);
}
.df-header__logo-tag {
	font-family: var(--df-font-body);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--df-gold);
	text-transform: uppercase;
	margin-top: 3px;
}
.df-header__logo:hover { color: var(--df-fg); }

.df-header__nav { display: flex; }
.df-header__menu {
	display: flex;
	gap: var(--df-sp-6);
}
.df-header__menu a {
	color: var(--df-fg-muted);
	font-size: var(--df-fs-small);
	font-weight: 500;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	position: relative;
}
.df-header__menu a::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--df-gold);
	transition: width var(--df-dur-base) var(--df-ease-out);
}
.df-header__menu a:hover { color: var(--df-gold); }
.df-header__menu a:hover::after { width: 100%; }

.df-header__actions {
	display: flex;
	align-items: center;
	gap: var(--df-sp-4);
}
.df-btn--sm {
	padding: var(--df-sp-3) var(--df-sp-5);
	font-size: var(--df-fs-small);
}
.df-header__burger {
	display: none;
	background: none;
	border: none;
	color: var(--df-fg);
	cursor: pointer;
	padding: var(--df-sp-2);
}

/* ================================================================== */
/* HERO                                                                */
/* ================================================================== */
.df-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: 80px;
}
.df-hero__bg {
	position: absolute;
	inset: -10%;
	z-index: 0;
}
.df-hero__bg-image {
	position: absolute;
	inset: 0;
	transform: scale(1.1);
	overflow: hidden;
}
/* object-fit reproduces what background-size: cover / center did, now that
   the hero photo is an <img> that can carry a srcset. */
.df-hero__bg-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.df-hero__bg-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10,10,11,0.5) 0%, rgba(10,10,11,0.85) 100%),
		radial-gradient(ellipse at 30% 50%, rgba(254,194,8,0.12), transparent 60%);
}
.df-hero__bg-noise {
	position: absolute;
	inset: 0;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.df-hero__particles {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.df-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.df-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: calc(100vh - 80px);
	display: flex;
	align-items: center;
}
.df-hero__content {
	max-width: 880px;
	padding-block: var(--df-sp-11);
}
.df-hero__title {
	font-size: var(--df-fs-mega);
	font-weight: 800;
	line-height: var(--df-lh-tight);
	margin-block: var(--df-sp-5) var(--df-sp-6);
	background: linear-gradient(180deg, #FFFFFF 0%, #E5E5EA 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.df-hero__lead {
	font-size: var(--df-fs-h4);
	color: var(--df-fg-muted);
	max-width: 640px;
	line-height: var(--df-lh-normal);
}
.df-hero__actions {
	display: flex;
	gap: var(--df-sp-4);
	margin-block: var(--df-sp-7);
	flex-wrap: wrap;
}
.df-hero__exp-link {
	display: inline-flex;
	align-items: center;
	gap: var(--df-sp-2);
	padding: var(--df-sp-3) var(--df-sp-5);
	font-size: var(--df-fs-small);
	font-weight: 600;
	color: var(--df-gold);
	border: 1px solid var(--df-gold-deep);
	border-radius: var(--df-radius-full);
	background: rgba(254, 194, 8, 0.05);
	transition: all var(--df-dur-base) var(--df-ease-out);
}
.df-hero__exp-link:hover {
	color: var(--df-bg);
	background: var(--df-gold);
	border-color: var(--df-gold);
	transform: translateY(-2px);
}
.df-btn--lg {
	padding: var(--df-sp-4) var(--df-sp-7);
	font-size: var(--df-fs-body);
}

.df-hero__trust {
	display: flex;
	align-items: center;
	gap: var(--df-sp-6);
	margin-top: var(--df-sp-7);
	flex-wrap: wrap;
}
.df-hero__trust-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.df-hero__trust-number {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--df-font-display);
	font-weight: 700;
	font-size: var(--df-fs-h3);
	color: var(--df-gold);
}
.df-hero__trust-label {
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
}
.df-hero__trust-divider {
	width: 1px;
	height: 40px;
	background: var(--df-bg-line);
}

.df-hero__scroll {
	position: absolute;
	bottom: var(--df-sp-6);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--df-sp-3);
	color: var(--df-fg-faint);
	font-size: var(--df-fs-tiny);
	letter-spacing: var(--df-ls-wider);
	text-transform: uppercase;
}
.df-hero__scroll-line {
	width: 1px;
	height: 60px;
	background: linear-gradient(180deg, var(--df-gold), transparent);
	position: relative;
	overflow: hidden;
}
.df-hero__scroll-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 30%;
	background: var(--df-gold);
	animation: df-scroll-pulse 2s var(--df-ease-in-out) infinite;
}
@keyframes df-scroll-pulse {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(300%); }
}

/* ================================================================== */
/* MARQUEE                                                             */
/* ================================================================== */
.df-marquee-section {
	background: var(--df-bg-subtle);
	border-block: 1px solid var(--df-bg-line);
	padding-block: var(--df-sp-5);
}
.df-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--df-sp-3);
	font-family: var(--df-font-display);
	font-weight: 700;
	font-size: var(--df-fs-h4);
	color: var(--df-fg);
	letter-spacing: var(--df-ls-tight);
	padding-inline: var(--df-sp-5);
}
.df-marquee__item .df-icon { color: var(--df-gold); }

/* ================================================================== */
/* SERVICES                                                            */
/* ================================================================== */
.df-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--df-sp-5);
}
.df-service-card {
	position: relative;
	padding: var(--df-sp-6);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-lg);
	transition: border-color var(--df-dur-base) var(--df-ease-out),
	            background var(--df-dur-base) var(--df-ease-out);
	overflow: hidden;
}
.df-service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--df-gold-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--df-dur-base) var(--df-ease-out);
}
.df-service-card:hover {
	border-color: var(--df-gold-deep);
	background: linear-gradient(180deg, var(--df-bg-elevated) 0%, rgba(254,194,8,0.04) 100%);
}
.df-service-card:hover::before { transform: scaleX(1); }
.df-service-card__tag {
	position: absolute;
	top: var(--df-sp-4);
	right: var(--df-sp-4);
	font-size: var(--df-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-bg);
	background: var(--df-gold);
	padding: 4px 10px;
	border-radius: var(--df-radius-full);
}
.df-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--df-radius);
	background: var(--df-gold-glow);
	color: var(--df-gold);
	margin-bottom: var(--df-sp-5);
}
/* A card shows either the gold icon tile or a photograph, never both. The
   frame is a fixed shape with object-fit: cover, so a picture of any
   proportion fills it without being squashed or letterboxed -- including one
   uploaded before the 800x600 crop was registered. */
.df-service-card__photo {
	aspect-ratio: 4 / 3;
	border-radius: var(--df-radius);
	overflow: hidden;
	background: var(--df-bg-subtle);
	margin-bottom: var(--df-sp-5);
}
.df-service-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.df-service-card__title {
	font-size: var(--df-fs-h4);
	margin-bottom: var(--df-sp-3);
}
.df-service-card__desc {
	color: var(--df-fg-muted);
	font-size: var(--df-fs-body);
	line-height: var(--df-lh-normal);
	margin-bottom: var(--df-sp-5);
}
.df-service-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--df-sp-2);
	font-size: var(--df-fs-small);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-gold);
}
.df-service-card__link .df-icon {
	transition: transform var(--df-dur-base) var(--df-ease-out);
}
.df-service-card__link:hover .df-icon { transform: translateX(4px); }

/* ================================================================== */
/* STATS                                                               */
/* ================================================================== */
.df-stats {
	position: relative;
	padding-block: var(--df-sp-10);
	overflow: hidden;
}
.df-stats__bg {
	position: absolute;
	inset: -10%;
	background: radial-gradient(ellipse at center, var(--df-gold-glow), transparent 60%);
	z-index: 0;
}
.df-stats__overlay {
	position: absolute;
	inset: 0;
	background: var(--df-bg);
	opacity: 0.6;
	z-index: 1;
}
.df-stats__inner { position: relative; z-index: 2; }
.df-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--df-sp-6);
}
.df-stat {
	text-align: center;
}
.df-stat__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--df-font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 4rem);
	color: var(--df-gold);
	line-height: 1;
	margin-bottom: var(--df-sp-3);
}
.df-stat__number .df-icon { width: 28px; height: 28px; }
.df-stat__label {
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
}

/* ================================================================== */
/* GALLERY                                                             */
/* ================================================================== */
.df-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 240px;
	gap: var(--df-sp-4);
	/* Items 1 and 5 span two columns. Without dense packing, an item that
	   cannot fit the columns left in the current row is pushed to the next
	   one and the remainder of the row stays empty -- which is exactly the
	   black gaps between photos. Dense back-fills those holes with whichever
	   later item does fit. */
	grid-auto-flow: dense;
}
.df-gallery__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--df-radius);
	margin: 0;
}
.df-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--df-dur-slow) var(--df-ease-out),
	            filter var(--df-dur-base) var(--df-ease-out);
}
.df-gallery__item:hover img {
	transform: scale(1.08);
	filter: brightness(1.1) saturate(1.2);
}
.df-gallery__grid:hover .df-gallery__item:not(:hover) img {
	transform: scale(0.97);
	filter: brightness(0.5) saturate(0.5);
	opacity: 0.6;
}

/* Featured spans */
.df-gallery__item--1 { grid-column: span 2; grid-row: span 2; }
.df-gallery__item--5 { grid-column: span 2; }

/* Liquid-mask variant — gold blobs cover the image then melt away */
.df-gallery__item--liquid .df-liquid-mask {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}
.df-liquid-blob {
	/* JS animates cx from -10 to 115 (off-screen left to off-screen right) */
}

.df-gallery__cta {
	margin-top: var(--df-sp-8);
	text-align: center;
}

/* ================================================================== */
/* REVIEWS (moderated, with submission form)                           */
/* ================================================================== */
.df-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--df-sp-5);
	margin-bottom: var(--df-sp-9);
}
.df-review {
	position: relative;
	padding: var(--df-sp-6);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-lg);
	margin: 0;
}
.df-review__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--df-sp-4);
}
.df-review__stars {
	display: flex;
	gap: 2px;
	color: var(--df-gold);
}
.df-review__source {
	font-size: var(--df-fs-tiny);
	font-weight: 600;
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
}
.df-review__quote {
	font-size: var(--df-fs-body);
	line-height: var(--df-lh-loose);
	color: var(--df-fg);
	margin-bottom: var(--df-sp-5);
}
.df-review__author {
	display: flex;
	align-items: center;
	gap: var(--df-sp-3);
}
.df-review__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--df-gold-gradient);
	color: var(--df-bg);
	font-family: var(--df-font-display);
	font-weight: 800;
	font-size: 18px;
}
.df-review__name {
	font-weight: 600;
	color: var(--df-fg);
}

/* Review submission form */
.df-reviews__submit {
	max-width: 640px;
	margin-inline: auto;
	padding: var(--df-sp-7);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-lg);
}
.df-reviews__submit-title {
	font-size: var(--df-fs-h3);
	text-align: center;
	margin-bottom: var(--df-sp-6);
}
.df-reviews__rating-row {
	margin-bottom: var(--df-sp-4);
}
.df-reviews__rating-row label {
	display: block;
	font-size: var(--df-fs-small);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-fg-muted);
	margin-bottom: var(--df-sp-2);
}
.df-reviews__stars-input {
	display: flex;
	gap: var(--df-sp-2);
}
.df-reviews__star-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--df-bg-line);
	transition: color var(--df-dur-fast) var(--df-ease-out), transform var(--df-dur-fast) var(--df-ease-spring);
}
.df-reviews__star-btn.is-active,
.df-reviews__star-btn:hover {
	color: var(--df-gold);
}
.df-reviews__star-btn:hover { transform: scale(1.15); }
.df-reviews__form .df-contact__field input,
.df-reviews__form .df-contact__field textarea {
	background: var(--df-bg);
}
.df-reviews__form button {
	margin-top: var(--df-sp-3);
	width: 100%;
}

@media (max-width: 900px) {
	.df-reviews__grid { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* TESTIMONIALS                                                        */
/* ================================================================== */
.df-testimonial {
	position: relative;
	padding: var(--df-sp-7);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-lg);
	margin: 0;
}
.df-testimonial__quote-mark {
	position: absolute;
	top: var(--df-sp-5);
	right: var(--df-sp-5);
	color: var(--df-gold);
	opacity: 0.15;
}
.df-testimonial__stars {
	display: flex;
	gap: 4px;
	color: var(--df-gold);
	margin-bottom: var(--df-sp-4);
}
.df-testimonial__quote {
	font-size: var(--df-fs-body);
	line-height: var(--df-lh-loose);
	color: var(--df-fg);
	margin-bottom: var(--df-sp-6);
	font-style: italic;
}
.df-testimonial__author {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.df-testimonial__name {
	font-family: var(--df-font-display);
	font-weight: 700;
	color: var(--df-fg);
}
.df-testimonial__meta {
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
}

/* ================================================================== */
/* ABOUT — the cinematic layout                                        */
/*                                                                     */
/* The two-column grid became a single column with air in it: one       */
/* statement, a full-bleed photograph as the pause, then the detail as  */
/* ruled rows rather than four boxes. Boxes read as a spec sheet; rows  */
/* read as a list of things that are true.                              */
/* ================================================================== */
.df-about {
	padding-block: var(--df-sp-10) var(--df-sp-9);
}
.df-about__lede {
	max-width: 34ch;
}
.df-about__rule {
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--df-gold);
	vertical-align: middle;
	margin-right: var(--df-sp-3);
}
.df-about__title {
	font-family: var(--df-font-display);
	font-size: clamp(2rem, 8vw, 3.25rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.028em;
	margin: 0 0 var(--df-sp-5);
	text-wrap: pretty;
}
.df-about__lead {
	font-size: var(--df-fs-h4);
	line-height: var(--df-lh-loose);
	color: var(--df-fg-muted);
	margin: 0;
}

/* The badge is a line of type now, not a gold disc pinned to a photo --
   there is no photo corner to pin it to in this layout. */
.df-about__badge {
	display: inline-flex;
	align-items: baseline;
	gap: var(--df-sp-3);
	margin-top: var(--df-sp-7);
	padding-top: var(--df-sp-5);
	border-top: 1px solid var(--df-bg-line);
}
.df-about__badge-number {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h2);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--df-gold);
	line-height: 1;
}
.df-about__badge-label {
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
}

/* Full bleed: edge to edge whatever the container is doing. */
.df-about__plate {
	margin-top: var(--df-sp-9);
	height: clamp(240px, 46vh, 460px);
	overflow: hidden;
}
.df-about__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.df-about__list {
	margin-top: var(--df-sp-9);
	display: flex;
	flex-direction: column;
}
.df-about__row {
	display: flex;
	gap: var(--df-sp-4);
	align-items: flex-start;
	padding-block: var(--df-sp-5);
	border-top: 1px solid var(--df-bg-line);
}
.df-about__row:last-child { border-bottom: 1px solid var(--df-bg-line); }
.df-about__row-icon {
	color: var(--df-gold);
	flex: none;
	padding-top: 3px;
}
.df-about__row-body { min-width: 0; }
.df-about__row-title {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h4);
	font-weight: 700;
	letter-spacing: -.015em;
	margin: 0 0 var(--df-sp-2);
}
.df-about__row-desc {
	margin: 0;
	font-size: var(--df-fs-small);
	line-height: var(--df-lh-normal);
	color: var(--df-fg-muted);
}

.df-about__close { margin-top: var(--df-sp-8); }
.df-about__outro {
	margin: 0 0 var(--df-sp-6);
	max-width: 40ch;
	font-size: var(--df-fs-h4);
	line-height: var(--df-lh-loose);
	color: var(--df-fg-muted);
}
/* An underlined link, not a filled button: the filled gold button is the
   header's, and two of them on one screen compete. */
.df-about__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-about__cta .df-icon {
	color: var(--df-gold);
	transition: transform var(--df-dur-base) var(--df-ease-out);
}
.df-about__cta:hover { color: var(--df-fg); }
.df-about__cta:hover .df-icon { transform: translateX(5px); }

/* ================================================================== */
/* FAQ                                                                 */
/* ================================================================== */
.df-faq__inner {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--df-sp-9);
	align-items: start;
}
.df-faq__head { position: sticky; top: 120px; }

.df-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-3);
}
.df-faq__item {
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius);
	overflow: hidden;
	transition: border-color var(--df-dur-base) var(--df-ease-out);
}
.df-faq__item[open] { border-color: var(--df-gold-deep); }
.df-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-sp-4);
	padding: var(--df-sp-5) var(--df-sp-6);
	cursor: pointer;
	font-family: var(--df-font-display);
	font-weight: 600;
	font-size: var(--df-fs-h4);
	color: var(--df-fg);
	list-style: none;
}
.df-faq__question::-webkit-details-marker { display: none; }
.df-faq__question:hover { color: var(--df-gold); }
.df-faq__icon {
	display: flex;
	transition: transform var(--df-dur-base) var(--df-ease-spring);
	color: var(--df-gold);
}
.df-faq__item[open] .df-faq__icon { transform: rotate(45deg); }
.df-faq__answer {
	padding: 0 var(--df-sp-6) var(--df-sp-5);
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
	animation: df-faq-open var(--df-dur-base) var(--df-ease-out);
}
@keyframes df-faq-open {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================== */
/* CTA                                                                 */
/* ================================================================== */
.df-cta {
	position: relative;
	padding-block: var(--df-sp-11);
	overflow: hidden;
}
.df-cta__bg {
	position: absolute;
	inset: -10%;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.df-cta__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.75) 100%),
		radial-gradient(ellipse at 70% 50%, rgba(254,194,8,0.15), transparent 60%);
	z-index: 1;
}
.df-cta__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.df-cta .df-eyebrow { justify-content: center; }
.df-cta__title {
	font-size: var(--df-fs-h1);
	margin-bottom: var(--df-sp-5);
}
.df-cta__lead {
	font-size: var(--df-fs-h4);
	color: var(--df-fg-muted);
	margin-bottom: var(--df-sp-7);
}
.df-cta__actions {
	display: flex;
	gap: var(--df-sp-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* ================================================================== */
/* CONTACT                                                             */
/* ================================================================== */
.df-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: var(--df-sp-8);
	align-items: start;
}
.df-contact__info {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-4);
}
.df-contact__card {
	display: flex;
	align-items: center;
	gap: var(--df-sp-4);
	padding: var(--df-sp-5);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius);
	color: var(--df-fg);
	transition: border-color var(--df-dur-base) var(--df-ease-out),
	            transform var(--df-dur-base) var(--df-ease-out);
}
a.df-contact__card:hover {
	border-color: var(--df-gold-deep);
	color: var(--df-fg);
	transform: translateX(4px);
}
.df-contact__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--df-radius-sm);
	background: var(--df-gold-glow);
	color: var(--df-gold);
}
.df-contact__card-label {
	display: block;
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.df-contact__card-value {
	display: block;
	font-weight: 600;
	color: var(--df-fg);
}

.df-contact__form {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-4);
	padding: var(--df-sp-7);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-lg);
}
.df-contact__form-title {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h4, 1.25rem);
	font-weight: 600;
	color: var(--df-fg);
	margin: 0;
}
.df-contact__hp {
	position: absolute;
	left: -9999px;
}

/* Two fields per row on comfortable widths, one per row on phones.
   The grid owns all the spacing so no field carries its own margin. */
.df-contact__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--df-sp-4);
}
.df-contact__field {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-2);
	min-width: 0;
}
.df-contact__field--full {
	grid-column: 1 / -1;
}
.df-contact__field label {
	display: flex;
	align-items: baseline;
	gap: var(--df-sp-2);
	font-size: var(--df-fs-small);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-fg-muted);
}
.df-contact__optional {
	font-size: 0.72em;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--df-fg-faint);
}
.df-contact__field input,
.df-contact__field select,
.df-contact__field textarea {
	width: 100%;
	padding: var(--df-sp-4);
	background: var(--df-bg);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-sm);
	color: var(--df-fg);
	font-family: var(--df-font-body);
	font-size: var(--df-fs-body);
	transition: border-color var(--df-dur-base) var(--df-ease-out);
	resize: vertical;
}
.df-contact__field select {
	resize: none;
	cursor: pointer;
	/* Native arrows render near-invisible on a dark field in several browsers. */
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--df-fg-muted) 50%),
		linear-gradient(135deg, var(--df-fg-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--df-sp-8, 2.5rem);
}
/* Date inputs shrink below their content in Safari without this. */
.df-contact__field input[type="date"] {
	min-height: 3.25rem;
}
.df-contact__field input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) opacity(0.5);
	cursor: pointer;
}
.df-contact__field input:focus,
.df-contact__field select:focus,
.df-contact__field textarea:focus {
	outline: none;
	border-color: var(--df-gold);
}
.df-contact__field input:focus-visible,
.df-contact__field select:focus-visible,
.df-contact__field textarea:focus-visible {
	outline: 2px solid var(--df-gold);
	outline-offset: 2px;
}
.df-contact__field input::placeholder,
.df-contact__field textarea::placeholder {
	color: var(--df-fg-faint);
}
.df-contact__submit {
	margin-top: var(--df-sp-3);
	align-self: flex-start;
}
.df-contact__note {
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	text-align: center;
	margin-top: var(--df-sp-3);
}
.df-contact__fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--df-sp-2);
	align-self: center;
	padding: var(--df-sp-3) var(--df-sp-5);
	border: 1px solid var(--df-gold);
	border-radius: var(--df-radius-sm);
	color: var(--df-gold);
	font-size: var(--df-fs-small);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--df-dur-base) var(--df-ease-out);
}
.df-contact__fallback:hover,
.df-contact__fallback:focus-visible {
	background: rgba(254, 194, 8, 0.12);
}
.df-contact__fallback[hidden] {
	display: none;
}

/* ================================================================== */
/* FOOTER                                                              */
/* ================================================================== */
.df-footer {
	background: var(--df-bg);
	border-top: 1px solid var(--df-bg-line);
	padding-top: var(--df-sp-10);
}
.df-footer__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: var(--df-sp-7);
	padding-bottom: var(--df-sp-9);
}
.df-footer__logo {
	display: flex;
	align-items: center;
	gap: var(--df-sp-3);
	font-family: var(--df-font-display);
	font-weight: 700;
	font-size: var(--df-fs-h4);
	color: var(--df-fg);
	margin-bottom: var(--df-sp-4);
}
.df-footer__logo .df-icon { color: var(--df-gold); }
.df-footer__tagline {
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
	margin-bottom: var(--df-sp-5);
	max-width: 280px;
}
.df-footer__social {
	display: flex;
	gap: var(--df-sp-3);
}
.df-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--df-bg-line);
	color: var(--df-fg-muted);
	transition: all var(--df-dur-base) var(--df-ease-out);
}
.df-footer__social a:hover {
	color: var(--df-bg);
	background: var(--df-gold);
	border-color: var(--df-gold);
	transform: translateY(-2px);
}
.df-footer__heading {
	font-family: var(--df-font-body);
	font-size: var(--df-fs-small);
	font-weight: 700;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-fg);
	margin-bottom: var(--df-sp-5);
}
.df-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-3);
}
.df-footer__col a {
	color: var(--df-fg-muted);
	font-size: var(--df-fs-body);
	transition: color var(--df-dur-fast) var(--df-ease-out);
}
.df-footer__col a:hover { color: var(--df-gold); }
.df-footer__contact li {
	display: flex;
	align-items: center;
	gap: var(--df-sp-3);
	color: var(--df-fg-muted);
	font-size: var(--df-fs-body);
}
.df-footer__contact .df-icon { color: var(--df-gold); flex-shrink: 0; }
.df-footer__bottom {
	border-top: 1px solid var(--df-bg-line);
	padding-block: var(--df-sp-5);
}
.df-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--df-sp-4);
	flex-wrap: wrap;
}
.df-footer__bottom p {
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
}

/* ================================================================== */
/* VIDEO SECTION                                                       */
/* ================================================================== */
.df-video__frame {
	max-width: 960px;
	margin-inline: auto;
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	box-shadow: var(--df-shadow-lg);
	border: 1px solid var(--df-bg-line);
}
.df-video__embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.df-video__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.df-video__placeholder {
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--df-sp-4);
	background: var(--df-bg-elevated);
	color: var(--df-fg-muted);
}
.df-video__play {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--df-gold-glow);
	color: var(--df-gold);
	display: flex;
	align-items: center;
	justify-content: center;
}
.df-video__hint { font-size: var(--df-fs-small); text-align: center; padding: 0 var(--df-sp-4); }

/* ================================================================== */
/* LOCATION SECTION                                                    */
/* ================================================================== */
.df-location__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--df-sp-6);
	align-items: stretch;
}
.df-location__map {
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	min-height: 380px;
	border: 1px solid var(--df-bg-line);
}
.df-location__map iframe {
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
	filter: invert(0.92) hue-rotate(180deg) saturate(0.8);
}
.df-location__info {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-4);
	justify-content: center;
}
.df-location__card {
	display: flex;
	align-items: center;
	gap: var(--df-sp-4);
}
.df-location__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--df-radius-sm);
	background: var(--df-gold-glow);
	color: var(--df-gold);
}
.df-location__card-label {
	display: block;
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.df-location__card-value {
	display: block;
	font-weight: 600;
	color: var(--df-fg);
}

.df-location__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-sp-3);
	margin-top: var(--df-sp-4);
}

@media (max-width: 900px) {
	.df-location__grid { grid-template-columns: 1fr; }
	.df-location__map { min-height: 280px; }
	.df-location__actions { flex-direction: column; }
	.df-location__actions .df-btn { width: 100%; justify-content: center; }
}

/* ================================================================== */
/* SHOWCASE — HORIZONTAL DRAG GALLERY                                  */
/* ================================================================== */
.df-showcase {
	background: var(--df-bg);
	overflow: hidden;
}

.df-drag-wrap {
	position: relative;
	padding: var(--df-sp-6) 0;
	overflow: hidden;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}
.df-drag-wrap.is-dragging { cursor: grabbing; }

.df-drag-track {
	display: flex;
	gap: var(--df-sp-5);
	padding: 0 var(--df-sp-6);
	will-change: transform;
	transition: transform 0.6s var(--df-ease-out);
}
.df-drag-wrap.is-dragging .df-drag-track { transition: none; }

.df-dcard {
	flex-shrink: 0;
	width: min(380px, 75vw);
	aspect-ratio: 3 / 4;
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	position: relative;
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	pointer-events: auto;
}
.df-dcard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--df-ease-out);
	pointer-events: none;
}
.df-drag-wrap:not(.is-dragging) .df-dcard:hover img { transform: scale(1.06); }

.df-dcard__label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--df-sp-7) var(--df-sp-5) var(--df-sp-5);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
	font-family: var(--df-font-display);
	color: var(--df-fg);
	font-weight: 700;
	font-size: var(--df-fs-h4);
	letter-spacing: var(--df-ls-tight);
	line-height: var(--df-lh-tight);
}
.df-dcard__label span {
	display: block;
	font-family: var(--df-font-body);
	font-size: var(--df-fs-tiny);
	color: var(--df-gold);
	font-weight: 600;
	margin-bottom: var(--df-sp-2);
	letter-spacing: var(--df-ls-wider);
	text-transform: uppercase;
}

.df-drag-progress {
	position: relative;
	height: 2px;
	background: var(--df-bg-line);
	width: min(400px, 80%);
	margin: var(--df-sp-6) auto 0;
	border-radius: 2px;
	overflow: hidden;
}
.df-drag-progress__fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 15%;
	background: var(--df-gold-gradient);
	border-radius: 2px;
	transition: width 0.2s var(--df-ease-out);
}
.df-drag-hint {
	text-align: center;
	margin-top: var(--df-sp-3);
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
}

/* ================================================================== */
/* A DAY AT THE HOTEL — STACKED CARDS                                  */
/* ================================================================== */
.df-day {
	position: relative;
	background: var(--df-bg);
}
.df-day__intro {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: var(--df-sp-9);
	padding-bottom: var(--df-sp-7);
}
.df-day__intro-title {
	font-size: var(--df-fs-h2);
	margin-bottom: var(--df-sp-4);
}
.df-day__intro-lead {
	color: var(--df-fg-muted);
	font-size: var(--df-fs-h4);
	max-width: 540px;
}
.df-day__hint {
	margin-top: var(--df-sp-6);
	font-size: var(--df-fs-h3);
	color: var(--df-gold);
	animation: df-bounce 2s var(--df-ease-in-out) infinite;
}
@keyframes df-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50% { transform: translateY(8px); opacity: 1; }
}

.df-day__stack {
	position: relative;
}
.df-stack__card {
	position: relative;
	height: 100vh;
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	will-change: transform, opacity;
}
.df-stack__card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.df-stack__card-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10,10,11,0.3) 0%, rgba(10,10,11,0.85) 100%),
		radial-gradient(ellipse at 30% 50%, rgba(254,194,8,0.1), transparent 60%);
}
.df-stack__content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: var(--df-sp-6);
	max-width: 720px;
}
.df-stack__num {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-small);
	color: var(--df-gold);
	letter-spacing: var(--df-ls-wider);
	font-weight: 700;
	margin-bottom: var(--df-sp-4);
}
.df-stack__title {
	font-size: var(--df-fs-mega);
	font-weight: 800;
	line-height: var(--df-lh-tight);
	margin-bottom: var(--df-sp-5);
	background: linear-gradient(180deg, #FFFFFF 0%, #E5E5EA 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.df-stack__desc {
	font-size: var(--df-fs-h4);
	color: var(--df-fg-muted);
	max-width: 50ch;
	margin-inline: auto;
	line-height: var(--df-lh-normal);
}

/* ================================================================== */
/* CHARITY — STREET DOG RESCUE                                        */
/* ================================================================== */
.df-charity {
	background: var(--df-bg);
}

/* Impact stats strip — 3 big numbers that count up. */
.df-charity__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--df-sp-6);
	margin-bottom: var(--df-sp-9);
	padding: var(--df-sp-7) var(--df-sp-6);
	background: linear-gradient(135deg, rgba(254, 194, 8, 0.08), rgba(254, 194, 8, 0.02));
	border: 1px solid rgba(254, 194, 8, 0.15);
	border-radius: 18px;
}
.df-charity__stat {
	text-align: center;
}
.df-charity__stat-number {
	display: block;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--df-gold);
	letter-spacing: -0.02em;
}
.df-charity__stat-label {
	display: block;
	margin-top: var(--df-sp-2);
	font-size: var(--df-fs-sm);
	color: var(--df-fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Rescue story cards. */
.df-charity__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--df-sp-5);
}
.df-charity-card {
	background: var(--df-surface, #141416);
	border: 1px solid var(--df-border, rgba(255,255,255,0.08));
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.35s var(--df-ease-in-out), border-color 0.35s var(--df-ease-in-out), box-shadow 0.35s var(--df-ease-in-out);
}
.df-charity-card:hover {
	transform: translateY(-6px);
	border-color: rgba(254, 194, 8, 0.45);
	box-shadow: 0 18px 40px -18px rgba(254, 194, 8, 0.25);
}
.df-charity-card__img {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #0A0A0B;
}
.df-charity-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--df-ease-in-out);
}
.df-charity-card:hover .df-charity-card__img img {
	transform: scale(1.06);
}
.df-charity-card__status {
	position: absolute;
	top: var(--df-sp-3);
	left: var(--df-sp-3);
	padding: 4px 12px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #0A0A0B;
	background: var(--df-gold);
	border-radius: 999px;
}
.df-charity-card__body {
	padding: var(--df-sp-5);
}
.df-charity-card__name {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--df-fg);
	margin-bottom: var(--df-sp-2);
}
.df-charity-card__story {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--df-fg-muted);
}

/* ================================================================== */
/* RESPONSIVE                                                          */
/* ================================================================== */
@media (max-width: 1024px) {
	.df-services__grid { grid-template-columns: repeat(2, 1fr); }
	.df-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--df-sp-7); }
	.df-gallery__grid { grid-template-columns: repeat(3, 1fr); }
	.df-about { padding-block: var(--df-sp-9) var(--df-sp-8); }
	.df-about__plate { margin-top: var(--df-sp-8); }
	.df-faq__inner { grid-template-columns: 1fr; }
	.df-faq__head { position: static; }
	.df-contact__grid { grid-template-columns: 1fr; }
	/* Paired fields stop pairing before the inputs get too narrow to read. */
	.df-contact__fields { grid-template-columns: 1fr; }
	.df-contact__form { padding: var(--df-sp-5); }
	.df-contact__submit { align-self: stretch; justify-content: center; }
	.df-footer__inner { grid-template-columns: 1fr 1fr; }
	.df-charity__stats { gap: var(--df-sp-6); }
	.df-charity__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	/* The mobile menu drawer.
	 *
	 * This used to be `display: none` here, with the open state defined in a
	 * <style> block that home.js injected at runtime. That injected rule set
	 * position, width, background and transform -- but never `display`. So
	 * tapping the burger added .is-open, dimmed the screen and locked body
	 * scroll, while the menu itself stayed display:none and never appeared.
	 * The visitor got a dark screen that would not scroll and no way out but
	 * to tap again. On a site whose visitors are almost entirely on phones,
	 * that was the single most expensive bug in the theme.
	 *
	 * It lives in the stylesheet now, and toggles visibility rather than
	 * display so the slide transition has something to animate. */
	.df-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(82vw, 320px);
		display: flex;
		flex-direction: column;
		gap: var(--df-sp-5);
		background: var(--df-bg-elevated, #141416);
		border-left: 1px solid var(--df-bg-line, #2A2A30);
		/* Clears the fixed header, and the notch / home indicator on phones. */
		padding:
			calc(84px + env(safe-area-inset-top, 0px))
			var(--df-sp-6)
			calc(var(--df-sp-6) + env(safe-area-inset-bottom, 0px));
		z-index: 100;
		transform: translateX(100%);
		transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
		/* visibility, not display: keeps it out of the tab order and off the
		   accessibility tree while closed, and still animates. */
		visibility: hidden;
		overflow-y: auto;
		/* Scrolling the drawer must not chain into the page behind it. */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.df-header__nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}
	.df-header__menu {
		flex-direction: column;
		/* stretch, not flex-start. flex-start sized every row to its own
		   words, so "Blog" was a 56px target in a 320px drawer and a tap in
		   the empty space beside it hit the drawer background and did
		   nothing. Measured at 390px: rows ran 56-131px wide. Now every row
		   spans the drawer, so anywhere on the line opens the page. */
		align-items: stretch;
		gap: var(--df-sp-3);
	}
	.df-header__menu li { width: 100%; }
	.df-header__menu a {
		font-size: 1.2rem;
		/* A comfortable tap target: 44px is the minimum either platform's
		   guidelines consider reliable with a thumb. flex rather than block
		   so the words sit in the middle of the row rather than at the top
		   of it.
		   
		   The negative margin cancels the drawer's own side padding and the
		   padding puts the text back where it was, so the row reaches both
		   edges of the drawer while the words stay put. Without it the row
		   stopped 32px short on each side -- still a wide target, but the
		   strip nearest the screen edge, which is exactly where a thumb
		   lands, did nothing. No `width: 100%`: a block-level flex container
		   already fills its line, and width:100% would measure the old
		   narrower box and push the row off the right edge. */
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: var(--df-sp-2) var(--df-sp-6);
		margin-inline: calc(var(--df-sp-6) * -1);
	}
	/* Without this the wider target is invisible -- a tap beside the words
	   works but gives no sign it registered. */
	.df-header__menu a:active {
		background: var(--df-gold-glow);
	}
	.df-header__burger { display: flex; }
	/* The burger is the only way to close the drawer, so it has to sit above
	   it rather than behind it. */
	.df-header__actions { position: relative; z-index: 101; }
	.df-header__burger,
	.df-header__nav .df-header__menu a {
		min-width: 44px;
	}
	.df-section { padding-block: var(--df-sp-9); }

	/* ---------------------------------------------------------------- */
	/* Services as a list, not a stack of posters.                       */
	/*                                                                   */
	/* One column was not enough on its own. Each card still opened with */
	/* a 64px icon tile and 24px of margin before the first word, then   */
	/* closed with a "Learn more" link -- so a card ran 340-420px, about */
	/* half a phone screen each, and four services came to 2,225px:      */
	/* 2.6 screenfuls of thumb-scrolling to read four short paragraphs.  */
	/*                                                                   */
	/* The icon moves beside the title instead of above it, at 44px, so  */
	/* the title is the first thing on the row and the four services can */
	/* be scanned by title alone.                                        */
	/* ---------------------------------------------------------------- */
	.df-services__grid {
		grid-template-columns: 1fr;
		gap: var(--df-sp-4);
	}
	.df-service-card {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--df-sp-3) var(--df-sp-4);
		padding: var(--df-sp-5);
	}
	.df-service-card__icon {
		order: 2;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin-bottom: 0;
	}
	.df-service-card__icon svg { width: 24px; height: 24px; }
	/* On a phone the card is a row, so a photo cannot sit in the icon's
	   44px slot -- at that size it would be a thumbnail nobody can read.
	   It takes the full width of the card instead, above the title, which
	   is the one place a picture is worth the height it costs. */
	.df-service-card__photo {
		order: 2;
		flex: 0 0 100%;
		aspect-ratio: 16 / 10;
		margin-bottom: 0;
	}
	.df-service-card__title {
		order: 3;
		/* min-width: 0 so a long title wraps inside the row instead of
		   pushing the icon off it. */
		flex: 1 1 0;
		min-width: 0;
		margin-bottom: 0;
	}
	.df-service-card__desc {
		order: 4;
		flex: 0 0 100%;
		margin-bottom: 0;
	}
	/* The badge is absolutely positioned top-right on the wide layout,
	   where there is room beside a stacked icon. In a row it would land on
	   top of the title, so it comes back into the flow as its own line --
	   and as plain gold capitals rather than a filled pill, which is the
	   same treatment the blog cards give a category. */
	.df-service-card__tag {
		position: static;
		order: 1;
		flex: 0 0 100%;
		padding: 0;
		background: none;
		color: var(--df-gold);
	}
	/* Every one of these pointed at #contact, so the section repeated the
	   same link four times -- four tap targets, one destination, and four
	   identical "Learn more" announcements to a screen reader. The Book a
	   Stay button is pinned in the header on every screen, so nothing is
	   lost by dropping them here. They stay on the wide layout, where the
	   space is free. */
	.df-service-card__link { display: none; }
	.df-stats__grid { grid-template-columns: 1fr 1fr; gap: var(--df-sp-6); }
	/* On a phone the grid is only two columns wide, so a two-column span is
	   simply a full-width row -- there is no mosaic left to preserve, only
	   the holes the spans create. Every photo gets one equal cell, which
	   cannot gap, reads as deliberate, and is the cheapest thing to lay out. */
	.df-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		/* auto, NOT 1fr. With 1fr every row stretches to match the tallest
		   row on the grid -- the 16/10 opener -- so each square photo below
		   sat in a 224px row with 50px of background showing beneath it.
		   That strip of empty page under every image is the black gap.
		   auto sizes each row to its own content. */
		grid-auto-rows: auto;
		gap: var(--df-sp-3);
	}
	.df-gallery__item {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 1 / 1;
	}
	/* The first photo keeps its prominence as a full-width opener. */
	.df-gallery__item--1 {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 10;
	}
	/* The opener takes a whole row, so an even number of photos leaves the
	   last one alone in its row with a hole beside it. When that happens,
	   let it span the full width instead -- it reads as a closing image
	   rather than a mistake, and works for any number of photos. */
	.df-gallery__item:nth-child(even):last-child {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 10;
	}
	.df-hero__actions { flex-direction: column; align-items: stretch; }
	.df-hero__actions .df-btn { width: 100%; }
	.df-hero__trust { gap: var(--df-sp-4); }
	.df-hero__trust-divider { display: none; }
	.df-cta__actions { flex-direction: column; }
	.df-cta__actions .df-btn { width: 100%; }
	.df-footer__inner { grid-template-columns: 1fr; }
	.df-footer__bottom-inner { flex-direction: column; text-align: center; }
	.df-charity__stats { grid-template-columns: 1fr; gap: var(--df-sp-5); }
	.df-charity__grid { grid-template-columns: 1fr; }
}

/* Hide custom cursor and motion-heavy effects on coarse pointers */
@media (hover: none), (pointer: coarse) {
	[data-df-tilt] { transform: none !important; }
	.df-gallery__grid:hover .df-gallery__item:not(:hover) img {
		transform: none;
		filter: none;
		opacity: 1;
	}
}

/* Build credit — quiet by design; it should read as a signature, not an ad. */
.df-footer__built {
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	margin: 0;
}
.df-footer__built a {
	color: var(--df-fg-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--df-dur-base) var(--df-ease-out), border-color var(--df-dur-base) var(--df-ease-out);
}
.df-footer__built a:hover,
.df-footer__built a:focus-visible {
	color: var(--df-gold);
	border-bottom-color: var(--df-gold);
}

/* ================================================================== */
/* HEADER — small screens                                              */
/* At 390px the name wrapped onto two lines, the button wrapped with   */
/* it, and the burger was squeezed into what was left. Below 520px the */
/* header keeps one line: mark, name, a short button, burger.          */
/* ================================================================== */
@media (max-width: 520px) {
	.df-header__inner {
		gap: var(--df-sp-3);
	}
	.df-header__logo {
		gap: var(--df-sp-2);
		min-width: 0;
	}
	.df-header__logo-name {
		font-size: 0.98rem;
		white-space: nowrap;
	}
	/* The strapline repeats what the name already says — drop it first. */
	.df-header__logo-tag {
		display: none;
	}
	.df-header__actions {
		gap: var(--df-sp-2);
		flex: none;
	}
	.df-header__actions .df-btn {
		padding: var(--df-sp-3) var(--df-sp-4);
		font-size: 0.8rem;
		white-space: nowrap;
	}
	/* The arrow costs width the label needs more. */
	.df-header__actions .df-btn svg {
		display: none;
	}
	.df-header__burger {
		padding: var(--df-sp-1, 4px);
	}
}

/* Very narrow phones: the button becomes the icon-only call to action. */
@media (max-width: 380px) {
	.df-header__logo-mark { display: none; }
	.df-header__actions .df-btn { padding: var(--df-sp-2) var(--df-sp-3); }
}

/* ================================================================== */
/* HEADER — uploaded logo                                              */
/* The Dog Father mark is dark slate, which would vanish against this  */
/* header. Rather than recolouring the brand, it sits on a white plate */
/* — the logo stays exactly as drawn and simply gets its own ground.   */
/* ================================================================== */
.df-header__logo--custom {
	display: flex;
	align-items: center;
	flex: none;
}
.df-header__logo-plate {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px 14px;
	background: #FFFFFF;
	border-radius: var(--df-radius-md, 12px);
	/* A hairline of gold ties the white plate back to the palette so it
	   reads as part of the design, not a pasted-on rectangle. */
	box-shadow: 0 0 0 1px rgba(254, 194, 8, 0.35), 0 6px 20px rgba(0, 0, 0, 0.35);
	transition: box-shadow var(--df-dur-base) var(--df-ease-out),
	            transform var(--df-dur-base) var(--df-ease-spring);
}
.df-header__logo--custom:hover .df-header__logo-plate,
.df-header__logo--custom:focus-visible .df-header__logo-plate {
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px rgba(254, 194, 8, 0.75), 0 8px 26px rgba(0, 0, 0, 0.45);
}
.df-header__logo-img {
	display: block;
	height: 46px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}
/* The header shrinks on scroll; the plate follows so it never dominates. */
.df-header.is-scrolled .df-header__logo-img { height: 38px; }
.df-header.is-scrolled .df-header__logo-plate { padding: 6px 12px; }

@media (max-width: 520px) {
	.df-header__logo-img { height: 34px; max-width: 150px; }
	.df-header__logo-plate { padding: 5px 10px; border-radius: 10px; }
}
@media (max-width: 380px) {
	.df-header__logo-img { height: 30px; max-width: 124px; }
}

/* The footer sits on the same dark ground and needs the same treatment. */
.df-footer__logo-plate {
	display: inline-flex;
	padding: 8px 14px;
	background: #FFFFFF;
	border-radius: var(--df-radius-md, 12px);
}

/* ================================================================== */
/* TESTIMONIALS — real reviews, some of them Arabic                    */
/* ================================================================== */
/* Arabic reviews read right-to-left. The card flips as a whole so the
   quote mark, the stars and the name all sit on the correct side. */
.df-testimonial[dir="rtl"] {
	text-align: right;
}
.df-testimonial[dir="rtl"] .df-testimonial__stars,
.df-testimonial[dir="rtl"] .df-testimonial__author {
	flex-direction: row-reverse;
}
.df-testimonial[dir="rtl"] .df-testimonial__quote {
	/* Arabic script sits lower in the line box than Latin. */
	line-height: 1.9;
}


/* ================================================================== */
/* MOBILE MENU OVERLAY                                                 */
/* ================================================================== */
/* Previously built by home.js appending a <style> element on every page
   load. In the stylesheet it costs no runtime work, cannot flash before
   the script runs, and is visible to anyone reading the CSS. */
.df-mobile-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 11, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 99;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.df-mobile-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.df-header__nav,
	.df-mobile-overlay { transition: none; }
}


/* The CTA photo became an <img> so it could carry a srcset; this keeps it
   filling its frame exactly as background-size: cover / center did. */
.df-cta__bg { overflow: hidden; }
.df-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}


/* ================================================================== */
/* TESTIMONIALS CAROUSEL                                               */
/* ================================================================== */
/* Was a grid that rendered every review at once and hid the overflow
   behind a "Read 13 more reviews" button -- 3,257px of homepage, and a
   wall of text reads as something to scroll past rather than read.
   A track shows a few at a time and says there are more by letting the
   next one peek in at the edge. Scroll-snap does the work; the arrows
   are a convenience for mouse users, and swiping is native. */
.df-testimonials__carousel {
	position: relative;
	/* Let cards bleed to the screen edge on phones, so the next one
	   peeking is the thing that says "swipe me". */
	margin-inline: calc(var(--df-sp-4) * -1);
	padding-inline: var(--df-sp-4);
}
.df-testimonials__track {
	display: flex;
	gap: var(--df-sp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	/* Room for the card shadow and focus ring, without a clipped edge. */
	padding-block: var(--df-sp-2);
	scrollbar-width: none;
}
.df-testimonials__track::-webkit-scrollbar { display: none; }
.df-testimonials__track > .df-testimonial {
	flex: 0 0 calc((100% - (var(--df-testi-visible, 3) - 1) * var(--df-sp-4)) / var(--df-testi-visible, 3));
	scroll-snap-align: start;
	margin: 0;
}
.df-testimonials__track:focus-visible {
	outline: 2px solid var(--df-gold);
	outline-offset: 4px;
	border-radius: var(--df-radius);
}

.df-testimonials__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--df-sp-4);
	margin-top: var(--df-sp-6);
}
.df-testimonials__hint {
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	letter-spacing: 0.04em;
}
.df-testi-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px: the smallest target either platform considers reliable. */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--df-bg-line);
	background: transparent;
	color: var(--df-fg);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.df-testi-arrow:hover:not(:disabled),
.df-testi-arrow:focus-visible {
	border-color: var(--df-gold);
	color: var(--df-gold);
	background: rgba(254, 194, 8, 0.08);
}
.df-testi-arrow:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 900px) {
	/* Two at a time on a tablet. */
	.df-testimonials__carousel { --df-testi-visible: 2; }
}
@media (max-width: 720px) {
	/* One card, with the next one just visible so the swipe is discoverable. */
	.df-testimonials__track > .df-testimonial { flex-basis: 86%; }
}
@media (prefers-reduced-motion: reduce) {
	.df-testimonials__track { scroll-behavior: auto; }
}

/* ================================================================== */
/* FLOATING WHATSAPP BUTTON                                            */
/* ================================================================== */
/* WhatsApp is the booking channel in this market, so it gets a
   permanent, thumb-reachable button rather than being the fallback
   shown only after the contact form fails. */
.df-wa {
	position: fixed;
	right: max(var(--df-sp-4), env(safe-area-inset-right, 0px));
	/* Clear of the home indicator, and of a phone browser's bottom bar. */
	bottom: calc(var(--df-sp-4) + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: var(--df-sp-2);
	/* WhatsApp brand green: recognised instantly, which is the whole point
	   of the button. Deliberately not the site's gold. */
	background: #25D366;
	color: #06251A;
	padding: 14px 18px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	/* Comfortably above the 44px minimum tap target. */
	min-height: 52px;
}
.df-wa:hover,
.df-wa:focus-visible {
	background: #1FBE5A;
	color: #06251A;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 3px 8px rgba(0, 0, 0, 0.3);
}
.df-wa:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}
.df-wa__icon { display: inline-flex; }
.df-wa__label { white-space: nowrap; }

@media (max-width: 720px) {
	/* Icon only on phones: a labelled pill covers too much of a small
	   screen, and the glyph needs no explaining. */
	.df-wa {
		padding: 0;
		width: 56px;
		height: 56px;
		justify-content: center;
	}
	.df-wa__label {
		/* Kept in the DOM for screen readers rather than removed. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.df-wa { transition: none; }
	.df-wa:hover, .df-wa:focus-visible { transform: none; }
}

/* Cards in a row all stretch to the tallest, so a single 90-word review
   made every card that tall and turned a scannable strip into a wall.
   Clamping the quote keeps the cards uniform and the section short; the
   full text is on Google, which is where the review came from. */
.df-testimonial__quote {
	display: -webkit-box;
	-webkit-line-clamp: 8;
	line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 720px) {
	.df-testimonial__quote {
		-webkit-line-clamp: 10;
		line-clamp: 10;
	}
}

/* ================================================================== */
/* CONTACT — one dominant action                                       */
/*                                                                     */
/* Four identical cards made the visitor choose how to reach us. In     */
/* Egypt that choice has an obvious answer, so WhatsApp is the button   */
/* and everything else stays available but quieter.                    */
/* WhatsApp green, not brand gold: people recognise the colour faster   */
/* than they read the label, and this is the one control on the page    */
/* that should be found without reading.                               */
/* ================================================================== */
.df-contact__primary {
	display: flex;
	align-items: center;
	gap: var(--df-sp-4);
	min-height: 44px;
	padding: var(--df-sp-5) var(--df-sp-5);
	background: #25D366;
	color: #08160C;
	border-radius: var(--df-radius);
	transition: transform var(--df-dur-base) var(--df-ease-out),
	            box-shadow var(--df-dur-base) var(--df-ease-out);
}
.df-contact__primary:hover {
	color: #08160C;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(37, 211, 102, .22);
}
.df-contact__primary-icon { display: flex; flex: none; }
.df-contact__primary-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.df-contact__primary-title {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h4);
	font-weight: 800;
	letter-spacing: -.015em;
}
.df-contact__primary-sub { font-size: var(--df-fs-small); color: rgba(8, 22, 12, .72); }

.df-contact__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--df-sp-3);
	margin-top: var(--df-sp-3);
}
.df-contact__tile {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-2);
	min-height: 44px;
	padding: var(--df-sp-5) var(--df-sp-4);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius);
	color: var(--df-fg);
	min-width: 0;
}
a.df-contact__tile:hover { border-color: var(--df-gold-deep); color: var(--df-fg); }
.df-contact__tile-icon { color: var(--df-gold); }
.df-contact__tile-label {
	font-size: var(--df-fs-tiny);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-fg-faint);
}
.df-contact__tile-value {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-body);
	font-weight: 700;
	letter-spacing: -.01em;
	overflow-wrap: break-word;
}

.df-contact__mail {
	display: inline-flex;
	align-items: center;
	gap: var(--df-sp-3);
	min-height: 44px;
	margin-top: var(--df-sp-3);
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
}
.df-contact__mail .df-icon { color: var(--df-gold); }
.df-contact__mail:hover { color: var(--df-gold); }

/* ================================================================== */
/* SHOWCASE — the closing statement under the drag gallery             */
/* ================================================================== */
.df-showcase__outro {
	position: relative;
	margin-top: var(--df-sp-9);
	min-height: 46vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}
.df-showcase__outro-media { position: absolute; inset: 0; z-index: -2; }
.df-showcase__outro-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-showcase__outro-veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.10) 40%, rgba(10,10,11,.92) 100%);
}
.df-showcase__outro-text {
	font-family: var(--df-font-display);
	font-size: clamp(1.6rem, 7vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;
	margin: 0;
	padding-block: var(--df-sp-7);
	max-width: 22ch;
	text-wrap: pretty;
}
/* Without a photograph it is just a statement on black, which still works. */
.df-showcase__outro--bare { min-height: 0; }

@media (max-width: 720px) {
	.df-contact__tiles { gap: var(--df-sp-2); }
	.df-showcase__outro { min-height: 38vh; }
}

/* ==================================================================== */
/* ABOUT — CLASSIC (the homepage's layout)                              */
/*                                                                      */
/* 1.31.0 replaced this with the cinematic layout on every page that     */
/* renders the About section, the homepage included, which was not what  */
/* the owner asked for. The markup came back in template-parts/home/     */
/* about.php; these are the styles it needs.                             */
/*                                                                      */
/* Everything is scoped under .df-about--classic, which outranks the     */
/* unscoped cinematic rules above by specificity alone. That is why      */
/* nothing above had to be touched or re-indented: the two layouts sit   */
/* side by side and the modifier on the section decides.                 */
/* ==================================================================== */
.df-about--classic {
	/* The cinematic layout opens on a full-bleed plate and needs the room
	   above it; this one starts on a contained grid and does not. */
	padding-block: var(--df-sp-11);
}
.df-about--classic .df-about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--df-sp-9);
	align-items: center;
}
.df-about--classic .df-about__media {
	position: relative;
}
.df-about--classic .df-about__image-wrap {
	position: relative;
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.df-about--classic .df-about__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A gold disc pinned to the photograph's corner, not a line of type. */
.df-about--classic .df-about__badge {
	position: absolute;
	bottom: -24px;
	right: -24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: var(--df-gold-gradient);
	color: var(--df-bg);
	box-shadow: var(--df-shadow-gold);
	text-align: center;
	/* Cancel the cinematic badge's rule-above-it treatment. */
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	gap: 0;
}
.df-about--classic .df-about__badge-number {
	font-family: var(--df-font-display);
	font-weight: 800;
	font-size: var(--df-fs-h3);
	line-height: 1;
	letter-spacing: normal;
	color: var(--df-bg);
}
.df-about--classic .df-about__badge-label {
	font-size: var(--df-fs-tiny);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-top: 4px;
	color: inherit;
}

.df-about--classic .df-about__title {
	font-size: var(--df-fs-h2);
	margin: 0 0 var(--df-sp-5);
}
.df-about--classic .df-about__lead {
	font-size: var(--df-fs-h4);
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
	margin: 0 0 var(--df-sp-7);
}

.df-about--classic .df-about__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--df-sp-6);
}
.df-about--classic .df-about__feature {
	display: flex;
	gap: var(--df-sp-4);
}
.df-about--classic .df-about__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--df-radius);
	background: var(--df-gold-glow);
	color: var(--df-gold);
}
.df-about--classic .df-about__feature-title {
	font-size: var(--df-fs-body);
	font-family: var(--df-font-body);
	font-weight: 700;
	margin-bottom: 4px;
}
.df-about--classic .df-about__feature-desc {
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
}

/* The same two breakpoints the layout had before 1.31.0 removed it. */
@media (max-width: 1024px) {
	.df-about--classic .df-about__inner { grid-template-columns: 1fr; gap: var(--df-sp-9); }
	.df-about--classic .df-about__features { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.df-about--classic .df-about__badge { width: 110px; height: 110px; bottom: -16px; right: -8px; }
	.df-about--classic { padding-block: var(--df-sp-9); }
}

/* One contact tile per row below 480px. The visit tile holds a full street
   address -- "Country Club, Al-Marioutiya, beside El Reef El Arabi, Giza,
   Egypt" -- and in a half-width column on a phone that wraps to five lines of
   two words each, which takes longer to read than the address is long.
   Contact-page layout only; the homepage's four cards are already one per row
   at this width. */
@media (max-width: 480px) {
	.df-contact__tiles { grid-template-columns: minmax(0, 1fr); }
}