/* ==========================================================================
   CEILING LUMINAIRES PAGE — Bullard Bollards
   Section layouts taken from the Figma frame "Ceiling" (1920 x 16798).
   Requires squeeze.css for the shared tokens, type scale and primitives.
   ========================================================================== */

.sq { --cl-soft-ink: #B7B0FF; }

/* ==========================================================================
   1. BANNER — same as the other squeeze pages, plus the design's text shadow
   ========================================================================== */
.cl_banner h1, .cl_banner h3 { text-shadow: -5px 0 4px rgba(0,0,0,.25); }

/* ==========================================================================
   2. INTRO — image @78,728 989x857 r19 (+ 244 inset) · copy from x1149,
      bottom-aligned with the image
   ========================================================================== */
.cl_intro { padding: calc(143 * var(--s)) 0 calc(142 * var(--s)); }
.cl_intro .sq_split { gap: calc(82 * var(--s)); align-items: flex-start; }
.cl_intro_media { width: 56.07%; flex: none; position: relative; }   /* 989 / 1764 */
.cl_intro_media > img:first-child { width: 100%; height: auto; display: block; border-radius: var(--r); }
.cl_intro_inset {
	position: absolute; left: 4.04%; bottom: 4.55%;   /* 39 / 857 — tracks the image at every width */
	width: 24.7%; height: auto; display: block;
}
.cl_intro_copy { flex: 1; padding-top: calc(323 * var(--s)); }   /* heading sits 323 below the image top */
.cl_h2_lg { font-size: clamp(26px, calc(44 * var(--s)), 44px); line-height: 1.25; font-weight: 600; color: var(--ink); margin: 0 0 calc(29 * var(--s)); }
.cl_intro_copy .sq_lead { color: var(--muted); max-width: calc(640 * var(--s)); margin-bottom: calc(34 * var(--s)); }
.cl_pills { display: flex; flex-wrap: wrap; gap: calc(9 * var(--s)); margin-bottom: calc(46 * var(--s)); }
.cl_pills span {
	display: inline-block; border: 1px solid #000; border-radius: var(--r);
	padding: calc(15 * var(--s)) calc(28 * var(--s));
	font-size: clamp(13px, calc(20 * var(--s)), 20px); line-height: 1.41; font-weight: 500; color: var(--ink);
}

/* ==========================================================================
   3. MATERIALS — soft band, 2 cards 854x330 with a 152-tall texture strip
   ========================================================================== */
.cl_materials { background: var(--soft); padding: calc(91 * var(--s)) 0 calc(96 * var(--s)); }
.cl_materials h2 { margin-bottom: calc(8 * var(--s)); }
.cl_mat_row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(57 * var(--s)); }
.cl_mat_card { background: #fff; border: 1px solid rgba(0,0,0,.24); border-radius: var(--r); overflow: hidden; min-height: calc(330 * var(--s)); }
.cl_mat_card img { width: 100%; height: calc(152 * var(--s)); min-height: 80px; object-fit: cover; display: block; }
.cl_mat_body { padding: calc(32 * var(--s)) calc(31 * var(--s)) calc(30 * var(--s)); }
.cl_mat_body h3 {
	font-size: clamp(15px, calc(21 * var(--s)), 21px); line-height: 1.25; font-weight: 600; color: var(--ink);
	text-transform: uppercase; letter-spacing: calc(0.42 * var(--s)); margin: 0 0 calc(28 * var(--s));
}
.cl_mat_body p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: var(--muted); margin: 0; }

/* ==========================================================================
   4. MANUFACTURING — 6 steps: image 562x260, 13 gap, card 562x208
   ========================================================================== */
