/* ==========================================================================
   LINEAR WALL WASHER PAGE — Bullard Bollards
   Figma frame "Linear Wall Washer" (1920 x 14819). Section sizes were measured
   from the full-frame screenshot; shared sections (testing, vertical, light
   source, dimming) reuse the exact values of the earlier squeeze pages.
   Requires squeeze.css for the shared tokens, type scale and primitives.
   ========================================================================== */

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

/* dot list (The full range) */
.lw_dots { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(12 * var(--s)); }
.lw_dots li {
	position: relative; padding-left: calc(17 * var(--s));
	font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.47; color: var(--muted);
}
.lw_dots li::before { content: "\00B7"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--blue); }

/* ==========================================================================
   1. BANNER — 632 tall like the Pool page
   ========================================================================== */
.lw_banner { height: clamp(260px, calc(632 * var(--s)), 632px); }
.lw_banner h1, .lw_banner h3 { text-shadow: -5px 0 4px rgba(0,0,0,.25); }

/* ==========================================================================
   2. INTRO — image @78,773 921x857 r19 · copy from x1116, bottom-aligned
   ========================================================================== */
.lw_intro { padding: calc(141 * var(--s)) 0 calc(142 * var(--s)); }
.lw_intro .sq_split { gap: calc(117 * var(--s)); align-items: flex-start; }
.lw_intro_media { width: 52.21%; flex: none; }   /* 921 / 1764 */
.lw_intro_media img { width: 100%; height: auto; display: block; border-radius: var(--r); }
.lw_intro_copy { flex: 1; padding-top: calc(79 * var(--s)); }   /* heading starts 79 below the image top */
.lw_h2_lg { font-size: clamp(26px, calc(55 * var(--s)), 55px); line-height: 1; font-weight: 600; color: var(--ink); margin: 0 0 calc(36 * var(--s)); }
.lw_intro_copy .sq_lead { color: var(--muted); max-width: calc(640 * var(--s)); margin-bottom: calc(33 * var(--s)); }
.lw_why {
	font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--blue);
	letter-spacing: calc(2.1 * var(--s)); margin: 0 0 calc(17 * var(--s));
}
.lw_intro_copy .sq_steps { max-width: calc(680 * var(--s)); margin-bottom: calc(46 * var(--s)); }
.sq_step > b { letter-spacing: calc(0.84 * var(--s)); }

/* ==========================================================================
   3. THE FULL RANGE — soft band, 3 cards 564 wide, image 240
   ========================================================================== */
.lw_range { background: var(--soft); padding: calc(146 * var(--s)) 0 calc(146 * var(--s)); }
.lw_range h2 { margin-bottom: calc(52 * var(--s)); }
.lw_range_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(35 * var(--s)); }
.lw_range_card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-height: calc(464 * var(--s)); }
.lw_range_card img { width: 100%; height: calc(240 * var(--s)); min-height: 120px; object-fit: cover; display: block; }
.lw_range_body { padding: calc(28 * var(--s)) calc(32 * var(--s)) calc(32 * var(--s)); }
.lw_range_body h3 {
	display: flex; align-items: center; gap: calc(16 * var(--s));
	font-size: clamp(16px, calc(23 * var(--s)), 23px); line-height: 1.17; font-weight: 600; color: var(--ink);
	letter-spacing: calc(0.46 * var(--s)); margin: 0 0 calc(20 * var(--s));
}
.lw_badge {
	display: inline-block; background: var(--blue); color: #fff; border-radius: 30px;
	padding: calc(4 * var(--s)) calc(14 * var(--s));
	font-size: clamp(9px, calc(12 * var(--s)), 12px); line-height: 1.3; font-weight: 600; letter-spacing: calc(0.6 * var(--s));
}

/* ==========================================================================
   4. MATERIALS — 3 images 563x542 over soft cards (h 158)
   ========================================================================== */
.lw_materials { padding: calc(143 * var(--s)) 0 calc(180 * var(--s)); }
.lw_materials h2 { margin-bottom: calc(76 * var(--s)); }
.lw_mat_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(35 * var(--s)); }
.lw_mat_item { display: flex; flex-direction: column; gap: calc(26 * var(--s)); }
.lw_mat_item img { width: 100%; height: calc(542 * var(--s)); min-height: 220px; object-fit: cover; border-radius: var(--r); display: block; }
.lw_mat_card {
	flex: 1; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
	padding: calc(34 * var(--s)); min-height: calc(158 * var(--s));
}
.lw_mat_card h3 { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.23; font-weight: 600; color: var(--ink); margin: 0 0 calc(15 * var(--s)); }
.lw_mat_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.47; color: var(--muted); margin: 0; }

/* 6 columns of 272; odd = image then text, even = text then image */

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

