/* ============================================================
   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;
}
/* Editor wrapper: takes no layout space, so the section lays out exactly as on
   the front end. Select the block from List View. */
.drapes-atmosphere-editor {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	max-width: none !important;
	pointer-events: none;
	z-index: 0;
}
.drapes-atmosphere-editor > div {
	position: absolute;
	inset: 0;
}
.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);
}


/* ============================================================
   Page CSS batch — merged 2026-07-09 (about, services, our-work, contact, blog)
   ============================================================ */

/* ===== About page (merged from css-batch) ===== */

/* All About sections use constrained group layouts. Core constrained layout
   centers every non-aligned child (margin-left/right: auto !important), but
   design2 left-anchors its narrower text blocks (max-w-2xl/3xl/4xl) to the
   content column's left edge. This pins those children to the same left edge
   as the centered content column at any viewport width. */
.drapes-hero--about .drapes-hero__headline,
.drapes-hero--about .drapes-hero__lead,
.drapes-values .drapes-values__heading,
.drapes-values .drapes-values__lead,
.drapes-creed .drapes-creed__lead {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
	margin-right: auto !important;
}

/* ============================================================
   About — hero
   design2: h1 text-4xl sm:5xl md:6xl lg:7xl, leading-[1.05],
   max-w-4xl wrap; lead text-lg brown max-w-2xl.
   ============================================================ */
.drapes-hero--about .drapes-hero__headline {
	font-size: var(--dd-fs-h3);          /* 36px — text-4xl */
	line-height: var(--dd-lh-display);   /* 1.05 */
	max-width: 56rem;                    /* max-w-4xl */
	margin-top: 0;
	margin-bottom: 32px;                 /* mb-8 */
}
@media (min-width: 640px)  { .drapes-hero--about .drapes-hero__headline { font-size: var(--dd-fs-h2); } } /* 48px */
@media (min-width: 768px)  { .drapes-hero--about .drapes-hero__headline { font-size: 60px; } }
@media (min-width: 1024px) { .drapes-hero--about .drapes-hero__headline { font-size: var(--dd-fs-h1); } } /* 72px */

.drapes-hero--about .drapes-hero__lead {
	font-size: var(--dd-fs-md);          /* 18px — text-lg, all breakpoints */
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	max-width: 42rem;                    /* max-w-2xl */
	margin-top: 0;
	margin-bottom: 0;
}

/* ============================================================
   About — values ("Preparing You for the Digital World")
   ============================================================ */
.drapes-values {
	position: relative;
	overflow: hidden;
}
.drapes-values__orb {
	width: 360px;
	height: 360px;
}
.drapes-values__orb--tr { top: -160px; right: -128px; opacity: 0.25; }  /* -top-40 -right-32 */
.drapes-values__orb--bl { bottom: -160px; left: -128px; opacity: 0.40; } /* -bottom-40 -left-32 */

/* Content sits above the orbs (design2 wraps content in a z-10 layer). */
.drapes-values .drapes-values__heading,
.drapes-values .drapes-values__lead,
.drapes-values .drapes-values__grid {
	position: relative;
	z-index: 1;
}

.drapes-values .drapes-values__heading {
	color: var(--dd-white);
	font-size: 30px;                     /* text-3xl */
	line-height: var(--dd-lh-display);   /* leading-[1.05] */
	letter-spacing: var(--dd-track-tight);
	max-width: 56rem;                    /* max-w-4xl */
	margin-top: 0;
	margin-bottom: 24px;                 /* mb-6 */
}
@media (min-width: 640px)  { .drapes-values .drapes-values__heading { font-size: var(--dd-fs-h3); } } /* 36px */
@media (min-width: 768px)  { .drapes-values .drapes-values__heading { font-size: var(--dd-fs-h2); margin-bottom: 32px; } } /* 48px / md:mb-8 */
@media (min-width: 1024px) { .drapes-values .drapes-values__heading { font-size: 60px; } }

.drapes-values .drapes-values__lead {
	color: rgba(252, 247, 245, 0.85);    /* text-cream/85 */
	font-size: var(--dd-fs-base);
	line-height: var(--dd-lh-body);
	max-width: 42rem;                    /* max-w-2xl */
	margin-top: 0;
	margin-bottom: 40px;                 /* mb-10 */
}
@media (min-width: 768px) {
	.drapes-values .drapes-values__lead { font-size: var(--dd-fs-md); margin-bottom: 56px; } /* md:text-lg md:mb-14 */
}

/* Columns block → responsive grid: 1 / md:2 / lg:4. */
.drapes-values .drapes-values__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;                           /* gap-5 */
	margin: 0;
}
@media (min-width: 768px)  { .drapes-values .drapes-values__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .drapes-values .drapes-values__grid { grid-template-columns: repeat(4, 1fr); } }

/* Value cards: bg-white/10 border-white/15 rounded-[24px] p-6 md:p-8 backdrop-blur-sm. */
.drapes-values .drapes-pillar {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--dd-r-xl);       /* 24px */
	padding: 24px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
@media (min-width: 768px) { .drapes-values .drapes-pillar { padding: 32px; } }

.drapes-pillar__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--dd-r-pill);
	background: rgba(245, 89, 17, 0.20); /* bg-primary/20 */
	margin: 0 0 20px;                    /* mb-5 */
}
.drapes-pillar__icon .material-symbols-outlined {
	font-size: 20px;                     /* text-xl */
	color: var(--dd-orange);
}

.drapes-values .drapes-pillar h3 {
	color: var(--dd-white);
	font-size: var(--dd-fs-md);          /* 18px — text-lg */
	font-weight: var(--dd-w-bold);
	margin: 0 0 12px;                    /* mb-3 */
}
.drapes-values .drapes-pillar p {
	color: rgba(252, 247, 245, 0.85);
	font-size: var(--dd-fs-sm);
	line-height: var(--dd-lh-body);
	margin: 0;
}
@media (min-width: 768px) { .drapes-values .drapes-pillar p { font-size: var(--dd-fs-base); } }

/* ============================================================
   About — "Your crew" bento grid
   ============================================================ */
.drapes-team .drapes-team__heading {
	font-size: 30px;                     /* text-3xl */
	letter-spacing: var(--dd-track-tight);
	margin: 0 0 40px;                    /* wrapper mb-10 */
}
@media (min-width: 640px) { .drapes-team .drapes-team__heading { font-size: var(--dd-fs-h3); } } /* 36px */
@media (min-width: 768px) { .drapes-team .drapes-team__heading { font-size: var(--dd-fs-h2); margin-bottom: 64px; } } /* 48px / md:mb-16 */

.drapes-team .drapes-crew__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                           /* gap-6 */
	margin: 0;
}
@media (min-width: 768px) {
	.drapes-team .drapes-crew__grid { grid-template-columns: repeat(3, 1fr); }
	.drapes-crew__grid .drapes-crew__feature { grid-column: span 2; grid-row: span 2; } /* md:col-span-2 md:row-span-2 */
}
/* Kill flow-layout sibling margins inside the grid; the grid gap spaces cells. */
.drapes-crew__grid > .wp-block-group { margin: 0; }

/* Bio cards. */
.drapes-crew-card {
	display: flex;
	flex-direction: column;
	gap: 16px;                           /* gap-4 */
	background: var(--dd-cream-low);     /* surface-low */
	border-radius: var(--dd-r-xl);       /* 24px */
	padding: 24px;                       /* p-6 */
}
.drapes-crew-card .drapes-crew-card__head {
	display: flex;
	align-items: center;
	gap: 16px;                           /* gap-4 */
	margin: 0;
}
.drapes-crew-card__head .drapes-crew-card__avatar {
	width: 56px;                         /* w-14 h-14 */
	height: 56px;
	flex-shrink: 0;
	margin: 0;
	border-radius: var(--dd-r-pill);
	overflow: hidden;
	background: rgba(32, 61, 92, 0.10);  /* bg-secondary/10 */
}
.drapes-crew-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.drapes-crew-card__id .drapes-crew-card__name {
	font-family: var(--dd-font-display);
	font-weight: var(--dd-w-bold);
	color: var(--dd-navy);
	margin: 0;
}
.drapes-crew-card__id .drapes-crew-card__role {
	font-size: var(--dd-fs-sm);
	color: var(--dd-orange-deep);
	margin: 0;
}
.drapes-crew-card .drapes-crew-card__bio {
	font-size: var(--dd-fs-sm);
	line-height: var(--dd-lh-body);
	color: var(--dd-brown);
	margin: 0;
}

