/**
 * Equinox — design tokens + base layer.
 *
 * This file deliberately holds ONLY three things:
 *   1. the design tokens (CSS custom properties) that the Bricks colour palette
 *      and the component classes reference by name,
 *   2. the document-level base/reset the approved design assumes,
 *   3. the two keyframe animations the components reference.
 *
 * Component styling does NOT live here. Every section's styles are attached to
 * its own Bricks global class (visible and editable per component in the
 * builder's Style panel / Custom CSS), which is what the design system is
 * built on. Adding component CSS to this file would take those styles out of
 * the builder and out of the content team's reach.
 */

:root {
	/* Ink + surface */
	--equinox-ink: #1A1D1B;
	--equinox-ink-deep: #0D1A13;
	--equinox-white: #FFFFFF;
	--equinox-paper: #F3F3EF;
	--equinox-paper-dim: #E6E6E0;

	/* Brand */
	--equinox-green: #1E6B44;
	--equinox-green-deep: #10412B;
	--equinox-green-hover: #14472E;
	--equinox-gold: #E9A93C;
	--equinox-gold-ink: #8F6212;    /* gold text on light (~5.35:1 on white) */
	--equinox-gold-bright: #F5D78A; /* gold accent on green fills (~4.62:1) */

	/* Neutrals — mute/faint sized for ≥4:1 text on white/paper */
	--equinox-gray: #5C6360;
	--equinox-gray-dark: #3A403D;
	--equinox-gray-mute: #6A716D;   /* ~5.0:1 white / ~4.5:1 paper */
	--equinox-gray-faint: #69706C;  /* ~5.1:1 white / ~4.6:1 paper */
	--equinox-border: #E2E2DC;
	--equinox-border-alt: #E6E6E0;     /* card / panel hairlines */
	--equinox-border-soft: #EDEDE8;    /* section / chrome dividers */
	--equinox-border-faint: #DEDED8;   /* gotop / sequence idle */
	--equinox-border-mute: #D6D6D0;    /* rail ticks / soft underlines */
	--equinox-paper-alt: #F1F1EC;      /* mega-menu row dividers */
	--equinox-paper-lightest: #F8F8F5;

	/* Corners — design-system elevation (decoded export is sharp; enforce here) */
	--equinox-radius-sm: 6px;          /* buttons, chips, fields, sticky chrome */
	--equinox-radius-md: 8px;          /* cards, panels, mega-menu */

	/* Type families */
	--equinox-font-display: 'Space Grotesk', Helvetica, Arial, sans-serif;
	--equinox-font-body: 'Instrument Sans', Helvetica, Arial, sans-serif;
	--equinox-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	/* Motion */
	--equinox-ease: cubic-bezier(.2, .7, .2, 1);
	--equinox-ease-out: cubic-bezier(.16, .84, .24, 1);

	/* Chrome */
	--equinox-rail-width: 64px;
	--equinox-header-height: 78px;
	--equinox-shell: 1440px;

	/* Type + spacing — mirrored from design-system/tokens/{typography,spacing}.css.
	   Component classes reference these; do not add role overrides below. */
	--eq-text-display: clamp(3.5rem, 6vw, 6.5rem);
	--eq-text-h1: clamp(2.5rem, 3.4vw, 3.25rem);
	--eq-text-h2: 2rem;
	--eq-text-h3: 1.5rem;
	--eq-text-lead: 1.25rem;
	--eq-text-body: 1rem;
	--eq-text-small: 0.875rem;
	--eq-text-label: 0.75rem;

	--eq-leading-display: 1.05;
	--eq-leading-heading: 1.2;
	--eq-leading-body: 1.6;

	--eq-measure-body: 34em;
	--eq-measure-display: 24ch;

	--eq-space-1: 4px;
	--eq-space-2: 8px;
	--eq-space-3: 12px;
	--eq-space-4: 16px;
	--eq-space-5: 32px;
	--eq-space-6: 48px;
	--eq-space-7: 64px;
	--eq-space-8: 96px;
	--eq-space-9: 128px;

	--eq-rel-eyebrow-headline: var(--eq-space-4);
	--eq-rel-headline-intro: var(--eq-space-5);
	--eq-rel-intro-content: var(--eq-space-7);
	--eq-rel-stack-row: var(--eq-space-5);
	--eq-rel-label-value: var(--eq-space-2);

	--eq-section-pad-y: var(--eq-space-9);
	--eq-section-pad-y-mobile: var(--eq-space-8);
	--eq-section-pad-x: var(--eq-space-6);
	--eq-section-pad-x-mobile: var(--eq-space-4);

	--equinox-tracking-headline: -0.03em;
	--equinox-tracking-label-alt: 0.12em;
	--equinox-tracking-nav: 0.16em;
	--equinox-tracking-wide: 0.18em;
	--equinox-tracking-wider: 0.2em;
}

