/* ==========================================================================
   Dima Group - Components
   Button, site header, primary nav, mega menu, hero.
   Depends on tokens.css and base.css being loaded first.
   ========================================================================== */

/* ==========================================================================
   1. Button
   The only real component in the Figma design system. 8 variants across 3
   axes. The Figma property names were unnamed ("Propiedad 1/2/3"); the axes
   are named here as kind / tone / affix.

     kind:  btn    - filled or bordered box, has padding
            label  - bare text link, no box
     tone:  primary | secondary
     affix: text   | text-icon (trailing 16px right-arrow)

   Measured from the hero instance (btn / primary / text-icon):
     horizontal auto-layout, gap 8px, padding 10px 24px, height 40px,
     micro-button type style, uppercase, color gold-300, 16px arrow icon.
   ========================================================================== */

.dima-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dima-space-2); /* 8px, from Figma auto-layout */
	font-family: var(--dima-font-body);
	font-size: var(--dima-font-size-micro-button);
	font-weight: var(--dima-font-weight-micro-button);
	line-height: var(--dima-line-height-micro-button);
	letter-spacing: var(--dima-letter-spacing-micro-button);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	/* Verbatim: EVERY button instance in Figma declares cornerRadius 100 - the
	   hero's "book a project", the about band's "our story", "View All
	   Projects" and the four project category chips. It is a property of the
	   base component, not of one instance, so it lives here. */
	border-radius: 100px;
	background-color: transparent;
	transition:
		color var(--dima-transition-fast),
		background-color var(--dima-transition-fast),
		border-color var(--dima-transition-fast);
}

/* --- kind: btn ----------------------------------------------------------- */

.dima-button--btn {
	height: 40px;
	padding: 10px 24px;
}

/* --- kind: label ---------------------------------------------------------
   No box is drawn here, so the inherited 100px radius only ever shapes the
   focus ring. It is left in place rather than reset to 0, so both kinds report
   the same radius. */

.dima-button--label {
	height: auto;
	padding: 0;
	border: 0;
}

.dima-button--label .dima-button__label {
	border-block-end: 1px solid transparent;
	transition: border-color var(--dima-transition-fast);
}

.dima-button--label:hover .dima-button__label,
.dima-button--label:focus-visible .dima-button__label {
	border-block-end-color: currentColor;
}

/* --- tone: primary -------------------------------------------------------
   ASSUMPTION (needs design sign-off): only one button instance was measurable
   in Figma (the hero's btn / primary / text-icon), and its label colour is
   gold-300 on a dark ground. A gold FILL with gold-300 text would be invisible,
   so primary is implemented as a gold-300 hairline box with gold-300 text, and
   the fill is reserved for the hover state. Confirm against the Figma
   component set before launch. */

.dima-button--primary {
	/* --dima-accent-on-ground is gold-300 on the dark grounds, as designed, and
	   steps to gold-700 on white where gold-300 would be ~1.9:1. See tokens.css. */
	color: var(--dima-accent-on-ground);
	border-color: var(--dima-accent-on-ground);
}

.dima-button--primary.dima-button--btn:hover,
.dima-button--primary.dima-button--btn:focus-visible {
	background-color: var(--dima-accent-on-ground);
	/* Reads the per-ground contrast alias, not a fixed ivory. On the dark and
	   gold-dark grounds the fill is gold-300, where ivory-50 measured 2.04:1 -
	   the hero CTA became unreadable at the moment of intent. See base.css. */
	color: var(--dima-accent-contrast, var(--dima-color-ivory-50));
}

.dima-button--primary.dima-button--label:hover,
.dima-button--primary.dima-button--label:focus-visible {
	color: var(--dima-color-gold-500);
}

/* --- tone: secondary -----------------------------------------------------
   ASSUMPTION (needs design sign-off): no secondary instance was present in the
   Figma file. Implemented as a low-emphasis ivory variant on the same box
   geometry. */

.dima-button--secondary {
	color: var(--dima-text);
	border-color: var(--dima-border);
}

.dima-button--secondary.dima-button--btn:hover,
.dima-button--secondary.dima-button--btn:focus-visible {
	border-color: var(--dima-text);
	background-color: var(--dima-surface-raised);
}

.dima-button--secondary.dima-button--label:hover,
.dima-button--secondary.dima-button--label:focus-visible {
	color: var(--dima-text-heading);
}

/* --- affix: text-icon ---------------------------------------------------- */

.dima-button__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	transition: transform var(--dima-transition-fast);
}

.dima-button--text-icon:hover .dima-button__icon,
.dima-button--text-icon:focus-visible .dima-button__icon {
	transform: translateX(3px);
}

