/* ==========================================================================
   RECESSED WALL LUMINAIRES PAGE — Bullard Bollards
   Section layouts taken from the Figma frame "Recessed Wall Luminaires" (1920 x 16087).
   Requires squeeze.css for the shared tokens, type scale and primitives.
   Manufacturing / Custom / Testing / Vertical / Dimming use the same design
   values as the Ceiling and Bollards pages.
   ========================================================================== */

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

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

/* ==========================================================================
   2. INTRO — image @78,728 989x857 r19 (+ 244 inset) · copy from x1153
   ========================================================================== */
.rw_intro { padding: calc(143 * var(--s)) 0 calc(142 * var(--s)); }
.rw_intro .sq_split { gap: calc(86 * var(--s)); align-items: flex-start; }
.rw_intro_media { width: 56.07%; flex: none; position: relative; }   /* 989 / 1764 */
.rw_intro_media > img:first-child { width: 100%; height: auto; display: block; border-radius: var(--r); }
.rw_intro_inset { position: absolute; left: 2.02%; bottom: 2.2%; width: 24.67%; height: auto; display: block; }   /* tracks the image at every width */
.rw_intro_copy { flex: 1; padding-top: calc(268 * var(--s)); }
.rw_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(38 * var(--s)); }
.rw_why {
	font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--blue);
	text-transform: uppercase; letter-spacing: calc(2.1 * var(--s)); margin: 0 0 calc(26 * var(--s));
}
.rw_intro_copy .sq_steps { max-width: calc(613 * var(--s)); margin-bottom: calc(27 * var(--s)); }
.rw_intro_copy .sq_step > span { font-size: clamp(13px, calc(17 * var(--s)), 17px); }
.sq_step > b { letter-spacing: calc(0.84 * var(--s)); }

/* ==========================================================================
   3. COLLECTION RANGE — soft band, 4 cards 420x520, image 240, dot list
   ========================================================================== */
.rw_range { background: var(--soft); padding: calc(106 * var(--s)) 0 calc(122 * var(--s)); }
.rw_range h2 { margin-bottom: calc(49 * var(--s)); }
.rw_range_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(28 * var(--s)); }
.rw_range_card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-height: calc(520 * var(--s)); }
.rw_range_card img { width: 100%; height: calc(240 * var(--s)); min-height: 130px; object-fit: cover; display: block; }
.rw_range_body { padding: calc(31 * var(--s)) calc(32 * var(--s)) calc(32 * var(--s)); }
.rw_range_body h3 {
	font-size: clamp(16px, calc(23 * var(--s)), 23px); line-height: 1.2; font-weight: 600; color: var(--ink);
	text-transform: uppercase; letter-spacing: calc(0.46 * var(--s)); margin: 0 0 calc(18 * var(--s));
}
.rw_dots { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(12 * var(--s)); }
.rw_dots li {
	position: relative; padding-left: calc(17 * var(--s));
	font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: var(--muted);
}
.rw_dots li::before { content: "\00B7"; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--blue); }

/* ==========================================================================
   4. MATERIALS — black band, 2 outlined cards 570x470 centred
   ========================================================================== */
.rw_materials { background: #000; padding: calc(131 * var(--s)) 0 calc(119 * var(--s)); }
.rw_materials h2 { color: #fff; text-align: center; margin-bottom: calc(55 * var(--s)); }
.rw_mat_row { display: flex; justify-content: center; gap: calc(28 * var(--s)); }
.rw_mat_card { width: calc(570 * var(--s)); min-width: 0; border: 1px solid rgba(255,255,255,.24); border-radius: var(--r); overflow: hidden; min-height: calc(470 * var(--s)); }
.rw_mat_card img { width: 100%; height: calc(230 * var(--s)); min-height: 130px; object-fit: cover; display: block; }
.rw_mat_body { padding: calc(33 * var(--s)) calc(34 * var(--s)) calc(34 * var(--s)); }
.rw_mat_body h3 {
	font-size: clamp(14px, calc(21 * var(--s)), 21px); line-height: 1.25; font-weight: 600; color: #fff;
	text-transform: uppercase; letter-spacing: calc(0.42 * var(--s)); margin: 0 0 calc(20 * var(--s));
}
.rw_mat_body ul { margin: 0; padding: 0; list-style: none; }
.rw_mat_body li { position: relative; padding-left: calc(25 * var(--s)); font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 2.35; color: rgba(255,255,255,.8); }   /* 40px rows */
.rw_mat_body li::before { content: "\00B7"; position: absolute; left: calc(6 * var(--s)); top: 0; font-weight: 700; }

/* ==========================================================================
   5. MANUFACTURING — 6 steps: image 562x260, 13 gap, card 562x208
   ========================================================================== */
.rw_made { padding: calc(167 * var(--s)) 0 calc(157 * var(--s)); text-align: center; }
.rw_made h2 { margin-bottom: calc(5 * var(--s)); }
.rw_made_intro { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.55; color: var(--muted); margin: 0 0 calc(74 * var(--s)); }
.rw_made_sub {
	font-size: clamp(17px, calc(26 * var(--s)), 26px); line-height: 1.23; font-weight: 600; color: var(--ink);
	text-transform: uppercase; letter-spacing: calc(0.52 * var(--s)); margin: 0 0 calc(68 * var(--s));
}
.rw_made_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(63 * var(--s)) calc(39 * var(--s)); text-align: left; }
.rw_made_item { display: flex; flex-direction: column; gap: calc(13 * var(--s)); }
.rw_made_item img { width: 100%; height: calc(260 * var(--s)); min-height: 140px; object-fit: cover; border-radius: var(--r); display: block; flex: none; }
.rw_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));
}
.rw_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)); }
.rw_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));
}
.rw_made_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: var(--muted); margin: 0; }

