/* ============================================================
   Drapes — Pattern styles
   Frontend + editor styling for every drapes/* pattern, grid, and block.
   Token references map to colors_and_type.css.
   ============================================================ */

/* ============================================================
   Token aliases — bridge our --dd-* names to the
   --wp--preset--* / --wp--custom--* variables WordPress
   generates from theme.json.
   ============================================================ */
:root {
	/* Colors */
	--dd-cream:           var(--wp--preset--color--cream);
	--dd-cream-low:       var(--wp--preset--color--cream-low);
	--dd-navy:            var(--wp--preset--color--navy);
	--dd-orange:          var(--wp--preset--color--orange);
	--dd-orange-deep:     var(--wp--preset--color--orange-deep);
	--dd-orange-press:    var(--wp--preset--color--orange-press);
	--dd-light-blue:      var(--wp--preset--color--light-blue);
	--dd-secondary-soft:  var(--wp--preset--color--secondary-soft);
	--dd-brown:           var(--wp--preset--color--brown);
	--dd-white:           var(--wp--preset--color--white);
	--dd-dark:            var(--wp--preset--color--dark);

	/* Glass */
	--dd-glass-bg:        var(--wp--custom--glass--light--bg);

	/* Fonts */
	--dd-font-display:    var(--wp--preset--font-family--headline);
	--dd-font-body:       var(--wp--preset--font-family--body);

	/* Font sizes */
	--dd-fs-xs:           var(--wp--preset--font-size--xs);
	--dd-fs-sm:           var(--wp--preset--font-size--sm);
	--dd-fs-base:         var(--wp--preset--font-size--base);
	--dd-fs-md:           var(--wp--preset--font-size--md);
	--dd-fs-lg:           var(--wp--preset--font-size--lg);
	--dd-fs-xl:           24px;
	--dd-fs-h1:           var(--wp--preset--font-size--h-1);
	--dd-fs-h2:           var(--wp--preset--font-size--h-2);
	--dd-fs-h3:           var(--wp--preset--font-size--h-3);
	--dd-fs-h4:           var(--wp--preset--font-size--h-4);
	--dd-fs-h5:           var(--wp--preset--font-size--h-5);
	--dd-fs-hero:         var(--wp--preset--font-size--hero);
	--dd-fs-hero-xl:      var(--wp--preset--font-size--hero-xl);

	/* Line height */
	--dd-lh-display:      1.05;
	--dd-lh-body:         1.625;

	/* Tracking */
	--dd-track-tight:     var(--wp--custom--tracking--tight);
	--dd-track-tighter:   var(--wp--custom--tracking--tighter);
	--dd-track-widest:    var(--wp--custom--tracking--widest);

	/* Font weight */
	--dd-w-bold:          700;
	--dd-w-semibold:      600;

	/* Radii */
	--dd-r-sm:            var(--wp--custom--radius--sm);
	--dd-r-md:            var(--wp--custom--radius--md);
	--dd-r-xl:            var(--wp--custom--radius--xl);
	--dd-r-2xl:           var(--wp--custom--radius--2-xl);
	--dd-r-3xl:           var(--wp--custom--radius--3-xl);
	--dd-r-pill:          var(--wp--custom--radius--pill);

	/* Motion */
	--dd-ease:            var(--wp--custom--motion--ease);
	--dd-dur-fast:        var(--wp--custom--motion--dur--fast);
	--dd-dur-base:        var(--wp--custom--motion--dur--base);
	--dd-dur-image:       var(--wp--custom--motion--dur--image);

	/* Blur (chrome.css expects a complete backdrop-filter value, not a px) */
	--dd-blur-header:     blur(var(--wp--custom--blur--header));

	/* Shadows */
	--dd-shadow-card:     var(--wp--custom--shadow--card);
	--dd-shadow-soft:     var(--wp--custom--shadow--soft);
	--dd-shadow-cta:      var(--wp--custom--shadow--cta);
	--dd-shadow-form:     var(--wp--custom--shadow--form);
}

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