.dima-button[aria-disabled="true"],
.dima-button:disabled {
	opacity: 0.45;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.dima-button,
	.dima-button__icon {
		transition: none;
	}

	.dima-button--text-icon:hover .dima-button__icon,
	.dima-button--text-icon:focus-visible .dima-button__icon {
		transform: none;
	}
}

/* ==========================================================================
   2. Site header
   Figma node 76:4159 - full-bleed bar, 1440 x 112, fill ink-900 (#0D0D0D).

   ONE row, not two:
     the 96 x 96 mark at x = 56, left aligned and vertically centred;
     `Nav` at x = 1027, 16px tall, right aligned on the same row, item gap 50px.
   A 56px inline gutter puts the mark's left edge at exactly x = 56 on a
   1440px viewport, and pushing the nav to the far end leaves it flush right.
   ========================================================================== */

.dima-site-header {
	position: relative;
	z-index: 20;
	/* The header is darker than the shared dark ground: ink-900, not ink-800. */
	--dima-surface: var(--dima-color-ink-900);
	background-color: var(--dima-surface);
}

.dima-site-header__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--dima-space-4);
	min-height: var(--dima-header-height); /* 112px */
	max-width: var(--dima-layout-artboard); /* 1440px */
	margin-inline: auto;
	padding-inline: var(--dima-layout-row-gutter); /* 56px, from the Figma x = 56 */
}

.dima-site-header__branding {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.dima-site-header__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	color: var(--dima-color-gold-400); /* #C3A55D */
}

.dima-site-header__logo svg,
.dima-site-header__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* NEEDS DESIGN: both exported monograms are near-black (#231F20) and would be
   invisible on the ink-900 bar. The filter chain flattens the mark to white
   and then tints it to gold-400 (#C3A55D): brightness(0) invert(1) gives a
   white silhouette, and the sepia/saturate/hue-rotate tail warms it. This is a
   workaround for a wrong-coloured asset, NOT a design treatment - a proper
   gold or light export should replace it and this filter should then go. */
.dima-site-header__logo-image {
	filter: brightness(0) invert(1) sepia(1) saturate(2.2) hue-rotate(3deg) brightness(0.92);
}

/* the_custom_logo() emits .custom-logo-link, which carries none of our classes. */
.dima-site-header__branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
}

.dima-site-header__branding .custom-logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Text fallback, used only when the exported mark is missing. */
.dima-site-header__logo-text {
	font-family: var(--dima-font-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--dima-color-gold-400);
}

/* ==========================================================================
   3. Primary navigation
   Horizontal auto-layout, gap 50px, uppercase, gold-100 (#FBEFC9), 16px tall.
   ========================================================================== */

.dima-primary-nav {
	display: flex;
	/* Right aligned on the same row as the mark - Figma puts `Nav` at x = 1027
	   on a 1440 artboard whose right gutter is 56px. */
	justify-content: flex-end;
	flex: 1 1 auto;
}

.dima-primary-nav__list {
	display: flex;
	align-items: center;
	gap: var(--dima-space-7); /* 50px, from Figma auto-layout */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Deliberately `static`: the mega-menu panel is absolutely positioned and must
   resolve against .dima-site-header (its nearest positioned ancestor) so it can
   go full-bleed. Making the item `relative` would trap the panel inside a
   single nav item's width. */
.dima-primary-nav__item {
	position: static;
}

.dima-primary-nav__link,
.dima-primary-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--dima-space-2);
	height: 16px;
	font-family: var(--dima-font-body);
	font-size: var(--dima-font-size-eyebrow-label);
	font-weight: var(--dima-font-weight-eyebrow-label);
	line-height: 16px;
	letter-spacing: var(--dima-letter-spacing-eyebrow-label);
	text-transform: uppercase;
	color: var(--dima-color-gold-100); /* #FBEFC9 */
	white-space: nowrap;
	transition: color var(--dima-transition-fast);
}

.dima-primary-nav__link:hover,
.dima-primary-nav__toggle:hover,
.dima-primary-nav__link:focus-visible,
.dima-primary-nav__toggle:focus-visible {
	color: var(--dima-color-gold-200);
}

/* `Line 2` - the 45px active-page indicator. See the NEEDS DESIGN note in
   template-parts/header/site-header.php: the artboard records its position but
   not which nav item it belongs to, so it is drawn under the current one. */
.dima-primary-nav__item.current-menu-item > .dima-primary-nav__link,
.dima-primary-nav__link[aria-current="page"] {
	position: relative;
	color: var(--dima-color-gold-300);
}

