/* ==========================================================================
   SQUEEZE PAGE FOUNDATION — Bullard Bollards
   Shared design system for the Figma "squeeze" pages (Spotlights, Inground,
   Poles, Recessed / Surface Wall, Ceiling, Architectural Solutions …).
   All sizes are the design's own px values on a 1920 canvas; --s scales the
   page proportionally below that and clamp() sets a readable floor.
   Load order: bootstrap → owl → style.css → responsive.css → squeeze.css → <page>.css
   ========================================================================== */

.sq {
	--s: calc(100vw / 1920);      /* one design pixel */
	--ink: #000000;
	--muted: #545456;
	--soft: #F6F5FA;              /* pale section background */
	--dark: #545456;              /* grey section background */
	--line: #00000036;            /* all rules and card borders */
	--chipbd: #2F1412;
	--slot: #DBEAF6;              /* pale blue image slots */
	--blue: var(--primeColor);    /* site theme blue */
	--r: calc(19 * var(--s));     /* standard corner radius */
	font-size: clamp(14px, calc(17 * var(--s)), 17px);
	color: var(--muted);
}

.sq section { overflow: hidden; background-repeat: no-repeat; background-size: cover; 
	/* background-color: var(--soft);  */
}

/* ---------- container: 78px side margins, 1764px of content ---------- */
.sq_wrap { width: calc(1764 * var(--s)); max-width: 1764px; margin-left: auto; margin-right: auto; }

/* ---------- type scale ---------- */
.sq_h1   { font-size: clamp(34px, calc(108 * var(--s)), 108px); line-height: 1.22; font-weight: 600; margin: 0; }
.sq_h2   { font-size: clamp(24px, calc(44 * var(--s)), 44px);   line-height: 1.41; font-weight: 500; color: var(--ink); margin: 0; }
.sq_h2b  { font-size: clamp(24px, calc(44 * var(--s)), 44px);   line-height: 1.25; font-weight: 600; color: var(--ink); margin: 0; }
.sq_h3   { font-size: clamp(17px, calc(26 * var(--s)), 26px);   line-height: 1.23; font-weight: 600; color: var(--ink); margin: 0; }
.sq_h4   { font-size: clamp(16px, calc(23 * var(--s)), 23px);   line-height: 1.22; font-weight: 600; color: var(--ink); margin: 0; }
.sq_h5   { font-size: clamp(15px, calc(19 * var(--s)), 19px);   line-height: 1.21; font-weight: 600; color: var(--ink); margin: 0; }
.sq_lead { font-size: clamp(15px, calc(22 * var(--s)), 22px);   line-height: 1.45; font-weight: 400; margin: 0; }
.sq_p    { font-size: clamp(14px, calc(20 * var(--s)), 20px);   line-height: 1.5;  font-weight: 400; margin: 0; }
.sq_sm   { font-size: clamp(13px, calc(17 * var(--s)), 17px);   line-height: 1.53; font-weight: 400; margin: 0; }
.sq_xs   { font-size: clamp(12px, calc(15 * var(--s)), 15px);   line-height: 1.2;  font-weight: 600; margin: 0; }
.sq_eyebrow { font-size: clamp(14px, calc(24 * var(--s)), 24px); line-height: 1.21; font-weight: 600; color: var(--ink); margin: 0; }
.sq_note { font-size: clamp(14px, calc(19 * var(--s)), 19px);   line-height: 1.53; font-weight: 400; margin: 0; }

