/*--------------------------------------------------------------
# Classic Polo — section styles for Elementor pages
#
# Every rule hooks a cp-* class applied to an Elementor container or
# widget, so the content itself stays ordinary Elementor widgets that
# the team can edit. Type and colour come from the Elementor kit; this
# file only handles structure the editor cannot express on its own.
--------------------------------------------------------------*/

.cp-sec {
	--cp-navy  : var( --e-global-color-primary, #0F2A5F );
	--cp-blue  : var( --e-global-color-secondary, #1F4ED8 );
	--cp-gold  : var( --e-global-color-accent, #F2B705 );
	--cp-ink   : var( --e-global-color-text, #1C1C1C );
	--cp-muted : #5B6472;
	--cp-rule  : #E5E7EB;
	--cp-wash  : #F4F6FA;
}

/* Shared -------------------------------------------------------- */

/* Section labels read as spec labels: mono, tracked, upper. */
.cp-eyebrow,
.cp-eyebrow .elementor-heading-title {
	font-family: var( --monofont ) !important;
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.14em !important;
	color: var( --cp-muted );
	line-height: 1.4 !important;
}

.cp-lede,
.cp-lede p {
	font-size: clamp( 1rem, 1.35vw, 1.1875rem );
	line-height: 1.65;
	max-width: 52ch;
}

.cp-measure p {
	max-width: 68ch;
}

/* Values strip — the three brand lines --------------------------- */

.cp-values {
	border-top: 1px solid var( --cp-rule );
	border-bottom: 1px solid var( --cp-rule );
}

.cp-values .cp-value {
	border-left: 1px solid var( --cp-rule );
}

.cp-values .cp-value:first-child {
	border-left: 0;
}

.cp-values .cp-value .elementor-heading-title {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var( --cp-ink );
	letter-spacing: 0;
}

/* Proof row — figures taken from the company's own copy ---------- */

.cp-proof {
	border-top: 1px solid var( --cp-rule );
	border-bottom: 1px solid var( --cp-rule );
}

.cp-proof .cp-fact {
	border-left: 1px solid var( --cp-rule );
}

.cp-proof .cp-fact:first-child {
	border-left: 0;
}

.cp-proof .cp-fact__n .elementor-heading-title {
	/* Figures sit in mono so the four columns align on the digit. */
	font-family: var( --monofont );
	font-size: clamp( 1.4rem, 2.4vw, 2.125rem );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var( --cp-navy );
	font-variant-numeric: tabular-nums;
}

.cp-sec .cp-proof .cp-fact__l p,
.cp-sec .cp-proof .cp-fact__l {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --cp-muted );
}

/* The production line — the page's signature ---------------------
   Spinning to garmenting is a real ordered chain, so the stages are
   numbered and strung on a single line. */

.cp-sec.cp-line {
	background: var( --cp-navy );
}

.cp-sec.cp-line .elementor-heading-title,
.cp-sec.cp-line h1, .cp-sec.cp-line h2, .cp-sec.cp-line h3, .cp-sec.cp-line h4 {
	color: #fff;
}

.cp-sec.cp-line .cp-eyebrow .elementor-heading-title {
	color: rgba( 255, 255, 255, 0.65 );
}

.cp-sec.cp-line p {
	color: rgba( 255, 255, 255, 0.75 );
}

.cp-stations {
	position: relative;
}

.cp-stations::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: repeating-linear-gradient(
		to bottom,
		var( --cp-gold ) 0 8px,
		transparent 8px 16px
	);
}

.cp-station {
	position: relative;
	padding-left: 46px !important;
}

.cp-station::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 6px;
	width: 16px;
	height: 16px;
	background: var( --cp-gold );
	transform: rotate( 45deg );
}

.cp-station .cp-stage .elementor-heading-title {
	font-family: var( --monofont );
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --cp-gold );
	line-height: 1.4;
}

.cp-sec .cp-station p {
	font-size: 0.9375rem;
	max-width: 56ch;
}

.cp-station .cp-output .elementor-heading-title {
	display: inline-block;
	font-family: var( --monofont );
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	padding: 7px 12px;
	line-height: 1;
}

/* Card rows — products and awards -------------------------------- */

.cp-card {
	border-top: 2px solid var( --cp-ink );
}

.cp-sec .cp-card p {
	font-size: 0.9375rem;
}

.cp-award {
	border-top: 2px solid var( --cp-gold );
}