.dima-primary-nav__item.current-menu-item > .dima-primary-nav__link::after,
.dima-primary-nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	inset-block-start: calc(100% + 5px); /* 61 - (40 + 16) = 5px below the nav row */
	inset-inline-start: 0;
	width: 45px; /* verbatim from Figma */
	max-width: 100%;
	height: 1px;
	background-color: var(--dima-color-gold-300);
}

.dima-primary-nav__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	transition: transform var(--dima-transition-base);
}

.dima-primary-nav__toggle[aria-expanded="true"] .dima-primary-nav__icon {
	transform: rotate(180deg);
}

/* Mobile toggle - hidden above the 900px breakpoint (see responsive.css). */
.dima-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--dima-space-2);
	color: var(--dima-color-gold-100);
	padding: var(--dima-space-2);
}

.dima-nav-toggle__bars,
.dima-nav-toggle__bars::before,
.dima-nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--dima-transition-fast), opacity var(--dima-transition-fast);
}

.dima-nav-toggle__bars {
	position: relative;
}

.dima-nav-toggle__bars::before,
.dima-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.dima-nav-toggle__bars::before {
	top: -7px;
}

.dima-nav-toggle__bars::after {
	top: 7px;
}

.dima-nav-toggle[aria-expanded="true"] .dima-nav-toggle__bars {
	background-color: transparent;
}

.dima-nav-toggle[aria-expanded="true"] .dima-nav-toggle__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.dima-nav-toggle[aria-expanded="true"] .dima-nav-toggle__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   4. Mega menu ("Menu drop" - the SERVICES dropdown)
   Full-bleed panel 1440 x 248, background ink-900.
   Vertical auto-layout, gap 64px, padding 48px top / 56px right / 48px bottom
   / 170px left. Inner horizontal row gap 24px of 8 cards, each 285px wide,
   16px padding, 16px inner gap.
   ========================================================================== */

/* The header mark is the first thing every pointer crosses and was the only
   link in the header with no state at all. */
.dima-site-header__logo {
	transition: opacity var(--dima-transition-fast);
}

.dima-site-header__logo:hover,
.dima-site-header__logo:focus-visible {
	opacity: 0.78;
}

.dima-mega-menu {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 30;
	min-height: var(--dima-mega-menu-height); /* 248px */
	background-color: var(--dima-color-ink-900);
	border-block-start: 1px solid var(--dima-border);
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-9); /* 64px */
	padding: 48px 56px 48px 170px;
}

/* Progressive enhancement: with JS disabled the panel is a plain, always
   visible list of service links. The .is-enhanced class is added by
   navigation.js only once the toggle behaviour is wired up, and only then does
   the panel start hidden. */
.dima-site-header.is-enhanced .dima-mega-menu[hidden] {
	display: none;
}

/* Hover bridge.
   The SERVICES nav item's own box is 16px tall and sits at y 48-64, while this
   panel is anchored to the bottom of the 112px header. That leaves ~48px of
   ground belonging to neither element, which the pointer must cross to reach
   the menu. This pseudo-element extends the panel's HIT AREA upward across
   that corridor so the pointer never leaves the disclosure in transit.
   It is invisible, has no geometry of its own on screen, and only exists while
   the panel is open - the panel carries [hidden] when closed. */
.dima-mega-menu::before {
	content: "";
	position: absolute;
	inset-block-end: 100%;
	inset-inline: 0;
	/* Exactly the corridor: header height (112px) minus the nav item's baseline. */
	height: 48px;
}

.dima-mega-menu__list {
	/* RESPONSIVE BY DECISION, replacing an unbuildable Figma spec.

	   Figma asks for a single row of eight 285px cards with 24px gaps inside a
	   1214px track: 8 x 285 + 7 x 24 = 2448px, or 2.02x the space that exists.
	   Only four cards could ever be visible. Held verbatim, that overflowed the
	   document; contained, it produced a scrollbar across the panel. Neither is
	   acceptable, so the row wraps to a fluid four-column grid: two tidy rows
	   of four at every desktop width, with the cards themselves growing and
	   shrinking with the viewport instead of being pinned to 285px.

	   The 24px gap and the card's internal padding stay verbatim; only the
	   track sizing changes. Report the spec defect to the designer regardless -
	   the panel height in Figma (248px) assumes one row.

	   minmax(0, 1fr) rather than 1fr: a bare 1fr floors at min-content, which
	   the longest title ("Motorized Shading & Window Treatments") would push
	   past, reintroducing overflow. */
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--dima-space-4); /* 24px, verbatim */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A narrow desktop window still needs a sane track before the nav collapses.
   That now lives in responsive.css at the canonical 1200px breakpoint, as
   `repeat(auto-fit, minmax(240px, 1fr))`, which reflows 4 -> 3 -> 1 on its own.

   An orphan `@media ( max-width: 1180px )` rule used to sit here forcing two
   columns. It was 20px out of step with every other breakpoint in the theme
   and the auto-fit track supersedes it, so it is gone rather than left in
   place looking live. */

