/* ==========================================================================
   FURNITURE PAGE — Bullard Bollards
   Section layouts taken from the Figma frame "Furniture" (1920 x 21039).
   Requires squeeze.css for the shared tokens, type scale and primitives.
   ========================================================================== */

/* "(Illuminated & Non-Illuminated Furniture)" — 27px tail on the 44px headings */
.sq_h2 small { font-size: clamp(15px, calc(27 * var(--s)), 27px); font-weight: inherit; }

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

/* ==========================================================================
   2. INTRO — image @78,711 977x883 r19 · copy from x1142, bottom-aligned
   ========================================================================== */
.fu_intro { padding: calc(126 * var(--s)) 0 calc(128 * var(--s)); }
.fu_intro .sq_split { gap: calc(87 * var(--s)); align-items: flex-start; }
.fu_intro_media { width: 55.39%; flex: none; }   /* 977 / 1764 */
.fu_intro_media img { width: 100%; height: calc(883 * var(--s)); min-height: 280px; object-fit: cover; display: block; border-radius: var(--r); }
.fu_intro_copy { flex: 1; padding-top: calc(297 * var(--s)); }
.fu_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(17 * var(--s)); }
.fu_intro_copy .sq_lead { color: var(--muted); max-width: calc(640 * var(--s)); margin-bottom: calc(61 * var(--s)); }

/* ==========================================================================
   3. ILLUMINATED / NON-ILLUMINATED / OUTDOOR KITCHEN
      3 cards 569x271 · product cut-outs float above each card
   ========================================================================== */
.fu_types { background: var(--soft); padding: calc(76 * var(--s)) 0 calc(109 * var(--s)); }
.fu_types h2 { text-align: center; margin-bottom: calc(395 * var(--s)); }   /* room for the cut-outs */
.fu_types_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(29 * var(--s)); }
.fu_type {
	position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	padding: calc(44 * var(--s)) calc(45 * var(--s)); min-height: calc(271 * var(--s));
}
.fu_type h3 { position: relative; z-index: 1; font-size: clamp(18px, calc(27 * var(--s)), 27px); line-height: 1.2; font-weight: 600; color: var(--ink); margin: 0 0 calc(15 * var(--s)); }
.fu_type p { position: relative; z-index: 1; font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.6; color: var(--muted); margin: 0; }
.fu_type_img { position: absolute; z-index: 2; height: auto; display: block; pointer-events: none; }
.fu_type:nth-child(1) .fu_type_img { left: 32.9%; top: calc(-262 * var(--s)); width: 87.9%; }   /* 500 / 569 */
.fu_type:nth-child(2) .fu_type_img { left: 44%;   top: calc(-276 * var(--s)); width: 63%; }     /* 358 / 568 */
.fu_type:nth-child(3) .fu_type_img { left: 20%;   top: calc(-242 * var(--s)); width: 80.8%; }   /* 460 / 569 */

/* ==========================================================================
   4. ROTATIONAL MOLDING — copy 916 wide · "The Result" list from x1075
   ========================================================================== */
.fu_molding { padding: calc(150 * var(--s)) 0 calc(174 * var(--s)); }
.fu_molding_top { display: flex; gap: calc(81 * var(--s)); align-items: flex-start; }
.fu_molding_copy { width: 51.93%; flex: none; }   /* 916 / 1764 */
.fu_molding_copy h2 { margin-bottom: calc(25 * var(--s)); }
.fu_molding_copy h2 small { display: block; }
.fu_molding_copy p { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.5; color: var(--muted); margin: 0; }
.fu_result { flex: 1; }
.fu_result h3 { font-size: clamp(18px, calc(27 * var(--s)), 27px); line-height: 1.2; font-weight: 600; color: var(--ink); margin: 0 0 calc(39 * var(--s)) calc(13 * var(--s)); }
.fu_result ul { margin: 0; padding: 0 0 0 calc(28 * var(--s)); list-style: disc; }
.fu_result li {
	font-size: clamp(13px, calc(19 * var(--s)), 19px); line-height: 1.21; color: var(--ink);
	padding-bottom: calc(22 * var(--s)); margin-bottom: calc(22 * var(--s));
	border-bottom: 1px solid rgba(0,0,0,.16); min-height: calc(46 * var(--s));
}
.fu_result li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.fu_result li b { font-weight: 600; }
.fu_molding_imgs { display: flex; gap: calc(15 * var(--s)); margin-top: calc(90 * var(--s)); }
.fu_molding_imgs img { height: calc(408 * var(--s)); min-height: 150px; object-fit: cover; border-radius: var(--r); display: block; }
.fu_molding_imgs img:nth-child(1) { width: 26.7%; }                        /* 471 / 1764 */
.fu_molding_imgs img:nth-child(2) { width: 23.13%; }                       /* 408 / 1764 */
.fu_molding_imgs img:nth-child(3) { width: 42.74%; margin-left: auto; }    /* 754 / 1764 */