/* Feature card: navy, photo overlay + gradient scrim, copy pinned bottom. */
.drapes-crew__feature {
	position: relative;
	overflow: hidden;
	border-radius: var(--dd-r-xl);       /* 24px */
	background: var(--dd-navy);
	min-height: 400px;
}
.drapes-crew__feature .drapes-crew__feature-media {
	position: absolute;
	inset: 0;
	margin: 0;
}
.drapes-crew__feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
	display: block;
}
/* design2 scrim div: bg-gradient-to-t from-secondary/95 via-secondary/50 to-secondary/20 */
.drapes-crew__feature-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(32, 61, 92, 0.95) 0%, rgba(32, 61, 92, 0.50) 50%, rgba(32, 61, 92, 0.20) 100%);
	pointer-events: none;
}
.drapes-crew__feature .drapes-crew__feature-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px;                       /* p-8 */
}
@media (min-width: 768px) { .drapes-crew__feature .drapes-crew__feature-body { padding: 48px; } } /* md:p-12 */
.drapes-crew__feature-body .drapes-crew__feature-title {
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-xl);          /* 24px — text-2xl */
	font-weight: var(--dd-w-bold);
	color: var(--dd-white);
	margin: 0 0 12px;                    /* mb-3 */
}
@media (min-width: 768px) { .drapes-crew__feature-body .drapes-crew__feature-title { font-size: 30px; } } /* md:text-3xl */
.drapes-crew__feature-body .drapes-crew__feature-copy {
	color: rgba(252, 247, 245, 0.85);
	line-height: var(--dd-lh-body);
	max-width: 32rem;                    /* max-w-lg */
	margin: 0;
}

/* Mentorship card (orange, link pinned to the bottom). */
.drapes-crew__mentorship {
	display: flex;
	flex-direction: column;
	border-radius: var(--dd-r-xl);       /* 24px */
	padding: 32px;                       /* p-8 */
}
.drapes-crew__mentorship .drapes-crew__mentorship-title {
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-lg);          /* 20px — text-xl */
	font-weight: var(--dd-w-bold);
	color: var(--dd-white);
	margin: 0 0 16px;                    /* mb-4 */
}
@media (min-width: 768px) { .drapes-crew__mentorship .drapes-crew__mentorship-title { font-size: var(--dd-fs-xl); } } /* 24px */
.drapes-crew__mentorship .drapes-crew__mentorship-copy {
	font-size: var(--dd-fs-sm);
	line-height: var(--dd-lh-body);
	color: rgba(255, 255, 255, 0.95);    /* text-white/95 */
	margin: 0 0 24px;                    /* mb-6 */
}
.drapes-crew__mentorship .drapes-crew__mentorship-link {
	margin: auto 0 0;                    /* justify-between: pin to bottom */
}
.drapes-crew__mentorship-link a {
	display: inline-flex;
	align-items: center;
	color: var(--dd-white);
	font-weight: var(--dd-w-bold);
	text-decoration: none;
}
/* Restore the arrow_forward glyph (Material Symbols is enqueued globally). */
.drapes-crew__mentorship-link a::after {
	content: "arrow_forward";
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	direction: ltr;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	margin-left: 8px;                    /* ml-2 */
	transition: transform var(--dd-dur-base) var(--dd-ease);
}
.drapes-crew__mentorship-link a:hover::after { transform: translateX(4px); } /* group-hover translate-x-1 */

/* ============================================================
   About — "Our Creed"
   ============================================================ */
.drapes-creed .drapes-creed__heading {
	font-family: var(--dd-font-display);
	font-size: 30px;                     /* text-3xl */
	font-weight: var(--dd-w-bold);
	letter-spacing: var(--dd-track-tight);
	color: var(--dd-white);
	margin: 0 0 24px;                    /* mb-6 */
}
@media (min-width: 640px) { .drapes-creed .drapes-creed__heading { font-size: var(--dd-fs-h3); } } /* 36px */
@media (min-width: 768px) { .drapes-creed .drapes-creed__heading { font-size: var(--dd-fs-h2); } } /* 48px */

.drapes-creed .drapes-creed__lead {
	color: rgba(252, 247, 245, 0.85);
	font-size: var(--dd-fs-md);          /* 18px — text-lg */
	line-height: var(--dd-lh-body);
	max-width: 48rem;                    /* max-w-3xl */
	margin-top: 0;
	margin-bottom: 48px;                 /* wrapper mb-12 */
}
@media (min-width: 768px) { .drapes-creed .drapes-creed__lead { margin-bottom: 64px; } } /* md:mb-16 */

.drapes-creed .drapes-creed__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                           /* gap-6 */
	margin: 0;
}
@media (min-width: 768px) { .drapes-creed .drapes-creed__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } /* md:gap-8 */

/* Creed cards: bg-white/5 border-white/15 rounded-[24px] p-8. */
.drapes-creed .drapes-pillar {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--dd-r-xl);       /* 24px */
	padding: 32px;
}
.drapes-creed .drapes-pillar h3 {
	color: var(--dd-white);
	font-size: var(--dd-fs-md);          /* 18px — text-lg */
	font-weight: var(--dd-w-bold);
	line-height: 1.25;                   /* leading-tight */
	margin: 0 0 16px;                    /* mb-4 */
}
.drapes-creed .drapes-pillar p {
	color: rgba(252, 247, 245, 0.85);
	line-height: var(--dd-lh-body);
	margin: 0;
}

.drapes-creed .drapes-creed__note {
	color: rgba(252, 247, 245, 0.70);    /* text-cream/70 */
	font-size: var(--dd-fs-sm);
	margin: 40px 0 0;                    /* mt-10 */
}
.drapes-creed__note a {
	color: inherit;
	text-decoration: underline;
	transition: color var(--dd-dur-fast) var(--dd-ease);
}
.drapes-creed__note a:hover { color: var(--dd-orange); }

/* ============================================================
   About — bottom CTA
   design2 uses a solid cream card (no glass), rounded-[32px],
   p-10 md:p-16 lg:p-20, full content width. Orb sizes/offsets
   match the shared .drapes-cta__orb rules.
   ============================================================ */
.drapes-cta--about .drapes-cta__card {
	background: var(--dd-cream);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	border-radius: var(--dd-r-2xl);      /* 32px */
	padding: 40px;                       /* p-10 */
	max-width: var(--wp--style--global--content-size, 1200px);
}
@media (min-width: 768px)  { .drapes-cta--about .drapes-cta__card { padding: 64px; } } /* md:p-16 */
@media (min-width: 1024px) { .drapes-cta--about .drapes-cta__card { padding: 80px; } } /* lg:p-20 */

/* Button compat: the wrapper's padding and border were repeated on the inner
   link (shared `padding: inherit` rule + outline link border), so Work with Us
   drew two nested pills and Join Us was double-padded. Padding and border live
   on the link only. */
.drapes-cta__card .wp-block-button.drapes-btn { padding: 0; border: 0; }
.drapes-cta__card .drapes-btn--primary.drapes-btn--lg .wp-block-button__link { padding: 16px 32px; }
.drapes-cta__card .drapes-btn--outline-navy .wp-block-button__link { padding: 14px 30px; }

.drapes-cta--about .drapes-cta__headline {
	font-size: 30px;                     /* text-3xl */
	line-height: 1.25;                   /* leading-tight */
	max-width: 48rem;                    /* max-w-3xl mx-auto */
	margin: 0 auto 24px;                 /* mb-6 */
}
@media (min-width: 640px) { .drapes-cta--about .drapes-cta__headline { font-size: var(--dd-fs-h3); } } /* 36px */
@media (min-width: 768px) { .drapes-cta--about .drapes-cta__headline { font-size: var(--dd-fs-h2); margin-bottom: 24px; } } /* 48px */

.drapes-cta--about .drapes-cta__lead {
	font-size: var(--dd-fs-md);          /* 18px — text-lg, all breakpoints */
	max-width: none;
	margin: 0 auto 40px;                 /* mb-10 */
}

.drapes-cta--about .wp-block-buttons {
	position: relative;
	z-index: 1;
	gap: 16px;                           /* gap-4 */
}

/* ===== Services page (merged from css-batch) ===== */

/* ------------------------------------------------------------
   Hero — .drapes-hero--services
   design2: px-6 md:px-8 lg:pl-16 lg:pr-24; orbs top-right (orange)
   and bottom-left (blue); 12-col grid, h1 left, bordered lead right.
   ------------------------------------------------------------ */
.drapes-hero--services__orb-tr {
	width: 176px;
	height: 176px;
	top: 24px;
	right: -40px;
	opacity: 0.4;
}
.drapes-hero--services__orb-bl {
	width: 224px;
	height: 224px;
	bottom: -96px;
	left: -96px;
	opacity: 0.3;
}

/* Mobile: design2 DOM order is h1 → lead → buttons, but the pattern's
   columns hold (h1 + buttons) | (lead). display:contents flattens the
   columns so we can restore design2's order with flex `order`. */