.dima-mega-menu__item {
	/* Was flex: 0 0 285px. The grid track now decides the width, so the item
	   only has to stop its content from setting a floor. */
	min-width: 0;
}

.dima-mega-menu__card {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3); /* 16px */
	height: 100%;
	padding: var(--dima-space-3); /* 16px */
	border: 1px solid transparent;
	border-radius: 2px;
	color: var(--dima-color-gold-100);
	transition:
		background-color var(--dima-transition-fast),
		border-color var(--dima-transition-fast);
}

.dima-mega-menu__card:hover,
.dima-mega-menu__card:focus-visible {
	background-color: var(--dima-color-ink-850);
	border-color: var(--dima-color-gold-800);
}

.dima-mega-menu__icon {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	color: var(--dima-color-gold-300);
}

.dima-mega-menu__title {
	font-family: var(--dima-font-display);
	font-size: var(--dima-font-size-h4-card-title);
	font-weight: var(--dima-font-weight-h4-card-title);
	line-height: var(--dima-line-height-h4-card-title);
	letter-spacing: var(--dima-letter-spacing-h4-card-title);
	color: var(--dima-text-heading);
}

.dima-mega-menu__description {
	font-family: var(--dima-font-body);
	font-size: var(--dima-font-size-body);
	line-height: var(--dima-line-height-body);
	color: var(--dima-text-muted);
}

/* ==========================================================================
   5. Hero (Home "Top" section)
   1440 x 720 frame, full-bleed background video with a dark overlay.
   Content block 544px wide, vertical auto-layout gap 16px.
   ========================================================================== */

.dima-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: var(--dima-hero-height); /* 720px */
	overflow: hidden;
	background-color: var(--dima-color-ink-950);
}

.dima-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* The design references a 1440 x 810 video rectangle inside a 720px tall
   frame, so the video is intentionally cropped vertically. object-fit: cover
   with a centred position reproduces that crop at any viewport width. */
.dima-hero__video,
.dima-hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The poster sits underneath the video and shows through whenever the clip is
   missing, blocked by an autoplay policy, still loading, or hidden by
   prefers-reduced-motion. */
.dima-hero__poster {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dima-hero__video {
	position: relative;
	z-index: 1;
}

/* Dark overlay rectangle sitting above the video, below the content. */
.dima-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* ASSUMPTION: the Figma overlay rectangle had no readable opacity value.
	   0.55 flat plus a slight left-weighted gradient keeps the eyebrow,
	   headline and button above WCAG AA contrast over an unknown video frame.
	   Needs design sign-off. */
	background:
		linear-gradient(
			90deg,
			rgba(13, 13, 13, 0.85) 0%,
			rgba(13, 13, 13, 0.55) 55%,
			rgba(13, 13, 13, 0.4) 100%
		);
}

/* The hero content sits on the SAME 1328px row as every section below it, in
   the same 56px artboard gutter. It used to use the 170px mega-menu gutter,
   which pushed the headline 114px to the right of every other text block on
   the page - the mega menu's gutter is its own, not the page's. */
.dima-hero__inner {
	position: relative;
	width: 100%;
	/* 1328 + 2 x 56 = 1440, the artboard width. */
	max-width: var(--dima-layout-artboard);
	margin-inline: auto;
	padding-inline: var(--dima-layout-row-gutter);
}

.dima-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3); /* 16px */
	width: 100%;
	max-width: 544px;
}

.dima-hero__eyebrow {
	color: var(--dima-accent-on-ground); /* gold-300 (#D9AE47) on this dark ground */
}

.dima-hero__titles {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-2); /* 8px */
}

.dima-hero__title {
	color: var(--dima-text-heading);
	/* Figma: the "Designed" range on line 2 is gold-200 (#F6D64A). */
	--dima-emphasis-color: var(--dima-color-gold-200);
}

/* The headline is two visual lines inside a single <h1>: line 1 carries
   .dima-display-h1 (60px), line 2 .dima-h2-section (48px). They are spans so
   the heading is still announced as one heading. */
.dima-hero__title-line {
	display: block;
}

.dima-hero__subtitle {
	color: var(--dima-text); /* ivory-100 (#F7F4EC) on this dark ground */
}

