/*--------------------------------------------------------------
# Classic Polo — Design Studio
#
# The copy names six physical spaces: a Zone, a Suite, a Library, a
# Room and two Labs. So the studio is presented as a building you can
# walk rather than a list of features — a directory of rooms, not a
# grid of cards.
#
# Deliberately not the retail page's device. Retail argued a split
# (their shelves / our stores) and used facing columns; this page
# argues capability under one roof, and uses a directory.
#
# Tokens come from .cp-sec in cp-sections.css.
--------------------------------------------------------------*/

/* Opening ---------------------------------------------------------- */

.cp-d-open .cp-d-statement .elementor-heading-title {
	font-size: clamp( 1.75rem, 3.4vw, 2.75rem );
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

/* The rooms -------------------------------------------------------
   A directory, so entries are not numbered: these are spaces that
   operate together, not steps that happen in order. */

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

/* The two entries on the top row carry the heavier rule that opens the
   directory; every other entry is separated by a hairline. */
.cp-d-rooms > *:nth-child( -n + 2 ) {
	border-top: 2px solid var( --cp-ink );
}

.cp-d-room .cp-d-roomname .elementor-heading-title {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var( --cp-ink );
}

.cp-sec .cp-d-room p {
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 46ch;
}

/* A gold tick sits where the room name begins, small enough to read
   as a marker on a plan rather than an icon. */
.cp-d-room .cp-d-roomname .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	vertical-align: 0.18em;
	background: var( --cp-gold );
}

/* The team --------------------------------------------------------- */

.cp-d-team-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-d-team-list li {
	padding: 13px 0;
	border-top: 1px solid var( --cp-rule );
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var( --cp-ink );
}

.cp-d-team-list li:first-child {
	border-top: 0;
}

/* Results ---------------------------------------------------------
   The payoff, and the one dark band on the page. Outcomes are set
   large and stacked, so each is read rather than scanned. */

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

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

.cp-sec.cp-d-results p {
	color: rgba( 255, 255, 255, 0.78 );
}

.cp-sec.cp-d-results .cp-eyebrow .elementor-heading-title {
	color: rgba( 255, 255, 255, 0.6 );
}

.cp-d-outcomes ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-d-outcomes li {
	padding: 20px 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.16 );
	font-size: clamp( 1rem, 1.6vw, 1.25rem );
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: #fff;
}

.cp-d-outcomes li:first-child {
	border-top: 1px solid rgba( 255, 255, 255, 0.32 );
}

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

@media screen and ( max-width: 1024px ) {
	/* One column on small screens, so only the first entry opens it. */
	.cp-d-rooms > *:nth-child( 2 ) {
		border-top: 1px solid var( --cp-rule );
	}
}