/* ==========================================================================
   PARK / URBAN / GARDEN POLE LUMINAIRES PAGE — Bullard Bollards
   Section layouts taken from the Figma frame "PARK / URBAN / GARDEN POLE LUMINAIRES"
   (file 1oZcbSqW7yVnJJHzqYVeuh, node 1:6247 — 1920 x 9004).
   Requires squeeze.css for the shared tokens, type scale and primitives.
   ========================================================================== */

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

/* ==========================================================================
   1. BANNER — 632 tall, 96px two-line title
   ========================================================================== */
.pk_banner { height: clamp(260px, calc(632 * var(--s)), 632px); }
.pk_banner h1 { font-size: clamp(30px, calc(96 * var(--s)), 96px); line-height: 1.22; }
.pk_banner h1, .pk_banner h3 { text-shadow: -5px 0 4px rgba(0,0,0,.25); }
.pk_banner .sq_rule { margin: calc(22 * var(--s)) 0 calc(58 * var(--s)); }

/* ==========================================================================
   2. INTRO — image @78,776 957x757 · copy from x1149; button bottom-aligned
      with the image. Extra bottom room is where the Material poles rise into.
   ========================================================================== */
.pk_intro { padding: calc(144 * var(--s)) 0 calc(284 * var(--s)); }
.pk_intro .sq_split { gap: calc(114 * var(--s)); align-items: stretch; }
.pk_intro_media { width: 54.25%; flex: none; }   /* 957 / 1764 */
.pk_intro_media img { width: 100%; height: auto; display: block; border-radius: var(--r); }
.pk_intro_copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(18 * var(--s)); }
.pk_h2_lg { font-size: clamp(24px, calc(44 * var(--s)), 44px); line-height: 1.25; font-weight: 600; color: var(--ink); margin: 0 0 calc(52 * var(--s)); max-width: calc(672 * var(--s)); }
.pk_intro_copy .sq_lead { color: var(--muted); max-width: calc(693 * var(--s)); }
.pk_intro_copy .sq_lead + .sq_lead { margin-top: calc(31.9 * var(--s)); }
.pk_intro_copy .blackBtn { margin-top: auto; white-space: normal; text-transform: uppercase; }

/* ==========================================================================
   3. MATERIAL — #545456 band 760 tall · white card 570 wide @x389 ·
      pole cut-out 853x877 @x944 rising 117 above the band
   ========================================================================== */
