/*
 * Chomzx overrides.
 *
 * Loaded after style-light.css so the theme file stays untouched and every
 * customisation is visible in one place. Scoped to `body.home` where it only
 * concerns the home-page hero.
 */

/* `picture` must not introduce a box of its own, or every rule written
   against `.wrapper img` would stop matching. */
picture {
	display: contents;
}

/* ==========================================================================
   Full-bleed home slider

   The theme floats the hero image at 80% width and washes its left edge to
   the page background, then parks an opaque strip down the right for the
   pagination. Together those cover roughly a third of every photograph.
   For an interiors studio the photograph is the product, so it runs
   edge to edge and the type sits on top of it.
   ========================================================================== */

/* The theme floats the image, which keeps it out of normal flow. Dropping the
   float would push the title block a full viewport down, so the image is taken
   out of flow with absolute positioning instead. */
.mry-project-slider-item .mry-project-frame {
	position: relative;
}

.mry-project-slider-item .mry-project-frame .mry-cover-frame,
.mry-project-slider-item .mry-project-frame.mry-project-half .mry-cover-frame {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mry-project-slider-item .mry-main-title-frame {
	top: 0;
	left: 0;
}

/* A dark scrim replaces the white fade: enough contrast for the type on the
   left and the slider controls along the bottom, while the centre and right
   of the image stay clear. */
.mry-project-slider-item .mry-project-frame .mry-cover-overlay.mry-gradient-overlay {
	background-image:
		linear-gradient(to top, rgba(6, 8, 10, 0.55) 0%, rgba(6, 8, 10, 0) 30%),
		linear-gradient(to bottom, rgba(6, 8, 10, 0.45) 0%, rgba(6, 8, 10, 0) 22%),
		linear-gradient(to right, rgba(6, 8, 10, 0.8) 0%, rgba(6, 8, 10, 0.58) 34%, rgba(6, 8, 10, 0.2) 64%, rgba(6, 8, 10, 0) 86%);
}

/* --- Hero type ----------------------------------------------------------- */

.mry-project-slider-item .mry-main-title-frame .mry-main-title h1,
.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-subtitle,
.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-text {
	color: #ffffff;
}

.mry-project-slider-item .mry-main-title-frame .mry-main-title h1 {
	/* The theme uses a pale glow, which disappears against a photograph. */
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

/* Outlined display text: white stroke instead of near-black. */
.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-border-text {
	-webkit-text-stroke-color: #ffffff;
	-moz-text-stroke-color: #ffffff;
	color: inherit !important;
}

.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-btn,
.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-btn-text {
	color: #ffffff;
	border-color: #ffffff;
}

.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-btn:hover,
.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-btn-text:hover {
	color: #ffffff;
	border-color: #da251c;
	background-color: #da251c;
}

.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-btn-text {
	border-color: transparent;
}

.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-btn-text:hover {
	background-color: transparent;
	border-color: transparent;
	color: #da251c;
}

/* --- Slider controls ----------------------------------------------------- */

/* The pagination rail had a solid background covering the right edge. */
.home .mry-slider-pagination-frame {
	background-color: transparent;
}

.home .mry-slider-pagination-frame .mry-slider-pagination .swiper-pagination-bullet {
	background-color: rgba(255, 255, 255, 0.45);
}

.home .mry-slider-pagination-frame .mry-slider-pagination .swiper-pagination-bullet-active {
	background-color: #ffffff;
}

.home .mry-slider-nav-panel .mry-label,
.home .mry-slider-arrows .mry-label {
	color: #ffffff;
}

.home .mry-slider-arrows .mry-button-next span i,
.home .mry-slider-arrows .mry-button-prev span i {
	color: #ffffff;
}

.home .mry-slider-progress-bar-frame .mry-slider-progress-bar .mry-progress {
	background: rgba(255, 255, 255, 0.25);
}

/* The arrow cluster sat on its own light plate at the bottom right. */
.home .mry-slider-arrows {
	background-color: transparent;
}

/* --- Top panel ----------------------------------------------------------- */

/* A soft scrim under the top bar keeps the menu control legible whichever
   photograph is on screen, including the brightest ones. */
.photo-hero .mry-top-panel {
	background-image: linear-gradient(to bottom, rgba(6, 8, 10, 0.5) 0%, rgba(6, 8, 10, 0) 100%);
}

/* The logo keeps its light plate, as on the furniture site; the menu control
   sits directly on the photograph. */
.photo-hero .mry-top-panel .mry-menu-button-frame {
	background-color: transparent;
}

.photo-hero .mry-top-panel .mry-menu-button-frame .mry-label {
	color: #ffffff;
}

.photo-hero .mry-top-panel .mry-menu-btn .mry-burger span,
.photo-hero .mry-top-panel .mry-menu-btn .mry-burger span:after,
.photo-hero .mry-top-panel .mry-menu-btn .mry-burger span:before {
	background: #ffffff;
}

/* While the menu is open the panel is light again, so restore the dark bars. */
.photo-hero .mry-top-panel .mry-menu-btn.mry-active .mry-burger span,
.photo-hero .mry-top-panel .mry-menu-btn.mry-active .mry-burger span:after,
.photo-hero .mry-top-panel .mry-menu-btn.mry-active .mry-burger span:before {
	background: #0d0d0d;
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 768px) {
	/* The theme drops the type into an opaque card; on a full-bleed photo it
	   reads better straight on the image. */
	.mry-project-slider-item .mry-project-frame .mry-main-title-frame .mry-main-title {
		background-color: transparent;
		max-width: none;
		margin-left: 0;
		padding: 0 15px;
	}

	.mry-project-slider-item .mry-project-frame .mry-cover-overlay.mry-gradient-overlay {
		background-image:
			linear-gradient(to top, rgba(6, 8, 10, 0.75) 0%, rgba(6, 8, 10, 0.15) 45%, rgba(6, 8, 10, 0) 70%),
			linear-gradient(to bottom, rgba(6, 8, 10, 0.4) 0%, rgba(6, 8, 10, 0) 20%);
	}
}


/* ==========================================================================
   Top bar on very narrow screens

   The bar needs 388px of intrinsic width: 208 for the logo plate and 180 for
   the menu control, whose 100x100 magnetic hover target is mostly empty space.
   Narrower than that it overflows, and because the bar is laid out with
   space-between the burger is what falls off the right edge — leaving no way
   to open the menu at all. Trimming the padding and the hover target buys back
   enough room. Devices at 390px and above are untouched.
   ========================================================================== */

@media (max-width: 380px) {
	.mry-app .mry-top-panel .mry-logo-frame {
		padding: 0 20px;
	}

	.mry-app .mry-top-panel .mry-logo-frame .mry-logo {
		width: 104px;
	}

	.mry-menu-button-frame {
		padding-left: 20px;
	}

	/* Still a 64x100 tap target, comfortably above the 44px guideline. */
	.mry-menu-button-frame .mry-menu-btn.mry-magnetic-link {
		width: 64px;
	}
}


/* ==========================================================================
   Case study: stepping inside

   The button on the home page promises immersion, so the project page opens on
   the photograph at full height rather than on a washed-out header strip, and
   the gallery breaks out of the grid at intervals to put you back in the room.
   ========================================================================== */

.chx-case-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.chx-case-hero-media,
.chx-case-hero-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.chx-case-hero-media img {
	object-fit: cover;
	object-position: center;
}

.chx-case-hero-scrim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(to top, rgba(6, 8, 10, 0.55) 0%, rgba(6, 8, 10, 0) 32%),
		linear-gradient(to bottom, rgba(6, 8, 10, 0.5) 0%, rgba(6, 8, 10, 0) 24%),
		linear-gradient(to right, rgba(6, 8, 10, 0.8) 0%, rgba(6, 8, 10, 0.58) 34%, rgba(6, 8, 10, 0.2) 64%, rgba(6, 8, 10, 0) 86%);
}

.chx-case-hero-inner {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 3;
}

.chx-case-hero-inner h1,
.chx-case-hero-inner .mry-subtitle,
.chx-case-hero-inner .mry-text {
	color: #ffffff;
}

.chx-case-hero-inner h1 {
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.chx-case-hero-inner .mry-border-text {
	-webkit-text-stroke-color: #ffffff;
	-moz-text-stroke-color: #ffffff;
	color: inherit !important;
}

.chx-case-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.chx-case-meta .chx-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #da251c;
}

.chx-case-hero-hint {
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.chx-case-hero-hint .mry-label {
	color: #ffffff;
}

/* --- Full-bleed gallery images ------------------------------------------- */

.chx-full-bleed {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 100px;
}

.chx-full-bleed-media {
	position: relative;
	width: 100%;
	height: 78vh;
	overflow: hidden;
}

.chx-full-bleed-media img {
	width: 100%;
	/* Taller than the frame so there is room to drift on scroll. */
	height: 118%;
	object-fit: cover;
	object-position: center;
	will-change: transform;
}

.chx-full-bleed figcaption {
	margin-top: 20px;
}

/* The theme forces every masonry grid to a full viewport tall so a sparse
   gallery still fills the screen. A case study now renders several grids with
   full-bleed images between them, so that rule would add a screen of blank
   space per grid. Here the grids size to their contents instead. */
.case-study .mry-masonry-grid,
.services .mry-masonry-grid,
.works .mry-masonry-grid {
	min-height: 0 !important;
}

/* --- Captions ------------------------------------------------------------ */

.chx-caption {
	color: #424242;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.chx-full-bleed-media {
		height: 56vh;
	}

	.chx-full-bleed {
		margin-bottom: 60px;
	}
}

/* Anyone who has asked for less motion gets a still image. */
@media (prefers-reduced-motion: reduce) {
	.chx-full-bleed-media img {
		height: 100%;
		transform: none !important;
	}
}


/* ==========================================================================
   Display headings

   The theme sets the highlighted half of a heading as outlined text, then
   quietly reverts to solid below 768px — so the same heading read differently
   on a phone than on a desktop. A thin stroke also carries less visual weight
   than the solid half beside it, which puts the emphasis on the wrong words.

   Weight contrast instead: the emphasised phrase is lighter, not hollow. Same
   two-part rhythm, no shouting, and identical at every width.
   ========================================================================== */

.mry-border-text {
	-webkit-text-stroke-width: 0;
	-moz-text-stroke-width: 0;
	color: inherit !important;
	font-weight: 300;
}

/* Over a photograph the hero headings are already white; keep them so. */
.chx-case-hero-inner .mry-border-text,
.mry-project-slider-item .mry-main-title-frame .mry-main-title .mry-border-text {
	color: #ffffff !important;
}

/* The oversized section numerals use the same class for a different purpose. */
.mry-numbering .mry-border-text {
	font-weight: 900;
}


/* ==========================================================================
   Works index: a walk past the rooms

   An index still has to be browsable, so this is not one project per screen —
   that would make eight projects eight swipes. Each project takes a wide band
   with its photograph edge to edge and the title over it, so scrolling reads
   as walking past rooms while still letting the eye skim.

   Isotope keeps running the category filter, so the rows are laid out as a
   single full-width column rather than a masonry grid.
   ========================================================================== */

.chx-works {
	padding-bottom: 100px;
}

/* Tight enough to read as a control strip rather than a white slab between
   two photographs. */
.chx-works-filter {
	padding: 34px 0 30px;
}

.chx-works-grid {
	margin: 0 !important;
	width: 100%;
}

.chx-works-grid .mry-grid-sizer,
.chx-works-grid .mry-masonry-grid-item {
	width: 100%;
}

.chx-work {
	position: relative;
	display: block;
	overflow: hidden;
	height: 76vh;
	min-height: 460px;
	text-decoration: none;
}

.chx-work-media,
.chx-work-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.chx-work-media {
	overflow: hidden;
}

.chx-work-media img {
	/* Taller than the frame so the parallax has somewhere to travel. */
	height: 116%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.9s ease-in-out;
	will-change: transform;
}

.chx-work:hover .chx-work-media img {
	transform: scale(1.04);
}

.chx-work-scrim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(to top, rgba(6, 8, 10, 0.66) 0%, rgba(6, 8, 10, 0) 46%),
		linear-gradient(to right, rgba(6, 8, 10, 0.76) 0%, rgba(6, 8, 10, 0.44) 40%, rgba(6, 8, 10, 0.08) 72%, rgba(6, 8, 10, 0) 84%);
	transition: opacity 0.6s ease-in-out;
}