/* ==========================================================================
   5. 100% RECYCLABLE MATERIALS — card 706x407 + image 975x407, gap 83
   ========================================================================== */
.fu_materials { background: var(--soft); padding: calc(73 * var(--s)) 0 calc(108 * var(--s)); }
.fu_materials h2 { margin-bottom: calc(45 * var(--s)); }
.fu_materials h2 small { display: block; line-height: 1.41; }
.fu_mat_row { display: flex; gap: calc(83 * var(--s)); align-items: stretch; }
.fu_mat_row + .fu_mat_row { margin-top: calc(52 * var(--s)); }
.fu_mat_card {
	width: 40.02%; flex: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r);   /* 706 / 1764 */
	padding: calc(45 * var(--s)) calc(44 * var(--s)); min-height: calc(407 * var(--s));
}
.fu_badge {
	display: inline-block; background: var(--blue); color: #fff; border-radius: 30px;
	padding: calc(8 * var(--s)) calc(18 * var(--s)); margin-bottom: calc(17 * var(--s));
	font-size: clamp(10px, calc(13 * var(--s)), 13px); line-height: 1.23; font-weight: 600;
	text-transform: uppercase; letter-spacing: calc(1.3 * var(--s));
}
.fu_mat_card h3 { font-size: clamp(18px, calc(27 * var(--s)), 27px); line-height: 1.2; font-weight: 600; color: var(--ink); margin: 0 0 calc(17 * var(--s)); }
.fu_mat_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.6; color: var(--muted); margin: 0; }
.fu_mat_row > img { flex: 1; min-width: 0; height: auto; min-height: 180px; object-fit: cover; border-radius: var(--r); display: block; }

/* ==========================================================================
   6. COLOR & COATING — white heading strip, then a black stage with 3 swatch
      groups and three product cut-outs that hang off its edges
   ========================================================================== */
.fu_color { padding: calc(100 * var(--s)) 0 calc(80 * var(--s)); text-align: center; }
/* padding 0: style.css gives every <section> ~100px top/bottom, which made this
   stage ~200px taller than the design's 1347 */