/* Default section padding rhythm. */
.drapes-section {
	padding-left: 32px;
	padding-right: 32px;
}
@media (min-width: 768px)  { .drapes-section { padding-left: 64px;  padding-right: 64px;  } }
@media (min-width: 1024px) { .drapes-section { padding-left: 96px;  padding-right: 96px;  } }
@media (min-width: 1280px) { .drapes-section { padding-left: 128px; padding-right: 128px; } }

/* ============================================================
   Inline accents
   ============================================================ */
.drapes-accent--orange         { color: var(--dd-orange); }
.drapes-accent--orange-italic  { color: var(--dd-orange); font-style: italic; }
.drapes-eyebrow {
	display: inline-block;
	font-family: var(--dd-font-body);
	font-size: var(--dd-fs-xs);
	font-weight: var(--dd-w-bold);
	letter-spacing: var(--dd-track-widest);
	text-transform: uppercase;
	color: var(--dd-orange-deep);
	margin: 0 0 24px;
}

/* ============================================================
   Buttons — additions for home (large hero CTAs, navy outline)
   ============================================================ */
.drapes-btn--lg {
	padding: 16px 32px;
	font-size: var(--dd-fs-lg);
}
.drapes-btn--lg.drapes-btn--primary {
	box-shadow: 0 12px 24px -8px rgba(245, 89, 17, 0.35);
}
.drapes-btn--outline-navy {
	background: transparent;
	color: var(--dd-navy);
	border: 2px solid var(--dd-navy);
	padding: 14px 30px;
	font-size: var(--dd-fs-lg);
	transition: background var(--dd-dur-base) var(--dd-ease),
	            color var(--dd-dur-base) var(--dd-ease);
}
.drapes-btn--outline-navy:hover {
	background: var(--dd-navy);
	color: var(--dd-cream);
}
.drapes-btn--outline-navy:active {
	transform: scale(0.95);
}

/* WordPress core button compatibility: re-apply our styles to .wp-block-button__link inside our wrappers */
.drapes-btn .wp-block-button__link {
	background: inherit;
	color: inherit;
	border: 0;
	border-radius: inherit;
	padding: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
}
.drapes-btn--outline-navy .wp-block-button__link {
	border: 2px solid currentColor;
}

/* ============================================================
   Hero
   ============================================================ */
.drapes-hero {
	position: relative;
	overflow: hidden;
	background: var(--dd-cream);
}
.drapes-hero--home {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-top: 96px;
	padding-bottom: 80px;
}
.drapes-hero__content {
	position: relative;
	z-index: 2;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
}
.drapes-hero__headline {
	font-family: var(--dd-font-display);
	font-size: clamp(40px, 8vw, var(--dd-fs-hero));
	line-height: 1.1;
	letter-spacing: var(--dd-track-tight);
	font-weight: var(--dd-w-bold);
	color: var(--dd-navy);
	max-width: 18ch;
	margin: 0;
}
.drapes-hero__headline--xl { font-size: clamp(40px, 9vw, var(--dd-fs-hero-xl)); }
.drapes-hero__lead {
	font-family: var(--dd-font-body);
	font-size: var(--dd-fs-lg);
	line-height: var(--dd-lh-body);
	color: rgba(32, 61, 92, 0.80);
	max-width: 38ch;
	margin-top: 32px;
}
.drapes-hero__ctas { margin-top: 40px; gap: 16px; flex-wrap: wrap; }
@media (min-width: 768px) {
	.drapes-hero__lead { font-size: var(--dd-fs-xl); }
}

/* ============================================================
   Portfolio callout / grid
   ============================================================ */
.drapes-portfolio-callout__intro { max-width: 880px; margin-bottom: 48px; }
.drapes-portfolio-callout__heading {
	font-family: var(--dd-font-display);
	font-size: clamp(28px, 4.5vw, var(--dd-fs-h2));
	color: var(--dd-navy);
	margin: 0 0 16px;
}
.drapes-portfolio-callout__lead {
	font-size: var(--dd-fs-md);
	color: var(--dd-brown);
	max-width: 60ch;
}