.chx-work:hover .chx-work-scrim {
	opacity: 0.86;
}

.chx-work-body {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: 56px;
	z-index: 2;
}

.chx-work-body .mry-subtitle {
	color: rgba(255, 255, 255, 0.9);
}

.chx-work-title {
	margin: 0 0 6px;
	color: #ffffff;
	font-size: 54px;
	line-height: 58px;
	font-weight: 900;
	letter-spacing: -1px;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.chx-work-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.chx-work-cta i {
	transition: transform 0.4s ease-in-out;
}

.chx-work:hover .chx-work-cta i {
	transform: translateX(8px);
}

@media (max-width: 992px) {
	.chx-work {
		height: 62vh;
	}

	.chx-work-title {
		font-size: 38px;
		line-height: 42px;
	}
}

@media (max-width: 768px) {
	.chx-work {
		height: 54vh;
		min-height: 360px;
	}

	.chx-work-title {
		font-size: 30px;
		line-height: 34px;
	}

	.chx-work-body {
		padding-bottom: 36px;
	}

	.chx-works-filter {
		padding: 40px 0 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chx-work-media img {
		height: 100%;
		transition: none;
	}

	.chx-work:hover .chx-work-media img {
		transform: none;
	}
}


/* ==========================================================================
   Contact

   Shorter than the other heroes on purpose: contact is a page for doing
   something, so the form should not be a full screen away. The supplied
   showroom photograph is also only 1280px wide, and a shorter band means less
   upscaling.
   ========================================================================== */

/* Grows with its content rather than clipping it: the heading is editable, so
   a longer one on a short window must push the band taller instead of sliding
   up behind the fixed top bar. */
.chx-contact-hero {
	height: auto;
	min-height: 62vh;
}

/* The building carries its own signage across the middle of the frame, so the
   heading is anchored to the bottom where the wall and hedge give it a plain
   backdrop instead of competing with the shopfront lettering. */
.chx-contact-hero .chx-case-hero-inner {
	position: relative;
	align-items: flex-end;
	min-height: 62vh;
	/* Top padding clears the 100px fixed top bar. */
	padding: 150px 0 74px;
}

.chx-contact-hero .chx-case-hero-scrim {
	background-image:
		linear-gradient(to top, rgba(6, 8, 10, 0.82) 0%, rgba(6, 8, 10, 0.36) 40%, rgba(6, 8, 10, 0) 66%),
		linear-gradient(to bottom, rgba(6, 8, 10, 0.42) 0%, rgba(6, 8, 10, 0) 26%),
		linear-gradient(to right, rgba(6, 8, 10, 0.62) 0%, rgba(6, 8, 10, 0.3) 46%, rgba(6, 8, 10, 0) 82%);
}

/* Keeping the heading off the full width stops it running across the
   shopfront glass on the right of the frame. */
.chx-contact-hero .mry-main-title {
	max-width: 720px;
}

.chx-contact-hero .chx-case-hero-hint {
	display: none;
}

.chx-contact-lines {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	line-height: 20px;
}

.chx-contact-lines a {
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	transition: border-color 0.3s ease-in-out;
}

.chx-contact-lines a:hover {
	border-bottom-color: #ffffff;
}

@media (max-width: 768px) {
	.chx-contact-hero {
		height: 54vh;
		min-height: 340px;
	}

	.chx-contact-lines {
		font-size: 13px;
		gap: 6px 18px;
	}
}