.wp-block-columns.drapes-hero--services__grid {
	display: flex;
	flex-direction: column;
	align-items: stretch; /* neutralize core .are-vertically-aligned-bottom while stacked */
	gap: 32px;
}
.drapes-hero--services__grid > .wp-block-column { display: contents; }
.drapes-hero--services__grid .drapes-hero__headline    { order: 1; }
.drapes-hero--services__grid .drapes-hero__lead--rule  { order: 2; }
.drapes-hero--services__grid .drapes-hero__ctas        { order: 3; }
.drapes-hero--services .drapes-hero__ctas { margin-top: 0; }

.drapes-hero--services .drapes-hero__lead--rule {
	margin: 0;
	border-left: 2px solid var(--dd-orange);
	padding-left: 24px;
	color: var(--dd-brown);
	font-size: var(--dd-fs-md);
	line-height: var(--dd-lh-body);
	max-width: 448px;
}

@media (min-width: 640px) {
	.drapes-hero--services__orb-tr { width: 224px; height: 224px; top: 32px;   right: -56px; }
	.drapes-hero--services__orb-bl { width: 288px; height: 288px; bottom: -128px; left: -128px; }
}
@media (min-width: 768px) {
	.drapes-hero--services__orb-tr { width: 256px; height: 256px; }
	.drapes-hero--services__orb-bl { width: 320px; height: 320px; }
	.drapes-hero--services .drapes-hero__lead--rule { font-size: var(--dd-fs-lg); }
}
@media (min-width: 1024px) {
	.drapes-hero--services__orb-tr { width: 288px; height: 288px; top: 40px; right: -80px; }
	.drapes-hero--services__orb-bl { bottom: -160px; left: -160px; }

	.wp-block-columns.drapes-hero--services__grid {
		flex-direction: row;
		align-items: flex-end;
		gap: 32px;
	}
	.drapes-hero--services__grid > .wp-block-column { display: block; }
	.drapes-hero--services .drapes-hero__ctas { margin-top: 32px; }
	.drapes-hero--services .drapes-hero__lead--rule { padding-bottom: 16px; }
}

/* Button compat: .drapes-btn--lg pads the wrapper AND the inner link
   inherits that padding (shared `padding: inherit` rule) = double pad.
   Scoped fix for the two Services CTAs only. */
.drapes-hero--services .drapes-btn--lg,
.drapes-cta-navy .drapes-btn--lg { padding: 0; }
.drapes-hero--services .drapes-btn--lg .wp-block-button__link { padding: 16px 32px; }
.drapes-cta-navy .drapes-btn--lg .wp-block-button__link { padding: 16px 40px; }

/* ------------------------------------------------------------
   Eyebrow on dark surfaces (cream/80 per design2)
   ------------------------------------------------------------ */
.drapes-eyebrow--on-dark { color: rgba(252, 247, 245, 0.8); }

/* ------------------------------------------------------------
   Bundled Solutions — .drapes-bundles
   ------------------------------------------------------------ */
.drapes-bundles__intro {
	max-width: 1440px;
	margin: 0 auto 56px;
}
.drapes-bundles__intro .drapes-eyebrow { margin-bottom: 16px; }
.drapes-bundles__intro .drapes-bundles__heading {
	font-size: 30px;
	margin: 0 0 16px;
}
.drapes-bundles__lead {
	font-size: var(--dd-fs-md);
	color: rgba(252, 247, 245, 0.6);
	line-height: var(--dd-lh-body);
	max-width: 576px;
	margin: 0 auto;
}

.wp-block-columns.drapes-bundles__grid {
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px 0;
	gap: 32px;
}

/* Card shells — design2 p-8 md:p-10, rounded 32px */
.drapes-bundles__grid .drapes-bundle {
	padding: 32px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.drapes-bundles__grid .drapes-bundle h3 {
	font-size: var(--dd-fs-h4);
	margin: 0 0 12px;
}
.drapes-bundles__grid .drapes-bundle > p {
	margin: 0 0 24px;
	line-height: var(--dd-lh-body);
}

/* Transformation card: glass-dark + orange glow, rotate 2deg at md+ */
.drapes-bundles__grid .drapes-bundle--transformation {
	background: var(--wp--custom--glass--dark--bg);
	border: 1px solid var(--wp--custom--glass--dark--border);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.drapes-bundles__grid .drapes-bundle--transformation::after {
	content: "";
	position: absolute;
	top: -64px;
	right: -64px;
	width: 192px;
	height: 192px;
	border-radius: 50%;
	background: rgba(245, 89, 17, 0.2);
	filter: blur(60px);
	pointer-events: none;
	z-index: -1;
}
.drapes-bundles__grid .drapes-bundle--transformation h3 { color: var(--dd-white); }
.drapes-bundles__grid .drapes-bundle--transformation > p { color: rgba(252, 247, 245, 0.8); }

/* Start card: cream-low, no border, counter-rotated + dropped at md+ */
.drapes-bundles__grid .drapes-bundle--start {
	background: var(--dd-cream-low);
	border: 0;
}
.drapes-bundles__grid .drapes-bundle--start > p { color: var(--dd-brown); }

@media (min-width: 768px) {
	.drapes-bundles__grid .drapes-bundle { padding: 40px; }
	.drapes-bundles__grid .drapes-bundle--transformation { transform: rotate(2deg); }
	.drapes-bundles__grid .drapes-bundle--start { transform: rotate(-2deg) translateY(48px); }
}

/* Checklists: check_circle icons, no arrow bullets from the base rule */
.drapes-bundles__grid .drapes-bundle__checklist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.drapes-bundles__grid .drapes-bundle__checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--dd-fs-sm);
	color: rgba(252, 247, 245, 0.9);
}
.drapes-bundles__grid .drapes-bundle--start .drapes-bundle__checklist li { color: rgba(32, 61, 92, 0.8); }
.drapes-bundles__grid .drapes-bundle__checklist li::before {
	content: "check_circle";
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	font-feature-settings: "liga";
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	color: var(--dd-orange-deep);
	flex: 0 0 auto;
}
@media (min-width: 640px) {
	.drapes-bundles__grid .drapes-bundle__checklist--2col { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------
   Core Services — intro
   ------------------------------------------------------------ */
.drapes-services-core__intro {
	max-width: 1440px;
	margin: 0 auto 80px;
}
.drapes-services-core__intro .drapes-eyebrow { margin-bottom: 16px; }
.drapes-services-core__intro .drapes-services-core__heading {
	font-size: 30px;
	margin: 0 0 16px;
}
.drapes-services-core__lead {
	font-size: var(--dd-fs-md);
	color: rgba(32, 61, 92, 0.6);
	line-height: var(--dd-lh-body);
	max-width: 576px;
	margin: 0 auto;
}

@media (min-width: 640px) {
	.drapes-bundles__intro .drapes-bundles__heading,
	.drapes-services-core__intro .drapes-services-core__heading { font-size: var(--dd-fs-h3); }
}
@media (min-width: 768px) {
	.drapes-bundles__intro .drapes-bundles__heading,
	.drapes-services-core__intro .drapes-services-core__heading { font-size: var(--dd-fs-h2); }
}

/* ------------------------------------------------------------
   Accent rule (wp:separator) — short orange bar
   ------------------------------------------------------------ */
.drapes-rule-accent {
	border: 0;
	width: 64px;
	height: 4px;
	background-color: var(--dd-orange);
	border-radius: var(--dd-r-pill);
	margin: 0 0 24px;
	opacity: 1;
}

/* ------------------------------------------------------------
   Digital Consulting — sticky intro + navy panel
   ------------------------------------------------------------ */
.drapes-consulting {
	max-width: 1440px;
	margin: 0 auto 96px;
	scroll-margin-top: 128px;
}
.wp-block-columns.drapes-consulting__grid { gap: 40px; }

.drapes-consulting__intro .drapes-eyebrow {
	font-size: var(--dd-fs-base);
	margin: 0 0 24px;
}
.drapes-consulting__headline {
	font-size: 30px;
	line-height: 1.1;
	color: var(--dd-navy);
	margin: 0 0 24px;
}
.drapes-consulting__lead {
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	margin: 0;
}

.drapes-consulting__panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--dd-r-2xl);
	padding: 32px;
}
.drapes-consulting__panel::after {
	content: "";
	position: absolute;
	top: -64px;
	right: -64px;
	width: 224px;
	height: 224px;
	border-radius: 50%;
	background: rgba(184, 194, 214, 0.1);
	filter: blur(60px);
	pointer-events: none;
	z-index: -1;
}
/* Eyebrow carries the full-width hairline under it (design2's border-t div) */
.drapes-consulting__panel .drapes-eyebrow {
	display: block;
	color: var(--dd-light-blue);
	margin: 0 0 8px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wp-block-columns.drapes-consulting__row {
	margin: 0;
	gap: 0;
}
.drapes-consulting__item { padding: 24px 0; }
.drapes-consulting__item h4 {
	font-size: var(--dd-fs-base);
	color: var(--dd-white);
	margin: 0 0 8px;
}
.drapes-consulting__item p {
	font-size: var(--dd-fs-sm);
	color: rgba(252, 247, 245, 0.7);
	line-height: var(--dd-lh-body);
	margin: 0;
}
/* design2: border-t on every item after the first row (also on mobile) */
.drapes-consulting__row + .drapes-consulting__row .drapes-consulting__item {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
	.drapes-consulting__headline { font-size: var(--dd-fs-h3); }
	.drapes-consulting__panel { padding: 40px; }
}
@media (min-width: 782px) {
	.wp-block-columns.drapes-consulting__row { column-gap: 40px; }
}
@media (min-width: 1024px) {
	.wp-block-columns.drapes-consulting__grid { gap: 56px; align-items: flex-start; }
	.drapes-consulting__intro {
		position: sticky;
		top: 128px;
		align-self: flex-start;
	}
	.drapes-consulting__headline { font-size: var(--dd-fs-h2); }
}

/* ------------------------------------------------------------
   Web Design and Development — glass panel + linked cards
   ------------------------------------------------------------ */
.drapes-webdev {
	max-width: 1440px;
	margin: 0 auto 96px;
	scroll-margin-top: 128px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--dd-r-2xl);
	padding: 32px;
}
/* Faint rotated orange sweep, top-right (design2 decorative div) */
.drapes-webdev::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 33.3333%;
	height: 100%;
	background: rgba(245, 89, 17, 0.05);
	transform: rotate(-12deg) translate(48px, 48px);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent);
	mask-image: linear-gradient(to bottom, #000, transparent);
	pointer-events: none;
	z-index: -1;
}
.wp-block-columns.drapes-webdev__grid { gap: 24px; }
.drapes-webdev__intro { margin: 0 0 16px; } /* 24px gap + 16px = design2's 40px intro gap */