/* ---------------------------------------------------------------
   Base layer — matches the approved design's document defaults.
   --------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Bricks sets html{font-size:62.5%} (1rem=10px). Our type tokens are authored
	   as rem assuming a 16px root — restore the standard root so --eq-text-* resolve. */
	font-size: 100%;
}

body {
	margin: 0;
	background: var(--equinox-white);
	font-family: var(--equinox-font-body);
	font-size: var(--eq-text-body);
	line-height: var(--eq-leading-body);
	font-weight: 400;
	color: var(--equinox-ink);
	-webkit-font-smoothing: antialiased;
	/* The hero, the sector panels and the project rail all extend past the
	   viewport by design; the design clips that rather than letting it create a
	   horizontal page scrollbar. */
	overflow-x: hidden;
}

/* The Figma export wraps page body in [data-shell]{margin-left:64px}. Bricks
   header templates cannot leave that wrapper open around page content, so
   offset main + footer here. Hero already full-bleeds with margin-left:-64px. */
#brx-content,
#brx-footer {
	margin-left: var(--equinox-rail-width);
	width: calc(100% - var(--equinox-rail-width));
	max-width: none;
	box-sizing: border-box;
}

@media (max-width: 991px) {
	#brx-content,
	#brx-footer {
		margin-left: 0;
		width: 100%;
	}
}

/* Homepage-only chrome: side rail, load-in curtain and scroll progress. */
body:not(.home) .eq-rail-rail,
body:not(.home) .eq-curtain-curtain {
	display: none !important;
}

body:not(.home) .eq-header-progress {
	display: none !important;
}

body:not(.home) #brx-content,
body:not(.home) #brx-footer {
	margin-left: 0;
	width: 100%;
}

body:not(.home) .eq-header-nav,
body:not(.home) .eq-header-nav.brxe-section,
body:not(.home) .eq-header-nav.brxe-div {
	left: 0 !important;
}

body:not(.home) .eq-inner-hero,
body:not(.home) .eq-inner-hero.brxe-section,
body:not(.home) .eq-inner-hero > .eq-proj-body,
body:not(.home) .eq-inner-hero > .eq-proj-gallery,
body:not(.home) .eq-inner-hero > .eq-proj-nav,
body:not(.home) .eq-proj-page > .eq-proj-body,
body:not(.home) .eq-proj-page > .eq-proj-gallery,
body:not(.home) .eq-proj-page > .eq-proj-nav {
	margin-left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Bricks ships no opinion on link colour, so without this every anchor that
   does not set its own colour falls back to the browser's blue underline. */
a {
	color: var(--equinox-green);
	text-decoration: none;
}

a:hover {
	color: var(--equinox-green-hover);
}

img {
	max-width: 100%;
}

input,
textarea,
button,
select {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
}

/* Source export used outline:none + border-color swap only. Keep that for
   mouse users; restore a visible ring for keyboard :focus-visible. */
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--equinox-green);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--equinox-green);
	outline-offset: 2px;
	border-color: var(--equinox-green);
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--equinox-green);
	outline-offset: 3px;
}