.drapes-portfolio-grid {
	display: grid;
	gap: 24px;
}
.drapes-portfolio-grid--home-2 { grid-template-columns: 1fr; }
.drapes-portfolio-grid--archive-all { grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.drapes-portfolio-grid--home-2      { grid-template-columns: 7fr 5fr; gap: 32px; }
	.drapes-portfolio-grid--archive-all { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (min-width: 1280px) {
	.drapes-portfolio-grid--archive-all { grid-template-columns: 1fr 1fr 1fr; }
}

.drapes-portfolio-card {
	position: relative;
	display: block;
	border-radius: var(--dd-r-2xl);
	overflow: hidden;
	background: var(--dd-navy);
	color: var(--dd-cream);
	text-decoration: none;
	min-height: 320px;
	transition: transform var(--dd-dur-base) var(--dd-ease);
}
.drapes-portfolio-card:hover { transform: translateY(-4px); }
.drapes-portfolio-card__media { position: absolute; inset: 0; }
.drapes-portfolio-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--dd-dur-image) var(--dd-ease),
	            transform var(--dd-dur-image) var(--dd-ease);
}
.drapes-portfolio-card:hover .drapes-portfolio-card__media img { filter: grayscale(0); transform: scale(1.05); }
.drapes-portfolio-card__body {
	position: relative;
	z-index: 2;
	padding: 32px;
	background: linear-gradient( to top, rgba(32,61,92,0.85), transparent 70% );
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.drapes-portfolio-card__client { color: rgba(252,247,245,0.9); }
.drapes-portfolio-card__title {
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-h3);
	color: var(--dd-cream);
	margin: 8px 0 0;
}
.drapes-portfolio-card__subtitle {
	color: rgba(252,247,245,0.8);
	margin-top: 12px;
	font-size: var(--dd-fs-base);
}

/* ============================================================
   Footer CTA strip
   ============================================================ */
.drapes-footer-cta {
	background: var(--dd-cream-low);
}
.drapes-footer-cta__inner {
	gap: 48px;
	max-width: 1280px;
	margin: 0 auto;
}
.drapes-footer-cta__copy { max-width: 56ch; }
.drapes-footer-cta__heading {
	font-size: clamp(28px, 4vw, var(--dd-fs-h2));
	font-family: var(--dd-font-display);
	margin: 8px 0 16px;
}
.drapes-footer-cta__lead { font-size: var(--dd-fs-md); color: var(--dd-brown); }

/* ============================================================
   Services
   ============================================================ */
.drapes-bundles__heading {
	color: var(--dd-cream);
	font-family: var(--dd-font-display);
	font-size: clamp(32px, 5vw, var(--dd-fs-h1));
	margin: 16px 0 48px;
}
.drapes-bundle {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: var(--dd-r-2xl);
	padding: 40px;
	color: var(--dd-cream);
}
.drapes-bundle--start {
	background: var(--dd-cream);
	border: 1px solid var(--dd-light-blue);
	color: var(--dd-navy);
}
.drapes-bundle h3 {
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-h2);
	margin: 8px 0 16px;
	color: inherit;
}
.drapes-bundle ul {
	margin: 24px 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.drapes-bundle li::before { content: "→ "; color: var(--dd-orange); }

.drapes-services-core { background: var(--dd-cream); }
.drapes-services-core__heading {
	font-family: var(--dd-font-display);
	font-size: clamp(28px, 5vw, var(--dd-fs-h2));
	color: var(--dd-navy);
	margin: 8px 0 48px;
}
.drapes-services-core__row { margin-bottom: 32px; }
.drapes-service-card {
	background: var(--dd-white);
	border-radius: var(--dd-r-xl);
	padding: 40px;
	box-shadow: var(--dd-shadow-soft);
}
.drapes-service-card h3 {
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-h3);
	margin: 0 0 16px;
	color: var(--dd-navy);
}

/* ============================================================
   About — values + team
   ============================================================ */