.dima-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dima-space-3);
	margin-block-start: var(--dima-space-2);
}

/* prefers-reduced-motion: hide and pause the video, show the poster instead.
   navigation.js also calls pause() so the file stops downloading. */
@media (prefers-reduced-motion: reduce) {
	.dima-hero__video {
		display: none;
	}
}

/* ==========================================================================
   6. Site footer - DELETED ON PURPOSE

   The Figma file has no footer artboard on any of its five screens. The dark
   placeholder that used to live here was invented during scaffolding and has
   been rejected; the CTA band is the last visual block on every page. See
   footer.php. Nothing is to be added back here until a footer is designed.
   ========================================================================== */

/* ==========================================================================
   7. Generic page / post scaffolding
   Not designed in Figma - neutral, token-driven defaults.
   ========================================================================== */

.dima-page-header {
	padding-block: var(--dima-space-9);
	border-block-end: 1px solid var(--dima-border);
}

.dima-page-title {
	color: var(--dima-text-heading);
}

.dima-post-list {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-6);
}

.dima-post-card__title a:hover,
.dima-post-card__title a:focus-visible {
	color: var(--dima-accent-on-ground);
}

.dima-post-card__meta {
	color: var(--dima-text-muted);
	margin-block-start: var(--dima-space-1);
}

.dima-error-404 {
	padding-block: 120px;
}

.dima-error-404 .dima-eyebrow-label {
	color: var(--dima-accent-on-ground);
}

.dima-error-404 > .dima-container > * + * {
	margin-block-start: var(--dima-space-4);
}

/* ==========================================================================
   Sticky WhatsApp CTA
   Figma: 32x198 rail, pinned to the right edge, label rotated to read
   bottom-to-top. Present on all five artboards.
   ========================================================================== */

.dima-whatsapp-cta {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;

	display: flex;
	flex-direction: column;
	align-items: center;
	/* Was `var(--dima-space-8, 8px)`. The fallback records the intent - 8px -
	   but --dima-space-8 EXISTS and is 56px, so the fallback never applied and
	   the rail rendered 215px tall against a 198px Figma spec. --dima-space-2
	   is the 8px step. */
	gap: var(--dima-space-2);

	width: 32px;
	min-height: 198px;
	/* Was `var(--dima-space-16, 16px)`: --dima-space-16 does not exist in the
	   scale, so this only ever resolved to its own fallback. --dima-space-3 is
	   the real 16px step. */
	padding: var(--dima-space-3) 0;

	/* Figma fills the rail ivory-100 (#F7F4EC): it is a LIGHT tab with dark
	   content, not a dark one. */
	background-color: var(--dima-color-ivory-100);
	color: var(--dima-color-ink-800);
	text-decoration: none;

	/* No hover/focus states were specified in Figma - these are engineering
	   defaults chosen to hold AA contrast on the ivory-100 ground. */
	transition:
		color var(--dima-transition-fast),
		background-color var(--dima-transition-fast);
}

.dima-whatsapp-cta:hover,
.dima-whatsapp-cta:focus-visible {
	color: var(--dima-color-gold-700);
}

.dima-whatsapp-cta:focus-visible {
	outline: 2px solid var(--dima-color-gold-600);
	outline-offset: 2px;
}

.dima-whatsapp-cta__icon {
	flex-shrink: 0;
}

.dima-whatsapp-cta__label {
	font-family: var(--dima-font-body);
	font-size: var(--dima-font-size-micro-button, 12px);
	font-weight: 600;
	line-height: var(--dima-line-height-micro-button, 15.6px);
	letter-spacing: var(--dima-letter-spacing-micro-button, 0.96px);
	text-transform: uppercase;
	white-space: nowrap;

	/* Bottom-to-top, matching the 16x110 rotated label in Figma. */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* The rail overlaps content on narrow screens - NEEDS DESIGN.
   Below 900px it drops to a conventional round floating action button.

   Was `max-width: 899px`, one pixel out of step with its own comment and with
   the nav collapse in responsive.css. At exactly 900px the header showed the
   hamburger while this still showed the full-height desktop rail. */
@media (max-width: 900px) {
	.dima-whatsapp-cta {
		top: auto;
		/* --dima-space-16 does not exist; --dima-space-3 is the real 16px. */
		bottom: var(--dima-space-3);
		right: var(--dima-space-3);
		transform: none;

		width: 56px;
		min-height: 56px;
		padding: 0;

		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--dima-color-ivory-100);
	}

	.dima-whatsapp-cta__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dima-whatsapp-cta {
		transition: none;
	}
}