/* ==========================================================================
   INGROUND LUMINAIRES — Bullard Bollards
   Section layouts measured from the 2x Figma frame export (1920 x 15198).
   Requires squeeze.css for the shared tokens, type scale and primitives.
   ========================================================================== */

/* ==========================================================================
   1. INTRO — image @78,717 961x861 r19 (+ 246x244 inset) · copy from x1147
   ========================================================================== */
.ig_intro { padding: calc(132 * var(--s)) 0 calc(150 * var(--s)); }
.ig_intro .sq_split { gap: calc(108 * var(--s)); }
.ig_intro_media { width: 54.5%; flex: none; position: relative; }      /* 961 / 1764 */
.ig_intro_media > img:first-child { width: 100%; height: auto; display: block; border-radius: var(--r); }
.ig_intro_inset {
	position: absolute; left: 2.3%; bottom: 0.93%;   /* 8 / 861 from the image bottom — tracks the image at every width */
	width: 25.6%; height: auto; border-radius: var(--r); display: block;
}
.ig_intro_copy { flex: 1; }
.ig_intro_copy .sq_h2b { margin-bottom: calc(29 * var(--s)); }
.ig_intro_copy .sq_lead { color: var(--muted); margin-bottom: calc(46 * var(--s)); }
.ig_why { font-size: clamp(13px, 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(28 * var(--s)); }
.ig_intro_copy .sq_steps { margin-bottom: calc(48 * var(--s)); }

/* ==========================================================================
   2. COLLECTION RANGE — Owl slider, 5 cards visible, card 342 x 387,
      image 342x260 full-bleed at the card top (Figma 522:1694 … 522:1706)
   ========================================================================== */
.ig_range { background: var(--soft); padding: calc(130 * var(--s)) 0 calc(130 * var(--s)); }
.ig_range h2 { margin-bottom: calc(82 * var(--s)); }
.ig_range_row .sq_card { flex: 1; }
/* the photo is full-bleed inside the card border — the design has no inner panel */
.ig_range_row .sq_slot { height: calc(260 * var(--s)); min-height: 130px; background: #F6F4F9; }
/* design label frames hug their text and overflow the 31px inset, so the right
   inset is tighter to keep the one-line labels on one line */
.ig_range_row .sq_card_body { padding: calc(29 * var(--s)) calc(8 * var(--s)) calc(42 * var(--s)) calc(28 * var(--s)); }
.ig_range_row .sq_card_body h3 { margin-bottom: 0; letter-spacing: .46px; }

/* slider chrome matches the Furniture collections slider */
.inground_slider .owl-stage { display: flex; }
.inground_slider .owl-item { display: flex; }
.inground_slider .owl-item > .item { display: flex; width: 100%; }
.inground_slider .owl-item > .item > .sq_card { flex: 1; }
.inground_slider .owl-nav { display: flex; justify-content: center; gap: 15px; margin-top: calc(40 * var(--s)); }
/* this owl build renders the arrows as divs, not buttons */
.inground_slider .owl-nav .owl-prev, .inground_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: 22px !important;
	color: #000 !important; background: #fff !important; transition: .35s ease;
}
.inground_slider .owl-nav .owl-prev:hover, .inground_slider .owl-nav .owl-next:hover { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.inground_slider .owl-nav .disabled { opacity: .35; cursor: default; }
/* ==========================================================================
   3. TYPES & SIZES — 4 cards 423 wide, image 320 tall
   ========================================================================== */
.ig_types { padding: calc(100 * var(--s)) 0 calc(120 * var(--s)); }
.ig_types h2 { margin-bottom: calc(70 * var(--s)); }
.ig_types_row { display: flex; gap: calc(16 * var(--s)); }
.ig_types_row .sq_card { flex: 1; }
.ig_types_row .sq_card > img { width: 100%; height: calc(292 * var(--s)); min-height: 150px; object-fit: cover; display: block; }
.ig_types_row .sq_card_body { padding: calc(28 * var(--s)) calc(30 * var(--s)) calc(32 * var(--s)); }
.ig_types_row .sq_card_body h3 { margin-bottom: calc(14 * var(--s)); }

/* ==========================================================================
   4. MATERIALS — grey band, 4 bordered columns with a texture panel on top
   ========================================================================== */
.ig_materials { background: var(--dark); padding: calc(100 * var(--s)) 0 calc(90 * var(--s)); }
.ig_materials h2 { color: #fff; margin-bottom: calc(72 * var(--s)); }
.ig_mat_row { display: flex; gap: calc(34 * var(--s)); }
.ig_mat_col {
	flex: 1; border: 1px solid #fff; border-radius: var(--r); overflow: hidden;
	padding-bottom: calc(34 * var(--s));
}
.ig_mat_col > img { width: 100%; height: calc(261 * var(--s)); min-height: 130px; object-fit: cover; display: block; margin-bottom: calc(28 * var(--s)); }
.ig_mat_col .sq_eyebrow { color: #fff; text-transform: uppercase; padding: 0 calc(34 * var(--s)); margin-bottom: calc(20 * var(--s)); }
.ig_mat_col .sq_bullets { padding: 0 calc(34 * var(--s)); }

/* ==========================================================================
   5. MANUFACTURING — 6 numbered steps, image over a bordered card
   ========================================================================== */
.ig_made { padding: calc(110 * var(--s)) 0 calc(120 * var(--s)); text-align: center; }
.ig_made h2 { margin-bottom: calc(30 * var(--s)); }
.ig_made_intro { color: var(--muted); margin-bottom: calc(60 * var(--s)); }
.ig_made_sub { margin-bottom: calc(60 * var(--s)); text-transform: uppercase; }
.ig_made_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(50 * var(--s)) calc(39 * var(--s)); text-align: left; }
.ig_made_item { display: flex; flex-direction: column; }
.ig_made_item img { flex: none; width: 100%; height: calc(258 * var(--s)); min-height: 140px; object-fit: cover; border-radius: var(--r); display: block; margin-bottom: calc(13 * var(--s)); }
.ig_made_card {
	flex: 1; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
	padding: calc(33 * var(--s)) calc(33 * var(--s)) calc(36 * var(--s));
}
.ig_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)); }
.ig_made_card h3 { margin-bottom: calc(11 * var(--s)); text-transform: uppercase; }
.ig_made_card p { color: var(--muted); }