.drapes-webdev__headline {
	font-size: var(--dd-fs-h4);
	color: var(--dd-navy);
	margin: 0 0 16px;
}
.drapes-webdev__lead {
	font-size: var(--dd-fs-sm);
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	margin: 0 0 24px;
}
.drapes-webdev__intro .drapes-rule-accent { margin-bottom: 0; }

.drapes-webdev-card {
	position: relative;
	padding: 32px;
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid var(--dd-white);
	border-radius: var(--dd-r-xl);
	box-shadow: var(--wp--custom--shadow--press);
	transition: background var(--dd-dur-base) var(--dd-ease),
	            box-shadow var(--dd-dur-base) var(--dd-ease);
}
.drapes-webdev-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--dd-cream-low);
	border-radius: var(--dd-r-2xl);
	color: var(--dd-navy);
	margin: 0 0 24px;
	transition: background var(--dd-dur-base) var(--dd-ease),
	            color var(--dd-dur-base) var(--dd-ease);
}
.drapes-webdev-card__icon .material-symbols-outlined { font-size: 24px; }
.drapes-webdev-card__title {
	font-size: var(--dd-fs-lg);
	margin: 0 0 12px;
}
.drapes-webdev-card__title a {
	color: inherit;
	text-decoration: none;
}
/* Stretched link: the whole card is clickable, like design2's <a> wrapper */
.drapes-webdev-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.drapes-webdev-card__copy {
	font-size: var(--dd-fs-sm);
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	margin: 0;
}
/* Hover states keyed off the (stretched) link, not the card itself */
.drapes-webdev-card:has(.drapes-webdev-card__title a:hover) {
	background: var(--dd-white);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.drapes-webdev-card:has(.drapes-webdev-card__title a:hover) .drapes-webdev-card__icon {
	background: var(--dd-orange);
	color: var(--dd-white);
}

@media (min-width: 768px) {
	.drapes-webdev { padding: 48px; }
	.drapes-webdev__headline { font-size: 30px; }
}
@media (min-width: 1024px) {
	.drapes-webdev__intro { margin: 0 16px 0 0; }
}

/* ------------------------------------------------------------
   Web Management + Premium Email — side-by-side duo
   ------------------------------------------------------------ */
.wp-block-columns.drapes-services-duo {
	max-width: 1440px;
	margin: 0 auto 40px;
	gap: 32px;
}
.drapes-services-duo__col > .wp-block-group { height: 100%; }

/* Web Management card (cream-low + 8% texture) */
.drapes-wm-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--dd-r-2xl);
	padding: 40px 24px;
	scroll-margin-top: 128px;
}
.drapes-wm-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/services/main-mask-group.png") center / cover no-repeat;
	opacity: 0.08;
	transform: rotate(3deg) scale(1.1);
	pointer-events: none;
	z-index: -1;
}
.drapes-wm-card__title {
	font-size: var(--dd-fs-h4);
	color: var(--dd-navy);
	margin: 0 0 16px;
}
.drapes-wm-card__lead {
	color: var(--dd-brown);
	line-height: var(--dd-lh-body);
	margin: 0 0 32px;
}
.drapes-wm-card .drapes-eyebrow {
	display: block;
	border-top: 1px solid rgba(32, 61, 92, 0.1);
	padding-top: 24px;
	margin: 0 0 16px;
}
.drapes-wm-card__includes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.drapes-wm-card__includes li {
	font-size: var(--dd-fs-sm);
	color: var(--dd-brown);
}
.drapes-wm-card__includes li::before { content: "\2022  "; }
@media (min-width: 640px) {
	.drapes-wm-card__includes { grid-template-columns: repeat(2, 1fr); }
}

/* Premium Email card (navy + orange glow + icon tile) */
.drapes-email-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--dd-r-2xl);
	padding: 32px;
	display: grid;
	grid-template-columns: 1fr;
	align-content: center;
}
.drapes-email-card::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 192px;
	height: 192px;
	border-radius: 50%;
	background: rgba(245, 89, 17, 0.25);
	filter: blur(60px);
	pointer-events: none;
	z-index: -1;
}
.drapes-email-card__title {
	font-size: var(--dd-fs-h4);
	color: var(--dd-white);
	margin: 0 0 16px;
}
.drapes-email-card__lead {
	color: rgba(252, 247, 245, 0.8);
	line-height: var(--dd-lh-body);
	margin: 0;
}
.drapes-email-card__icon { display: none; margin: 0; } /* hidden on mobile per design2 */

@media (min-width: 768px) {
	.drapes-wm-card { padding: 40px; }
	.drapes-wm-card__title,
	.drapes-email-card__title { font-size: 30px; }

	.drapes-email-card {
		padding: 40px;
		grid-template-columns: 1fr auto;
		column-gap: 32px;
		align-items: center;
	}
	.drapes-email-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		width: 160px;
		height: 160px;
		background: rgba(32, 61, 92, 0.8);
		border: 1px solid rgba(255, 255, 255, 0.05);
		border-radius: var(--dd-r-2xl);
	}
	.drapes-email-card__icon .material-symbols-outlined {
		font-size: 72px;
		color: rgba(255, 255, 255, 0.4);
	}
}

/* ------------------------------------------------------------
   CTA — navy "Ready to start?" card
   ------------------------------------------------------------ */
.drapes-cta-navy {
	border-radius: var(--dd-r-2xl);
	padding: 40px;
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
}
.drapes-cta-navy__headline {
	font-size: 30px;
	color: var(--dd-white);
	margin: 0 0 16px;
}
.drapes-cta-navy__lead {
	font-size: var(--dd-fs-md);
	color: rgba(252, 247, 245, 0.6);
	line-height: var(--dd-lh-body);
	max-width: 576px;
	margin: 0 auto 32px;
}
.drapes-cta-navy > .wp-block-buttons { margin: 0; }
@media (min-width: 768px) {
	.drapes-cta-navy { padding: 64px; }
	.drapes-cta-navy__headline { font-size: var(--dd-fs-h3); }
}

/* ------------------------------------------------------------
   Tablet band (782–1023px): core columns unstack at 782px but
   design2 keeps these grids stacked until lg (1024px).
   ------------------------------------------------------------ */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.wp-block-columns.drapes-bundles__grid,
	.wp-block-columns.drapes-consulting__grid,
	.wp-block-columns.drapes-webdev__grid,
	.wp-block-columns.drapes-services-duo { flex-wrap: wrap !important; }

	.drapes-bundles__grid > .wp-block-column,
	.drapes-consulting__grid > .wp-block-column,
	.drapes-services-duo > .wp-block-column { flex-basis: 100% !important; }

	/* design2 shows the three Web D&D cards 3-up from md while the
	   intro sits full-width above them */
	.drapes-webdev__grid > .drapes-webdev__intro { flex-basis: 100% !important; }
	.drapes-webdev__grid > .drapes-webdev-card { flex-basis: calc((100% - 48px) / 3) !important; }
}

/* ===== Our Work page (merged from css-batch) ===== */

