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

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

/* shared dot list (Collection Range + Materials) */
.sw_dots { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(6 * var(--s)); }
.sw_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);
}
.sw_dots li::before { content: "\00B7"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--blue); }

/* ==========================================================================
   1. BANNER — two-line title, so the band is 632 tall in the design
   ========================================================================== */
.sw_banner { height: clamp(260px, calc(632 * var(--s)), 632px); }
.sw_banner h1, .sw_banner h3 { text-shadow: -5px 0 4px rgba(0,0,0,.25); }
.sw_banner .sq_rule { margin: calc(28 * var(--s)) 0 calc(44 * var(--s)); }

/* ==========================================================================
   2. INTRO — image @78,774 989x857 r19 · copy from x1149
   ========================================================================== */
.sw_intro { padding: calc(142 * var(--s)) 0 calc(143 * var(--s)); }
.sw_intro .sq_split { gap: calc(82 * var(--s)); align-items: flex-start; }
.sw_intro_media { width: 56.07%; flex: none; }   /* 989 / 1764 */
.sw_intro_media img { width: 100%; height: auto; display: block; border-radius: var(--r); }
.sw_intro_copy { flex: 1; padding-top: calc(205 * var(--s)); }
.sw_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)); }
.sw_intro_copy .sq_lead { color: var(--muted); max-width: calc(602 * var(--s)); margin-bottom: calc(31 * var(--s)); }
.sw_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(16 * var(--s));
}
.sw_intro_copy .sq_steps { max-width: calc(492 * var(--s)); margin-bottom: calc(38 * var(--s)); }
.sq_step > b { letter-spacing: calc(0.84 * var(--s)); }

/* ==========================================================================
   3. COLLECTION RANGE — soft band, 3 cards 569x498, image 240
   ========================================================================== */
.sw_range { background: var(--soft); padding: calc(105 * var(--s)) 0 calc(106 * var(--s)); }
.sw_range h2 { margin-bottom: calc(52 * var(--s)); }
/* slider (owl) — cards stay equal height */
.surface_range_slider .owl-stage { display: flex; }
.surface_range_slider .owl-item { display: flex; }
.surface_range_slider .owl-item > .item { display: flex; width: 100%; }
.surface_range_slider .owl-item > .item > .sw_range_card { flex: 1; }
.surface_range_slider .owl-nav { display: flex; justify-content: center; gap: 15px; margin-top: calc(40 * var(--s)); }
.surface_range_slider .owl-nav .owl-prev, .surface_range_slider .owl-nav .owl-next {
	width: 44px; height: 44px; border-radius: 50%; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #C9C9D2 !important; font-size: 26px !important;
	color: #000 !important; background: #fff !important; transition: .35s ease;
}
.surface_range_slider .owl-nav .owl-prev:hover, .surface_range_slider .owl-nav .owl-next:hover { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.surface_range_slider .owl-nav .disabled { opacity: .35; cursor: default; }
.sw_range_card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-height: calc(498 * var(--s)); }
.sw_range_card img { width: 100%; height: calc(240 * var(--s)); min-height: 130px; object-fit: cover; display: block; }
.sw_range_body { padding: calc(41 * var(--s)) calc(30 * var(--s)) calc(32 * var(--s)); }
.sw_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(12 * var(--s));
}

/* ==========================================================================
   4. MATERIALS — white band, 3 outlined cards 562 wide, image 230
   ========================================================================== */
.sw_materials { padding: calc(169 * var(--s)) 0 0; }
.sw_materials h2 { margin-bottom: calc(23 * var(--s)); }
.sw_mat_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(39 * var(--s)); }
.sw_mat_card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-height: calc(460 * var(--s)); }
.sw_mat_card img { width: 100%; height: calc(230 * var(--s)); min-height: 120px; object-fit: cover; display: block; }
.sw_mat_body { padding: calc(46 * var(--s)) calc(25 * var(--s)) calc(30 * var(--s)); }
.sw_mat_body h3 {
	font-size: clamp(14px, 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(5 * var(--s));
}
.sw_dots_tall { gap: 0; }
.sw_dots_tall li { line-height: 2.35; color: rgba(0,0,0,.8); }   /* 40px rows */

/* ==========================================================================
   5. MANUFACTURING — 6 steps: image 562x260, 13 gap, card 562x208
   ========================================================================== */
.sw_made { padding: calc(259 * var(--s)) 0 calc(157 * var(--s)); text-align: center; }
.sw_made h2 { margin-bottom: calc(5 * var(--s)); }
.sw_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)); }
.sw_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));
}
.sw_made_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(63 * var(--s)) calc(39 * var(--s)); text-align: left; }
.sw_made_item { display: flex; flex-direction: column; gap: calc(13 * var(--s)); }
.sw_made_item img { width: 100%; height: calc(260 * var(--s)); min-height: 140px; object-fit: cover; border-radius: var(--r); display: block; flex: none; }
.sw_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));
}
.sw_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)); }
.sw_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));
}
.sw_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
   ========================================================================== */