.sq .accent { color: var(--blue); }
.sq .light, .sq .light .sq_h2, .sq .light .sq_h3, .sq .light .sq_h4,
.sq .light .sq_eyebrow, .sq .light p { color: #fff; }

/* ---------- buttons: sized to the design in style.css (DESIGN BUTTONS),
   shared with the non-squeeze pages (poles, catenary) ---------- */

/* ==========================================================================
   BANNER — 1920x585, theme blue, 108px title over a 55px subtitle
   ========================================================================== */
.sq_banner {
	height: clamp(230px, calc(585 * var(--s)), 585px);
	padding: 0; display: flex; align-items: center; justify-content: center; text-align: center;
	background-color: var(--blue);
}
.sq_banner h1 { color: #fff; }
/* the rule is a full-bleed 5px line in the design, not boxed to the container */
.sq_banner .sq_rule {
	height: 5px; background: #fff;
	width: 100vw; position: relative; left: 50%; transform: translateX(-50%);
	margin: calc(55 * var(--s)) 0 calc(58 * var(--s));
}
.sq_banner h3 {
	color: #fff; margin: 0; font-weight: 600;
	font-size: clamp(16px, calc(55 * var(--s)), 55px); line-height: 1.22;
}

/* ==========================================================================
   SHARED PRIMITIVES
   ========================================================================== */
/* two-column split */
.sq_split { display: flex; align-items: flex-start; gap: calc(87 * var(--s)); }

/* bordered card */
.sq_card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	overflow: hidden; display: flex; flex-direction: column;
}
.sq_card_soft { background: var(--soft); }
.sq_card_body { padding: calc(33 * var(--s)) calc(35 * var(--s)) calc(36 * var(--s)); }
.sq_card_body h3, .sq_card_body h4 { margin-bottom: calc(11 * var(--s)); }
.sq_card_body p { color: var(--muted); }

/* pale-blue image slot used across the collection cards */
.sq_slot {
	background: var(--slot); overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.sq_slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* numbered list (01, 02, 03 …) */
/* each row carries a 1px rule above it (Figma: Item frames, strokeTop only) */
.sq_steps { display: grid; gap: 0; }
.sq_step { display: flex; gap: calc(30 * var(--s)); align-items: flex-start;
	border-top: 1px solid var(--line); padding: calc(19 * var(--s)) 0 calc(18 * var(--s)); }
.sq_step > b {
	flex: none; min-width: calc(28 * var(--s));
	font-size: clamp(12px, calc(14 * var(--s)), 14px); line-height: 1.43;
	font-weight: 600; color: var(--blue);
}
.sq_step > span { font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.44; color: var(--ink); }

/* bullet list with a coloured dot */
.sq_bullets { margin: 0; padding: 0; list-style: none; }
.sq_bullets li {
	position: relative; padding-left: calc(17 * var(--s)); margin-bottom: calc(14 * var(--s));
	font-size: clamp(13px, calc(17 * var(--s)), 17px); line-height: 1.53; color: var(--muted);
}
.sq_bullets li:last-child { margin-bottom: 0; }
.sq_bullets li:before {
	content: "·"; position: absolute; left: 0; top: -.15em;
	font-weight: 700; color: var(--blue); font-size: 1.4em; line-height: 1;
}
.light .sq_bullets li { color: rgba(255,255,255,.88); }
.light .sq_bullets li:before { color: #fff; }

/* material / colour chips — 104x92, radius 19 */
.sq_chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--s)); }
.sq_chip { width: calc(104 * var(--s)); min-width: 52px; text-align: center; }
.sq_chip img, .sq_chip span.sw {
	display: block; width: 100%; height: auto; aspect-ratio: 104 / 92;
	border-radius: var(--r); border: 1px solid var(--chipbd);
	object-fit: cover; background: #DBD6D3;
}