/* ==========================================================================
   7. LIGHT SOURCE & LUMEN PACKAGE — ~1208 block: icon + heading · ruled list 745
   ========================================================================== */
.lw_source { padding: calc(165 * var(--s)) 0 calc(185 * var(--s)); }
.lw_source_wrap { width: calc(1208 * var(--s)); max-width: 100%; margin: 0 auto; display: flex; align-items: center; gap: calc(84 * var(--s)); }
.lw_source_head { width: calc(379 * var(--s)); flex: none; text-align: center; }
.lw_source_head img { width: calc(145 * var(--s)); min-width: 70px; height: auto; display: block; margin: 0 auto calc(28 * var(--s)); }
.lw_source_list { flex: 1; }
.lw_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);
}

/* ==========================================================================
   8. WALL WASHER VS WALL GRAZER — black band, 2 images 862x574 over cards 220
   ========================================================================== */
.lw_vs { background: #000; padding: calc(104 * var(--s)) 0 calc(125 * var(--s)); text-align: center; }
.lw_vs h2 { color: #fff; margin-bottom: calc(76 * var(--s)); }
.lw_vs_row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(39 * var(--s)); text-align: left; }
.lw_vs_item { display: flex; flex-direction: column; gap: calc(23 * var(--s)); }
.lw_vs_item img { width: 100%; height: calc(574 * var(--s)); min-height: 200px; object-fit: cover; border-radius: var(--r); display: block; }
.lw_vs_card { flex: 1; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r); padding: calc(36 * var(--s)); min-height: calc(220 * var(--s)); }
.lw_vs_card h3 { font-size: clamp(17px, calc(26 * var(--s)), 26px); line-height: 1.2; font-weight: 600; color: #fff; letter-spacing: calc(1.04 * var(--s)); margin: 0 0 calc(18 * var(--s)); }
.sq .light .lw_vs_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.47; color: rgba(255,255,255,.8); margin: 0; max-width: calc(630 * var(--s)); }
.sq .light .lw_vs_note { font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.5; color: rgba(255,255,255,.85); margin: calc(52 * var(--s)) auto 0; max-width: calc(860 * var(--s)); }

/* ==========================================================================
   9. DIMMING OPTIONS — left icon + heading, 4 cards 420x181
   ========================================================================== */
.lw_dimming { padding: calc(240 * var(--s)) 0 calc(0 * var(--s)); }
.lw_dimming .sq_wrap { width: calc(1776 * var(--s)); max-width: 1776px; }
.lw_dimming_head { display: flex; align-items: center; gap: calc(42 * var(--s)); margin-bottom: calc(87 * var(--s)); }
.lw_dimming_head img { width: calc(161 * var(--s)); min-width: 70px; height: auto; display: block; flex: none; }
.lw_dim_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(28 * var(--s)); padding: 0 calc(6 * var(--s)); }
.lw_dim_row .sq_card { min-height: calc(181 * var(--s)); }
.lw_dim_row .sq_card_body { padding: calc(34 * var(--s)); }
.lw_dim_row .sq_card:last-child h3 { text-transform: uppercase; }

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

@media (max-width: 991px) {
	.lw_banner { height: auto; }
	.lw_intro .sq_split { align-items: stretch; }
	.lw_intro_copy { padding-top: 0; }
	.lw_intro_media, .lw_intro_copy { width: 100%; flex: none; }
	.lw_intro_copy .sq_lead, .lw_intro_copy .sq_steps { max-width: 100%; }

	/* 3-item rows stay 3 across on tablet, they only stack on phones */
	.lw_range_row, .lw_mat_row, .lw_vert_grid { gap: 16px; }
	.lw_range_card { min-height: 0; }
	.lw_range_body, .lw_mat_card { padding: 18px 16px 20px; min-height: 0; }
	.lw_range_body h3 { flex-wrap: wrap; gap: 8px; }
	.lw_mat_item img { height: 260px; min-height: 0; }

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

	.lw_source_wrap { width: 100%; padding: 0 24px; gap: 30px; }
	.lw_source_head { width: 38%; }

	.lw_vs_row { gap: 16px; }
	.lw_vs_item img { height: 320px; }
	.lw_vs_card { padding: 22px 18px; min-height: 0; }

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

@media (max-width: 575px) {
	.lw_range_row, .lw_mat_row, .lw_vert_grid, .lw_vs_row, .lw_dim_row { grid-template-columns: 1fr; }
	.lw_vs_item img { height: 240px; min-height: 0; }
	.lw_dimming { padding-top: 50px; }
	.lw_source_wrap { flex-direction: column; padding: 0 18px; gap: 10px; }
	.lw_source_head { width: 100%; }
	.lw_h2_lg { font-size: 30px; }
}