.drapes-values__heading {
	font-family: var(--dd-font-display);
	font-size: clamp(32px, 5vw, var(--dd-fs-h1));
	color: var(--dd-cream);
	margin: 8px 0 48px;
}
.drapes-values__grid { gap: 24px; }
.drapes-pillar {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--dd-r-xl);
	padding: 32px;
}
.drapes-pillar__number {
	font-family: var(--dd-font-display);
	font-size: 32px;
	color: var(--dd-orange);
	margin: 0 0 16px;
}
.drapes-pillar h3 {
	color: var(--dd-cream);
	font-family: var(--dd-font-display);
	margin: 0 0 12px;
}

.drapes-team__heading {
	font-family: var(--dd-font-display);
	font-size: clamp(28px, 4vw, var(--dd-fs-h2));
	color: var(--dd-navy);
	margin: 8px 0 48px;
}
.drapes-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
}
.drapes-team-card {
	background: var(--dd-white);
	border-radius: var(--dd-r-xl);
	overflow: hidden;
	box-shadow: var(--dd-shadow-soft);
}
.drapes-team-card__media img { width: 100%; height: auto; display: block; }
.drapes-team-card__name {
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-h5);
	color: var(--dd-navy);
	margin: 16px 16px 4px;
}
.drapes-team-card__role { margin: 0 16px 16px; font-size: var(--dd-fs-sm); color: var(--dd-brown); }

/* ============================================================
   Quote
   ============================================================ */
.drapes-quote__card {
	background: var(--dd-cream-low);
	border-left: 4px solid var(--dd-orange);
	border-radius: var(--dd-r-xl);
	padding: 40px;
	max-width: 880px;
	margin: 0 auto;
}
.drapes-quote__card p {
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-h4);
	line-height: 1.3;
	color: var(--dd-navy);
}
.drapes-quote__card cite {
	display: block;
	font-style: normal;
	margin-top: 24px;
	color: var(--dd-brown);
	font-size: var(--dd-fs-sm);
	font-weight: var(--dd-w-bold);
}

/* ============================================================
   Newsletter
   ============================================================ */
.drapes-newsletter__card {
	background: var(--dd-cream-low);
	border-radius: var(--dd-r-2xl);
	padding: 48px;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
.drapes-newsletter__heading {
	font-family: var(--dd-font-display);
	font-size: clamp(24px, 4vw, var(--dd-fs-h2));
	color: var(--dd-navy);
	margin: 8px 0 16px;
}
.drapes-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 480px;
	margin: 24px auto 0;
}
.drapes-newsletter__form input {
	padding: 14px 20px;
	border-radius: var(--dd-r-pill);
	border: 1px solid var(--dd-light-blue);
	background: var(--dd-white);
	font-family: var(--dd-font-body);
	font-size: var(--dd-fs-base);
}
@media (min-width: 600px) {
	.drapes-newsletter__form { flex-direction: row; }
	.drapes-newsletter__form input { flex: 1; }
}

/* ============================================================
   Contact form
   ============================================================ */
.drapes-contact-hero { background: var(--dd-cream); }
.drapes-contact-hero__copy { padding-right: 24px; }
.drapes-contact-hero__channels {
	margin-top: 40px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--dd-fs-base);
	color: var(--dd-brown);
}

