/* ==========================================================================
   POOL / FOUNTAIN LUMINAIRES PAGE — Bullard Bollards
   Section layouts taken from the Figma frame "Pool / Fountain Luminaires" (1920 x 16317).
   Requires squeeze.css for the shared tokens, type scale and primitives.
   Testing / Vertical / Dimming use the same design values as the other pages.
   ========================================================================== */

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

/* dot list (The full range) */
.pf_dots { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(12 * var(--s)); }
.pf_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);
}
.pf_dots li::before { content: "\00B7"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--blue); }

/* ==========================================================================
   1. BANNER — band is 632 tall in this design
   ========================================================================== */
.pf_banner { height: clamp(260px, calc(632 * var(--s)), 632px); }
.pf_banner h1, .pf_banner h3 { text-shadow: -5px 0 4px rgba(0,0,0,.25); }

/* ==========================================================================
   2. INTRO — image @78,774 921x857 r19 (+ 243 inset) · copy from x1118, top-aligned
   ========================================================================== */
.pf_intro { padding: calc(142 * var(--s)) 0 calc(142 * var(--s)); }
.pf_intro .sq_split { gap: calc(119 * var(--s)); align-items: flex-start; }
.pf_intro_media { width: 52.21%; flex: none; position: relative; }   /* 921 / 1764 */
.pf_intro_media > img:first-child { width: 100%; height: auto; display: block; border-radius: var(--r); }
.pf_intro_inset { position: absolute; left: 2.4%; bottom: 2.2%; width: 26.4%; height: auto; display: block; }   /* tracks the image at every width */
.pf_intro_copy { flex: 1; }
.pf_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)); width: calc(738 * var(--s)); max-width: none; }   /* 738 wide in the design, runs 14px past the container */
.pf_intro_copy .sq_lead { color: var(--muted); max-width: calc(640 * var(--s)); margin-bottom: calc(33 * var(--s)); }
.pf_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));
}
.pf_intro_copy .sq_steps { max-width: calc(680 * var(--s)); margin-bottom: calc(33 * var(--s)); }
.sq_step > b { letter-spacing: calc(0.84 * var(--s)); }

/* ==========================================================================
   3. THE FULL RANGE — soft band, 4 cards 422x695, image 424
   ========================================================================== */
.pf_range { background: var(--soft); padding: calc(122 * var(--s)) 0 calc(136 * var(--s)); }
.pf_range h2 { margin-bottom: calc(52 * var(--s)); }
.pf_range_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(25 * var(--s)); }
.pf_range_card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-height: calc(695 * var(--s)); }
.pf_range_card img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }
.pf_range_body { padding: calc(31 * var(--s)) calc(32 * var(--s)) calc(32 * var(--s)); }
.pf_range_body h3 {
	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));
}

/* ==========================================================================
   4. MATERIALS — 3 images 565x545 over soft cards 565x162
   ========================================================================== */
.pf_materials { padding: calc(125 * var(--s)) 0 calc(225 * var(--s)); }
.pf_materials h2 { margin-bottom: calc(86 * var(--s)); }
.pf_mat_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(35 * var(--s)); }
.pf_mat_item { display: flex; flex-direction: column; gap: calc(24 * var(--s)); }
.pf_mat_item img { width: 100%; height: calc(545 * var(--s)); min-height: 220px; object-fit: cover; border-radius: var(--r); display: block; }
.pf_mat_card {
	flex: 1; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
	padding: calc(34 * var(--s)) calc(22 * var(--s)) calc(30 * var(--s)); min-height: calc(162 * var(--s));
}
.pf_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)); }
.pf_mat_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.47; color: var(--muted); margin: 0; max-width: calc(420 * var(--s)); }

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

/* ==========================================================================
   6. VERTICAL INTEGRATION — theme-blue band, photo over an outlined card
   ========================================================================== */