/* ==========================================================================
   6. CUSTOM MOLDED SHAPES
   ========================================================================== */
.ig_custom { padding: calc(40 * var(--s)) 0 calc(120 * var(--s)); }
.ig_custom .sq_split { align-items: center; gap: calc(60 * var(--s)); }
.ig_custom_copy { width: 44%; flex: none; }
.ig_icon { display: block; height: auto; }
.ig_custom_copy .ig_icon { width: calc(132 * var(--s)); margin-bottom: calc(72 * var(--s)); }
.ig_custom_copy h2 { margin-bottom: calc(30 * var(--s)); }
.ig_custom_copy p { color: var(--muted); font-weight: 500; }
.ig_custom_imgs { flex: 1; display: flex; gap: calc(22 * var(--s)); justify-content: flex-end; }
.ig_custom_imgs img { width: calc(431 * var(--s)); max-width: 48%; height: calc(780 * var(--s)); min-height: 260px; object-fit: cover; border-radius: var(--r); display: block; }

/* ==========================================================================
   8. LIGHT SOURCE & OUTPUT — black band, two beam diagrams + a ruled list
   ========================================================================== */
.ig_source { background: #000; padding: calc(150 * var(--s)) 0 calc(150 * var(--s)); }
.ig_source .sq_split { gap: calc(60 * var(--s)); align-items: center; }
.ig_source_imgs { width: 42%; flex: none; display: flex; gap: calc(36 * var(--s)); }
.ig_source_imgs img { width: 50%; height: auto; display: block; }
.ig_source_copy { flex: 1; }
.ig_source_copy h2 { color: #fff; margin-bottom: calc(40 * var(--s)); }
.ig_source_list > * {
	border-top: 1px solid rgba(255,255,255,.25);
	padding: calc(25 * var(--s)) 0 calc(24 * var(--s));
	font-size: clamp(13px, calc(19 * var(--s)), 19px); line-height: 1.53; color: #fff; margin: 0;
}
.ig_source_list ul { list-style: none; margin: calc(6 * var(--s)) 0 0; padding: 0; }
.ig_source_list ul li { position: relative; padding-left: calc(17 * var(--s)); }
.ig_source_list ul li:before { content: "·"; position: absolute; left: 0; top: -.15em; font-size: 1.4em; line-height: 1; }

/* ==========================================================================
   9. DIMMING OPTIONS — 3 cards
   ========================================================================== */
.ig_dimming { padding: calc(110 * var(--s)) 0 calc(120 * var(--s)); }
.ig_dim_head { display: flex; align-items: center; gap: calc(42 * var(--s)); margin-bottom: calc(76 * var(--s)); }
.ig_dim_head .ig_icon { width: calc(172 * var(--s)); flex: none; margin-left: calc(-6 * var(--s)); }
.ig_dim_row { display: flex; gap: calc(24 * var(--s)); }
.ig_dim_row .sq_card { flex: 1; }
.ig_dim_row .sq_card_body { padding: calc(35 * var(--s)); }

/* ==========================================================================
   10. VERTICAL INTEGRATION — theme-blue band
   ========================================================================== */
.ig_vertical { background: var(--blue); padding: calc(106 * var(--s)) 0 calc(120 * var(--s)); }
.ig_vert_head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(60 * var(--s)); margin-bottom: calc(73 * var(--s)); }
.ig_vert_head > div { max-width: calc(700 * var(--s)); }
.ig_eyebrow_soft { font-size: clamp(13px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600;
	color: #B7B0FF; text-transform: uppercase; letter-spacing: calc(2.1 * var(--s)); margin: 0 0 calc(24 * var(--s)); }
.ig_vertical h2 { color: #fff; margin-bottom: calc(23 * var(--s)); }
.ig_vert_lead { font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.45; color: rgba(255,255,255,.88); margin: 0; }
.ig_vert_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(39 * var(--s)); }
.ig_vert_grid img { width: 100%; height: calc(397 * var(--s)); min-height: 180px; object-fit: cover; border-radius: var(--r); display: block; margin-bottom: calc(63 * var(--s)); }
.ig_vert_grid b { display: block; font-size: clamp(13px, calc(15 * var(--s)), 15px); line-height: 1.2; font-weight: 600;
	color: #B7B0FF; letter-spacing: calc(1.5 * var(--s)); margin-bottom: calc(13 * var(--s)); }
.ig_vert_grid p { font-size: clamp(15px, calc(23 * var(--s)), 23px); line-height: 1.26; font-weight: 600; color: #fff; margin: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
	.ig_intro_media, .ig_intro_copy, .ig_custom_copy,
	.ig_source_imgs, .ig_source_copy { width: 100%; flex: none; }

	.ig_types_row, .ig_mat_row, .ig_dim_row { flex-wrap: wrap; gap: 18px; }
	.ig_types_row .sq_card, .ig_dim_row .sq_card { flex: 1 1 calc(50% - 9px); }
	.ig_mat_col { flex: 1 1 calc(50% - 9px); }

	.ig_made_grid, .ig_vert_grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

	.ig_custom_imgs { justify-content: flex-start; gap: 16px; }
	.ig_custom_imgs img { height: 360px; max-width: calc(50% - 8px); width: auto; flex: 1; }
	.ig_custom_copy .ig_icon { width: 96px; margin-bottom: 24px; }

	.ig_source_imgs { gap: 20px; }
	.ig_source_imgs img { width: calc(50% - 10px); }
	.ig_vert_head { flex-direction: column; gap: 24px; }
	.ig_dim_head { gap: 20px; }
	.ig_dim_head .ig_icon { width: 96px; margin-left: 0; }
}

@media (max-width: 575px) {
	.ig_types_row .sq_card,
	.ig_dim_row .sq_card, .ig_mat_col { flex: 1 1 100%; }
	.ig_made_grid, .ig_vert_grid { grid-template-columns: 1fr; }
	.ig_custom_imgs { flex-direction: column; }
	.ig_custom_imgs img { max-width: 100%; width: 100%; height: 300px; }
	.ig_dim_head { flex-direction: column; align-items: flex-start; gap: 14px; }
}