.sw_finish .sq_chip img{
	border: unset;
	aspect-ratio: unset;
	border-radius: 50%;
}
.sq_chip b {
	display: block; margin-top: calc(10 * var(--s));
	font-size: clamp(9px, calc(13 * var(--s)), 13px); line-height: 1.69;
	font-weight: 600; text-transform: capitalize;
}
.light .sq_chip b { color: #fff; }

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.sq_cta { padding: calc(144 * var(--s)) 0 calc(148 * var(--s)); text-align: center; }
.sq_cta h2 {
	font-size: clamp(22px, calc(55 * var(--s)), 55px); line-height: 1;
	font-weight: 600; color: var(--ink); margin: 0 0 calc(25 * var(--s));
}
.sq_cta p {
	font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.5;
	color: rgba(0,0,0,.85); margin: 0 0 calc(36 * var(--s));
}
.sq_cta_btns { display: flex; flex-direction: column; align-items: center; gap: calc(27 * var(--s)); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.sq_faq { background: var(--soft); padding: calc(88 * var(--s)) 0 calc(228 * var(--s)); }
.sq_faq h2 {
	font-size: clamp(20px, calc(32 * var(--s)), 32px); line-height: 1.41;
	font-weight: 700; color: var(--ink); margin: 0 0 calc(13 * var(--s));
}
/* each row carries a 1px black rule above it, none below the last */
.sq_faq .accordion-item {
	background: transparent; border: 0; border-top: 1px solid var(--line);
	padding: calc(27 * var(--s)) 0 calc(23 * var(--s));
}
.sq_faq .accordion-button {
	background: transparent; box-shadow: none !important; padding: 0; color: var(--ink);
	font-size: clamp(15px, calc(24 * var(--s)), 24px) !important; line-height: 1.42;
	font-weight: 500; text-transform: none; letter-spacing: 0;
}
.sq_faq .accordion-body {
	padding: calc(14 * var(--s)) calc(60 * var(--s)) 0 0; color: var(--muted);
	font-size: clamp(13px, calc(18 * var(--s)), 18px); line-height: 1.7; letter-spacing: 0;
}

/* ==========================================================================
   RESPONSIVE BASE
   ========================================================================== */
@media (max-width: 991px) {
	.sq { --s: calc(100vw / 1100); }
	.sq_wrap { width: 100%; padding-left: 24px; padding-right: 24px; }
	.sq_split { flex-direction: column; gap: 30px; }
	.sq_split > * { width: 100% !important; flex: none !important; }
	.sq_step { gap: 16px; }
}

@media (max-width: 767px) {
	.sq_banner { height: auto; min-height: 250px; padding: 46px 0; }
	.sq_banner h1 { font-size: 48px; letter-spacing: 4px; }
	.sq_banner h3 { font-size: 20px; }
}

@media (max-width: 575px) {
	.sq { --s: calc(100vw / 620); }
	.sq_wrap { padding-left: 18px; padding-right: 18px; }
	.sq_banner { min-height: 220px; padding: 38px 0; }
	.sq_banner h1 { font-size: 38px; letter-spacing: 3px; }
	.sq_banner h3 { font-size: 16px; }
	.sq_banner .sq_rule { margin: 14px 0; }
	.sq_chip { width: calc(50% - 6px); max-width: 92px; }

}


/* design: the FAQ heading uses textCase UPPER */
.sq_faq h2 { text-transform: uppercase; }

/* ==========================================================================
   TESTING & QUALITY CONTROL — shared section (includes/testing-section.php)
   3 inspection boxes + 6 lab columns of 272; odd columns = image then text,
   even columns = text then image (image always 163 from the top)
   ========================================================================== */
.sq_testing { background: var(--soft); padding: calc(153 * var(--s)) 0 calc(159 * var(--s)); text-align: center; }
.sq_testing .sq_h2 { margin-bottom: calc(15 * var(--s)); }
.sq_testing_sub {
	font-size: clamp(15px, calc(22 * var(--s)), 22px); line-height: 1.45; font-weight: 500;
	color: rgba(0,0,0,.88); margin: 0 auto calc(96 * var(--s));
}
.sq_inspect { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(46 * var(--s)); text-align: left; margin-bottom: calc(150 * var(--s)); }
.sq_inspect > div { border: 1px solid rgba(0,0,0,.24); border-radius: var(--r); padding: calc(36 * var(--s)); min-height: calc(162 * var(--s)); }
.sq_inspect h3 { margin-bottom: calc(13 * var(--s)); }
.sq_inspect p { color: rgba(0,0,0,.8); }
.sq_lab_title {
	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(80 * var(--s));
}
.sq_labs { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(26 * var(--s)); text-align: left; }
.sq_lab { display: flex; flex-direction: column; gap: calc(23 * var(--s)); }
.sq_lab:nth-child(even) { flex-direction: column-reverse; justify-content: flex-end; }
.sq_lab:nth-child(even) .sq_lab_txt { min-height: calc(140 * var(--s)); }
.sq_lab img { width: 100%; height: calc(483 * var(--s)); min-height: 220px; object-fit: cover; border-radius: var(--r); display: block; }
.sq_lab_txt { border-top: 1px solid rgba(0,0,0,.16); padding: calc(22 * var(--s)) 0; }
.sq_lab_txt h3 { margin-bottom: calc(7 * var(--s)); }
.sq_lab_txt p { color: rgba(0,0,0,.78); }

@media (max-width: 1199px) {
	.sq_labs { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
	.sq_lab:nth-child(even) { flex-direction: column; }
	.sq_lab:nth-child(even) .sq_lab_txt { min-height: 0; }
}
@media (max-width: 991px) {
	.sq_inspect { gap: 16px; }
	.sq_inspect > div { padding: 22px 14px; }
	.sq_labs { gap: 22px 16px; }
	.sq_lab img { height: 320px; }
}
@media (max-width: 575px) {
	.sq_inspect { grid-template-columns: 1fr; }
	.sq_labs { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.sq_lab img { height: 240px; min-height: 0; }
}