.sq section.pk_material { overflow: visible; overflow-x: clip; }
.pk_material { position: relative; background: var(--dark); padding: calc(117 * var(--s)) 0 calc(99 * var(--s)); }
.pk_material .sq_wrap { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: calc(107 * var(--s)); }
.pk_material h2 { color: #fff; width: calc(204 * var(--s)); flex: none; margin-top: calc(0 * var(--s)); }
.pk_mat_card { width: calc(570 * var(--s)); min-width: 300px; flex: none; background: #fff; border-radius: var(--r); overflow: hidden; }
.pk_mat_card img { width: 100%; height: calc(230 * var(--s)); min-height: 120px; object-fit: cover; display: block; }
.pk_mat_body { padding: calc(33 * var(--s)) calc(34 * var(--s)) calc(33 * var(--s)); }
.pk_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(20 * var(--s));
}
.pk_mat_body ul { margin: 0; padding: 0; list-style: none; }
.pk_mat_body li {
	position: relative; padding-left: calc(25.5 * var(--s));
	font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 2.35; color: rgba(0,0,0,.8);   /* 40px rows */
}
.pk_mat_body li::before { content: "\00B7"; position: absolute; left: calc(8 * var(--s)); top: 0; font-weight: 700; }
.pk_mat_poles {
	position: absolute; z-index: 1; pointer-events: none; display: block; height: auto;
	left: calc(944 / 1920 * 100%); top: calc(-117 * var(--s)); width: calc(853 * var(--s));
}

/* ==========================================================================
   4. DIMMING OPTIONS — centred icon + heading, 3 cards 161 tall
   ========================================================================== */
.pk_dimming { padding: calc(193 * var(--s)) 0 calc(132 * var(--s)); }
.pk_dimming_head { display: flex; align-items: center; justify-content: center; gap: calc(42 * var(--s)); margin-bottom: calc(77 * var(--s)); }
.pk_dimming_head img { width: calc(172 * var(--s)); min-width: 70px; height: auto; display: block; flex: none; }
.pk_dim_row { display: flex; gap: calc(28 * var(--s)); }
.pk_dim_row .sq_card { flex: 1; min-height: calc(161 * var(--s)); }
.pk_dim_row .sq_card_body { padding: calc(34 * var(--s)); }

/* ==========================================================================
   5. OPTICS — BEAM ANGLES — black band: copy 521 · image 838x437 · 2 cards 280x206
   ========================================================================== */
.pk_optics { background: #000; padding: calc(169 * var(--s)) 0 calc(165 * var(--s)); }
.pk_optics .sq_wrap { display: flex; align-items: center; }
.pk_optics_copy { width: calc(521 * var(--s)); flex: none; margin-right: calc(105 * var(--s)); }
.pk_optics_copy h2 { color: #fff; margin-bottom: calc(16 * var(--s)); }
.sq .light .pk_optics_copy p { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.5; color: rgba(255,255,255,.85); margin: 0; max-width: calc(502 * var(--s)); }
.pk_optics_img { width: calc(838 * var(--s)); flex: none; height: calc(437 * var(--s)); min-height: 180px; object-fit: cover; border-radius: var(--r); display: block; }
.pk_optics_cards { flex: 1; margin-left: calc(20 * var(--s)); display: grid; gap: calc(25 * var(--s)); }
.pk_optics_card { border: 1px solid rgba(255,255,255,.22); border-radius: var(--r); padding: calc(34 * var(--s)); min-height: calc(206 * var(--s)); }
.pk_optics_card b { display: block; font-size: clamp(20px, calc(30 * var(--s)), 30px); line-height: 1.1; font-weight: 600; color: #fff; margin-bottom: calc(14 * var(--s)); }
.pk_optics_card span {
	display: block; font-size: clamp(11px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600; color: var(--pk-soft-ink);
	text-transform: uppercase; letter-spacing: calc(1.5 * var(--s)); margin-bottom: calc(14 * var(--s));
}
.sq .light .pk_optics_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: rgba(255,255,255,.8); margin: 0; }

/* ==========================================================================
   6. INSTALLATION TYPES — 3 cards 558 wide: image 241 + label 90
   ========================================================================== */
.pk_install { padding: calc(151 * var(--s)) 0 calc(180 * var(--s)); }
.pk_install h2 { text-align: center; margin-bottom: calc(87 * var(--s)); }
.pk_install_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(45 * var(--s)); }
.pk_install_card { border: 1px solid #C7C7C7; border-radius: var(--r); overflow: hidden; }
.pk_install_card img { width: 100%; height: calc(241 * var(--s)); min-height: 120px; object-fit: cover; display: block; }
.pk_install_card h3 {
	display: flex; align-items: center; justify-content: center; min-height: calc(90 * var(--s)); padding: calc(14 * var(--s));
	font-size: clamp(15px, calc(23 * var(--s)), 23px); line-height: 1.25; font-weight: 600; color: var(--ink); margin: 0; text-align: center;
}

/* ==========================================================================
   7. SPECIFY IT YOUR WAY — soft band · copy 600 · image 1020x783 · bottom-aligned
   ========================================================================== */
.pk_specify { background: var(--soft); padding: calc(76 * var(--s)) 0 calc(107 * var(--s)); }
.pk_specify .sq_wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(60 * var(--s)); }
.pk_specify_copy { width: calc(600 * var(--s)); flex: none; }
.pk_specify_copy h2 { margin-bottom: calc(45 * var(--s)); }
.pk_specify_copy p { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.55; color: var(--ink); margin: 0 0 calc(59 * var(--s)); }
.pk_specify_copy .blackBtn { text-transform: uppercase; }
.pk_specify_img { width: calc(1020 * var(--s)); flex: none; height: calc(783 * var(--s)); min-height: 240px; object-fit: cover; border-radius: var(--r); display: block; }

/* ==========================================================================
   8. WHERE THESE ARE TYPICALLY INSTALLED — 4 cards 421x512, slot 346
   ========================================================================== */
.pk_where { padding: calc(184 * var(--s)) 0 calc(188 * var(--s)); }
.pk_where h2 { margin-bottom: calc(83 * var(--s)); }
.pk_where_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(27 * var(--s)); }
.pk_where_row .sq_card { border-color: var(--line); min-height: calc(512 * var(--s)); }
.pk_where_row .sq_slot { height: calc(346 * var(--s)); min-height: 180px; }
.pk_where_body { padding: calc(22 * var(--s)) calc(30 * var(--s)) calc(30 * var(--s)); }
.pk_where_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(11 * var(--s)); }
.pk_where_body p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: var(--muted); margin: 0; }