.drapes-contact-form {
	background: var(--dd-white);
	border-radius: var(--dd-r-3xl);
	padding: 40px;
	box-shadow: var(--dd-shadow-form);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.drapes-contact-form__row { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 600px) { .drapes-contact-form__row { grid-template-columns: 1fr 1fr; } }
.drapes-contact-form__field { display: flex; flex-direction: column; gap: 8px; }
.drapes-contact-form__label {
	font-family: var(--dd-font-body);
	font-size: var(--dd-fs-xs);
	font-weight: var(--dd-w-bold);
	letter-spacing: var(--dd-track-widest);
	text-transform: uppercase;
	color: var(--dd-navy);
}
.drapes-contact-form__field input,
.drapes-contact-form__field textarea {
	padding: 14px 18px;
	border-radius: var(--dd-r-md);
	border: 1px solid var(--dd-light-blue);
	background: var(--dd-cream-low);
	font-family: var(--dd-font-body);
	font-size: var(--dd-fs-base);
	color: var(--dd-dark);
	transition: border-color var(--dd-dur-fast) var(--dd-ease);
}
.drapes-contact-form__field input:focus-visible,
.drapes-contact-form__field textarea:focus-visible {
	outline: none;
	border-color: var(--dd-orange);
	box-shadow: 0 0 0 3px rgba(245, 89, 17, 0.15);
}
.drapes-contact-form__actions { display: flex; gap: 16px; align-items: center; }
.drapes-contact-form__status { margin: 0; font-size: var(--dd-fs-sm); color: var(--dd-brown); }

/* ============================================================
   Blog
   ============================================================ */
.drapes-blog-card { padding: 24px; border-radius: var(--dd-r-xl); background: var(--dd-cream-low); }
.drapes-blog-card--draft, .drapes-blog-card--soon { opacity: 0.85; }
.drapes-blog-card h3 {
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-h4);
	color: var(--dd-navy);
}

/* ============================================================
   Portfolio single
   ============================================================ */
.drapes-portfolio__hero { background: var(--dd-cream); }
.drapes-portfolio__back a { color: var(--dd-secondary-soft); font-weight: var(--dd-w-semibold); }
.drapes-portfolio__title {
	font-family: var(--dd-font-display);
	font-size: clamp(40px, 7vw, var(--dd-fs-h1));
	line-height: var(--dd-lh-display);
	letter-spacing: var(--dd-track-tight);
	color: var(--dd-navy);
	max-width: 22ch;
	margin: 32px 0 16px;
}
.drapes-portfolio__subtitle {
	font-size: var(--dd-fs-lg);
	color: var(--dd-brown);
	max-width: 60ch;
}
.drapes-portfolio__meta-card {
	background: var(--dd-cream-low);
	border-radius: var(--dd-r-xl);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
@media (min-width: 1024px) {
	.drapes-portfolio__meta { position: sticky; top: 110px; align-self: flex-start; }
}
.drapes-portfolio__pullquote {
	background: var(--dd-cream-low);
}
.drapes-portfolio__pullquote-text {
	font-family: var(--dd-font-display);
	font-size: clamp(24px, 4vw, var(--dd-fs-h3));
	line-height: 1.3;
	color: var(--dd-navy);
	text-align: center;
	max-width: 880px;
	margin: 0 auto;
}
.drapes-portfolio__pullquote-attribution {
	text-align: center;
	margin-top: 32px;
	color: var(--dd-brown);
	font-size: var(--dd-fs-sm);
}

/* ============================================================
   Shared primitives — glass + orbs (from design2)
   ============================================================ */
.drapes-glass {
	background: rgba(252, 247, 245, 0.7);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.drapes-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(30px);
	mix-blend-mode: multiply;
	z-index: 0;
	pointer-events: none;
}
.drapes-orb--orange-cream { background: radial-gradient(circle at center, var(--dd-orange), var(--dd-cream)); }
.drapes-orb--blue-light   { background: radial-gradient(circle at center, var(--dd-navy),   var(--dd-light-blue)); }

@keyframes drapes-float-1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(20px, -30px) scale(1.05); }
}
@keyframes drapes-float-2 {
	0%, 100% { transform: translate(0, 0) scale(1.1); }
	50%      { transform: translate(-40px, 20px) scale(1); }
}
@keyframes drapes-float-3 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50%      { transform: translate(30px, 40px) rotate(5deg); }
}

/* ============================================================
   What we've built — NCCEEP + Four All cards (home)
   ============================================================ */
.drapes-built__intro { max-width: 880px; margin-bottom: 48px; }
.drapes-built__heading {
	font-family: var(--dd-font-display);
	font-size: clamp(28px, 5vw, var(--dd-fs-h2));
	color: var(--dd-navy);
	letter-spacing: var(--dd-track-tight);
	margin: 0 0 24px;
}
.drapes-built__lead {
	font-size: var(--dd-fs-lg);
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	max-width: 60ch;
	margin: 0;
}
.drapes-built__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.drapes-built__grid { grid-template-columns: 7fr 5fr; gap: 32px; }
}