.sq section.fu_stage { overflow: visible; overflow-x: clip; padding: 0; }
.fu_stage { position: relative; z-index: 1; background: #000; text-align: center; }
/* the cut-outs are trimmed to their visible pixels; values are the visible
   product's box in the design, measured from the stage top (y 5276) */
.fu_deco { position: absolute; z-index: 1; height: auto; display: block; pointer-events: none; }
.fu_deco1 { left: 0;                     top: calc(-64 * var(--s));  width: calc(257 * var(--s)); }   /* table: pokes above the stage */
.fu_deco2 { right: calc(7 * var(--s));   top: calc(382 * var(--s));  width: calc(219 * var(--s)); }   /* pot: right edge */
.fu_deco3 { left: 0;                     top: calc(833 * var(--s));  width: calc(350 * var(--s)); }   /* butler: runs into the next section */
.fu_group { position: relative; z-index: 2; padding: calc(80 * var(--s)) 0 calc(46 * var(--s)); }
.fu_group + .fu_group { border-top: 1px solid rgba(255,255,255,.2); }
.fu_group:first-of-type { padding-top: calc(94 * var(--s)); padding-bottom: calc(38 * var(--s)); }
.fu_group:last-child { padding-bottom: calc(110 * var(--s)); }
.fu_group .sq_eyebrow, .fu_light_col .sq_eyebrow, .fu_srow_head .sq_eyebrow { text-transform: uppercase; margin-bottom: calc(7 * var(--s)); }
.fu_group_sub { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.5; margin: 0 0 calc(46 * var(--s)); }
.fu_eyebrow_2 { margin-top: calc(-4 * var(--s)); }
.fu_group .fu_group_sub:has(+ .fu_eyebrow_2) { margin-bottom: calc(50 * var(--s)); }

/* swatch chips — 104x92 images (2x assets), 13px labels */
.fu_stage .sq_chip img, .fu_surface .sq_chip img, .fu_lighting .sq_chip img { border: 0; background: transparent; }
.fu_stage .sq_chips, .fu_surface .sq_chips { gap: calc(10 * var(--s)); }
.sq_chip b { line-height: 1.69; }

/* ==========================================================================
   7. SURFACE & MATERIAL — three ruled rows: HPL top / Textile / Soft PU
   ========================================================================== */
.fu_surface { padding: calc(113 * var(--s)) 0 calc(113 * var(--s)); text-align: center; }
.fu_surface > .sq_wrap h2 { margin-bottom: calc(66 * var(--s)); }
.fu_srow { border-top: 1px solid rgba(0,0,0,.14); padding: calc(58 * var(--s)) 0 calc(58 * var(--s)); }
.sq_wrap + .fu_srow { padding-top: calc(77 * var(--s)); }
.fu_srow:last-child { padding-bottom: 0; }
.fu_srow_head { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: calc(6 * var(--s)) calc(22 * var(--s)); margin-bottom: calc(54 * var(--s)); }
.fu_srow_head .sq_eyebrow { margin-bottom: 0; }
.fu_srow_head p:last-child { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.5; color: var(--ink); margin: 0; }

/* ==========================================================================
   8. LIGHTING-GRADE POLYETHYLENE — #545456 band
      col 448 · 46 · image 331 · 113 · image 331 · 46 · col 448
   ========================================================================== */
.fu_lighting { background: var(--dark); padding: calc(85 * var(--s)) 0 calc(74 * var(--s)); text-align: center; }
.fu_lighting > .sq_wrap h2 { color: #fff; margin-bottom: calc(41 * var(--s)); }
.fu_light_body { border-top: 1px solid rgba(255,255,255,.2); padding-top: calc(97 * var(--s)); }
.fu_light_row { display: flex; align-items: flex-start; text-align: left; }
.fu_light_col { width: 25.4%; flex: none; }                                 /* 448 / 1764 */
.fu_light_col .fu_group_sub { color: #fff; margin-bottom: calc(35 * var(--s)); }
.fu_light_col .sq_chips { justify-content: flex-start; gap: calc(30 * var(--s)) calc(10.5 * var(--s)); }
.fu_light_img { width: 18.76%; flex: none; height: calc(449 * var(--s)); min-height: 150px; object-fit: cover; border-radius: var(--r); display: block; }   /* 331 / 1764 */
.fu_light_col + .fu_light_img { margin-left: 2.6%; }                        /* 46 */
.fu_light_img + .fu_light_img { margin-left: 6.4%; margin-right: 2.6%; }    /* 113 · 46 */

/* ==========================================================================
   9. ACCESSORIES — sketch left (hangs 32 past the margin) · copy + tag grid
   ========================================================================== */
.fu_accessories { padding: calc(198 * var(--s)) 0 calc(198 * var(--s)); }
.fu_accessories .sq_split { gap: calc(85 * var(--s)); }
.fu_acc_media { width: calc(662 * var(--s)); flex: none; margin-left: calc(-32 * var(--s)); }
.fu_acc_media img { width: 100%; height: auto; display: block; }
.fu_acc_copy { flex: 1; padding-top: calc(41 * var(--s)); }
.fu_acc_copy h2 { margin-bottom: calc(31 * var(--s)); }
.fu_acc_copy > p { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.5; color: var(--muted); max-width: calc(560 * var(--s)); margin: 0 0 calc(50 * var(--s)); }
.fu_acc_grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(22 * var(--s)) calc(10 * var(--s)); max-width: calc(1050 * var(--s)); }
.fu_acc_grid span {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: calc(77 * var(--s)); padding: calc(10 * var(--s));
	border: 1px solid #C9C9D2; border-radius: calc(10 * var(--s)); background: #fff;
	font-size: clamp(13px, calc(20 * var(--s)), 20px); line-height: 1.25; color: var(--ink);
	transition: color .3s ease, border-color .3s ease;
}
.fu_acc_grid span:hover { border-color: var(--blue); color: var(--blue); }

/* ==========================================================================
   10. OUTDOOR KITCHEN MATERIALS — theme-blue band, 4 white cards 412x462
   ========================================================================== */
.fu_kitchen { background: var(--blue); padding: calc(93 * var(--s)) 0 calc(133 * var(--s)); }
.fu_kitchen h2 { color: #fff; text-align: center; margin-bottom: calc(72 * var(--s)); }
.fu_kitchen_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(39 * var(--s)); }
.fu_kitchen_card { background: #fff; border-radius: var(--r); overflow: hidden; min-height: calc(462 * var(--s)); }
.fu_kitchen_card img { width: 100%; height: calc(231 * var(--s)); min-height: 120px; object-fit: cover; display: block; }
.fu_kitchen_body { padding: calc(45 * var(--s)) calc(44 * var(--s)) calc(30 * var(--s)); }
.fu_kitchen_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(22 * var(--s));
}
.sq .light .fu_kitchen_body p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 2.06; color: var(--muted); margin: 0; }

/* ==========================================================================
   11. OUTDOOR KITCHEN FEATURES — black band · 4 x 228 + 1 x 571, "+" between
   ========================================================================== */
.fu_features { background: #000; padding: calc(110 * var(--s)) 0 calc(125 * var(--s)); }
.fu_features h2 { color: #fff; text-align: center; margin-bottom: calc(87 * var(--s)); }
.fu_features_row { display: flex; gap: calc(70 * var(--s)); }
.fu_feature { position: relative; width: calc(228 * var(--s)); flex: none; display: flex; flex-direction: column; gap: calc(15 * var(--s)); }
.fu_feature_wide { flex: 1; width: auto; }
.fu_feature img { width: 100%; height: calc(178 * var(--s)); min-height: 90px; object-fit: cover; border-radius: var(--r); display: block; }
/* the "+" joining each step to the next */
.fu_feature + .fu_feature::before, .fu_feature + .fu_feature::after {
	content: ""; position: absolute; background: rgba(255,255,255,.75);
	left: calc(-35 * var(--s)); top: calc(89 * var(--s));
}
.fu_feature + .fu_feature::before { width: calc(37 * var(--s)); height: 1px; transform: translateX(-50%); }
.fu_feature + .fu_feature::after  { width: 1px; height: calc(37 * var(--s)); transform: translate(-50%, -50%); }
.fu_feature_card {
	flex: 1; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r);
	padding: calc(45 * var(--s)) calc(25 * var(--s)) calc(30 * var(--s)); min-height: calc(280 * var(--s));
}
.fu_feature_card h3 { font-size: clamp(16px, calc(27 * var(--s)), 27px); line-height: 1.2; font-weight: 600; color: #fff; margin: 0 0 calc(17 * var(--s)); }
.sq .light .fu_feature_card p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.6; color: #fff; margin: 0; }

/* ==========================================================================
   12. EVERYTHING CAN BE CUSTOMIZED — copy left (bottom-aligned), image 1050x698
   ========================================================================== */
.fu_custom { padding: calc(200 * var(--s)) 0 calc(218 * var(--s)); }
.fu_custom .sq_split { align-items: flex-end; justify-content: space-between; gap: calc(90 * var(--s)); }
.fu_custom_copy { flex: 1; padding-bottom: calc(14 * var(--s)); }
.fu_custom_copy h2 { max-width: calc(421 * var(--s)); margin-bottom: calc(28 * var(--s)); }
.fu_custom_copy p { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.55; color: var(--muted); margin: 0 0 calc(44 * var(--s)); }
.fu_custom_img { width: 59.52%; flex: none; height: calc(698 * var(--s)); min-height: 240px; object-fit: cover; border-radius: var(--r); display: block; }   /* 1050 / 1764 */

/* ==========================================================================
   13. WHERE THESE PRODUCTS ARE USED — 5 cards 336x530, slot 346
   ========================================================================== */
.fu_where { background: var(--soft); padding: calc(104 * var(--s)) 0 calc(124 * var(--s)); }
.fu_where h2 { margin-bottom: calc(27 * var(--s)); }
.fu_where_intro { font-size: clamp(14px, calc(20 * var(--s)), 20px); line-height: 1.5; color: var(--muted); margin: 0 0 calc(65 * var(--s)); }
.fu_where_row { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(21 * var(--s)); }
.fu_where_row .sq_card { border-color: var(--line); min-height: calc(530 * var(--s)); }
.fu_where_row .sq_slot { height: calc(346 * var(--s)); min-height: 180px; }
.fu_where_body { padding: calc(22 * var(--s)) calc(30 * var(--s)) calc(30 * var(--s)); }
.fu_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(10 * var(--s)); }
.fu_where_body p { font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.5; color: var(--muted); margin: 0; }

/* ==========================================================================
   14. CTA — heading is 44/55 here (other pages use 55)
   ========================================================================== */
.fu_cta h2 { font-size: clamp(24px, calc(44 * var(--s)), 44px); line-height: 1.25; margin-bottom: calc(12 * var(--s)); }
.fu_cta p { margin-bottom: calc(27 * var(--s)); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
	.fu_deco { display: none; }
	.fu_features_row { flex-wrap: wrap; gap: 40px 50px; }
	.fu_feature { width: calc(33.33% - 34px); }
	.fu_feature_wide { flex: 1 1 100%; }
	.fu_feature + .fu_feature::before, .fu_feature + .fu_feature::after { display: none; }
	.fu_light_row { flex-wrap: wrap; justify-content: space-between; row-gap: 30px; }
	.fu_light_col { width: 48%; order: 0; }
	.fu_light_img { width: 48%; height: 320px; order: 1; margin: 0 !important; }
}

@media (max-width: 991px) {
	.fu_intro_media, .fu_intro_copy, .fu_molding_copy, .fu_custom_copy { width: 100%; flex: none; }
	.fu_intro_copy { padding-top: 0; }
	.fu_intro_copy .sq_lead { max-width: 100%; }
	.fu_intro_media img { height: auto; }

	/* cut-outs sit above each card instead of over its text */
	.fu_types h2 { margin-bottom: 30px; }
	.fu_types_row { grid-template-columns: 1fr; gap: 24px; }
	.fu_type { display: flex; flex-direction: column; }
	.fu_type:nth-child(n) .fu_type_img { position: static; order: -1; width: 46%; max-width: 280px; margin: -10px auto 14px; }

	.fu_molding_top { flex-direction: column; gap: 34px; }
	.fu_molding_imgs { flex-wrap: wrap; gap: 14px; margin-top: 34px; }
	.fu_molding_imgs img:nth-child(1), .fu_molding_imgs img:nth-child(2) { width: calc(50% - 7px); height: 240px; }
	.fu_molding_imgs img:nth-child(3) { width: 100%; height: 260px; margin-left: 0; }

	.fu_mat_row { flex-direction: column; gap: 18px; }
	.fu_mat_card { width: 100%; min-height: 0; }
	.fu_mat_row > img { height: 260px; }

	.fu_accessories .sq_split { align-items: stretch; }
	.fu_acc_media { width: 70%; max-width: 420px; margin: 0 auto; }
	.fu_acc_copy { padding-top: 0; }
	.fu_acc_grid { grid-template-columns: repeat(3, 1fr); max-width: 100%; }

	.fu_kitchen_row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.fu_kitchen_card { min-height: 0; }

	.fu_custom .sq_split { align-items: stretch; flex-direction: column-reverse; }
	.fu_custom_img { width: 100%; height: 340px; }

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

@media (max-width: 575px) {
	.fu_type:nth-child(n) .fu_type_img { width: 60%; }
	.fu_light_col, .fu_light_img { width: 100%; }
	.fu_light_img { height: 260px; }
	.fu_feature { width: calc(50% - 25px); }
	.fu_acc_grid { grid-template-columns: repeat(2, 1fr); }
	.fu_kitchen_row, .fu_where_row { grid-template-columns: 1fr; }
	.fu_molding_imgs img:nth-child(1), .fu_molding_imgs img:nth-child(2) { width: 100%; }
	.fu_h2_lg { font-size: 28px; }
}