/* ------------------------------------------------------------
   Hero — our-work variant
   design2: h1 text-4xl → sm:5xl → md:6xl → lg:7xl, leading-[1.05];
   lead text-lg text-brown max-w-xl. Base .drapes-hero clamp tops
   out at 96px and the lead bumps to 24px at md — both wrong here.
   ------------------------------------------------------------ */
.drapes-hero--our-work .drapes-hero__headline {
	font-size: var(--dd-fs-h3);      /* text-4xl 36px */
	line-height: var(--dd-lh-display); /* leading-[1.05] */
	max-width: 768px;                 /* max-w-3xl copy block */
}
@media (min-width: 640px) {
	.drapes-hero--our-work .drapes-hero__headline { font-size: var(--dd-fs-h2); } /* text-5xl 48px */
}
@media (min-width: 768px) {
	.drapes-hero--our-work .drapes-hero__headline { font-size: 60px; } /* text-6xl */
}
@media (min-width: 1024px) {
	.drapes-hero--our-work .drapes-hero__headline { font-size: var(--dd-fs-h1); } /* text-7xl 72px */
}
.drapes-hero--our-work .drapes-hero__lead {
	font-size: var(--dd-fs-md);  /* text-lg 18px — also cancels base 24px md bump */
	color: var(--dd-brown);
	max-width: 576px;            /* max-w-xl */
}

/* ------------------------------------------------------------
   Projects grid — archive-all layout
   design2: md:grid-cols-12 with col-span-8 / col-span-4 cards
   (2:1), h-[320px] sm:h-[400px] md:h-[500px], rounded-[32px],
   shadow-sm. Odd cards (8-col) get the roomier padding + lighter
   scrim; even cards (4-col) the tighter set.
   ------------------------------------------------------------ */
/* overrides patterns.css .drapes-portfolio-grid--archive-all */
.drapes-portfolio-grid--archive-all {
	grid-template-columns: 1fr;
	max-width: 1280px;   /* max-w-screen-2xl minus xl gutters */
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 768px) {
	.drapes-portfolio-grid--archive-all { grid-template-columns: 8fr 4fr; }
}
/* re-cancel the base 3-col xl rule (source order after patterns.css wins) */
@media (min-width: 1280px) {
	.drapes-portfolio-grid--archive-all { grid-template-columns: 8fr 4fr; }
}

.drapes-portfolio-grid--archive-all .drapes-portfolio-card {
	height: 320px;
	box-shadow: var(--wp--custom--shadow--press); /* shadow-sm — no --dd alias for press in patterns.css */
}
@media (min-width: 640px) {
	.drapes-portfolio-grid--archive-all .drapes-portfolio-card { height: 400px; }
}
@media (min-width: 768px) {
	.drapes-portfolio-grid--archive-all .drapes-portfolio-card { height: 500px; }
}
/* design2 our-work cards don't lift on hover (images scale instead) */
.drapes-portfolio-grid--archive-all .drapes-portfolio-card:hover { transform: none; }

/* body fills the fixed-height card so the scrim covers it and copy pins to the bottom */
.drapes-portfolio-grid--archive-all .drapes-portfolio-card__body { min-height: 100%; }

/* Wide (odd) card: full-colour image at rest, from-secondary/90 via-secondary/30 scrim,
   p-8 sm:p-10 md:p-12, copy block capped at max-w-md */
.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(odd) .drapes-portfolio-card__media img {
	filter: none;
}
.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(odd) .drapes-portfolio-card__body {
	padding: 32px;
	background: linear-gradient(to top, rgba(32, 61, 92, 0.9), rgba(32, 61, 92, 0.3) 50%, transparent);
}
.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(odd) .drapes-portfolio-card__body > * {
	max-width: 448px; /* max-w-md */
}
@media (min-width: 640px) {
	.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(odd) .drapes-portfolio-card__body { padding: 40px; }
}
@media (min-width: 768px) {
	.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(odd) .drapes-portfolio-card__body { padding: 48px; }
}

/* Narrow (even) card: grayscale-at-rest image (base already does this),
   from-secondary/95 via-secondary/40 scrim, p-6 sm:p-8 */
.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(even) .drapes-portfolio-card__body {
	padding: 24px;
	background: linear-gradient(to top, rgba(32, 61, 92, 0.95), rgba(32, 61, 92, 0.4) 50%, transparent);
}
@media (min-width: 640px) {
	.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(even) .drapes-portfolio-card__body { padding: 32px; }
}

/* Card type — design2 uses white titles at text-2xl/3xl (wide) and text-xl/2xl (narrow),
   subtitles text-sm (→ md:text-base on the wide card) */
.drapes-portfolio-grid--archive-all .drapes-portfolio-card__title {
	color: var(--dd-white);
}
.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(odd) .drapes-portfolio-card__title {
	font-size: var(--dd-fs-h4); /* text-2xl 24px */
}
.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(even) .drapes-portfolio-card__title {
	font-size: var(--dd-fs-h5); /* text-xl 20px */
}
.drapes-portfolio-grid--archive-all .drapes-portfolio-card__subtitle {
	font-size: var(--dd-fs-sm);
	line-height: var(--dd-lh-body);
}
@media (min-width: 768px) {
	.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(odd) .drapes-portfolio-card__title  { font-size: 30px; } /* text-3xl */
	.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(even) .drapes-portfolio-card__title { font-size: var(--dd-fs-h4); }
	.drapes-portfolio-grid--archive-all .drapes-portfolio-card:nth-child(odd) .drapes-portfolio-card__subtitle { font-size: var(--dd-fs-base); }
}

/* ------------------------------------------------------------
   Client quote — centered figure variant
   design2: max-w-4xl centered figure, filled format_quote icon,
   headline-font bold-italic quote at text-2xl/3xl/4xl leading-tight,
   brown caption with bold navy name.
   ------------------------------------------------------------ */
.drapes-quote__figure {
	max-width: 896px; /* max-w-4xl */
	margin: 0 auto;
	padding: 0;
	border: 0;        /* kill block-library quote border-left */
	text-align: center;
}
/* Decorative format_quote glyph — no HTML block available, so ::before */
.drapes-quote__figure::before {
	content: "\e244";
	content: "\e244" / ""; /* hide from AT where alt syntax is supported */
	display: block;
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	font-size: 48px; /* text-5xl */
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dd-orange);
	margin: 0 auto 24px; /* mb-6 */
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	-webkit-font-smoothing: antialiased;
}
.drapes-quote__figure p {
	font-family: var(--dd-font-display);
	font-weight: var(--dd-w-bold);
	font-style: italic;
	font-size: var(--dd-fs-h4); /* text-2xl 24px */
	line-height: 1.25;          /* leading-tight */
	color: var(--dd-navy);
	margin: 0 0 32px;           /* mb-8 */
}
@media (min-width: 640px) {
	.drapes-quote__figure p { font-size: 30px; } /* text-3xl */
}
@media (min-width: 768px) {
	.drapes-quote__figure p { font-size: var(--dd-fs-h3); } /* text-4xl 36px */
}
.drapes-quote__figure cite {
	display: block;
	font-family: var(--dd-font-body);
	font-style: normal;
	font-weight: 400; /* --dd-w-regular only exists in editor-only colors_and_type.css */
	font-size: var(--dd-fs-base);
	color: var(--dd-brown);
}
.drapes-quote__figure cite strong { color: var(--dd-navy); }

/* ------------------------------------------------------------
   Work with Us — navy CTA card
   design2: bg-secondary rounded-[24px] text-center card with two
   blurred orbs (opacity-15), h2 text-3xl/4xl/5xl leading-tight,
   cream/80 text-lg lead, wrapped centered CTA row.
   Orbs are pseudo-elements — no HTML blocks allowed for them.
   ------------------------------------------------------------ */
.drapes-workcta__card {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* keep orb multiply blending inside the navy card */
	max-width: 1280px;  /* max-w-screen-2xl minus xl gutters */
	margin-left: auto;
	margin-right: auto;
}
.drapes-workcta__card::before,
.drapes-workcta__card::after {
	content: "";
	position: absolute;
	z-index: -1; /* above card bg, below in-flow content */
	border-radius: 50%;
	filter: blur(30px);
	mix-blend-mode: multiply;
	opacity: 0.15;
	pointer-events: none;
}
.drapes-workcta__card::before { /* orange orb, top right — w-96 -top-48 -right-48 */
	width: 384px;
	height: 384px;
	top: -192px;
	right: -192px;
	background: radial-gradient(circle at center, var(--dd-orange), var(--dd-cream));
}
.drapes-workcta__card::after { /* blue orb, bottom left — w-80 -bottom-40 -left-40 */
	width: 320px;
	height: 320px;
	bottom: -160px;
	left: -160px;
	background: radial-gradient(circle at center, var(--dd-navy), var(--dd-light-blue));
}
.drapes-workcta__card .drapes-workcta__headline {
	font-size: 30px;         /* text-3xl */
	line-height: 1.25;       /* leading-tight, not the global 1.1 */
	letter-spacing: normal;  /* design2 h2 has no tracking-tight here */
	margin: 0 0 24px;        /* mb-6 */
}
@media (min-width: 640px) {
	.drapes-workcta__card .drapes-workcta__headline { font-size: var(--dd-fs-h3); } /* text-4xl 36px */
}
@media (min-width: 768px) {
	.drapes-workcta__card .drapes-workcta__headline { font-size: var(--dd-fs-h2); } /* text-5xl 48px */
}
.drapes-workcta__card .drapes-workcta__lead {
	font-size: var(--dd-fs-md); /* text-lg 18px */
	line-height: var(--dd-lh-body);
	opacity: 0.8; /* cream/80 — .has-cream-color is !important, so fade via opacity */
	margin: 0 0 40px; /* mb-10 */
}
.wp-block-buttons.drapes-workcta__ctas {
	gap: 16px; /* gap-4 */
}