.drapes-cs-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 32px;
	background: var(--dd-navy);
	color: var(--dd-cream);
	text-decoration: none;
	min-height: 320px;
	height: 320px;
}
@media (min-width: 640px) { .drapes-cs-card { height: 400px; } }
@media (min-width: 768px) { .drapes-cs-card { height: 480px; } }

.drapes-cs-card__media { position: absolute; inset: 0; }
.drapes-cs-card__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1000ms var(--dd-ease),
	            filter    1000ms var(--dd-ease);
	will-change: transform, filter;
}
/* NCCEEP card: photo layer is grayscale at rest, color on hover; copper overlay subtle */
.drapes-cs-card--ncceep .drapes-cs-card__layer--photo   { filter: grayscale(1); }
.drapes-cs-card--ncceep .drapes-cs-card__layer--overlay { opacity: 0.1; }
.drapes-cs-card--ncceep:hover .drapes-cs-card__layer--photo {
	filter: grayscale(0);
	transform: scale(1.05);
}
.drapes-cs-card--ncceep:hover .drapes-cs-card__layer--overlay { transform: scale(1.05); }

/* Four All card: paper full + photo at 0.8, both scale on hover */
.drapes-cs-card--fourall .drapes-cs-card__layer--paper { opacity: 1; }
.drapes-cs-card--fourall .drapes-cs-card__layer--photo-soft { opacity: 0.8; }
.drapes-cs-card--fourall:hover .drapes-cs-card__layer { transform: scale(1.05); }

.drapes-cs-card__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(32, 61, 92, 0.9) 0%, rgba(32, 61, 92, 0.2) 50%, transparent 100%);
	pointer-events: none;
}
.drapes-cs-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
@media (min-width: 640px) { .drapes-cs-card__body { padding: 40px; } }
@media (min-width: 768px) { .drapes-cs-card__body { padding: 48px; } }
.drapes-cs-card__title {
	font-family: var(--dd-font-display);
	font-size: clamp(20px, 3vw, var(--dd-fs-h3));
	color: var(--dd-white);
	font-weight: var(--dd-w-bold);
	margin: 0;
}
.drapes-cs-card__copy {
	color: rgba(252, 247, 245, 0.8);
	max-width: 30em;
	font-size: var(--dd-fs-base);
	line-height: var(--dd-lh-body);
	margin: 0;
}
.drapes-cs-card__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--dd-fs-sm);
	font-weight: var(--dd-w-bold);
	letter-spacing: var(--dd-track-widest);
	text-transform: uppercase;
}

/* ============================================================
   What we do — service overview cards (home)
   ============================================================ */
.drapes-whatwedo { background: var(--dd-cream); position: relative; }
.drapes-whatwedo__intro { max-width: 720px; margin-bottom: 48px; }
.drapes-whatwedo__heading {
	font-family: var(--dd-font-display);
	font-size: clamp(28px, 5vw, var(--dd-fs-h2));
	color: var(--dd-navy);
	letter-spacing: var(--dd-track-tight);
	margin: 0 0 24px;
}
.drapes-whatwedo__lead {
	font-size: var(--dd-fs-lg);
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	margin: 0;
}
.drapes-whatwedo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 768px) {
	.drapes-whatwedo__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.drapes-svc-card {
	position: relative;
	overflow: hidden;
	background: var(--dd-white);
	border-radius: 24px;
	padding: 24px;
	box-shadow: var(--dd-shadow-soft);
	transition: box-shadow 500ms var(--dd-ease);
}
@media (min-width: 768px) { .drapes-svc-card { padding: 40px; } }
.drapes-svc-card:hover { box-shadow: var(--dd-shadow-card); }

.drapes-svc-card__orb {
	position: absolute;
	top: -40px;
	right: -40px;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	filter: blur(30px);
	mix-blend-mode: multiply;
	z-index: 0;
	transition: transform 500ms var(--dd-ease);
	pointer-events: none;
}
.drapes-svc-card__orb--blue   { background: radial-gradient(circle at center, var(--dd-navy), var(--dd-light-blue)); opacity: 0.2; }
.drapes-svc-card__orb--orange { background: radial-gradient(circle at center, var(--dd-orange), var(--dd-cream)); opacity: 0.3; }
.drapes-svc-card:hover .drapes-svc-card__orb { transform: scale(1.5); }

.drapes-svc-card__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	margin: 0 0 32px;
}
.drapes-svc-card__icon--navy      { background: var(--dd-navy);       color: var(--dd-cream); }
.drapes-svc-card__icon--orange    { background: var(--dd-orange);     color: var(--dd-cream); }
.drapes-svc-card__icon--lightblue { background: var(--dd-light-blue); color: var(--dd-navy);  }
.drapes-svc-card__icon .material-symbols-outlined { font-size: 24px; }