.sw_custom { padding: 0 0 calc(132 * var(--s)); }
.sw_custom .sq_split { align-items: center; justify-content: space-between; }
.sw_custom_copy { width: calc(628 * var(--s)); flex: none; }
.sw_custom_icon { width: calc(130 * var(--s)); min-width: 70px; height: auto; display: block; margin-bottom: calc(62 * var(--s)); }
.sw_custom_copy h2 { margin-bottom: calc(44 * var(--s)); }
.sw_custom_copy p { font-size: clamp(14px, calc(19 * var(--s)), 19px); line-height: 1.55; color: var(--muted); margin: 0; }
.sw_custom_imgs { display: flex; gap: calc(37 * var(--s)); }
.sw_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 */

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

/* ==========================================================================
   9. DIMENSIONS & SHAPES — soft band: heading · image box 714x294 · ruled list
   ========================================================================== */
.sw_dims { background: var(--soft); padding: calc(141 * var(--s)) 0 calc(141 * var(--s)); }
.sw_dims .sq_wrap { display: flex; align-items: center; gap: calc(67 * var(--s)); }
.sw_dims h2 { width: calc(292 * var(--s)); flex: none; margin: calc(-22 * var(--s)) calc(-56 * var(--s)) 0 calc(-9 * var(--s)); overflow-wrap: normal; word-break: keep-all; }
.sw_dims_img { width: calc(714 * var(--s)); flex: none; background: #fdfdfd; border-radius: var(--r); overflow: hidden; }
.sw_dims_img img { width: 100%; height: auto; display: block; }
.sw_dims_list { 
	flex: 1; 
	/* margin-top: calc(-65 * var(--s));  */
}
.sw_dims_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. FINISH OPTIONS — centred heading, 5 cards 336x318, swatch 230
   ========================================================================== */
.sw_finish { padding: calc(153 * var(--s)) 0 0; }
.sw_finish h2 { text-align: center; margin-bottom: calc(52 * var(--s)); }
.sw_finish_row { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(21 * var(--s)); }
.sw_finish_card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sw_finish_card img { width: 100%; height: calc(230 * var(--s)); min-height: 110px; object-fit: cover; display: block; }
.sw_finish_card h3 {
	font-size: clamp(14px, 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));
}

/* ==========================================================================
   11. DIMMING OPTIONS — centred icon + heading, 3 cards, full-width rule below
   ========================================================================== */
.sw_dimming { padding: calc(229 * var(--s)) 0 calc(181 * var(--s)); border-bottom: 1px solid var(--line); }
.sw_dimming_head { display: flex; align-items: center; justify-content: center; gap: calc(42 * var(--s)); margin-bottom: calc(73 * var(--s)); }
.sw_dimming_head img { width: calc(161 * var(--s)); min-width: 70px; height: auto; display: block; flex: none; }
.sw_dim_row { display: flex; gap: calc(28 * var(--s)); }
.sw_dim_row .sq_card { flex: 1; }
.sw_dim_row .sq_card_body { padding: calc(34 * var(--s)); }

/* ==========================================================================
   12. LIGHT SOURCE — centred 774 block: icon + heading left, ruled list right
   ========================================================================== */
.sw_source { padding: calc(181 * var(--s)) 0 calc(181 * var(--s)); }
.sw_source_wrap { width: calc(774 * var(--s)); max-width: 100%; margin: 0 auto; display: flex; align-items: flex-start; gap: calc(55 * var(--s)); }
.sw_source_head { width: calc(314 * var(--s)); flex: none; text-align: center; }
.sw_source_head img { width: calc(145 * var(--s)); min-width: 70px; height: auto; display: block; margin: 0 auto calc(27 * var(--s)); }
.sw_source_list { flex: 1; margin-top: calc(77 * var(--s)); }
.sw_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);
}