/* Button compat: the shared `.drapes-btn .wp-block-button__link { padding: inherit }`
   rule duplicates the wrapper padding on the inner link (wrapper pad + link pad).
   Scoped fix for this card only: move all padding onto the link so the whole
   visual button stays clickable. */
.drapes-workcta__ctas .drapes-btn { padding: 0; }
.drapes-workcta__ctas .drapes-btn--primary.drapes-btn--lg .wp-block-button__link { padding: 16px 32px; }
.drapes-workcta__ctas .drapes-btn--outline-cream .wp-block-button__link { padding: 14px 30px; }

/* ------------------------------------------------------------
   Shared button variant — cream outline on dark surfaces
   Mirrors .drapes-btn--outline-navy (chrome/patterns convention);
   design2: border-2 border-cream text-cream px-8 py-4 rounded-full
   font-bold text-lg hover:bg-cream hover:text-secondary active:scale-95.
   ------------------------------------------------------------ */
.drapes-btn--outline-cream {
	background: transparent;
	color: var(--dd-cream);
	border: 2px solid var(--dd-cream);
	padding: 14px 30px; /* 16/32 total incl. border, matches px-8 py-4 */
	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-cream:hover {
	background: var(--dd-cream);
	color: var(--dd-navy);
}
.drapes-btn--outline-cream:active {
	transform: scale(0.95);
}

/* ===== Contact page (merged from css-batch) ===== */

/* ------------------------------------------------------------
   Contact hero — grid
   design2: relative z-10 max-w-screen-2xl mx-auto grid
            grid-cols-1 lg:grid-cols-2 gap-16 items-start
   ------------------------------------------------------------ */
.drapes-contact-hero__grid {
	position: relative;
	z-index: 1; /* stack above the .drapes-orb spans (z-index: 0) */
	max-width: 1536px;
	margin: 0 auto; /* also cancels flow block-gap / default columns margins */
	gap: 64px;
}
/* design2 stays single-column until lg (1024px); core columns unstack at 782px.
   Mirror core's selector with !important so this wins in the 782–1023 band. */
@media (min-width: 782px) and (max-width: 1023px) {
	.drapes-contact-hero__grid.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}
	.drapes-contact-hero__grid.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Column top offsets — design2: copy pt-12/lg:pt-20, form pt-12/lg:pt-24 */
.drapes-contact-hero__copy {
	padding-top: 48px;
	padding-right: 0; /* design2 has no copy-column gutter; overrides the legacy 24px rule */
}
.drapes-contact-hero__form {
	position: relative;
	padding-top: 48px;
}
@media (min-width: 1024px) {
	.drapes-contact-hero__copy { padding-top: 80px; }
	.drapes-contact-hero__form { padding-top: 96px; }
}

/* ------------------------------------------------------------
   Contact hero — headline + lead
   ------------------------------------------------------------ */
/* design2 steps text-4xl → lg:text-7xl (36px → 72px): cap at h1 (72px)
   instead of the 96px .drapes-hero__headline clamp */
.drapes-contact-hero__headline {
	font-size: clamp(36px, 8vw, var(--dd-fs-h1));
	line-height: var(--dd-lh-display); /* design2 leading-[1.05] */
	max-width: none; /* column width governs the wrap, as in design2 */
}
.drapes-contact-hero__lead {
	font-size: var(--dd-fs-md); /* design2 text-lg = 18px */
	color: var(--dd-brown);
	max-width: 32rem; /* design2 max-w-lg */
}
@media (min-width: 768px) {
	/* guard against the base .drapes-hero__lead 24px bump regardless of merge order */
	.drapes-contact-hero__lead { font-size: var(--dd-fs-md); }
}

/* ------------------------------------------------------------
   Contact cards (email + locations)
   ------------------------------------------------------------ */
/* design2: mt-10 (40px) inside the copy column's gap-6 (24px) = 64px below the lead */
.drapes-contact-hero__cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 64px;
}
.drapes-contact-hero__cards > * { margin-block-start: 0; } /* flex gap rules; neutralize flow block-gap */

.drapes-contact-card {
	display: flex;
	flex-direction: column;
	gap: 4px; /* design2 gap-1 */
	background: var(--dd-cream-low);
	border-radius: var(--dd-r-xl);
	padding: 24px;
}
.drapes-contact-card > * {
	margin-block-start: 0; /* flex gap rules; neutralize flow block-gap */
	margin-block-end: 0;
}
.drapes-contact-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--dd-r-pill);
	background: rgba(245, 89, 17, 0.1); /* orange at 10% (design2 bg-primary/10) */
}
.drapes-contact-card__icon .material-symbols-outlined {
	font-size: 20px;
	color: var(--dd-orange-deep);
}
.drapes-contact-card__title {
	margin-top: 12px; /* + 4px flex gap = 16px, matching design2 mt-3 in a gap-1 column */
	font-family: var(--dd-font-display);
	font-size: var(--dd-fs-md); /* design2 text-lg = 18px */
	font-weight: var(--dd-w-bold);
	color: var(--dd-navy);
}
.drapes-contact-card__body {
	color: var(--dd-brown);
	font-size: var(--dd-fs-base);
	line-height: 1.5;
}
.drapes-contact-card__body a {
	color: var(--dd-brown);
	font-weight: 400;
}
.drapes-contact-card__body a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Form panel — glass treatment over the base .drapes-contact-form card
   design2: .glass-panel p-6 sm:p-8 lg:p-10 rounded-[48px]
   (radius + shadow already come from the base .drapes-contact-form rule;
   background/border from .drapes-glass, which wins by source order)
   ------------------------------------------------------------ */
.drapes-contact-hero .drapes-contact-form {
	position: relative;
	z-index: 1;
	padding: 24px;
}
@media (min-width: 640px) {
	.drapes-contact-hero .drapes-contact-form { padding: 32px; }
}
@media (min-width: 1024px) {
	.drapes-contact-hero .drapes-contact-form { padding: 40px; }
}
/* contact.html's glass panel uses a lighter 12px blur than the shared
   24px .drapes-glass (which matches the other design2 pages) */
.drapes-contact-hero .drapes-glass {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* ===== Blog page (merged from css-batch) ===== */

/* ------------------------------------------------------------
   Blog hero — centered "Insights & Stories" with corner orbs
   design2: hero-orb orange-cream w-72 -top-20 -right-20 opacity-40,
            orb-blue-light w-60 top-10 -left-16 opacity-30
   ------------------------------------------------------------ */
.drapes-hero--blog::before,
.drapes-hero--blog::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(var(--wp--custom--blur--orb, 30px));
	mix-blend-mode: multiply;
	z-index: 0;
	pointer-events: none;
}
.drapes-hero--blog::before {
	width: 288px;
	height: 288px;
	top: -80px;
	right: -80px;
	opacity: 0.4;
	background: radial-gradient(circle at center, var(--dd-orange), var(--dd-cream));
}
.drapes-hero--blog::after {
	width: 240px;
	height: 240px;
	top: 40px;
	left: -64px;
	opacity: 0.3;
	background: radial-gradient(circle at center, var(--dd-navy), var(--dd-light-blue));
}

/* Centered headline: base .drapes-hero__headline caps width at 18ch with
   margin: 0, so it needs margin-inline auto to actually center.
   design2 sizes: text-5xl (48px) / md:text-7xl (72px) / lg:text-8xl (96px),
   leading-[0.95], mb-6. */