.drapes-svc-card__title {
	position: relative;
	z-index: 1;
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-md);
	color: var(--dd-navy);
	font-weight: var(--dd-w-bold);
	margin: 0 0 20px;
}
@media (min-width: 768px) { .drapes-svc-card__title { font-size: var(--dd-fs-lg); } }
.drapes-svc-card__copy {
	position: relative;
	z-index: 1;
	color: var(--dd-brown);
	font-size: var(--dd-fs-base);
	line-height: var(--dd-lh-body);
	margin: 0 0 32px;
}
.drapes-svc-card__cta {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--dd-orange-deep);
	font-weight: var(--dd-w-bold);
	text-decoration: none;
	transition: gap 250ms var(--dd-ease);
}
.drapes-svc-card:hover .drapes-svc-card__cta { gap: 20px; }

/* ============================================================
   Four All case study — chart + copy (home)
   ============================================================ */
.drapes-fourall { background: var(--dd-white); }
.drapes-fourall__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}
@media (min-width: 1024px) {
	.drapes-fourall__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.drapes-fourall__chart { order: 2; }
.drapes-fourall__copy  { order: 1; }
@media (min-width: 1024px) {
	.drapes-fourall__chart { order: 1; }
	.drapes-fourall__copy  { order: 2; }
}
.drapes-fourall__chart img { width: 100%; height: auto; display: block; }
.drapes-fourall__headline {
	font-family: var(--dd-font-display);
	font-size: clamp(28px, 5vw, var(--dd-fs-h2));
	color: var(--dd-navy);
	font-weight: var(--dd-w-bold);
	letter-spacing: var(--dd-track-tight);
	line-height: 1.1;
	margin: 0 0 32px;
}
.drapes-fourall__lead {
	font-size: var(--dd-fs-lg);
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	max-width: 38ch;
	margin: 0 0 32px;
}
.drapes-fourall__lead strong { color: var(--dd-navy); font-weight: var(--dd-w-bold); }
.drapes-fourall__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(32, 61, 92, 0.1);
	color: var(--dd-navy);
	padding: 16px 32px;
	border-radius: 9999px;
	font-weight: var(--dd-w-bold);
	font-size: var(--dd-fs-lg);
}

/* ============================================================
   CTA — "Let's make it happen" glass card
   ============================================================ */