.cl_made { padding: calc(196 * var(--s)) 0 calc(157 * var(--s)); text-align: center; }
.cl_made h2 { margin-bottom: calc(5 * var(--s)); }
.cl_made_intro { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.55; color: var(--muted); margin: 0 0 calc(174 * var(--s)); }
.cl_made_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(63 * var(--s)) calc(39 * var(--s)); text-align: left; }
.cl_made_item { display: flex; flex-direction: column; gap: calc(13 * var(--s)); }
.cl_made_item img { width: 100%; height: calc(260 * var(--s)); min-height: 140px; object-fit: cover; border-radius: var(--r); display: block; flex: none; }
.cl_made_card {
	flex: 1; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
	padding: calc(32 * var(--s)); min-height: calc(208 * var(--s));
}
.cl_made_card b { display: block; font-size: clamp(20px, calc(32 * var(--s)), 32px); line-height: 1; font-weight: 600; color: var(--blue); margin-bottom: calc(12 * var(--s)); }
.cl_made_card h3 {
	font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.2; font-weight: 600; color: var(--ink);
	text-transform: uppercase; letter-spacing: calc(1.14 * var(--s)); margin: 0 0 calc(11 * var(--s));
}
.cl_made_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: var(--muted); margin: 0; }

/* ==========================================================================
   5. CUSTOM MOLDED SHAPES — copy left (vertically centred), 2 tall photos right
   ========================================================================== */
.cl_custom { padding: 0 0 calc(132 * var(--s)); }
.cl_custom .sq_split { align-items: center; justify-content: space-between; }
.cl_custom_copy { width: calc(628 * var(--s)); flex: none; }
.cl_custom_icon { width: calc(130 * var(--s)); min-width: 70px; height: auto; display: block; margin-bottom: calc(62 * var(--s)); }
.cl_custom_copy h2 { margin-bottom: calc(44 * var(--s)); }
.cl_custom_copy p { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.55; color: var(--muted); margin: 0; }
.cl_custom_imgs { display: flex; gap: calc(37 * var(--s)); }
.cl_custom_imgs img { width: calc(424 * var(--s)); height: calc(755 * var(--s)); min-height: 260px; object-fit: cover; border-radius: var(--r); display: block; }

/* 6 columns of 272; odd = image then text, even = text then image (image always 163 from the top) */

/* ==========================================================================
   7. VERTICAL INTEGRATION — theme-blue band, photo over an outlined card
   ========================================================================== */
.cl_vertical { background: var(--blue); padding: calc(106 * var(--s)) 0 calc(103 * var(--s)); }
.cl_vert_head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(60 * var(--s)); margin-bottom: calc(73 * var(--s)); }
.cl_vert_head > div { max-width: calc(610 * var(--s)); }
.cl_eyebrow_soft {
	font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--cl-soft-ink);
	text-transform: uppercase; letter-spacing: calc(2.1 * var(--s)); margin: 0 0 calc(23 * var(--s));
}
.cl_vertical h2 { color: #fff; margin-bottom: calc(23 * var(--s)); }
.cl_vert_lead { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.45; color: rgba(255,255,255,.88); margin: 0; }
.cl_vert_head .sq_btn_white { margin-top: calc(24 * var(--s)); text-transform: uppercase; }
.cl_vert_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(41 * var(--s)); }
.cl_vert_item { display: flex; flex-direction: column; gap: calc(26 * var(--s)); }
.cl_vert_item img { width: 100%; height: calc(408 * var(--s)); min-height: 180px; object-fit: cover; border-radius: var(--r); display: block; }
.cl_vert_card {
	flex: 1; border: 1px solid rgba(255,255,255,.24); border-radius: var(--r);
	padding: calc(36 * var(--s)); min-height: calc(197 * var(--s));
}
.cl_vert_card b {
	display: block; font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600;
	color: var(--cl-soft-ink); letter-spacing: calc(1.5 * var(--s)); margin-bottom: calc(15 * var(--s));
}
.cl_vert_card p { font-size: clamp(15px, calc(23 * var(--s)), 23px); line-height: 1.25; font-weight: 600; color: #fff; margin: 0; }

/* ==========================================================================
   8. FINISH OPTIONS — centred heading, 4 cards 422x318, swatch 230 tall
   ========================================================================== */
.cl_finish { padding: calc(168 * var(--s)) 0 calc(192 * var(--s)); }
.cl_finish h2 { text-align: center; margin-bottom: calc(52 * var(--s)); }
.cl_finish_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(25 * var(--s)); }
.cl_finish_card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cl_finish_card img { width: 100%; height: calc(230 * var(--s)); min-height: 120px; object-fit: cover; display: block; }
.cl_finish_card h3 {
	font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.18; font-weight: 600; color: var(--ink);
	margin: 0; padding: calc(29 * var(--s)) calc(30 * var(--s)) calc(33 * var(--s));
}