::selection {
	background: var(--equinox-gold);
	color: var(--equinox-ink);
}

/* Thin scrollbar for the horizontal rails (projects, reviews). */
[data-rail-scroll]::-webkit-scrollbar {
	height: 1px;
}

[data-rail-scroll]::-webkit-scrollbar-thumb {
	background: var(--equinox-border-mute);
}

/* ---------------------------------------------------------------
   Layout / chrome overrides Bricks sometimes flattens (max-width:100%,
   dropped calc() widths, section flex centering). Keep these in the
   theme base so they always win over mapped Bricks controls.
   --------------------------------------------------------------- */

/*
 * Header is a Bricks section (position:fixed; left:64px). Sections default
 * to width:100%, which ignores right:0 and overflows the viewport by the
 * rail width (64px). Force the left+right inset model instead.
 */
/* Fixed chrome lives in the Bricks header template. Collapse the wrapper so
   it does not reserve document flow (white gap + white-on-white nav text). */
#brx-header {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 0 !important;
	overflow: visible !important;
	z-index: 100 !important;
}

/* Curtain must stay fixed even if the template instance type drifts. */
.eq-curtain-curtain,
.eq-curtain-curtain.brxe-div,
.eq-curtain-curtain.brxe-section {
	position: fixed !important;
	inset: 0 !important;
	z-index: 90 !important;
}

.eq-rail-rail,
.eq-rail-rail.brxe-section,
.eq-rail-rail.brxe-aside {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	height: auto !important;
}

.eq-header-nav,
.eq-header-nav.brxe-section,
.eq-header-nav.brxe-div {
	position: fixed !important;
	top: 0 !important;
	left: var(--equinox-rail-width) !important;
	right: 0 !important;
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box !important;
	align-items: center !important;
}

.eq-header-box,
.eq-header-box.brxe-div {
	height: 100% !important;
	box-sizing: border-box !important;
	align-items: center !important;
}

/* Anchor mega-menu below the trigger (Bricks/link metrics vary; fixed 38px top drifts).
   440px keeps Space Grotesk titles on one line (406px was sized for Helvetica).
   Sharp corners match the approved export. */
.eq-header-menu-panel,
.eq-header-menu-panel.brxe-div {
	top: calc(100% + var(--eq-space-3)) !important;
	width: 440px !important;
	min-width: 440px !important;
	max-width: none !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
	z-index: 60;
}

@media (max-width: 991px) {
	.eq-header-nav,
	.eq-header-nav.brxe-section,
	.eq-header-nav.brxe-div {
		left: 0 !important;
	}
}

/* Hero must span the full viewport, including the 64px rail column.
   Bricks sections also default to align-items:center, which shrink-wraps
   .eq-top-box (~14px gutters) and breaks logo/headline alignment. */
#top.eq-top-hero,
.eq-top-hero.brxe-section {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-1 * var(--equinox-rail-width)) !important;
	align-items: stretch !important;
}

/* Inner-page heroes share the same full-bleed treatment as the home hero. */
.eq-inner-hero,
.eq-inner-hero.brxe-section {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-1 * var(--equinox-rail-width)) !important;
	align-items: stretch !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* If Bricks nests body/gallery inside the hero component root, keep them
   out of the clipped hero paint and restore a normal document flow. */
.eq-inner-hero > .eq-proj-body,
.eq-inner-hero > .eq-proj-gallery,
.eq-inner-hero > .eq-proj-nav,
.eq-proj-page > .eq-proj-body,
.eq-proj-page > .eq-proj-gallery,
.eq-proj-page > .eq-proj-nav {
	position: relative !important;
	z-index: 2 !important;
	flex: none !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-1 * var(--equinox-rail-width)) !important;
	align-self: stretch !important;
	overflow: visible !important;
}

.eq-inner-hero-content,
.eq-inner-hero-content.brxe-div {
	width: 100% !important;
	max-width: 1440px !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
}