/* ==========================================================================
   6. CUSTOM MOLDED SHAPES — copy left (vertically centred), 2 tall photos right
   ========================================================================== */
.rw_custom { padding: 0 0 calc(132 * var(--s)); }
.rw_custom .sq_split { align-items: center; justify-content: space-between; }
.rw_custom_copy { width: calc(628 * var(--s)); flex: none; }
.rw_custom_icon { width: calc(130 * var(--s)); min-width: 70px; height: auto; display: block; margin-bottom: calc(62 * var(--s)); }
.rw_custom_copy h2 { margin-bottom: calc(44 * var(--s)); }
.rw_custom_copy p { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.55; color: var(--muted); margin: 0; }
.rw_custom_imgs { display: flex; gap: calc(37 * var(--s)); }
.rw_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) */

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

/* ==========================================================================
   9. DIMMING OPTIONS — icon beside the heading, 3 cards (28 gap)
   ========================================================================== */
.rw_dimming { padding: calc(148 * var(--s)) 0 calc(212 * var(--s)); }
.rw_dimming .sq_wrap { width: calc(1776 * var(--s)); max-width: 1776px; }   /* icon sits 6px outside the container */
.rw_dimming_head { display: flex; align-items: center; gap: calc(42 * var(--s)); margin-bottom: calc(87 * var(--s)); }
.rw_dimming_head img { width: calc(161 * var(--s)); min-width: 70px; height: auto; display: block; flex: none; }
.rw_dim_row { display: flex; gap: calc(28 * var(--s)); padding: 0 calc(6 * var(--s)); }
.rw_dim_row .sq_card { flex: 1; }
.rw_dim_row .sq_card_body { padding: calc(34 * var(--s)); }

/* ==========================================================================
   10. INSTALLATION ENVIRONMENTS — 5 cards 336x506, slot 353
   ========================================================================== */
.rw_env { padding: 0; }
.rw_env h2 { margin-bottom: calc(80 * var(--s)); }
.rw_env_row { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(22 * var(--s)); }
.rw_env_row .sq_card { border-color: var(--line); min-height: calc(506 * var(--s)); }
.rw_env_row .sq_slot { height: calc(353 * var(--s)); min-height: 180px; }
.rw_env_body { padding: calc(22 * var(--s)) calc(30 * var(--s)) calc(30 * var(--s)); }
.rw_env_body h3 { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.2; font-weight: 600; color: var(--ink); margin: 0 0 calc(18 * var(--s)); }
.rw_env_body p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: var(--muted); margin: 0; }

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

@media (max-width: 991px) {
	.rw_intro .sq_split { align-items: stretch; }
	.rw_intro_media, .rw_intro_copy { width: 100%; flex: none; }
	.rw_intro_copy { padding-top: 0; }
	.rw_intro_copy .sq_steps { max-width: 100%; }

	.rw_mat_row { gap: 16px; }
	.rw_mat_card { flex: 1; width: auto; }

	/* 3-item rows stay 3 across on tablet, they only stack on phones */
	.rw_made_grid, .rw_vert_grid { gap: 16px; }
	.rw_made_card { padding: 18px; }

	.rw_custom { padding-top: 40px; }
	.rw_custom_copy { width: 100%; }
	.rw_custom_icon { width: 80px; margin-bottom: 24px; }
	.rw_custom_imgs { gap: 16px; }
	.rw_custom_imgs img { width: calc(50% - 8px); height: 380px; }

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

	.rw_dimming { padding-top: 70px; }
	.rw_dimming .sq_wrap { width: 100%; }
	.rw_dim_row { gap: 16px; padding: 0; }

	.rw_env_row { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 575px) {
	.rw_range_row, .rw_made_grid, .rw_vert_grid, .rw_env_row { grid-template-columns: 1fr; }
	.rw_mat_row { flex-direction: column; }
	.rw_custom_imgs img { height: 260px; min-height: 0; }
	.rw_dim_row { flex-direction: column; }
	.rw_dimming { padding-top: 50px; }
	.rw_h2_lg { font-size: 28px; }
}

/* long "See … Collection" label: the design sets it at 23px */
.sq .blackBtn:not(.sq_btn_md) { font-size: clamp(13px, calc(23 * var(--s)), 23px); }