/*
Theme Name:   D/A Studio
Theme URI:    https://dreamslab.bravisthemes.com/
Description:  D/A Studio brand layer for Dreamslab — palette, typography, glass header, About Studio, service and portfolio pages. Run Tools → D/A Studio Setup once after activating. Update Dreamslab freely; everything brand-specific lives here.
Author:       D/A Studio
Template:     dreamslab
Version:      1.1.0
Text Domain:  dreamslab-child
*/

/* ==========================================================================
   1. Brand fonts
   --------------------------------------------------------------------------
   Titles: Helvetica Neue (self-hosted, /fonts)     Paragraphs: DM Sans (theme original)

   Dreamslab hard-codes its fonts by name across the theme and inside every
   Elementor widget: "Clash Display" for titles/UI, "DM Sans" for text and
   "Six Caps" for a few oversized numbers. Instead of overriding hundreds of
   selectors, the title names are re-pointed at Helvetica Neue below, so
   every existing widget switches font automatically and keeps its weight.

   These rules load after the parent stylesheet, so for each matching
   weight they replace the parent's Clash Display faces.
   ========================================================================== */

/* "Clash Display" -> Helvetica Neue (one rule per weight the parent defines) */
@font-face { font-family: "Clash Display"; font-weight: 200; font-style: normal; font-display: swap;
	src: url("fonts/HelveticaNeue-Light.woff2") format("woff2"), local("Helvetica Neue Light"), local("HelveticaNeue-Light"), local("Helvetica"), local("Arial"); }
@font-face { font-family: "Clash Display"; font-weight: 300; font-style: normal; font-display: swap;
	src: url("fonts/HelveticaNeue-Light.woff2") format("woff2"), local("Helvetica Neue Light"), local("HelveticaNeue-Light"), local("Helvetica"), local("Arial"); }