.drapes-cta { position: relative; }
.drapes-cta__card {
	position: relative;
	overflow: hidden;
	background: rgba(252, 247, 245, 0.7);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 24px;
	padding: 40px 32px;
	max-width: 1024px;
	margin: 0 auto;
	text-align: center;
}
@media (min-width: 640px) { .drapes-cta__card { padding: 56px 48px; } }
@media (min-width: 768px) { .drapes-cta__card { padding: 80px 64px; } }
.drapes-cta__orb {
	position: absolute;
	width: 256px;
	height: 256px;
	border-radius: 50%;
	filter: blur(30px);
	mix-blend-mode: multiply;
	opacity: 0.2;
	z-index: 0;
	pointer-events: none;
}
@media (min-width: 768px) { .drapes-cta__orb { width: 384px; height: 384px; } }
.drapes-cta__orb--orange-tr {
	top: -192px;
	right: -160px;
	background: radial-gradient(circle at center, var(--dd-orange), var(--dd-cream));
}
.drapes-cta__orb--blue-bl {
	bottom: -192px;
	left: -160px;
	background: radial-gradient(circle at center, var(--dd-navy), var(--dd-light-blue));
}
.drapes-cta__headline {
	position: relative;
	z-index: 1;
	font-family: var(--dd-font-display);
	font-size: clamp(28px, 5vw, var(--dd-fs-h2));
	color: var(--dd-navy);
	font-weight: var(--dd-w-bold);
	letter-spacing: var(--dd-track-tight);
	margin: 0 0 24px;
}
@media (min-width: 768px) { .drapes-cta__headline { margin-bottom: 32px; } }
.drapes-cta__lead {
	position: relative;
	z-index: 1;
	font-size: var(--dd-fs-base);
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	max-width: 36em;
	margin: 0 auto 32px;
}
@media (min-width: 768px) {
	.drapes-cta__lead { font-size: var(--dd-fs-lg); margin-bottom: 40px; }
}
.drapes-cta__card .drapes-btn { position: relative; z-index: 1; }

/* ============================================================
   Atmosphere (default presentation)
   ============================================================ */
.drapes-atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.drapes-atmosphere--editor {
	position: relative;
	inset: auto;
	min-height: 120px;
	border: 1px dashed var(--dd-light-blue);
	border-radius: var(--dd-r-md);
	padding: 16px;
	background: rgba(184, 194, 214, 0.1);
}
.dd-pattern-cluster {
	--cx: 50%;
	--cy: 50%;
	--rx: 300px;
	--ry: 300px;
	--rot: 0deg;
	position: absolute;
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),
		#000 0%, rgba(0,0,0,0.7) 55%, transparent 85%);
	        mask-image: radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),
		#000 0%, rgba(0,0,0,0.7) 55%, transparent 85%);
	transform: rotate(var(--rot));
	transform-origin: var(--cx) var(--cy);
}
.dd-pattern-fill {
	position: absolute;
	inset: 0;
	background-image: var(--pattern-src);
	background-position: center;
	background-size: var(--pattern-size, 210%);
	background-repeat: no-repeat;
	opacity: var(--pattern-opacity, 0.5);
	transform: rotate(calc(-1 * var(--rot)));
	transform-origin: var(--cx) var(--cy);
}

/* ============================================================
   Reveal (entry animation wrapper)
   ============================================================ */
.drapes-reveal {
	--reveal-duration: var(--wp--custom--motion--dur--reveal, 1000ms);
	--reveal-easing:   var(--wp--custom--motion--ease, cubic-bezier(0.32, 0.72, 0, 1));
	--reveal-delay:    0ms;
	opacity: 0;
	transition:
		opacity   var(--reveal-duration) var(--reveal-easing) var(--reveal-delay),
		transform var(--reveal-duration) var(--reveal-easing) var(--reveal-delay),
		filter    var(--reveal-duration) var(--reveal-easing) var(--reveal-delay);
	will-change: opacity, transform, filter;
}
.drapes-reveal--fade-up  { transform: translateY(32px); }
.drapes-reveal--slide-in { transform: translateX(-48px); }
.drapes-reveal--scale    { transform: scale(0.92); }
.drapes-reveal--blur-in  { filter: blur(12px); }

.drapes-reveal.is-revealed,
.drapes-reveal--editor {
	opacity: 1;
	transform: none;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.drapes-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* Editor placeholder. */
.drapes-block-placeholder {
	display: inline-block;
	padding: 4px 8px;
	background: rgba(245, 89, 17, 0.08);
	color: var(--dd-orange-deep);
	font-size: var(--dd-fs-xs);
	letter-spacing: var(--dd-track-widest);
	text-transform: uppercase;
	border-radius: var(--dd-r-sm);
	font-family: var(--dd-font-body);
}