.pf_vertical { background: var(--blue); padding: calc(106 * var(--s)) 0 calc(103 * var(--s)); }
.pf_vert_head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(60 * var(--s)); margin-bottom: calc(73 * var(--s)); }
.pf_vert_head > div { max-width: calc(610 * var(--s)); }
.pf_eyebrow_soft {
	font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--pf-soft-ink);
	text-transform: uppercase; letter-spacing: calc(2.1 * var(--s)); margin: 0 0 calc(23 * var(--s));
}
.pf_vertical h2 { color: #fff; margin-bottom: calc(23 * var(--s)); }
.pf_vert_lead { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.45; color: rgba(255,255,255,.88); margin: 0; }
.pf_vert_head .sq_btn_white { margin-top: calc(24 * var(--s)); text-transform: uppercase; }
.pf_vert_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(41 * var(--s)); }
.pf_vert_item { display: flex; flex-direction: column; gap: calc(26 * var(--s)); }
.pf_vert_item img { width: 100%; height: calc(408 * var(--s)); min-height: 180px; object-fit: cover; border-radius: var(--r); display: block; }
.pf_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)); }
.pf_vert_card b {
	display: block; font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600;
	color: var(--pf-soft-ink); letter-spacing: calc(1.5 * var(--s)); margin-bottom: calc(15 * var(--s));
}
.pf_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 — 1112 block: icon + heading · ruled list 649
   ========================================================================== */
.pf_source { padding: calc(239 * var(--s)) 0 calc(236 * var(--s)); }
.pf_source_wrap { width: calc(1112 * var(--s)); max-width: 100%; margin: 0 auto; display: flex; align-items: flex-start; gap: calc(84 * var(--s)); }
.pf_source_head { width: calc(379 * var(--s)); flex: none; text-align: center; }
.pf_source_head img { width: calc(145 * var(--s)); min-width: 70px; height: auto; display: block; margin: 0 auto calc(28 * var(--s)); }
.pf_source_list { flex: 1; }
.pf_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. BEAM ANGLES — black band, 3 images 565x372 over outlined stat cards
   ========================================================================== */
.pf_beam { background: #000; padding: calc(91 * var(--s)) 0 calc(103 * var(--s)); text-align: center; }
.pf_beam h2 { color: #fff; margin-bottom: calc(72 * var(--s)); }
.pf_beam_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(34 * var(--s)); }
.pf_beam_item { display: flex; flex-direction: column; gap: calc(19 * var(--s)); }
.pf_beam_item img { width: 100%; height: calc(372 * var(--s)); min-height: 150px; object-fit: cover; border-radius: var(--r); display: block; }
.pf_beam_card {
	flex: 1; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r); text-align: left;
	padding: calc(32 * var(--s)) calc(36 * var(--s)) calc(30 * var(--s)); min-height: calc(208 * var(--s));
}
.pf_beam_card b { display: block; font-size: clamp(20px, calc(34 * var(--s)), 34px); line-height: 1.03; font-weight: 600; color: #fff; margin-bottom: calc(18 * var(--s)); }
.pf_beam_card span {
	display: block; font-size: clamp(12px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600;
	color: var(--pf-soft-ink); letter-spacing: calc(1.5 * var(--s)); margin-bottom: calc(15 * var(--s));
}
.sq .light .pf_beam_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(360 * var(--s)); }
.sq .light .pf_beam_note { font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.5; color: rgba(255,255,255,.8); margin: calc(52 * var(--s)) 0 0; }

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

/* ==========================================================================
   10. WATER REQUIREMENTS — copy 543 · two soft stat cards 542x203
   ========================================================================== */
.pf_water { padding: calc(160 * var(--s)) 0 calc(93 * var(--s)); }
.pf_water .sq_wrap { display: grid; grid-template-columns: calc(629 * var(--s)) 1fr 1fr; gap: calc(25 * var(--s)); align-items: stretch; }   /* copy 543 + 86 gutter, cards 542 */
.pf_water_copy { padding-right: calc(86 * var(--s)); }
.pf_water_copy h2 { margin: calc(-11 * var(--s)) 0 calc(27 * var(--s)); }
.pf_water_copy p { font-size: clamp(14px, calc(18 * var(--s)), 18px); line-height: 1.5; color: var(--muted); margin: 0; max-width: calc(478 * var(--s)); }
.pf_water_card {
	background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
	padding: calc(58 * var(--s)) calc(48 * var(--s)) calc(40 * var(--s)); min-height: calc(203 * var(--s));
}
.pf_water_card span {
	display: block; font-size: clamp(11px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--muted);
	letter-spacing: calc(1.8 * var(--s)); margin-bottom: calc(8 * var(--s));
}
.pf_water_card b { display: block; font-size: clamp(30px, calc(56 * var(--s)), 56px); line-height: 1.04; font-weight: 600; color: var(--blue); }

/* ==========================================================================
   11. SEALED FOR CONTINUOUS SUBMERSION — blue band, copy + image 1004x420, 4 cards
   ========================================================================== */
.pf_sealed { background: var(--blue); padding: calc(130 * var(--s)) 0 calc(82 * var(--s)); }
.pf_sealed_top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(80 * var(--s)); margin-bottom: calc(64 * var(--s)); }
.pf_sealed_copy { width: calc(680 * var(--s)); flex: none; }
.pf_sealed_copy h2 { color: #fff; margin-bottom: calc(24 * var(--s)); }
.sq .light .pf_sealed_copy p { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.41; color: rgba(255,255,255,.88); max-width: calc(540 * var(--s)); margin: 0; }
.pf_sealed_top img { width: calc(1004 * var(--s)); max-width: 57%; height: calc(420 * var(--s)); min-height: 180px; object-fit: cover; border-radius: var(--r); display: block; }
.pf_sealed_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(35 * var(--s)); }
.pf_sealed_card { border: 1px solid rgba(255,255,255,.24); border-radius: var(--r); padding: calc(36 * var(--s)); min-height: calc(225 * var(--s)); }
.pf_sealed_card h3 { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.23; font-weight: 600; color: #fff; margin: 0 0 calc(27 * var(--s)); }
.sq .light .pf_sealed_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.47; color: rgba(255,255,255,.82); margin: 0; }

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