/* ==========================================================================
   13. BEAM ANGLES — black band, 4 images 420x339 over outlined cards
   ========================================================================== */
.sw_beam { background: #000; padding: calc(102 * var(--s)) 0 calc(111 * var(--s)); }
.sw_beam h2 { color: #fff; margin-bottom: calc(16 * var(--s)); }
.sq .light .sw_beam_sub { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.5; color: rgba(255,255,255,.85); margin: 0 0 calc(83 * var(--s)); }
.sw_beam_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(28 * var(--s)); }
.sw_beam_item { display: flex; flex-direction: column; gap: calc(34 * var(--s)); }
.sw_beam_item img { width: 100%; height: calc(339 * var(--s)); min-height: 160px; object-fit: cover; border-radius: var(--r); display: block; }
.sw_beam_card { flex: 1; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r); padding: calc(36 * var(--s)); min-height: calc(192 * var(--s)); }
.sw_beam_card h3 {
	font-size: clamp(16px, calc(24 * var(--s)), 24px); line-height: 1.2; font-weight: 600; color: #fff;
	text-transform: uppercase; letter-spacing: calc(0.96 * var(--s)); margin: 0 0 calc(13 * var(--s));
}
.sq .light .sw_beam_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: rgba(255,255,255,.8); margin: 0; }

/* ==========================================================================
   14. INSTALLATION ENVIRONMENTS — 5 cards 336x516, slot 353
   ========================================================================== */
.sw_env { padding: calc(180 * var(--s)) 0 0; }
.sw_env h2 { margin-bottom: calc(80 * var(--s)); }
.sw_env_row { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(22 * var(--s)); }
.sw_env_row .sq_card { border-color: var(--line); min-height: calc(516 * var(--s)); }
.sw_env_row .sq_slot { height: calc(353 * var(--s)); min-height: 180px; }
.sw_env_body { padding: calc(22 * var(--s)) calc(30 * var(--s)) calc(30 * var(--s)); }
.sw_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(9 * var(--s)); }
.sw_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) {
	.sw_finish_row { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.sw_beam_row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 991px) {
	.sw_banner { height: auto; }
	.sw_intro .sq_split { align-items: stretch; }
	.sw_intro_media, .sw_intro_copy { width: 100%; flex: none; }
	.sw_intro_copy { padding-top: 0; }
	.sw_intro_copy .sq_lead, .sw_intro_copy .sq_steps { max-width: 100%; }

	/* 3-item rows stay 3 across on tablet, they only stack on phones */
	.sw_mat_row, .sw_made_grid, .sw_vert_grid { gap: 16px; }
	.sw_range_card, .sw_mat_card { min-height: 0; }
	.sw_range_body, .sw_mat_body { padding: 18px 16px 20px; }
	.sw_made_card { padding: 18px; }

	.sw_custom { padding-top: 40px; }
	.sw_custom_copy { width: 100%; }
	.sw_custom_icon { width: 80px; margin-bottom: 24px; }
	.sw_custom_imgs { gap: 16px; }
	.sw_custom_imgs img { width: calc(50% - 8px); height: 380px; }

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

	.sw_dims .sq_wrap { flex-direction: column; gap: 24px; }
	.sw_dims h2, .sw_dims_img { width: 100%; max-width: 714px; margin: 0; }
	.sw_dims_list { margin: 0; width: 100%; }

	.sw_dimming { padding-top: 70px; }
	.sw_dim_row { gap: 16px; }

	.sw_source_wrap { width: 100%; padding: 0 24px; }
	.sw_source_head { width: 38%; }

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

@media (max-width: 575px) {
	.sw_mat_row, .sw_made_grid, .sw_vert_grid, .sw_env_row, .sw_beam_row { grid-template-columns: 1fr; }
	.sw_finish_row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.sw_custom_imgs img { height: 260px; min-height: 0; }
	.sw_dim_row { flex-direction: column; }
	.sw_dimming { padding-top: 50px; }
	.sw_dimming_head { justify-content: flex-start; }
	.sw_source_wrap { flex-direction: column; padding: 0 18px; gap: 10px; }
	.sw_source_head { width: 100%; }
	.sw_source_list { margin-top: 0; width: 100%; }
	.sw_h2_lg { font-size: 28px; }
}

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