/* ==========================================================================
   9. LIGHT SOURCE — icon 203x305 · heading + warranty card · ruled list
      (this section runs on a 1568 container: x176 → x1744)
   ========================================================================== */
.cl_source { background: var(--soft); padding: calc(107 * var(--s)) 0 calc(82 * var(--s)); }
.cl_source_wrap {
	width: calc(1568 * var(--s)); max-width: 1568px; margin: 0 auto;
	display: flex; align-items: flex-start;
}
.cl_source_icon { width: calc(203 * var(--s)); min-width: 70px; height: auto; display: block; flex: none; margin-right: calc(56 * var(--s)); }
.cl_source_copy { width: calc(427 * var(--s)); flex: none; margin: calc(3 * var(--s)) calc(80 * var(--s)) 0 0; }
.cl_source_copy h2 { margin-bottom: calc(28 * var(--s)); }
.cl_source_card {
	background: #fff; border: 1px solid rgba(0,0,0,.22); border-radius: var(--r);
	padding: calc(31 * var(--s)) calc(40 * var(--s)) calc(28 * var(--s)); min-height: calc(208 * var(--s));
}
.cl_source_eyebrow {
	font-size: clamp(11px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--muted);
	text-transform: uppercase; letter-spacing: calc(1.8 * var(--s)); margin: 0 0 calc(12 * var(--s)); white-space: nowrap;
}
.cl_source_card b { display: block; font-size: clamp(36px, calc(72 * var(--s)), 72px); line-height: 1; font-weight: 600; color: var(--blue); margin-bottom: calc(22 * var(--s)); }
.cl_source_card span { display: block; font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.2; font-weight: 500; color: var(--ink); }
.cl_source_list { flex: 1; }
.cl_source_list p {
	border-top: 1px solid rgba(0,0,0,.22); padding: calc(22 * var(--s)) 0; margin: 0;
	font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.5; color: var(--ink);
}

/* ==========================================================================
   10. BEAM ANGLES & DISTRIBUTION + OPTICS — one black band
   ========================================================================== */
.cl_beam { background: #000; padding: calc(116 * var(--s)) 0 calc(107 * var(--s)); text-align: center; }
.cl_beam h2 { color: #fff; margin-bottom: calc(16 * var(--s)); }
.cl_beam_sub { font-size: clamp(13px, calc(20 * var(--s)), 20px); line-height: 1.5; color: rgba(255,255,255,.85); margin: 0 0 calc(47 * var(--s)); }
.cl_beam_img { width: calc(1531 * var(--s)); max-width: 100%; height: auto; display: block; margin: 0 auto calc(47 * var(--s)); border-radius: var(--r); }
.cl_beam_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(28 * var(--s)); width: calc(1073 * var(--s)); max-width: 100%; margin: 0 auto; text-align: left; }
.cl_beam_card { border: 1px solid rgba(255,255,255,.22); border-radius: var(--r); padding: calc(36 * var(--s)); min-height: calc(167 * var(--s)); }
.cl_beam_card h3 {
	font-size: clamp(16px, calc(26 * var(--s)), 26px); line-height: 1.2; font-weight: 600; color: #fff;
	text-transform: uppercase; letter-spacing: calc(1.04 * var(--s)); margin: 0 0 calc(13 * var(--s));
}
.cl_beam_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: rgba(255,255,255,.8); margin: 0; }