.drapes-hero--blog .drapes-hero__headline {
	margin-inline: auto;
	margin-bottom: 24px;
	font-size: var(--dd-fs-h2);   /* 48px */
	line-height: 0.95;
}
/* design2 lead: text-lg md:text-xl (18/20px) max-w-xl mx-auto */
.drapes-hero--blog .drapes-hero__lead {
	margin-top: 0;
	margin-inline: auto;
	max-width: 576px;
	font-size: var(--dd-fs-md);   /* 18px */
}
@media (min-width: 768px) {
	.drapes-hero--blog .drapes-hero__headline { font-size: var(--dd-fs-h1); }  /* 72px */
	.drapes-hero--blog .drapes-hero__lead     { font-size: var(--dd-fs-lg); }  /* 20px */
}
@media (min-width: 1024px) {
	.drapes-hero--blog .drapes-hero__headline { font-size: var(--dd-fs-hero); } /* 96px */
}

/* ------------------------------------------------------------
   Category filter pills
   design2: bg-cream text-secondary border-light-blue font-semibold
            px-5 py-2.5 rounded-xl (2rem) text-sm; active = bg-primary text-white
   ------------------------------------------------------------ */
.drapes-blog-filters .drapes-blog-filters__row {
	gap: 12px; /* design2 gap-3; beats WP layout-generated gap */
}
.drapes-blog-filter .wp-block-button__link {
	background: var(--dd-cream);
	color: var(--dd-navy);
	border: 1px solid var(--dd-light-blue);
	border-radius: var(--dd-r-2xl); /* design2 custom rounded-xl = 2rem */
	padding: 10px 20px;
	font-family: var(--dd-font-body);
	font-size: var(--dd-fs-sm);
	font-weight: var(--dd-w-semibold);
	line-height: 20px;
	transition: color var(--dd-dur-base) var(--dd-ease),
	            border-color var(--dd-dur-base) var(--dd-ease);
}
.drapes-blog-filter:not(.drapes-blog-filter--active) .wp-block-button__link:hover {
	border-color: var(--dd-orange-deep);
	color: var(--dd-orange-deep);
}
.drapes-blog-filter--active .wp-block-button__link {
	background: var(--dd-orange);
	color: var(--dd-white);
	border-color: transparent; /* design2 active pill has no border; keep the box size identical */
}

/* ------------------------------------------------------------
   Blog grid — staggered masonry
   design2: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-12 gap-x-8
   (pattern uses wp:columns, so re-lay it out as grid)
   ------------------------------------------------------------ */
.wp-block-columns.drapes-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 32px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 768px) {
	.wp-block-columns.drapes-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.wp-block-columns.drapes-blog-grid { grid-template-columns: repeat(3, 1fr); }
	/* design2 lg:mt-12 / lg:mt-24 column offsets */
	.drapes-blog-card--stagger-1 { margin-top: 48px; }
	.drapes-blog-card--stagger-2 { margin-top: 96px; }
}

/* ------------------------------------------------------------
   Blog card — navy media box + overlapping cream body
   ------------------------------------------------------------ */
/* overrides patterns.css .drapes-blog-card (old flat cream tile: padding 24,
   cream-low bg, radius) — new design is a bare flex column wrapper */
.drapes-blog-card {
	padding: 0;
	background: transparent;
	border-radius: 0;
	display: flex;
	flex-direction: column;
}
/* overrides patterns.css .drapes-blog-card--draft/--soon { opacity: .85 } —
   design2 fades per-element (title/excerpt/status), not the whole card */
.drapes-blog-card--draft,
.drapes-blog-card--soon {
	opacity: 1;
}

/* Media: navy box, rounded-lg (1.5rem), subtle navy border; bg image is a
   grayscale 10%-opacity layer painted by ::before (matches design2's
   opacity-10 grayscale <img>) */
.drapes-blog-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--dd-r-xl); /* design2 custom rounded-lg = 1.5rem */
	background: var(--dd-navy);
	border: 1px solid rgba(32, 61, 92, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.drapes-blog-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: grayscale(1);
	opacity: 0.1;
	pointer-events: none;
}
.drapes-blog-card__media--portrait  { aspect-ratio: 3 / 4; }
.drapes-blog-card__media--landscape { aspect-ratio: 4 / 3; }

/* Card ↔ image pairing per design2 order:
   Four All (portrait, --draft) = main-bg1, MCPs (--stagger-1) = main-bg2,
   MAC (--stagger-2) = main-bg3 */
.drapes-blog-card__media--portrait::before {
	background-image: url("../images/blog/main-bg1.png");
}
.drapes-blog-card--stagger-1 .drapes-blog-card__media::before {
	background-image: url("../images/blog/main-bg2.png");
}
.drapes-blog-card--stagger-2 .drapes-blog-card__media::before {
	background-image: url("../images/blog/main-bg3.png");
}

/* Drafting card: skeleton shimmer sweep over the media */
.drapes-blog-card__media--portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(110deg, transparent 30%, rgba(245, 89, 17, 0.10) 50%, transparent 70%);
	background-size: 200% 100%;
	animation: drapes-skeleton-shimmer 5s ease-in-out infinite;
}
@keyframes drapes-skeleton-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* Coming-soon cards: centered Material Symbols "schedule" icon
   (design2: text-cream/70 text-6xl) */
.drapes-blog-card__media--landscape::after {
	content: "schedule";
	position: relative;
	z-index: 1;
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	color: rgba(252, 247, 245, 0.7);
}

/* "Drafting" badge: ping dot stacked above the uppercase label
   (design2: h-4 w-4 bg-primary dot + animate-ping echo, gap-4, text-[11px]) */
.drapes-blog-card__badge {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-size: 11px;
	font-weight: var(--dd-w-bold);
	letter-spacing: var(--dd-track-widest);
	text-transform: uppercase;
	color: var(--dd-orange-deep);
}
.drapes-blog-card__badge::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--dd-orange);
}
.drapes-blog-card__badge::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	background: rgba(245, 89, 17, 0.5);
	animation: drapes-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes drapes-ping {
	75%, 100% { transform: scale(2); opacity: 0; }
}

/* Body: cream card overlapping the media (design2: bg-cream/95 rounded-lg
   p-6 -mt-20 mx-4 border-secondary/10 shadow-sm) */
.drapes-blog-card__body {
	position: relative;
	z-index: 10;
	margin: -80px 16px 0;
	padding: 24px;
	background: rgba(252, 247, 245, 0.95);
	border: 1px solid rgba(32, 61, 92, 0.1);
	border-radius: var(--dd-r-xl);
	box-shadow: var(--wp--custom--shadow--press);
}

/* overrides patterns.css .drapes-blog-card h3 (h4-size, full navy) —
   design2: text-lg text-secondary/70 leading-snug mb-3, no tracking */
.drapes-blog-card .drapes-blog-card__title {
	font-family: var(--dd-font-display);
	font-weight: var(--dd-w-bold);
	font-size: var(--dd-fs-md);      /* 18px */
	line-height: 1.375;
	letter-spacing: normal;
	color: rgba(32, 61, 92, 0.7);
	margin: 0 0 12px;
}
.drapes-blog-card__excerpt {
	font-size: var(--dd-fs-sm);
	line-height: var(--dd-lh-body);
	color: rgba(91, 65, 56, 0.6);    /* brown/60 */
	margin: 0 0 16px;
}
.drapes-blog-card__status {
	font-size: var(--wp--preset--font-size--mini); /* 10px */
	font-weight: var(--dd-w-bold);
	text-transform: uppercase;
	color: rgba(32, 61, 92, 0.45);   /* secondary/45 */
	margin: 0;
}
.drapes-blog-card__status--progress {
	color: var(--dd-orange-deep);
}

/* ------------------------------------------------------------
   Newsletter — navy left-aligned panel with pulse rings
   design2: bg-secondary rounded-[3rem] p-10 md:p-16 lg:p-20
   ------------------------------------------------------------ */
/* overrides patterns.css .drapes-newsletter__card (cream, centered, 880px,
   48px padding) — design2 is a full-content-width navy panel, left-aligned.
   Scoped under .drapes-newsletter so the padding beats core's
   .wp-block-group.has-background { padding: 1.25em 2.375em } */
.drapes-newsletter .drapes-newsletter__card {
	position: relative;
	overflow: hidden;
	background: var(--dd-navy);
	border-radius: var(--dd-r-3xl); /* 3rem */
	padding: 40px;
	max-width: 1440px;
	margin: 0 auto;
	text-align: left;
}
@media (min-width: 768px)  { .drapes-newsletter .drapes-newsletter__card { padding: 64px; } }
@media (min-width: 1024px) { .drapes-newsletter .drapes-newsletter__card { padding: 80px; } }

.drapes-newsletter__content {
	position: relative;
	z-index: 1;
	max-width: 672px; /* design2 max-w-2xl */
}

/* overrides patterns.css .drapes-newsletter__heading (forced navy) so the
   white preset in the pattern markup wins on the navy panel.
   design2 sizes: text-3xl / md:4xl / lg:5xl, mb-6, tracking-tight */