.cp-sec .cp-award p {
	font-size: 0.9375rem;
}

.cp-sec.cp-wash {
	background: var( --cp-wash );
}

/* Gallery -------------------------------------------------------- */

.cp-gallery .cp-shot img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.cp-gallery .cp-shot:hover img {
	transform: scale( 1.04 );
}

/* Clients ---------------------------------------------------------
   A quiet logo wall. Logos sit on white tiles so mixed artwork with
   different backgrounds still reads as one row. */

.cp-clients .cp-logo {
	background: #fff;
	border: 1px solid var( --cp-rule );
	min-height: 108px;
}

.cp-clients .cp-logo img {
	max-height: 56px;
	width: auto;
	margin-inline: auto;
	display: block;
	filter: grayscale( 1 );
	opacity: 0.72;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.cp-clients .cp-logo:hover img {
	filter: none;
	opacity: 1;
}

/* Testimonials ----------------------------------------------------
   The source films are vertical phone video, so the frame is built
   for that shape rather than letterboxing them into a wide box. */

.cp-tst .cp-clip {
	background: var( --cp-navy );
}

.cp-tst .cp-clip video,
.cp-tst .cp-clip .elementor-wrapper {
	aspect-ratio: 9 / 16;
}

.cp-tst .cp-clip video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cp-tst .cp-clip .elementor-video,
.cp-tst .cp-clip iframe {
	aspect-ratio: 9 / 16;
	width: 100%;
	height: 100%;
}

/* Closing band --------------------------------------------------- */

.cp-sec.cp-closing {
	background: var( --cp-navy );
}

.cp-sec.cp-closing .elementor-heading-title,
.cp-sec.cp-closing h2 {
	color: #fff;
}

.cp-sec.cp-closing .cp-eyebrow .elementor-heading-title {
	color: rgba( 255, 255, 255, 0.65 );
}

.cp-sec.cp-closing p {
	color: rgba( 255, 255, 255, 0.75 );
}

/* A gold button reads as the single call to action on navy. */
.cp-sec.cp-closing .elementor-button {
	background-color: var( --cp-gold );
	color: var( --cp-ink );
}

.cp-sec.cp-closing .elementor-button:hover {
	background-color: #ffc927;
	color: var( --cp-ink );
}

/* Responsive ----------------------------------------------------- */

@media screen and ( max-width: 1024px ) {
	.cp-values .cp-value,
	.cp-proof .cp-fact {
		border-left: 0;
		border-top: 1px solid var( --cp-rule );
	}

	.cp-values .cp-value:first-child,
	.cp-proof .cp-fact:first-child {
		border-top: 0;
	}
}

/* Image slots ------------------------------------------------------
   Placeholders on purpose. Each is a real Elementor image widget, so
   swapping in the final photograph is a single click in the editor.
   The dashed outline and the caption make it obvious which slots are
   still waiting for artwork. */

.cp-r-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var( --cp-wash );
}

.cp-r-shot--wide img {
	aspect-ratio: 21 / 9;
}

.cp-r-shot--tall img {
	aspect-ratio: 4 / 5;
}

/* Marks a slot as unfilled. Remove this rule once the photography lands,
   or simply swap the image — a real image keeps the frame either way. */
.cp-r-shot {
	outline: 2px dashed var( --cp-rule );
	outline-offset: -2px;
}

.cp-r-cap .elementor-heading-title {
	font-family: var( --monofont );
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.5;
	color: var( --cp-muted );
}

/* On the navy band the outline and caption need to lift, not sink. */
.cp-r-onnavy .cp-r-shot {
	outline-color: rgba( 255, 255, 255, 0.28 );
}

.cp-r-onnavy .cp-r-shot img {
	background: rgba( 255, 255, 255, 0.06 );
}

.cp-sec.cp-r-ebo .cp-r-onnavy .cp-r-cap .elementor-heading-title {
	color: rgba( 255, 255, 255, 0.6 );
}

/* `--tall` is a 4:5 portrait frame — used for the two founder
   headshots on About Us, and for a workshop shot on Design Studio and
   Retail Network. It used to flatten to 16:9 on anything 1024px and
   under, which is backwards for a person: cover-cropping a 4:5
   portrait into a 16:9 landscape keeps only about a third of the
   photo's height, centred — on both founder photos that band lands
   across the shoulders, cutting the face off entirely. Portraits stay
   portraits at every width; nothing here needed a landscape variant. */