@font-face { font-family: "Clash Display"; font-weight: 400; font-style: normal; font-display: swap;
	src: url("fonts/HelveticaNeue-Roman.woff2") format("woff2"), local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica"), local("Arial"); }
@font-face { font-family: "Clash Display"; font-weight: 500; font-style: normal; font-display: swap;
	src: url("fonts/HelveticaNeue-Medium.woff2") format("woff2"), local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"), local("Helvetica"), local("Arial"); }
@font-face { font-family: "Clash Display"; font-weight: 600; font-style: normal; font-display: swap;
	src: url("fonts/HelveticaNeue-Bold.woff2") format("woff2"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold"), local("Arial Bold"); }
@font-face { font-family: "Clash Display"; font-weight: 700; font-style: normal; font-display: swap;
	src: url("fonts/HelveticaNeue-Bold.woff2") format("woff2"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold"), local("Arial Bold"); }

/* "Six Caps" (oversized service numbers / 404) -> Helvetica Neue Medium */
@font-face { font-family: "Six Caps"; font-weight: 100 900; font-style: normal; font-display: swap;
	src: url("fonts/HelveticaNeue-Medium.woff2") format("woff2"), local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"), local("Helvetica"), local("Arial"); }

/* Helvetica Neue italic, for any emphasis inside titles */
@font-face { font-family: "Clash Display"; font-weight: 100 900; font-style: italic; font-display: swap;
	src: url("fonts/HelveticaNeue-Italic.woff2") format("woff2"), local("Helvetica Neue Italic"), local("Arial Italic"); }

/* Paragraphs stay in the theme's original DM Sans (loaded in functions.php). */

/* Arabic: the same family names also cover Arabic letters, drawn with IBM Plex Sans Arabic
   (unicode-range: the browser only downloads these files when Arabic text is on screen,
   so the English and French pages never load them). Titles and paragraphs keep their
   weights; Latin text keeps Helvetica Neue / DM Sans. */
@font-face { font-family: "Clash Display"; font-weight: 100 349; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOW_uCRXMR5Kw.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 350 449; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PWrfQ.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 450 549; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CRXMR5Kw.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 550 649; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPi-OCRXMR5Kw.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 650 1000; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOG-eCRXMR5Kw.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 100 349; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOW_uCRXMR5Kw.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 350 449; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PWrfQ.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 450 549; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CRXMR5Kw.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 550 649; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPi-OCRXMR5Kw.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 650 1000; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOG-eCRXMR5Kw.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PWrfQ.woff2") format("woff2"); }
@font-face { font-family: "Six Caps"; font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
	src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CRXMR5Kw.woff2") format("woff2"); }

/* ==========================================================================
   2. Brand palette
   --------------------------------------------------------------------------
   Dreamslab is a dark theme, so Ink is the surface and Paper the type.
   Overrides the colours stored in Theme Options, so they win even if
   Theme Options -> Colors still holds the demo values.
   ========================================================================== */
:root {
	--da-ink:    #141414;
	--da-paper:  #f5f2ec;
	--da-copper: #b4552a;
	--da-clay:   #8c8578;
	--da-bone:   #e4dfd5;

	--da-font-heading: "Clash Display", "Helvetica Neue", Helvetica, Arial, sans-serif; /* = Helvetica Neue, see §1 */
	--da-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;     /* theme's original paragraph font */

	/* Dreamslab variables */
	--primary-color:       var(--da-copper);  /* accents, hovers, active states */
	--primary-color-rgb:   180,85,42;
	--secondary-color:     var(--da-ink);     /* page background */
	--secondary-color-rgb: 20,20,20;
	--third-color:         var(--da-bone);    /* body text */
	--third-color-rgb:     228,223,213;
	--four-color:          var(--da-paper);   /* titles, lines, light surfaces */
	--four-color-rgb:      245,242,236;
	--body_bg-color:       var(--da-ink);
	--body_bg-color-rgb:   20,20,20;

	--link-color:          var(--da-paper);
	--link-color-hover:    var(--da-copper);
	--link-color-active:   var(--da-copper);
}

/* ==========================================================================
   3. Base typography
   ========================================================================== */
body {
	font-family: var(--da-font-body);
	color: var(--third-color);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--da-font-heading);
	letter-spacing: -0.02em;
}

/* Giant hero captions were sized for Six Caps (ultra-condensed). Helvetica
   Neue is roughly twice as wide, so scale them down to stay on one line.
   !important because the demo also sets a size on each Elementor widget. */
.pxl-heading .pxl-item--title.style-caption-timeline.ft-six {
	font-size: 13vw !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em;
}

/* Justified running text (classes added by assets/js/da-justify.js) */
.da-j {
	text-align: justify !important;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 6 3 2;   /* break words of 6+ letters: even gaps in narrow columns */
	text-wrap: pretty;
}
.da-j--center { text-align-last: center; }
.da-j--right { text-align-last: right; }

/* ==========================================================================
   Responsive fixes for Dreamslab widgets
   ========================================================================== */

/* Buttons: the theme fixes many of them at 256px, so longer (French) labels
   wrapped onto two lines. Let them size to their label, on one line. */
.btn.btn-border,
.pxl-tabs .pxl-item--content .btn {
	min-width: 0 !important;
	max-width: 100% !important;
	width: auto !important;
	white-space: nowrap;
}
@media (max-width: 400px) {
	.btn.btn-border { white-space: normal; text-align: center; }
}

/* "Services included" tabs (service pages)
   The demo let each pill size to its label and wrap freely, which gave a
   ragged staircase. Lay them out as a grid of equal tiles instead:
   desktop  2 columns, list on the left, detail panel on the right
   tablet   2 columns, detail panel below the list
   phone    2 columns of stacked tiles (icon above label) */
.pxl-tabs2 .pxl-tabs--inner .wrap-title {
	flex: 1 1 0;
	min-width: 0;
	padding-right: 48px;
}
.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0;
}
.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title .pxl-item--title {
	min-width: 0;
	min-height: 76px;
	margin: 0;
	padding: 14px 18px;
	border-radius: 14px;
	font-size: 16px;
	line-height: 1.25;
	transition: background-color .3s, border-color .3s, color .3s;
}
.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title .pxl-item--title:last-child:nth-child(odd) {
	grid-column: 1 / -1;   /* an odd last tile spans the row */
}
.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title .pxl-item--title:not(.active):hover {
	border-color: var(--secondary-color);
}
.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title .pxl-item--title svg {
	flex: none;
	width: 34px;
	height: 34px;
}
.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title .pxl-item--title .divider {
	flex: none;
	height: 32px;
	margin: 0 16px;
}
.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--content {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 48px;
}

@media (max-width: 1024px) {
	.pxl-tabs2 .pxl-tabs--inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}
	.pxl-tabs2 .pxl-tabs--inner .wrap-title {
		flex: none;
		width: 100%;
		padding: 0;
		border: 0;
	}
	.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title { margin: 0; }
	.pxl-tabs .pxl-tabs--content,
	.pxl-tabs .pxl-tabs--content .pxl-item--content {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
	.pxl-tabs .pxl-item--content > svg {
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--content .tab-desc {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 600px) {
	.pxl-tabs2 .pxl-tabs--inner { gap: 32px; }
	.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title { gap: 10px; }
	.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title .pxl-item--title {
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		min-height: 108px;
		padding: 16px 10px;
		font-size: 14px;
		text-align: center;
	}
	.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title .pxl-item--title svg {
		width: 30px;
		height: 30px;
	}
	.pxl-tabs2 .pxl-tabs--inner .pxl-tabs--title .pxl-item--title .divider { display: none; }
}

/* Other oversized one-line headings designed for Six Caps ("services included",
   "features projects"…): same reason as above — scale with the screen. */
.pxl-heading .pxl-item--title.ft-six:not(.style-caption-timeline) {
	font-size: clamp(30px, 7.2vw, 110px) !important;
	line-height: 1 !important;
	letter-spacing: -0.03em;
	white-space: normal !important;
}
/* On service pages a ruled band (line + section background) was pulled up
   67px to tuck under those Six Caps titles; it now hid the lower half of the
   Helvetica letters. Sit the line just under the title instead. */
.single-service .elementor-element.elementor-element-c5c94db,
.single-service .elementor-element.elementor-element-6074e34 {
	margin-top: clamp(8px, 1.2vw, 16px) !important;
}
/* The intro under "services included" sat flush against the card edges on phones */
@media (max-width: 767px) {
	.single-service .elementor-element.elementor-element-0c9f1f3 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* Value cards ("Innovative creativity", "Collaborative partnership"…): the
   demo left 65px under the title and 73px above the text, and cards with a
   one-line title sat higher than the others. Tight, aligned, equal height. */
.pxl-icons-carousel1 .pxl-swiper-slide { height: auto; }
.pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner {
	height: 100%;
	padding: 30px 28px 28px;
}
.pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .pxl-icon--number { top: 28px; right: 24px; }
.pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .title-box {
	min-height: 2.4em;          /* two lines, so every icon and text lines up */
	margin-bottom: 18px;
	padding-right: 52px;        /* clear of the number badge */
	font-size: 20px;
	line-height: 1.2;
}
.pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .description-box { margin-top: 18px; }
@media (max-width: 767px) {
	.pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner { padding: 22px 20px; }
	.pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .pxl-icon--number { top: 20px; right: 18px; }
	.pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .title-box { font-size: 18px; margin-bottom: 14px; }
	.pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .description-box { margin-top: 14px; }
}

/* Homepage logo strip: the demo's side shading was two 238px black PNGs; hide
   them. A scrolling strip (the platforms fallback) fades out at its own edges
   instead, so it dissolves into whatever is behind, at any width. The partner
   badges are a still, centred row and need no fade. */
.elementor-element-885fcbe,
.elementor-element-1bbdf46 { display: none !important; }
.da-platforms {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
@media (max-width: 767px) {
	.da-platforms {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
	}
}

/* "How do we operate?": the photo strip was 738px tall and the column beside
   it pushed its title to the top and the accordion to the bottom, leaving a
   ~270px hole. Shorter photos, title and accordion grouped and centred,
   tighter accordion rows. */
.pxl-image-carousel8 .pxl-item--image img { height: clamp(360px, 36vw, 520px); }
.elementor-element.elementor-element-6d024b2 {
	justify-content: center !important;
	gap: 28px;
}
.pxl-accordion1.style8 .pxl-accordion--title {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
	padding-top: 14px;
	padding-bottom: 14px;
}
.pxl-accordion1.style8 .pxl--item { padding-bottom: 8px; }
.pxl-accordion1.style8 .pxl--item + .pxl--item { margin-top: 8px; }
@media (max-width: 767px) {
	.pxl-image-carousel8 .pxl-item--image img { height: 300px; }
}

/* White "box" buttons ("View all work", "Free consulting"…): the theme makes
   them squares (242px tall) and the label can't wrap, so longer French labels
   ran out of the box. A short rectangle instead, label wrapping if needed. */
.btn:not(.btn-stroke).btn-icon-box-square {
	height: auto !important;
	aspect-ratio: auto !important;
	min-height: clamp(76px, 6.5vw, 104px);
	padding: 16px 20px !important;
	align-items: flex-end;
}
.btn:not(.btn-stroke).btn-icon-box-square .pxl--btn-text {
	display: block;
	max-width: calc(100% - 40px);
	white-space: normal;
	text-align: left;
	line-height: 1.25;
}
/* the theme splits labels into letters with a non-breaking space between
   words: give each word gap a real (breakable) space */
.btn-icon-box-square .pxl--btn-text .spacer { font-size: 0; }
.btn-icon-box-square .pxl--btn-text .spacer::after { content: " "; font-size: 15px; }
.btn:not(.btn-stroke).btn-icon-box-square .button-arrow-hover { top: 14px; right: 14px; }
/* Homepage hero pair: "Free consulting" is absolutely positioned under "View
   all work" and shrank to its label; give both the same width. */
.elementor-element.elementor-element-0e33c83,
.elementor-element.elementor-element-64f6ead { width: 100% !important; max-width: 100%; }
.btn:not(.btn-stroke).btn-icon-box-square .button-arrow-hover svg { width: 26px; height: 26px; }
@media (max-width: 767px) {
	.btn:not(.btn-stroke).btn-icon-box-square { min-height: 64px; padding: 12px 14px !important; }
	.btn:not(.btn-stroke).btn-icon-box-square .button-arrow-hover { top: 10px; right: 10px; }
	.btn:not(.btn-stroke).btn-icon-box-square .button-arrow-hover svg { width: 20px; height: 20px; }
	.btn-icon-box-square .pxl--btn-text .spacer::after { font-size: 13px; }
}

/* Homepage: with the pricing section gone, the projects panel and the
   testimonials card would touch; keep some air between them. */
.elementor-element.elementor-element-39f73f9 { margin-top: clamp(32px, 4vw, 64px); }

/* Homepage "Hey!" card, unfolded from the D/A symbol by assets/js/da-hey.js.
   The dot of the symbol stays beside the card like a chat avatar. */
.elementor-element.elementor-element-5dbd65c {
	position: relative;
	padding-left: 44px !important;
	background: none !important;
}
.elementor-element.elementor-element-f98adc4 { border-radius: 25px; transform-origin: 0 100%; }
.da-hey-dot {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--da-paper);
	transform-origin: 0 100%;
	pointer-events: none;
}

/* Project showcase on phones and tablets (assets/js/da-pins.js): no pinning,
   panels in normal flow, projects in a row you swipe through. */
@media (max-width: 1024px) {
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pxl-tabs--content { width: 100% !important; overflow: visible !important; }
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pin-spacer { width: 100% !important; height: auto !important; padding: 0 !important; }
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pxl-item--content {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		transform: none !important;
		inset: auto !important;
	}
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pxl-item--content .e-con,
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pxl-item--content .e-con-inner { min-height: 0 !important; height: auto !important; }
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pxl-portfolio-list7 {
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 6px;
	}
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pxl-portfolio-list7::-webkit-scrollbar { display: none; }
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pxl-list-wrapper { gap: 12px; width: max-content; }
	/* "01 / 05" and "Scroll →" belong to the pinned version */
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pagination-fraction-list,
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .elementor-element-d275cfa { display: none !important; }
	html.da-slip-swipe .pxl-tabs-slip1.style-2 .pxl-list-item {
		flex: 0 0 min(84vw, 520px) !important;
		width: min(84vw, 520px) !important;
		height: auto !important;
		transform: none !important;
		scroll-snap-align: start;
	}
}

/* Contact forms: services are chips you tap, several at once (inc/setup.php → da_setup_forms) */
/* labels as written (the theme capitalised every word, wrong in French) */
.wpcf7 .input-filled > label { text-transform: none; }
.wpcf7 .da-services-field label small { font-size: .85em; font-weight: 400; opacity: .6; text-transform: none; letter-spacing: 0; }
.wpcf7 .da-services-field .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wpcf7 .da-services-field .wpcf7-list-item { margin: 0 !important; display: inline-flex; }
.wpcf7 .da-services-field .wpcf7-list-item label { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.wpcf7 .da-services-field input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wpcf7 .da-services-field .wpcf7-list-item-label {
	display: inline-block;
	padding: 9px 15px;
	border: 1px solid rgba(140, 133, 120, .45);
	border-radius: 999px;
	font: 500 14px/1.2 var(--da-font-body);
	text-transform: none;
	color: inherit;
	transition: background-color .2s, border-color .2s, color .2s;
}
.wpcf7 .da-services-field .wpcf7-list-item-label::before,
.wpcf7 .da-services-field .wpcf7-list-item-label::after { display: none !important; }
.wpcf7 .da-services-field label:hover .wpcf7-list-item-label { border-color: var(--da-copper); }
.wpcf7 .da-services-field input:checked + .wpcf7-list-item-label { background: var(--da-copper); border-color: var(--da-copper); color: var(--da-paper); }
.wpcf7 .da-services-field input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--da-copper); outline-offset: 2px; }

/* The theme's custom cursor is switched off (functions.php): hide its markup */
.pxl-cursor { display: none !important; }

/* Buttons are interface, not paragraphs: keep them in Helvetica Neue */
.btn,
.button,
button,
input[type="submit"],
.pxl--btn-text,
.wp-block-button__link {
	font-family: var(--da-font-heading);
}

/* Secondary information in Clay Grey, per the brand chart */
.top-metas .post-metas .meta-inner span,
.top-metas .post-metas .meta-inner a,
.pxl-item--position,
.post-date,
.comment-date,
.wp-caption-text {
	color: var(--da-clay);
}

::selection {
	background-color: var(--da-copper);
	color: var(--da-paper);
}

/* ==========================================================================
   4. Logo
   WordPress stores no dimensions for SVGs, so they can render at 1x1px.
   Give them a height; the width follows the logo's proportions.
   ========================================================================== */
.pxl-logo img[src$=".svg"],
.pxl-logo-mobile img[src$=".svg"],
.pxl-header-branding img[src$=".svg"],
.pxl-item--logo img[src$=".svg"],
.custom-logo[src$=".svg"] {
	width: auto;
	height: 40px;
	max-width: 100%;
}

@media (max-width: 767px) {
	.pxl-logo img[src$=".svg"],
	.pxl-logo-mobile img[src$=".svg"],
	.pxl-header-branding img[src$=".svg"],
	.pxl-item--logo img[src$=".svg"],
	.custom-logo[src$=".svg"] {
		height: 32px;
	}
}

/* ==========================================================================
   5. Hand-drawn icons inside the theme's own widgets
   The setup tool uploads them as "da-*" files (dark ink); show them in Paper.
   ========================================================================== */
img[src*="/uploads/"][src*="/da-"][src$=".png"],
img[src*="/uploads/"][src*="/da-"][src$=".svg"] {
	filter: invert(1) sepia(.12) brightness(.97);
}
.pxl-post--icon svg.replaced-svg path,
.pxl-post--icon svg.replaced-svg polygon {
	fill: var(--da-paper);
}