.eq-top-box,
.eq-top-box.brxe-div {
	width: 100% !important;
	max-width: none !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
}

@media (max-width: 991px) {
	#top.eq-top-hero,
	.eq-top-hero.brxe-section,
	.eq-inner-hero,
	.eq-inner-hero.brxe-section {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
	}
}

/* Capabilities mega-menu: keep panel text readable even when chrome paints
   top-level nav white over dark heroes (belt-and-suspenders vs JS skip). */
.eq-header-menu-panel,
.eq-header-menu-panel.brxe-div,
[data-menu-panel] {
	color: var(--equinox-ink) !important;
}

.eq-header-menu-panel .eq-header-text,
.eq-header-menu-panel .eq-header-txt-4,
.eq-header-menu-panel .eq-header-txt-5,
[data-menu-panel] > p,
[data-menu-panel] .brxe-text-basic {
	color: #6A716D !important;
}

.eq-header-menu-panel .eq-header-txt-2 {
	color: #8F6212 !important;
}

.eq-header-menu-panel .eq-header-txt-3,
.eq-header-menu-panel a.eq-header-link-4,
[data-menu-panel] a {
	color: #1A1D1B !important;
}

.eq-header-menu-panel a.eq-header-link-4:hover,
.eq-header-menu-panel a.eq-header-link-4:hover .eq-header-txt-3,
[data-menu-panel] a:hover,
[data-menu-panel] a:hover .brxe-text-basic {
	color: #1E6B44 !important;
}

.eq-header-menu-panel a.eq-header-link-5,
.eq-header-menu-panel a.eq-header-link-5 span,
[data-menu-panel] a:last-of-type {
	color: #1E6B44 !important;
}

/* Number labels in mega-menu stay gold. */
[data-menu-panel] a > .brxe-text-basic:first-child {
	color: #8F6212 !important;
}

.eq-header-caret,
[data-menu] > a .eq-header-caret {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 10px !important;
	height: 6px !important;
	margin-left: 4px !important;
	padding: 0 !important;
	color: currentColor !important;
	opacity: 0.75 !important;
	flex: none !important;
	line-height: 0 !important;
	font-size: 0 !important;
}

.eq-header-caret svg,
[data-menu] > a .eq-header-caret svg {
	display: block !important;
	width: 10px !important;
	height: 6px !important;
}

/* Capabilities mega-menu: parent is only as wide as the trigger link, so
   max-width:100% collapses the panel. Width/top set above with header chrome. */
.eq-header-menu {
	overflow: visible !important;
}