/* Section gutters ---------------------------------------------------
   The Elementor kit's boxed container width is 1450px. On any viewport
   narrower than that — which is most laptops — a boxed container has no
   horizontal margin at all and content runs to the window edge.
   
   Padding goes on the inner wrapper rather than the container so that
   full-bleed backgrounds (the navy bands) still reach the edges while
   their content stays inset. */

/* Elementor declares `.e-con > .e-con-inner { padding-inline-* }` at (0,2,0)
   and its stylesheet loads after this one, so a matching (0,2,0) selector
   loses the tie. Compounding .e-con takes this to (0,3,0) and it wins on
   weight rather than on load order. */
.cp-sec.e-con > .e-con-inner {
	padding-inline: clamp( 20px, 4vw, 56px );
}

/* Rows nested inside a section already sit within that gutter. */
.cp-sec.e-con .e-con-inner .e-con-inner {
	padding-inline: 0;
}

/* Split rows — a photograph beside copy, but only above tablet --------
   Reusable primitive for the "text beside a supporting image" shape
   that Home, Design Studio, Our Retail Network and Warehousing all
   build. In every one of those the two columns were left without a
   class of their own, so on a phone or small tablet there was no hook
   to make them stack — they just squeezed.

   Elementor sets a container's width through a --width custom
   property, declared at
   `.elementor-<postID> .elementor-element.elementor-element-<id>` —
   three classes, (0,3,0) — scoped to `@media (min-width: 480px)` with
   no upper bound, and it only forces --width:100% and wrapping of its
   own accord below its 767px mobile breakpoint. Two columns that
   already sum to 100% never overflow to trigger that wrap, so from
   480px up to this file's own 1024px tablet cutoff they sit side by
   side, each squeezed into a sliver too narrow to read.

   Overriding the property is the fix, but the selector needs to clear
   (0,3,0) first — compounding .e-con onto both halves takes this to
   (0,4,0), which wins on weight rather than on load order. */
@media screen and ( max-width: 1024px ) {
	.cp-split.e-con {
		--flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.cp-split.e-con > .cp-split-body.e-con,
	.cp-split.e-con > .cp-split-media.e-con {
		--width: 100%;
		--padding-left: 0px;
		--padding-right: 0px;
	}

	/* Body sits first in the markup on every one of these rows, so the
	   stack reads copy-then-photograph; the media block only needs a
	   little air above it once it drops onto its own line. */
	.cp-split.e-con > .cp-split-media.e-con {
		--padding-top: 20px;
	}
}

/* Home hero banner — fit the photograph to the phone instead of
   cropping it ---------------------------------------------------------
   All three home-page hero slides are one wide photograph
   (2560×1173, a 2.18:1 ratio) shown with background-size:cover inside
   a box pinned to 60vh. A phone is nowhere near that shape, so cover
   was cutting deep into both sides of the image — on all three
   banners that meant slicing straight through the headline that's
   baked into the photograph itself.

   The fix is to stop asking the box to be a shape the photograph
   isn't: at this width the container's height comes from the image's
   own ratio instead of a fixed vh figure, so cover has nothing left
   to crop — the whole photograph shows, resized to the width of the
   screen. Elementor sets min-height through a --min-height custom
   property read at (0,3,0) with no breakpoint of its own below
   tablet, so this needs to clear that specificity, which compounding
   four more of the element's own existing classes does. */
@media screen and ( max-width: 767px ) {
	.emts-advance-carousel .elementor-element-ac90cce.e-con.e-parent.e-flex.e-con-boxed {
		min-height: 0;
		height: auto;
		aspect-ratio: 2560 / 1173;
	}
}

/* That fix only shrinks the slide's own background box. The carousel
   sits inside a second, outer section (the widget's wrapper) that
   carries its own separate min-height:50vh, unconditionally, with no
   breakpoint of its own at all — so once the slide inside shrank to
   fit the photograph, this outer section still held the floor open,
   leaving the leftover 50vh as blank space beneath the now-shorter
   image. Nothing else in the chain — the carousel widget's own
   wrapper, Swiper's container/wrapper/slide elements — sets a height
   independent of its content, so letting this one section size itself
   to its content is enough to close the gap. */
@media screen and ( max-width: 767px ) {
	.elementor-element-181f856.e-con.e-parent.e-flex.no-full-with {
		min-height: 0;
	}
}