/* full-bleed rule, then the Optics block */
.cl_optics { border-top: 1px solid rgba(255,255,255,.2); margin-top: calc(102 * var(--s)); padding-top: calc(99 * var(--s)); }
.cl_optics_title {
	font-size: clamp(17px, calc(26 * var(--s)), 26px); line-height: 1.23; font-weight: 600; color: #fff;
	text-transform: uppercase; letter-spacing: calc(0.52 * var(--s)); margin: 0 0 calc(118 * var(--s));
}
.cl_optics_row {
	display: grid; grid-template-columns: 1fr 1fr; gap: calc(127 * var(--s));
	width: calc(1531 * var(--s)); max-width: 100%; margin: 0 auto; text-align: left;
}
.cl_optic { display: flex; align-items: center; gap: calc(44 * var(--s)); }
.cl_optic img { width: calc(316 * var(--s)); min-width: 120px; height: calc(323 * var(--s)); min-height: 122px; object-fit: cover; border-radius: var(--r); display: block; flex: none; }
.cl_optic_txt { flex: 1; border-top: 1px solid rgba(255,255,255,.16); padding: calc(22 * var(--s)) 0; }
.cl_optic_txt h3 { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.2; font-weight: 600; color: #fff; margin: 0 0 calc(7 * var(--s)); }
.cl_optic_txt p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: rgba(255,255,255,.8); margin: 0; }

/* ==========================================================================
   11. CTA — design has 198px above it (after the black band)
   ========================================================================== */
.cl_cta { padding-top: calc(198 * var(--s)); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
	.cl_finish_row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 991px) {
	.cl_intro .sq_split { align-items: stretch; }
	.cl_intro_copy { padding-top: 0; }
	.cl_intro_media, .cl_intro_copy { width: 100%; flex: none; }
	.cl_intro_copy .sq_lead { max-width: 100%; }

	/* 3-item rows stay 3 across on tablet, they only stack on phones */
	.cl_made_grid, .cl_vert_grid, .cl_beam_row { gap: 16px; }
	.cl_made_card { padding: 18px; }
	.cl_beam_card { padding: 20px 16px; }
	.cl_mat_row { gap: 16px; }

	.cl_custom { padding-top: 40px; }
	.cl_custom_copy { width: 100%; }
	.cl_custom_icon { width: 80px; margin-bottom: 24px; }
	.cl_custom_imgs { gap: 16px; }
	.cl_custom_imgs img { width: calc(50% - 8px); height: 380px; }

	.cl_vert_head { flex-direction: column; gap: 24px; }
	.cl_vert_head > div { max-width: 100%; }
	.cl_vert_head .sq_btn_white { margin-top: 0; }

	.cl_source_wrap { width: 100%; padding: 0 24px; flex-wrap: wrap; gap: 24px; }
	.cl_source_icon { width: 80px; margin: 0; }
	.cl_source_copy { width: auto; flex: 1; margin: 0; }
	.cl_source_list { flex: 1 1 100%; }

	.cl_optics_row { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 575px) {
	.cl_mat_row, .cl_made_grid, .cl_vert_grid, .cl_beam_row { grid-template-columns: 1fr; }
	.cl_finish_row { gap: 12px; }
	.cl_custom_imgs img { height: 260px; min-height: 0; }
	.cl_source_wrap { padding: 0 18px; }
	.cl_source_copy { flex: 1 1 100%; }
	.cl_source_eyebrow { white-space: normal; }
	.cl_optic { gap: 16px; }
	.cl_optic img { width: 120px; height: 122px; }
	.cl_h2_lg { font-size: 30px; }
	.cl_pills span { padding: 10px 16px; }
}