.eq-header-link-4,
a.eq-header-link-4 {
	display: grid !important;
	grid-template-columns: var(--eq-space-5) minmax(0, 1fr) var(--eq-space-4) !important;
	gap: var(--eq-space-3) !important;
	align-items: start !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.eq-header-link-5,
a.eq-header-link-5 {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Bricks sections default to flex-row — force column stacks so full-bleed bands
   (vision) and stacked section children span the content column. */
.eq-about-wrap,
.eq-about-wrap.brxe-section,
.eq-capabilities-wrap,
.eq-capabilities-wrap.brxe-section,
.eq-sequence-wrap,
.eq-sequence-wrap.brxe-section,
.eq-sequence-wrap-2,
.eq-team-wrap,
.eq-team-wrap.brxe-section,
.eq-team-wrap-2,
.eq-team-wrap-3,
.eq-reviews-wrap,
.eq-faq-wrap,
.eq-faq-wrap.brxe-section,
.eq-location-wrap,
.eq-contact-wrap,
.eq-contact-wrap.brxe-section {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.eq-about-vision,
.eq-about-vision.brxe-div {
	width: 100% !important;
	max-width: none !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
}

/* ---------------------------------------------------------------
   Homepage layout corrections.

   Bricks global-class CSS can lag the seed and sometimes emits tablet
   rules without a media query. These overrides restore equal-height
   sectors, a capabilities preview that tracks the list column, and a
   balanced About media block with readable Fig. 02 clearance.
   --------------------------------------------------------------- */

/* 1) Sectors — one shared row height; expand changes width only */
.eq-sequence-sector-row,
.eq-sequence-sector-row.brxe-div {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	height: clamp(420px, 52vh, 560px) !important;
	min-height: 0 !important;
}

.eq-sequence-0-4,
.eq-sequence-0-4.brxe-div,
.eq-sequence-1-4,
.eq-sequence-1-4.brxe-div {
	align-self: stretch !important;
	height: 100% !important;
	min-height: 0 !important;
	min-width: 0 !important;
	max-height: none !important;
	box-sizing: border-box !important;
}

.eq-sequence-img,
.eq-sequence-img.brxe-image,
.eq-sequence-img.brxe-image img,
.eq-sequence-img img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	max-width: none !important;
}

.eq-sequence-txt-4,
.eq-sequence-txt-4.brxe-div {
	position: absolute !important;
	inset: 0 !important;
}

@media (max-width: 991px) {
	.eq-sequence-sector-row,
	.eq-sequence-sector-row.brxe-div {
		flex-direction: column !important;
		height: auto !important;
	}

	.eq-sequence-0-4,
	.eq-sequence-0-4.brxe-div,
	.eq-sequence-1-4,
	.eq-sequence-1-4.brxe-div {
		flex: none !important;
		height: clamp(210px, 30vh, 300px) !important;
	}
}

/* 2) Capabilities — list column sets row height; preview fills it */
.eq-capabilities-box-3,
.eq-capabilities-box-3.brxe-div {
	align-items: stretch !important;
}

.eq-capabilities-cap-frame,
.eq-capabilities-cap-frame.brxe-div {
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
	height: auto !important;
	min-height: 100% !important;
	box-sizing: border-box !important;
}

.eq-capabilities-box-4,
.eq-capabilities-box-4.brxe-div {
	position: relative !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	overflow: hidden !important;
}

.eq-capabilities-0-2,
.eq-capabilities-0-2.brxe-image,
.eq-capabilities-0-2 img,
.eq-capabilities-1,
.eq-capabilities-1.brxe-image,
.eq-capabilities-1 img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

@media (max-width: 991px) {
	.eq-capabilities-cap-frame,
	.eq-capabilities-cap-frame.brxe-div {
		position: static !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.eq-capabilities-box-4,
	.eq-capabilities-box-4.brxe-div {
		flex: none !important;
		aspect-ratio: 4 / 3.2 !important;
		height: auto !important;
	}
}

/* 3–4) About — shorter hero crop, accent bars, inset + Fig. 02 room */
.eq-about-clip,
.eq-about-clip.brxe-image,
.eq-about-clip.brxe-image:not(.tag),
.eq-about-clip.brxe-image img,
.eq-about-clip img {
	aspect-ratio: 4 / 3.3 !important;
}

.eq-about-box-2,
.eq-about-box-2.brxe-div {
	border-top: 3px solid var(--equinox-gold) !important;
	border-bottom: 3px solid var(--equinox-gold) !important;
}

.eq-about-0-06,
.eq-about-0-06.brxe-div {
	right: 0 !important;
	bottom: -20px !important;
	width: 48% !important;
}

.eq-about-txt,
.eq-about-txt.brxe-text-basic {
	top: auto !important;
	bottom: -40px !important;
	left: 0 !important;
}

.eq-about-about-media,
.eq-about-about-media.brxe-div {
	margin-bottom: clamp(64px, 7vw, 88px) !important;
}

.eq-about-box,
.eq-about-box.brxe-div {
	padding-bottom: clamp(24px, 2.8vw, 36px) !important;
}

@media (max-width: 767px) {
	.eq-about-txt,
	.eq-about-txt.brxe-text-basic {
		display: none !important;
	}

	.eq-about-about-media,
	.eq-about-about-media.brxe-div {
		margin-bottom: var(--eq-space-5) !important;
	}

	.eq-about-0-06,
	.eq-about-0-06.brxe-div {
		bottom: -12px !important;
		width: 56% !important;
	}
}

/* ---------------------------------------------------------------
   Shared colour roles — contrast-safe tokens over seeded hex.
   Mute/faint/gold-ink fixes apply even before a design-system re-seed.
   --------------------------------------------------------------- */

/* Muted body / eyebrows / supporting copy on light surfaces */
.eq-about-fade,
.eq-capabilities-fade,
.eq-capabilities-fade-2,
.eq-sequence-fade,
.eq-sequence-text,
.eq-sequence-1-3,
.eq-sequence-fade-2,
.eq-projects-txt,
.eq-team-fade,
.eq-reviews-fade,
.eq-reviews-txt-5,
.eq-location-fade,
.eq-contact-fade,
.eq-contact-txt-4,
.eq-contact-txt-5,
.eq-contact-form-note,
.eq-footer-text-4,
.eq-footer-txt-2,
.eq-header-txt-4,
.eq-top-txt-16 {
	color: var(--equinox-gray-mute) !important;
}

/* Captions / meta / faint labels on light surfaces */
.eq-curtain-txt,
.eq-rail-rail-note,
.eq-header-txt,
.eq-header-txt-5,
.eq-top-txt-14,
.eq-about-txt,
.eq-capabilities-txt-5,
.eq-capabilities-cap-caption,
.eq-projects-txt-2,
.eq-projects-txt-4,
.eq-projects-txt-5,
.eq-projects-txt-6,
.eq-team-fade-2,
.eq-team-fade-4,
.eq-reviews-txt-7,
.eq-reviews-text-3,
.eq-reviews-fade-2,
.eq-location-txt-2,
.eq-location-txt-6,
.eq-location-txt-7,
.eq-location-txt-8,
.eq-location-txt-9,
.eq-contact-txt-2,
.eq-contact-text-2,
.eq-footer-text-3 {
	color: var(--equinox-gray-faint) !important;
}

/* Mega-menu lede — muted label (decoded), not gold */
.eq-header-text {
	color: var(--equinox-gray-mute) !important;
}

/* Gold text on light surfaces — readable ink, not brand fill gold */
.eq-header-txt-2,
.eq-header-txt-8,
.eq-about-num,
.eq-capabilities-txt-2,
.eq-sequence-txt-2,
.eq-sequence-txt-5,
.eq-reviews-txt-4,
.eq-reviews-txt-6,
.eq-footer-text-2 {
	color: var(--equinox-gold-ink) !important;
}

/* Gold accents sitting on green fills */
.eq-header-txt-9,
.eq-projects-txt-9,
.eq-contact-txt-6 {
	color: var(--equinox-gold-bright) !important;
}

/* Hero inactive rotator + FAQ chevrons — lift off photo / dark ground */
.eq-top-1 {
	color: rgba(255, 255, 255, 0.55) !important;
}

.eq-faq-01-2,
.eq-faq-02 {
	color: rgba(255, 255, 255, 0.62) !important;
}

/* Chrome-only geometry Bricks flattens (borders / radius / grid unlock).
   Type and spacing live on seeded global classes — do not re-declare here. */

.eq-header-link-2,
a.eq-header-link-2 {
	gap: 0 !important;
}

/* Bricks text-link elements default to gap:5px — zero so spacing stays on the 9-step scale. */
a.brxe-text-link,
.brxe-text-link {
	gap: 0 !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
}

.eq-header-menu-panel,
.eq-header-menu-panel.brxe-div {
	border: 1px solid var(--equinox-border-alt) !important;
	border-radius: 0 !important;
}

.eq-header-link-4,
a.eq-header-link-4,
.eq-header-link-5,
a.eq-header-link-5 {
	border-top-color: var(--equinox-paper-alt) !important;
	box-sizing: border-box !important;
}

.eq-faq-01,
a.eq-faq-01 {
	display: grid !important;
	grid-template-columns: var(--eq-space-6) minmax(0, 1fr) var(--eq-space-5) !important;
	align-items: baseline !important;
	box-sizing: border-box !important;
}

.eq-reviews-up,
.eq-reviews-up-2,
.eq-projects-link,
.eq-contact-up-3,
.eq-location-box-4 {
	border: 1px solid var(--equinox-border-alt) !important;
	border-radius: var(--equinox-radius-md) !important;
	box-sizing: border-box !important;
}

.eq-about-box-4,
.eq-about-box-5,
.eq-team-box-3,
.eq-team-box-5,
.eq-projects-box-3,
.eq-capabilities-0,
.eq-capabilities-3 {
	border-top-color: var(--equinox-border-alt) !important;
}

.eq-footer-sticky,
.eq-footer-gotop,
.eq-top-link,
.eq-header-link-12,
.eq-contact-btn,
.eq-contact-works,
.eq-contact-works-2,
.eq-contact-input,
.eq-contact-textarea {
	border-radius: var(--equinox-radius-sm) !important;
	box-sizing: border-box !important;
}

.eq-footer-sticky {
	border: 1px solid var(--equinox-green) !important;
}

.eq-footer-gotop {
	width: var(--eq-space-6) !important;
	height: var(--eq-space-6) !important;
	border: 1px solid var(--equinox-border-faint) !important;
}

.eq-contact-works-2 {
	border: 1px solid var(--equinox-border) !important;
}

button.eq-contact-works,
button.eq-contact-works-2 {
	cursor: pointer;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.eq-contact-input,
.eq-contact-textarea {
	width: 100% !important;
	min-height: var(--eq-space-6) !important;
	height: auto !important;
	border: 1px solid var(--equinox-border) !important;
	color: var(--equinox-ink) !important;
	background: var(--equinox-white) !important;
}

/* ---------------------------------------------------------------
   Keyframes referenced by component classes.
   --------------------------------------------------------------- */

@keyframes eqcue {
	0%   { transform: translateY(-14px); opacity: 0; }
	35%  { opacity: 1; }
	100% { transform: translateY(40px); opacity: 0; }
}

@keyframes eqpulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* ---------------------------------------------------------------
   Reveal-on-scroll contract (matches DCLogic / approved export).

   Kind fallbacks cover markup that only carries data-reveal. Component
   classes may also set the same start state — equinox.js clears inline
   opacity/transform/clip-path and stamps data-reveal-in so class rules
   still reveal. no-js + reduced-motion keep content visible.
   --------------------------------------------------------------- */

[data-reveal="fade"] {
	opacity: 0;
	transition: opacity .9s ease;
}

[data-reveal="up"] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}

[data-reveal="mask"] {
	display: block;
	transform: translateY(108%);
	transition: transform 1.05s cubic-bezier(.16, .84, .24, 1);
}

[data-reveal="clip"] {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.35s cubic-bezier(.16, .84, .24, 1), transform 1.8s cubic-bezier(.16, .84, .24, 1);
}

[data-reveal][data-reveal-in] {
	opacity: 1 !important;
	clip-path: none !important;
}

/* up/mask/fade start transforms live on component classes — force clear.
   clip keeps transform free for hero parallax scale after reveal. */
[data-reveal="up"][data-reveal-in],
[data-reveal="mask"][data-reveal-in],
[data-reveal="fade"][data-reveal-in] {
	transform: none !important;
}

/* Mask lines sit in overflow:hidden parents for the wipe-in. After reveal,
   unlock so negative letter-spacing glyphs are not clipped on the left edge.
   Keep the hero rotator shell clipped so off-stage words cannot ghost. */
:has(> [data-reveal="mask"][data-reveal-in]):not(:has([data-rot])) {
	overflow: visible;
}

.eq-top-txt-8,
.eq-top-txt-8.brxe-text,
span.eq-top-txt-8 {
	overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

html.no-js [data-reveal] {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}