.drapes-newsletter__heading {
	color: var(--dd-white);
	font-size: 30px;
	letter-spacing: var(--dd-track-tight);
	margin: 0 0 24px;
}
@media (min-width: 768px)  { .drapes-newsletter__heading { font-size: var(--dd-fs-h3); } } /* 36px */
@media (min-width: 1024px) { .drapes-newsletter__heading { font-size: var(--dd-fs-h2); } } /* 48px */

.drapes-newsletter__lead {
	font-size: var(--dd-fs-lg);
	line-height: var(--dd-lh-body);
	margin: 0 0 32px;
	/* design2 is text-cream/80; the .has-cream-color preset class is
	   !important, so fade the element instead of fighting the color */
	opacity: 0.8;
}

.drapes-newsletter__actions { margin: 0; }
/* Notify Me: design2 px-10 py-4 rounded-xl (2rem) font-headline */
.drapes-newsletter__submit {
	padding: 0; /* padding lives on the link; .drapes-btn inner link inherits radius/font */
	border-radius: var(--dd-r-2xl);
	font-family: var(--dd-font-display);
}
.drapes-newsletter__submit .wp-block-button__link {
	padding: 16px 40px;
}

/* Pulse-ring decoration: three concentric cream rings emanating from the
   card's top-right corner (design2: stroked SVG circles r80/60/40 pulsing
   opacity .08→.22 at 0 / 0.9s / 1.8s offsets). The wrapper div is a
   positioning box sized to the middle ring; span + pseudos are the rings. */
.drapes-newsletter__rings {
	position: absolute;
	top: 0;
	right: 0;
	height: 120%;
	aspect-ratio: 1;
	transform: translate(50%, -50%); /* center the ring stack on the corner */
	z-index: 0;
	pointer-events: none;
}
.drapes-newsletter__rings::before,
.drapes-newsletter__rings::after {
	content: "";
}
.drapes-newsletter__rings::before,
.drapes-newsletter__rings::after,
.drapes-newsletter__rings > span {
	display: block;
	position: absolute;
	inset: 0;
	margin: auto;
	aspect-ratio: 1;
	border: 2px solid var(--dd-cream);
	border-radius: 50%;
	opacity: 0.08;
}
.drapes-newsletter__rings::before {  /* outer ring */
	height: 133.34%;
	animation: drapes-gentle-pulse 3.6s ease-in-out infinite;
}
.drapes-newsletter__rings > span {   /* middle ring */
	height: 100%;
	animation: drapes-gentle-pulse 3.6s ease-in-out 0.9s infinite;
}
.drapes-newsletter__rings::after {   /* inner ring */
	height: 66.67%;
	animation: drapes-gentle-pulse 3.6s ease-in-out 1.8s infinite;
}
@keyframes drapes-gentle-pulse {
	0%, 100% { opacity: 0.08; transform: scale(1); }
	50%      { opacity: 0.22; transform: scale(1.05); }
}

/* ------------------------------------------------------------
   Shared accent — "reading." span (light blue italic on dark)
   ------------------------------------------------------------ */
.drapes-accent--light-blue-italic {
	color: var(--dd-light-blue);
	font-style: italic;
}

/* ------------------------------------------------------------
   Reduced motion — freeze shimmer/ping/pulse decorations
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.drapes-blog-card__media--portrait::after {
		animation: none !important;
		opacity: 0 !important; /* shimmer is animation-only; frozen frame is off-canvas */
	}
	.drapes-blog-card__badge::after {
		animation: none !important;
		opacity: 0 !important; /* keep the static dot, drop the ping echo */
	}
	.drapes-newsletter__rings::before,
	.drapes-newsletter__rings::after,
	.drapes-newsletter__rings > span {
		animation: none !important;
		opacity: 0.15 !important; /* rings stay visible at mid-pulse strength */
	}
}

/* ============================================================
   Go-live fixes (2026-10-05) — gaps found comparing staging to
   design2 / live drapesinc.com.
   ============================================================ */

/* Section rhythm: design2 uses py-16 (64px) below md and py-24 (96px) from md.
   Sections store var(--wp--preset--spacing--12) inline, so shrink the token
   on small screens instead of editing every block. */
@media (max-width: 767px) {
	body { --wp--preset--spacing--12: 64px; }
}

/* Home hero CTAs: the wrapper is a plain div, so it needs to be the flex row
   design2 uses (flex-wrap, gap-4). */
.drapes-hero__ctas { display: flex; align-items: center; }

/* Home hero pattern on phones/tablets — port of design2 index.html
   (max-width 767 / 768–1023): bigger pattern, faded, clusters pushed past
   the right edge so they peek in instead of sitting behind the copy. */
@media (max-width: 1023px) {
	.drapes-hero--home .drapes-atmosphere { opacity: 0.3; }
	.drapes-hero--home .dd-pattern-fill { background-size: 290% !important; opacity: 1 !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(1) { --cx: 88% !important; --cy: 72% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(2) { --cx: 88% !important; --cy: 11% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(3) { --cx: 80% !important; --cy: 18% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(4) { --cx: 90% !important; --cy: 84% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(6) { --cx: 88% !important; --cy: 118% !important; }
}
@media (max-width: 767px) {
	.drapes-hero--home .dd-pattern-fill { background-size: 380% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(1) { --cx: 110% !important; --cy: 70% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(2) { --cx: 112% !important; --cy: 12% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(3) { --cx: 108% !important; --cy: 18% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(4) { --cx: 112% !important; --cy: 82% !important; }
	.drapes-hero--home .dd-pattern-cluster:nth-child(6) { --cx: 115% !important; --cy: 115% !important; }
}

/* Our Work cards: the body is min-height:100% plus padding, so with
   content-box sizing it grew past the fixed-height card and the bottom
   (end of the blurb + "Story In Progress") was clipped. */
.drapes-portfolio-grid--archive-all .drapes-portfolio-card__body {
	box-sizing: border-box;
	height: 100%;
}
.drapes-portfolio-card__body .drapes-cs-card__status {
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--dd-fs-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Contact: design2 wraps the Tally embed in a glass panel
   (p-6 sm:p-8 lg:p-10, rounded-[48px], soft navy shadow). */
.drapes-contact-embed {
	position: relative;
	z-index: 1;
	padding: 24px;
	border-radius: var(--dd-r-3xl);
	box-shadow: 0 40px 80px rgba(32, 61, 92, 0.08);
}
@media (min-width: 640px)  { .drapes-contact-embed { padding: 32px; } }
@media (min-width: 1024px) { .drapes-contact-embed { padding: 40px; } }

/* Blog newsletter: email field + button (design2 blog.html). */
.drapes-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 512px;
	margin: 0;
}
@media (min-width: 640px) {
	.drapes-newsletter__form { flex-direction: row; }
}
.drapes-newsletter__form input[type="email"] {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--dd-r-md);
	padding: 16px 24px;
	color: var(--dd-white);
	font: inherit;
}
.drapes-newsletter__form input[type="email"]::placeholder { color: rgba(252, 247, 245, 0.4); }
.drapes-newsletter__form input[type="email"]:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--dd-orange);
}
.drapes-newsletter__form button {
	background: var(--dd-orange);
	color: var(--dd-white);
	border: 0;
	border-radius: var(--dd-r-md);
	padding: 16px 40px;
	font-family: var(--dd-font-display);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: filter var(--dd-dur-base) var(--dd-ease), transform var(--dd-dur-base) var(--dd-ease);
}
.drapes-newsletter__form button:hover  { filter: brightness(1.1); }
.drapes-newsletter__form button:active { transform: scale(0.95); }
.drapes-newsletter__form button[disabled] { opacity: 0.6; cursor: default; }
.drapes-newsletter__note { margin: 12px 0 0; color: rgba(252, 247, 245, 0.8); font-size: var(--dd-fs-sm); min-height: 1.5em; }

/* Simple pages (Join Us, Thank You, Pay, Privacy, Terms). */
.drapes-simple {
	position: relative;
	padding-top: var(--wp--preset--spacing--14, 128px);
	padding-bottom: var(--wp--preset--spacing--12, 96px);
	padding-left: 24px;
	padding-right: 24px;
}
.drapes-simple__inner { max-width: 768px; margin: 0 auto; }
.drapes-simple--center .drapes-simple__inner { text-align: center; }
.drapes-simple--center .wp-block-buttons { justify-content: center; }
.drapes-simple .drapes-hero__headline { margin: 0 0 24px; }
.drapes-simple__lead { font-size: var(--dd-fs-lg, 18px); color: var(--dd-brown, #5a4639); margin: 0 0 40px; }
.drapes-simple h2 { font-size: var(--dd-fs-h5, 20px); margin: 40px 0 12px; color: var(--dd-navy); }
.drapes-simple p, .drapes-simple li { line-height: var(--dd-lh-body, 1.6); }
.drapes-simple .drapes-contact-embed { margin-top: 8px; }
.drapes-simple__note { font-size: var(--dd-fs-sm); color: var(--dd-brown, #5a4639); margin-top: 40px; }