/* ==========================================================================
   9. CTA — sits under a full-width 1px rule
   ========================================================================== */
.pk_cta { border-top: 1px solid var(--line); padding-top: calc(156 * var(--s)); }
.pk_cta .blackBtn { white-space: normal; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
	.pk_optics .sq_wrap { flex-wrap: wrap; }
	.pk_optics_copy { width: 100%; margin: 0 0 30px; }
	.pk_optics_img { width: 62%; }
	.pk_where_row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.pk_where_row .sq_card { min-height: 0; }
	.pk_mat_poles { left: auto; right: -4%; width: 42%; }
}

@media (max-width: 991px) {
	.pk_banner { height: auto; }
	.pk_intro { padding-bottom: 70px; }
	.pk_intro .sq_split { align-items: stretch; }
	.pk_intro_media, .pk_intro_copy { width: 100%; flex: none; }
	.pk_intro_copy { padding-top: 0; }
	.pk_h2_lg, .pk_intro_copy .sq_lead { max-width: 100%; margin-bottom: 20px; }
	.pk_intro_copy .blackBtn { margin-top: 10px; }

	.pk_mat_poles { display: none; }
	.pk_material { padding: 60px 0; }
	.pk_material .sq_wrap { flex-direction: column; gap: 24px; }
	.pk_material h2 { width: auto; }
	.pk_mat_card { width: 100%; max-width: 570px; min-width: 0; }

	.pk_dimming { padding-top: 70px; }
	.pk_dim_row { gap: 16px; }

	.pk_optics_img { width: 100%; height: 300px; }
	.pk_optics_cards { margin: 16px 0 0; grid-template-columns: 1fr 1fr; flex: 1 1 100%; gap: 16px; }
	.pk_optics_card { min-height: 0; padding: 22px 18px; }

	.pk_install_row { gap: 16px; }

	.pk_specify .sq_wrap { flex-direction: column-reverse; align-items: stretch; gap: 28px; }
	.pk_specify_copy { width: 100%; }
	.pk_specify_img { width: 100%; height: 380px; }
}

@media (max-width: 575px) {
	.pk_dim_row { flex-direction: column; }
	.pk_dimming { padding-top: 50px; }
	.pk_dimming_head { justify-content: flex-start; }
	.pk_optics_cards, .pk_install_row, .pk_where_row { grid-template-columns: 1fr; }
	.pk_optics_img { height: 220px; min-height: 0; }
	.pk_specify_img { height: 260px; min-height: 0; }
	.pk_h2_lg { font-size: 26px; }
}

/* long two-line banner title: keep "LUMINAIRES" on one line on small screens */
@media (max-width: 767px) {
	.pk_banner h1 { font-size: 40px; letter-spacing: 2px; }
}
@media (max-width: 575px) {
	.pk_banner h1 { font-size: 27px; letter-spacing: 1px; }
}

/* 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); }