@media (max-width: 991px) {
	.pf_banner { height: auto; }
	.pf_intro .sq_split { align-items: stretch; }
	.pf_intro_media, .pf_intro_copy { width: 100%; flex: none; }
	.pf_intro_copy .sq_lead, .pf_intro_copy .sq_steps { max-width: 100%; }
	.pf_h2_lg { width: auto; }

	/* 3-item rows stay 3 across on tablet, they only stack on phones */
	.pf_mat_row, .pf_vert_grid, .pf_beam_row { gap: 16px; }
	.pf_mat_item img { height: 260px; min-height: 0; }
	.pf_mat_card, .pf_beam_card { padding: 18px 16px 20px; min-height: 0; }

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

	.pf_source_wrap { width: 100%; padding: 0 24px; gap: 30px; }
	.pf_source_head { width: 38%; }

	.pf_dimming { padding-top: 70px; }
	.pf_dim_row { gap: 16px; }

	.pf_water .sq_wrap { grid-template-columns: 1fr 1fr; gap: 16px; }
	.pf_water_copy { grid-column: 1 / -1; padding: 0; }
	.pf_water_copy p { max-width: 100%; }
	.pf_water_card { padding: 26px 22px; min-height: 0; }

	.pf_sealed_top { flex-direction: column; gap: 24px; }
	.pf_sealed_copy { width: 100%; }
	.pf_sealed_top img { width: 100%; max-width: 100%; height: 300px; }
}

@media (max-width: 575px) {
	.pf_range_row, .pf_mat_row, .pf_vert_grid, .pf_beam_row, .pf_sealed_row { grid-template-columns: 1fr; }
	.pf_dim_row { flex-direction: column; }
	.pf_dimming { padding-top: 50px; }
	.pf_dimming_head { justify-content: flex-start; }
	.pf_source_wrap { flex-direction: column; padding: 0 18px; gap: 10px; }
	.pf_source_head { width: 100%; }
	.pf_water .sq_wrap { grid-template-columns: 1fr; }
	.pf_sealed_top img { height: 220px; }
	.pf_h2_lg { font-size: 30px; }
}

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