/*
 * Sigma Blocks, design tokens and component styles.
 *
 * Every value here is read off the Figma file, not eyeballed. See
 * _project/design/DESIGN-SYSTEM.md for the extraction and the node IDs.
 *
 * The design canvas is 1920 wide with a 285 side margin, so the container is 1350.
 */

:root {
	/* Colour */
	--sigma-navy: #141D38;
	--sigma-navy-deep: #010F25;
	--sigma-ink: #06151D;
	--sigma-yellow: #F9B401;
	--sigma-yellow-2: #F5C400;
	--sigma-yellow-dark: #DB9901;
	--sigma-yellow-bright: #FFB800;
	--sigma-yellow-pale: #F7DC85;
	--sigma-cream: #FBF8E9;
	--sigma-cream-2: #FFF9EB;
	--sigma-sand: #F2EFC8;
	--sigma-grey-1: #424242;
	--sigma-grey-2: #333333;
	--sigma-blue-grey: #B1C7DB;
	--sigma-white: #FFFFFF;

	/* Type. Figtree stands in for Aeonik, which is licensed. D101. */
	--sigma-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fs-display: clamp(36px, 4.4vw, 70px);
	--fs-h1: clamp(32px, 3.6vw, 64px);
	--fs-h2: clamp(28px, 2.4vw, 40px);
	--fs-h3: clamp(20px, 1.4vw, 24px);
	--fs-h4: 20px;
	--fs-lead: 18px;
	--fs-body: 16px;
	--fs-small: 14px;

	/* Shape */
	--sigma-radius: 30px;
	--sigma-radius-card: 24px;
	--sigma-radius-sm: 20px;
	--sigma-pill: 999px;

	/* Layout */
	--sigma-container: 1350px;
	--sigma-gutter: 24px;
	--sigma-section-y: clamp(56px, 6vw, 100px);
}

/* ---------------------------------------------------------------- base */

body {
	font-family: var(--sigma-font);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--sigma-grey-1);
}

/* The design's content column is 1350 wide on a 1920 canvas, which puts its left edge
   at exactly 285. Padding has to sit OUTSIDE that 1350 or every component lands a gutter in
   from where the design puts it. */
.sigma-container {
	max-width: calc(var(--sigma-container) + (2 * var(--sigma-gutter)));
	margin: 0 auto;
	padding: 0 var(--sigma-gutter);
}

/* ---------------------------------------------------------------- buttons */

.sigma-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sigma-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 25px;
	border-radius: var(--sigma-radius);
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 28px;
	color: var(--sigma-grey-2);
	text-decoration: none;
	transition: background-color .18s ease, transform .18s ease;
}

.sigma-btn:hover { transform: translateY(-1px); color: var(--sigma-grey-2); }
.sigma-btn--primary { background: var(--sigma-yellow-2); }
.sigma-btn--primary:hover { background: var(--sigma-yellow-dark); }
.sigma-btn--plain {
	background: var(--sigma-white);
	border: 1px solid #DDD;
}

.sigma-btn--plain:hover { background: var(--sigma-cream); border-color: #CFCFCF; }

/* The arrow is the design's own, pulled out of Figma as vector geometry rather than
   redrawn. It is a filled circle with an arrow knocked out, so it is used as a mask and
   takes the button's text colour. */
.sigma-btn__icon {
	width: 23px;
	height: 23px;
	flex: 0 0 23px;
	background: currentColor;
	-webkit-mask: url('icons/icon-arrow.svg') center / contain no-repeat;
	mask: url('icons/icon-arrow.svg') center / contain no-repeat;
}

/* ---------------------------------------------------------------- banner */
/* Figma 206:509. Section is 800 tall including the 150 header, so the block itself
   is 650 with 207 of padding top and bottom. */

/* Figma 206:509, rebuilt from the file's own vector geometry rather than approximated.
   The yellow is ONE organic shape used twice, 1226x1317, one bleeding off the left edge
   and one off the right. It lives in banner-shape.svg. Stretching it with 100% 100% keeps
   the composition identical at every width, which a circle or a clip-path never did.

   Art positions are the design's, expressed as percentages of its 1920x650 block:
     fleet        378,245  1105x583   ->  left 19.69%  top 37.69%  width 57.55%
     hanging bin 1018,  0   554x538   ->  left 53.02%  top     0%  width 28.85%
*/

.sigma-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--sigma-sand) url('banner-shape.svg') center / 100% 100% no-repeat;
}

.sigma-banner__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.sigma-banner__art img {
	position: absolute;
	left: 19.69%;
	top: 37.69%;
	width: 57.55%;
	max-width: 1105px;
	height: auto;
	object-fit: contain;
}

/* The wrapper holds the design's position; the image inside only swings. Slightly
   larger than the design's 28.85% because Babar asked for a bigger bin. */

.sigma-banner__art .sigma-banner__art2 {
	position: static;
	left: auto;
	top: auto;
	width: 100%;
	max-width: none;
}

.sigma-banner__inner {
	position: relative;
	z-index: 2;
	display: flex;
	/* The design's banner is 800 tall including the 150 header, so the block is exactly
	   650. Text starts at y207 within it. The bottom padding was ADDING to that height
	   rather than sitting inside it, which is why the banner ran far taller than the
	   design. min-height does the work now and the padding lives inside it. */
	align-items: flex-start;
	/* 650 of a 1920 canvas is 33.85vw. A fixed 650px only equals the design's height at
	   exactly 1920 wide: at 1574 it measured 793 design pixels, which is why the banner
	   read as far too tall. Expressed as vw it holds the proportion at every width. */
	min-height: clamp(360px, 33.85vw, 700px);
	padding: clamp(48px, 10.78vw, 207px) 0 clamp(24px, 2vw, 40px);
}

.sigma-banner__text { max-width: min(577px, 44vw); }

.sigma-banner__crumbs {
	display: block;
	margin-bottom: 10px;
	font-size: var(--fs-lead);
	line-height: 28px;
	color: var(--sigma-yellow-dark);
}

.sigma-banner__crumbs a { color: inherit; text-decoration: none; }
.sigma-banner__crumbs a:hover { text-decoration: underline; }

/* Figma 206:509 measured: breadcrumb 18/28 #DB9901, 10 gap, h1 70/80, 10 gap,
   sub 18/28 at 525 wide, 30 gap, buttons 50 tall with 16 between. */

.sigma-banner__sub {
	max-width: 525px;
	margin: 0 0 30px;
	font-size: var(--fs-lead);
	line-height: 28px;
	color: var(--sigma-grey-2);
}

/* ---------------------------------------------------------------- keep reading */
/* Figma 206:2123. Four cards, 322 wide, 20 gap, 133 tall, radius 24. */

.sigma-keep-reading__title {
	margin: 0 0 30px;
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.3;
	color: var(--sigma-navy);
	text-align: center;
}

.sigma-kr-card {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 133px;
	padding: 25px;
	background: var(--sigma-cream);
	border-radius: var(--sigma-radius-card);
	text-decoration: none;
	transition: background-color .18s ease, transform .18s ease;
}

.sigma-kr-card:hover { background: var(--sigma-yellow-pale); transform: translateY(-2px); }

.sigma-kr-card__title {
	display: block;
	margin: 0 0 4px;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 28px;
	color: var(--sigma-navy);
}

.sigma-kr-card__text {
	display: block;
	margin: 0;
	font-size: var(--fs-small);
	line-height: 20px;
	color: var(--sigma-grey-1);
}

/* ---------------------------------------------------------------- cta band */
/* Figma 206:252. Cream card 1350x394 radius 30, sitting 210 proud of a navy band. */

/* The glow is gone. It was drawn for a band that ended at the footer; now the card
   overlaps the seam it only smeared a haze across the top of the footer. */

.sigma-cta__body { position: relative; z-index: 2; max-width: 850px; margin: 0 auto; }

.sigma-cta__title {
	margin: 0 0 15px;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.3;
	color: var(--sigma-navy);
}

.sigma-cta__text { margin: 0 0 15px; font-size: var(--fs-body); line-height: 24px; color: var(--sigma-grey-1); }
.sigma-cta__note { margin: 0 0 50px; font-size: var(--fs-body); font-weight: 500; line-height: 24px; color: var(--sigma-grey-1); }
.sigma-cta__card .sigma-buttons { justify-content: center; }

.sigma-cta__art {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

/* Figma 206:252. The bin hangs from the card's top left at 275 wide on a 1350 card.
   The tipper sits at 439 wide, overflowing the card's bottom right edge. Both are set
   as a percentage of the card so they hold their place at any width. */
.sigma-cta__art--left { left: 6px; top: 0; width: 20.4%; max-width: 275px; }
/* Figma 206:252. The tipper breaks the card's right edge by 51 of the 1350, which is
   what stops the card reading as a plain rounded box. It was at -1%, 13px, which was
   not enough to register as deliberate. */
.sigma-cta__art--right { right: -3.8%; bottom: -13%; width: 32.5%; max-width: 439px; }
.sigma-cta__art img { width: 100%; height: auto; display: block; }

/*
 * Keep reading centres its cards. A four column grid left a row of three hanging off
 * the left edge, and simply switching to flex let four wrap to 3 + 1, so the basis is
 * set explicitly: four fit on one row, three centre.
 */
.sigma-keep-reading__grid {
	display: flex;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
	.sigma-keep-reading__grid { grid-template-columns: repeat(2, 1fr); }
	.sigma-cta__art { display: none; }
}

@media (max-width: 1100px) {
	.sigma-banner__text { max-width: none; }
}

/* ---------------------------------------------------------------- cta over the footer */
/* The card is meant to sit across the seam, not stack above it. */

.sigma-cta {
	position: relative;
	background: linear-gradient(to bottom, transparent 0 210px, var(--sigma-navy) 210px);
	padding-bottom: 0;
	margin-bottom: -110px;
	z-index: 2;
}

/* The hero block is 587 on the design's 1920 canvas, measured from the header line to
   where the plate turns white, and the heading starts 121 into it. align-items:center
   was splitting the difference and starting the text 60 too high. */

/* ------------------------------------------- CTA and keep reading, measured */
/*
 * The CTA band is 290 on the design's canvas and was running 390, because the card
 * carried 80 top and bottom against the design's 56. Keep reading is 375 and was
 * running 339. Both appear on every page, so 100px per page was coming from here.
 */

.sigma-cta__card {
	position: relative;
	z-index: 2;
	padding: 56px clamp(24px, 4vw, 90px);
	border-radius: var(--sigma-radius);
	text-align: center;
}

@media (max-width: 849px) {
	.sigma-banner { display: flex; flex-direction: column; background-size: 200% 100%; }
	.sigma-banner .sigma-container { order: 1; }
	.sigma-banner__art { order: 2; position: relative; inset: auto; height: 230px; }
	.sigma-banner__art img { position: absolute; left: 4%; top: auto; bottom: 0; width: 92%; }
	.sigma-banner__art .sigma-banner__art2 { display: none; }
	.sigma-banner__inner { min-height: 0; padding: 48px 0 24px; }
	.sigma-banner__sub { margin-bottom: 30px; }
	.sigma-keep-reading__grid { grid-template-columns: 1fr; }
	.sigma-cta { background: linear-gradient(to bottom, transparent 0 120px, var(--sigma-navy) 120px); }
	.sigma-cta__card { padding: 40px 24px; }
	.sigma-cta__note { margin-bottom: 30px; }
	.sigma-buttons .sigma-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- shared section parts */

.sigma-bg-white { background: var(--sigma-white); }
.sigma-bg-cream { background: var(--sigma-cream); }
.sigma-bg-sand  { background: var(--sigma-sand); }
.sigma-bg-yellow { background: var(--sigma-yellow-2); }

.sigma-section-title {
	margin: 0 0 15px;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.3;
	color: var(--sigma-navy);
}

.sigma-section-sub {
	max-width: 942px;
	margin: 0 0 30px;
	font-size: var(--fs-body);
	line-height: 24px;
	color: var(--sigma-grey-1);
}

.sigma-section-title--center,
.sigma-section-sub--center { text-align: center; margin-left: auto; margin-right: auto; }
.sigma-section-title--ink { color: #000; }
.sigma-section-sub--ink { color: #000; }

/* ---------------------------------------------------------------- icon list */
/* Figma 206:7148 photo right, 206:8234 photo left. One component, D105. */

.sigma-iconlist { padding: 80px 0; }

.sigma-iconlist--img-left .sigma-iconlist__col { order: 2; }
.sigma-iconlist--img-left .sigma-iconlist__media { order: 1; }

.sigma-iconlist__items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }

.sigma-iconlist__media img {
	width: 100%;
	height: auto;
	border-radius: var(--sigma-radius);
	display: block;
}

.sigma-iconitem { display: flex; gap: 20px; align-items: flex-start; }

.sigma-iconitem__icon {
	flex: 0 0 74px;
	width: 74px;
	height: 74px;
	border-radius: var(--sigma-pill);
	background: var(--sigma-white);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sigma-iconitem__icon img { width: 36px; height: 36px; object-fit: contain; }

.sigma-iconitem__title {
	margin: 0 0 10px;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 32px;
	color: var(--sigma-navy);
}

.sigma-iconitem__text { margin: 0; font-size: var(--fs-body); line-height: 24px; color: var(--sigma-grey-1); }

/* ---------------------------------------------------------------- size grid */
/* Figma 206:7495. Cards 323 wide, 20 gap, radius 24, cream. */

.sigma-sizegrid { padding: 80px 0; }

/* Figma 206:552: white cards on the cream band, the title underlined in yellow, four
   spec rows, and the button centred at the foot of the card. */

.sigma-sizecard__media img { width: 100%; height: 100%; object-fit: contain; }

/* Figma 206:7495 labels the drawing with its length and height. They sit on the
   illustration, not under it, with a hairline leader so they read as measurements. */

/* height sits up the left side, length runs along the bottom */

.sigma-sizecard__price { margin: 4px 10px 0; font-size: var(--fs-lead); font-weight: 500; color: var(--sigma-navy); }
.sigma-sizecard__text { margin: 10px 10px 20px; font-size: var(--fs-body); line-height: 24px; color: var(--sigma-grey-1); }

/* ---------------------------------------------------------------- waste grid */
/* Figma 206:8285. Five white cards, 253 wide, 20 gap, centred. */

.sigma-wastegrid { padding: 80px 0; }

.sigma-wastecard {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 20px;
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-card);
	text-align: center;
}

.sigma-wastecard__icon {
	width: 74px;
	height: 74px;
	border-radius: var(--sigma-pill);
	background: #FCFCF4;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
	overflow: hidden;
}

.sigma-wastecard__icon img { width: 36px; height: 36px; object-fit: contain; }

.sigma-wastecard__title {
	margin: 0 0 5px;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 30px;
	color: var(--sigma-navy);
}

.sigma-wastecard__text { margin: 0 0 15px; font-size: var(--fs-body); line-height: 24px; color: var(--sigma-grey-1); }

/* ---------------------------------------------------------------- faq */
/* Figma 206:8746. Yellow band, cream rows at radius 24, black round toggle. */

.sigma-faq__list { max-width: 950px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 20px; }

.sigma-faq__q::-webkit-details-marker { display: none; }

.sigma-faq__toggle {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: var(--sigma-pill);
	background: #000;
	position: relative;
	transition: transform .2s ease;
}

.sigma-faq__toggle::before,
.sigma-faq__toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	background: var(--sigma-white);
	transform: translate(-50%, -50%);
}

.sigma-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .2s ease; }
.sigma-faq__item[open] .sigma-faq__toggle::after { opacity: 0; }

.sigma-faq__a { padding-top: 15px; font-size: var(--fs-body); line-height: 24px; color: var(--sigma-grey-1); }
.sigma-faq__a p { margin: 0 0 12px; }
.sigma-faq__a p:last-child { margin-bottom: 0; }
.sigma-wastegrid__grid {
	display: grid;
	grid-template-columns: repeat(var(--sigma-cols, 5), 1fr);
	gap: 20px;
	margin-top: 30px;
}

/* Seven cards in a four column layout means a row of four and a row of three. Grid cannot
   centre an orphan row, so this is flex: the last three centre themselves. */
.sigma-sizegrid__grid {
	display: flex;
	grid-template-columns: repeat(var(--sigma-cols, 4), 1fr);
	gap: 20px;
	margin-top: 30px;
	flex-wrap: wrap;
	justify-content: center;
}

/* --------------------------------------------- the icon list, placed by grid areas */
/*
 * Figma 176:4076. With the picture on the right the heading sits above the list; with
 * the picture on the left the heading sits above the PICTURE and the list takes the
 * whole right column. Same component, and the placement follows the side.
 */

.sigma-iconlist__grid {
	display: grid;
	grid-template-columns: 663px 1fr;
	gap: 0 60px;
	align-items: start;
}

.sigma-iconlist--img-left .sigma-iconlist__grid {
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "head items" "media items";
}

.sigma-iconlist--img-left .sigma-iconlist__col,
.sigma-iconlist--img-left .sigma-iconlist__media { order: 0; }

/* ---------------------------------------------------------------- responsive, batch 2 */

@media (max-width: 1280px) {
	.sigma-iconlist__grid,
	.sigma-iconlist--img-left .sigma-iconlist__grid { grid-template-columns: 1fr; gap: 40px; }
	.sigma-iconlist--img-left .sigma-iconlist__col,
	.sigma-iconlist--img-left .sigma-iconlist__media { order: 0; }
	.sigma-wastegrid__grid { grid-template-columns: repeat(3, 1fr); }
	.sigma-sizegrid__grid { grid-template-columns: repeat(3, 1fr); }
}

/* the FAQ band has to let the bin hang past its lower edge */
.sigma-faq {
	padding: 80px 0;
	position: relative;
	overflow: visible;
}

.sigma-faq__item {
	background: #FFFDF2;
	border-radius: var(--sigma-radius-card);
	padding: 25px 21px;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.sigma-keep-reading {
	padding: 76px 0;
	background: var(--sigma-white);
}

@media (max-width: 849px) {
	.sigma-iconlist, .sigma-sizegrid, .sigma-wastegrid, .sigma-faq, .sigma-keep-reading { padding: 48px 0; }
	.sigma-wastegrid__grid,
	.sigma-sizegrid__grid { grid-template-columns: repeat(2, 1fr); }
	.sigma-iconitem__icon { flex-basis: 56px; width: 56px; height: 56px; }
	.sigma-faq__item { padding: 18px; }
	.sigma-faq__toggle { flex-basis: 36px; width: 36px; height: 36px; }
}

@media (max-width: 560px) {
	.sigma-wastegrid__grid,
	.sigma-sizegrid__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- feature */
/* Figma 206:8390 navy, 206:8707 cream. One block, two backgrounds. */

.sigma-bg-navy { background: var(--sigma-navy); }

/* Figma 206:4477. The intro under the banner is a short section, 494 tall on a 1920
   canvas: a 374 tall photo beside about five lines. Left unconstrained it ran to more
   than double that. */

/* The design draws this truck 509x300. It was rendering 636x374, a fifth too big. */
/* The intro picture fills its column, as every frame draws it. Capped at 300 tall it sat
   small and centred, lining up with nothing. Babar, 27 September 2026. */
.sigma-feature--intro .sigma-feature__media img { width: 100%; height: auto; max-height: none; margin: 0; }
.sigma-feature--intro .sigma-feature__grid { align-items: center; gap: 48px; }
.sigma-feature--intro .sigma-feature__body { font-size: var(--fs-body); }

.sigma-feature__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.sigma-feature--img-left .sigma-feature__col { order: 2; }
.sigma-feature--img-left .sigma-feature__media { order: 1; }

.sigma-feature__media img { width: 100%; height: auto; display: block; border-radius: var(--sigma-radius); }
.sigma-feature__body { font-size: var(--fs-body); line-height: 24px; color: var(--sigma-grey-1); }
.sigma-feature__body p { margin: 0 0 16px; }
.sigma-feature__body a { color: var(--sigma-navy); text-decoration: underline; text-underline-offset: 3px; }
.sigma-feature .sigma-buttons { margin-top: 24px; }

.sigma-feature--dark .sigma-section-title { color: var(--sigma-white); }
.sigma-feature--dark .sigma-feature__body { color: #D7DEE8; }
.sigma-feature--dark .sigma-feature__body a { color: var(--sigma-yellow); }
.sigma-feature--dark .sigma-feature__media img { border-radius: 0; }

/* ---------------------------------------------------------------- size card specs */
/* Figma 206:7495 card body: label and value rows under the title. */

.sigma-sizecard__specs {
	margin: 0 6px 18px;
	padding: 0;
	border-top: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 10px;
	text-align: left;
	font-size: var(--fs-small);
	line-height: 20px;
}

.sigma-sizecard__specs dt { margin: 0; color: var(--sigma-grey-1); font-weight: 400; }
.sigma-sizecard__specs dd { margin: 0; color: var(--sigma-navy); font-weight: 500; }

/* ---------------------------------------------------------------- waste card link arrow */

.sigma-wastecard__link::after {
	content: '';
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url('icons/icon-arrow.svg') center / contain no-repeat;
	mask: url('icons/icon-arrow.svg') center / contain no-repeat;
}

@media (max-width: 1100px) {
	.sigma-feature__grid,
	.sigma-feature--img-left .sigma-feature__grid { grid-template-columns: 1fr; gap: 32px; }
	.sigma-feature--img-left .sigma-feature__col,
	.sigma-feature--img-left .sigma-feature__media { order: 0; }
}

/* ------------------------------------------------ feature padding, measured */
/*
 * The design's split feature bands run about 550 tall around a 340 tall picture, which
 * is roughly 52 above and below, not 80. Measured on Figma 176:4076 bands 4259 and 5495.
 * The centred variants carry full width artwork and keep the larger figure.
 */

.sigma-feature {
	padding: 54px 0;
	position: relative;
}

@media (max-width: 849px) {
	.sigma-feature { padding: 48px 0; }
}

/* FlatSome uppercases dt and a few other elements globally. Our components set their
   own case from the design, so this switches it back inside sigma blocks only. */
[class^="sigma-"] dt,
[class^="sigma-"] dd,
.sigma-sizecard__specs dt,
.sigma-sizecard__specs dd,
.sigma-kr-card__title,
.sigma-wastecard__title,
.sigma-iconitem__title { text-transform: none; letter-spacing: normal; }

/* Footer logo. The footer itself is Babar's, this only sizes the image he asked for. */
.sigma-footer-logo { margin: 0 0 20px; }
.sigma-footer-logo img { max-width: 200px; height: auto; display: block; }

/* ---------------------------------------------------------------- hero */
/* Figma 206:6694. Canvas 1920x856 with a 150 header, so 706 of block.
   Text column starts at 285, form card is 580 wide at x1090, radius 24. */

.sigma-hero {
	position: relative;
	background: var(--sigma-sand);
	overflow: hidden;
	isolation: isolate;
}

.sigma-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Figma has the trucks 1057 wide centred on the section with the bottom running past
   the edge, and the bin 481 wide filling the full 706 of height. Both are set from width
   so the proportions hold at every viewport, not from height. */

.sigma-hero__backdrop {
	position: absolute;
	left: 50%;
	bottom: -14%;
	width: 58%;
	max-width: 1057px;
	transform: translateX(-50%);
	/* washed back hard, the way the design has it. The bin in front is the subject. */
	opacity: .32;
	filter: saturate(.75);
}

/* The design's bin is 705 tall in a 706 block, so it fills the hero height. The wrapper
   carries the position and the drop; the image inside only swings. */

.sigma-hero__bin {
	position: static;
	height: 100%;
	width: auto;
	max-width: none;
	transform: none;
}

.sigma-hero__col { max-width: 620px; }

.sigma-hero__title {
	margin: 0 0 24px;
	font-size: clamp(34px, 3.4vw, 64px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--sigma-navy);
}

.sigma-hero__sub {
	max-width: 577px;
	margin: 0 0 32px;
	font-size: var(--fs-lead);
	line-height: 28px;
	color: var(--sigma-grey-2);
}

/* the yellow quote card */

.sigma-hero__card {
	position: relative;
	z-index: 3;
	padding: 30px;
	background: var(--sigma-yellow-2);
	border-radius: var(--sigma-radius-card);
	box-shadow: 0 18px 40px rgba(20, 29, 56, .12);
}

.sigma-hero__cardhead { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.sigma-hero__badge { width: 96px; height: auto; flex: 0 0 96px; }

.sigma-hero__formtitle {
	margin: 0 0 4px;
	font-size: 26px;
	font-weight: 600;
	line-height: 36px;
	color: var(--sigma-navy-deep);
}

.sigma-hero__formsub { margin: 0; font-size: var(--fs-body); line-height: 26px; color: #000; }

/* [sigma_get_price] lives inside the card, so it is styled here rather than duplicated */

.sigma-hero__card .wdegp__heading { display: none; }

.sigma-hero__card .wdegp__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
	align-items: end;
}

.sigma-hero__card .wdegp__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }

.sigma-hero__card button,
.sigma-hero__card .wdegp__submit,
.sigma-hero__card input[type="submit"] {
	height: 50px;
	margin: 0;
	padding: 0 25px;
	border: 0;
	border-radius: var(--sigma-radius);
	background: var(--sigma-white);
	color: var(--sigma-grey-2);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 50px;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.sigma-hero__card button:hover,
.sigma-hero__card input[type="submit"]:hover { background: var(--sigma-cream); }

/* the quote card's submit is white on yellow, so it takes the hairline too */
.sigma-hero__card input[type="submit"],
.wdegp__submit { border: 1px solid #DDD; }

/* the form labels the design sets in medium */
.sigma-hero__card .wdegp__field label {
	font-size: var(--fs-small);
	line-height: 20px;
	font-weight: 600;
	color: var(--sigma-navy-deep);
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}
.sigma-hero__card .wdegp__note { margin: 14px 0 0; font-size: var(--fs-small); line-height: 20px; color: var(--sigma-navy-deep); grid-column: 1 / -1; }

/* ================================================ home hero, 25 September 2026 */
/*
 * A taller block, the content sitting above centre rather than pushed down by a top
 * padding, and the bin dropped so it stops sitting behind the quote card. The bin is
 * centred on the whole hero while the card occupies the right column, so any part of
 * the bin above the card's bottom edge reads as clutter behind it.
 */

/*
 * The block height and the bin are fixed. What moves is the content: align-items:center
 * was centring the text column and the card in the 652 of row left under the bottom
 * padding, which put the heading 146 down and the card 173 down. Anchored to the top
 * with an 88 lead they sit where the design puts them, about 16% into the block, and
 * both columns start on the same line instead of each centring on its own height.
 */
.sigma-hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 580px;
	gap: 40px;
	align-items: start;
	min-height: 772px;
	padding: 88px 0 120px;
}

/*
 * hero-bin-a is 900x1319: the chain is the top 67% of it and the bin body the rest, so
 * the whole image has to reach the top of the block or the chain stops in mid air and
 * the bin reads as detached. It is anchored to the TOP for that reason, not the bottom.
 *
 * At 92% of the block the body starts 476px down, and the quote card's bottom edge sits
 * at 478px, so the bin begins where the card ends instead of sitting behind it. 92% is
 * also the proportion the design uses, which is what makes the bin the right size.
 */
.sigma-hero .sigma-drop {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: auto;
	height: 92%;
	transform: translateX(-50%);
	animation-name: sigma-hero-bin-drop;
}

/* ---------------------------------------------------------------- hero, narrower */

@media (max-width: 1400px) {
	.sigma-hero__grid { grid-template-columns: minmax(0, 1fr) 520px; }
	.sigma-hero .sigma-drop { transform: translateX(-62%); }
	.sigma-hero__backdrop { width: 54%; }
}

@media (max-width: 1100px) {
	/* The art is first in the markup because on desktop it is an absolute backdrop.
	   Stacked, it has to come last, so the hero becomes a flex column and the order is
	   set explicitly rather than by source order. */
	.sigma-hero { display: flex; flex-direction: column; }
	.sigma-hero .sigma-container { order: 1; }
	.sigma-hero__stage { position: static; order: 2; }

	.sigma-hero__grid {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 40px 0 0;
		gap: 28px;
	}
	.sigma-hero__col { max-width: none; }
	.sigma-hero .sigma-drop { display: none; }
	.sigma-hero__backdrop {
		position: static;
		transform: none;
		width: 100%;
		max-width: 560px;
		margin: 28px auto 0;
		display: block;
		opacity: 1;
	}
}

@media (max-width: 560px) {
	.sigma-hero__card { padding: 22px 18px; }
	.sigma-hero__card .wdegp__form { grid-template-columns: 1fr; }
	.sigma-hero__cardhead { gap: 12px; }
	.sigma-hero__badge { width: 64px; flex-basis: 64px; }
	.sigma-hero__formtitle { font-size: 22px; line-height: 30px; }
	.sigma-hero__sub { margin-bottom: 24px; }
}

/* A feature with no photo is one full width column of prose, not a half empty grid. */
.sigma-feature--noimg .sigma-feature__grid { grid-template-columns: 1fr; }
.sigma-feature--noimg .sigma-feature__body { max-width: 900px; }

/* Prose inside a feature block. The content is real editorial HTML, so lists, tables
   and strong runs all have to read properly, not just paragraphs. */
.sigma-feature__body ul,
.sigma-feature__body ol { margin: 0 0 16px; padding-left: 22px; }
.sigma-feature__body li { margin: 0 0 10px; }
.sigma-feature__body li > p { margin: 0; }
.sigma-feature__body h3 { margin: 24px 0 8px; font-size: var(--fs-h3); font-weight: 500; color: var(--sigma-navy); }
.sigma-feature__body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: var(--fs-body); }
.sigma-feature__body th,
.sigma-feature__body td { padding: 10px 12px; border-bottom: 1px solid rgba(20,29,56,.12); text-align: left; }
.sigma-feature__body th { font-weight: 500; color: var(--sigma-navy); }
.sigma-feature--dark .sigma-feature__body th,
.sigma-feature--dark .sigma-feature__body td { border-bottom-color: rgba(255,255,255,.18); }
.sigma-feature--dark .sigma-feature__body th { color: var(--sigma-white); }

/* ---------------------------------------------------------------- footer */
/* Figma 206:252. Navy, five columns, headings over a thin yellow rule, and a contact
   column of ringed icons. The footer markup is FlatSome's widget output, so this styles
   what the widgets produce rather than replacing them. */

.footer-1 .widget > .widget-title,
.footer-1 .widget .widget-title span,
.footer-1 .widget-title {
	color: var(--sigma-white);
	font-size: var(--fs-lead);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.footer-1 .widget .widget-title { position: relative; padding-bottom: 12px; margin-bottom: 18px; }

.footer-1 .widget .widget-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	background: var(--sigma-yellow);
}

.footer-1 p,
.footer-1 li,
.footer-1 span { color: #C6CEDC; font-size: var(--fs-body); line-height: 26px; }

.footer-1 a { color: #C6CEDC; text-decoration: none; }
.footer-1 a:hover { color: var(--sigma-yellow); }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 10px; }

.footer-contact { list-style: none; margin: 0; padding: 0; }

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 18px;
}

.sigma-fi {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: var(--sigma-pill);
	border: 1px solid rgba(249, 180, 1, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sigma-yellow);
}

.sigma-fi svg { width: 18px; height: 18px; }

.absolute-footer,
.absolute-footer a { color: #96A2B6; font-size: var(--fs-small); }

@media (max-width: 849px) {
	.footer-1 .widget { margin-bottom: 28px; }
	.sigma-footer-logo img { margin: 0 auto; }
}

/* ---------------------------------------------------------------- maintenance */
/* The holding page. Navy, because the logo is white on transparency and disappears on
   FlatSome's default white banner. Bin above, logo under it, one line, one phone number. */

.sigma-maint {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px 64px;
	background:
		radial-gradient(900px 420px at 50% 112%, rgba(255, 184, 0, .28), rgba(255, 184, 0, 0) 70%),
		var(--sigma-navy);
	text-align: center;
}

.sigma-maint__inner { max-width: 620px; width: 100%; }

.sigma-maint__bin {
	display: block;
	width: min(300px, 62vw);
	height: auto;
	margin: 0 auto -6px;
}

.sigma-maint__logo {
	display: block;
	width: min(260px, 60vw);
	height: auto;
	margin: 0 auto 28px;
}

.sigma-maint__title {
	margin: 0 0 14px;
	font-size: clamp(28px, 5vw, 44px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--sigma-white);
}

.sigma-maint__text { margin: 0 0 30px; font-size: var(--fs-lead); line-height: 28px; color: #C6CEDC; }
.sigma-maint__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 560px) {
	.sigma-maint__actions .sigma-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- table */
/* Figma 241:4780. Header row above a cream card at radius 24. */

.sigma-tablesec { padding: 80px 0; }

.sigma-tablecard a { color: #00559F; text-decoration: none; }
.sigma-tablecard a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- yes and no lists */
/* Figma 206:4722. Two white cards at radius 24 with a badge overlapping the top edge. */

.sigma-lists { padding: 80px 0; }
.sigma-lists__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 58px; }

.sigma-listcard {
	position: relative;
	padding: 60px 30px 30px;
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-card);
}

.sigma-listcard__badge {
	position: absolute;
	top: -26px;
	left: 30px;
	right: 30px;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	padding: 0 24px;
	border-radius: var(--sigma-pill);
	font-size: var(--fs-h3);
	font-weight: 600;
	color: var(--sigma-navy);
	background: var(--sigma-yellow-2);
	box-shadow: 0 10px 24px rgba(20, 29, 56, .12);
}

.sigma-listcard__mark {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: var(--sigma-pill);
	background: var(--sigma-white);
	position: relative;
}

.sigma-listcard__mark::before,
.sigma-listcard__mark::after { content: ''; position: absolute; background: var(--sigma-navy); border-radius: 2px; }
.sigma-listcard--yes .sigma-listcard__mark::before { width: 4px; height: 9px;  left: 8px;  top: 12px; transform: rotate(-45deg); }
.sigma-listcard--yes .sigma-listcard__mark::after  { width: 4px; height: 15px; left: 14px; top: 6px;  transform: rotate(35deg); }
.sigma-listcard--no .sigma-listcard__mark::before,
.sigma-listcard--no .sigma-listcard__mark::after { width: 14px; height: 3px; left: 6px; top: 12px; }
.sigma-listcard--no .sigma-listcard__mark::before { transform: rotate(45deg); }
.sigma-listcard--no .sigma-listcard__mark::after  { transform: rotate(-45deg); }

.sigma-listcard__body { font-size: var(--fs-body); line-height: 26px; color: var(--sigma-grey-1); }
.sigma-listcard__body p { margin: 0 0 14px; }

.sigma-listcard__body li { margin: 0 0 10px; }

/* ---------------------------------------------------------------- the table card */
/*
 * Figma 241:4021 band 2546, the council permit table, which is the only table the design
 * actually draws. The header is a yellow gradient bar the full width of the card with
 * navy type on it, the card itself is cream at radius 24 with the header bleeding to its
 * edges, and the first column carries a pin. Everything else on the site that is still a
 * table gets the same treatment, because it is the same object.
 */

.sigma-tablecard {
	margin-top: 24px;
	padding: 0;
	background: var(--sigma-cream);
	border-radius: var(--sigma-radius-card);
	overflow-x: auto;
	overflow: hidden;
}

@media (max-width: 849px) {
	.sigma-tablesec, .sigma-lists { padding: 48px 0; }
	.sigma-lists__grid { grid-template-columns: 1fr; gap: 56px; }
	.sigma-tablecard { padding: 6px 16px 16px; }
	.sigma-listcard__badge { font-size: var(--fs-lead); height: 52px; top: -22px; }
}

/* ---------------------------------------------------------------- blog */
/* No Figma frame covers the blog, so it is built from the same tokens as everything
   else: cream field, white cards at radius 24, navy headings, yellow accents. */

/* The listing is white and clean, Babar, 27 September 2026. A single post keeps cream;
   he is setting the inner post up himself. */
.blog .page-wrapper,
.archive .page-wrapper { background: var(--sigma-white); }
.single-post .page-wrapper { background: var(--sigma-cream); }

/* The post grid runs 1400 wide, the same as the page sections. FlatSome capped it at 1370. */
.blog .blog-wrapper > .row,
.archive .blog-wrapper > .row { max-width: 1400px; }

.blog .post-item,
.archive .post-item { padding: 0 12px 24px; }

.blog .post-item .col-inner,
.archive .post-item .col-inner {
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-card);
	overflow: hidden;
	height: 100%;
}

.blog .post-item .box-text,
.archive .post-item .box-text { padding: 24px; }

.blog .post-item h5,
.archive .post-item h5,
.blog .post-item .post-title,
.archive .post-item .post-title {
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.35;
	color: var(--sigma-navy);
	text-transform: none;
	letter-spacing: normal;
}

.blog .post-item .from_the_blog_excerpt,
.archive .post-item .from_the_blog_excerpt { font-size: var(--fs-body); line-height: 26px; color: var(--sigma-grey-1); }

.blog .post-meta,
.archive .post-meta,
.single-post .post-meta { font-size: var(--fs-small); color: var(--sigma-grey-1); text-transform: none; letter-spacing: normal; }

.single-post .entry-content {
	max-width: 780px;
	margin: 0 auto;
	font-size: var(--fs-lead);
	line-height: 30px;
	color: var(--sigma-grey-1);
}

.single-post .entry-content h2 {
	margin: 34px 0 12px;
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.3;
	color: var(--sigma-navy);
}

.single-post .entry-content p { margin: 0 0 18px; }
.single-post .entry-content a { color: var(--sigma-navy); text-decoration: underline; text-underline-offset: 3px; }
.single-post .entry-header-text { padding: 40px 0 10px; }
.single-post .entry-title { font-size: var(--fs-h2); font-weight: 600; color: var(--sigma-navy); }

/* The blog banner carries the h1, so FlatSome's own archive title block is hidden
   rather than left to render a second heading. */
.sigma-blog .page-title-inner,
.sigma-blog .archive-page-header { display: none; }
.sigma-blog .blog-wrapper { padding-top: 60px; }

/* ---------------------------------------------------------------- the dropped bin */
/*
 * The crane lets go, the bin falls, lands hard, jerks back up once, settles, then swings
 * itself still. Two transforms are needed and one element can only run one, so the
 * wrapper does the fall and the image inside does the swing.
 *
 * The swing is damped rather than looping. A bin that keeps swinging forever reads as a
 * broken GIF, and it competes with the form next to it for attention.
 */

@keyframes sigma-bin-drop {
	0%   { transform: translateY(-128%); }
	64%  { transform: translateY(2.5%); }
	78%  { transform: translateY(-4%); }
	89%  { transform: translateY(1.2%); }
	96%  { transform: translateY(-.4%); }
	100% { transform: translateY(0); }
}

/* The landing jolt, once. */
@keyframes sigma-bin-settle {
	0%   { transform: rotate(0deg); }
	18%  { transform: rotate(-3.6deg); }
	40%  { transform: rotate(2.8deg); }
	64%  { transform: rotate(-2deg); }
	84%  { transform: rotate(1.4deg); }
	100% { transform: rotate(-1.1deg); }
}

/* Then it keeps swinging, forever, gently. Babar asked for it to keep going, so the
   amplitude is small enough to read as a hanging load rather than a metronome. */
@keyframes sigma-bin-swing {
	0%, 100% { transform: rotate(-1.9deg); }
	50%      { transform: rotate(1.9deg); }
}

/* A slower descent that decelerates into the landing, and the bin swings the whole way
   down rather than starting once it arrives. */
.sigma-drop { display: block; animation: sigma-bin-drop 2.7s cubic-bezier(.3, .5, .25, 1) both; }
.sigma-drop img {
	transform-origin: 50% 0;
	/* swinging from the first frame, so it is already moving as it comes down */
	animation: sigma-bin-swing 3.4s ease-in-out 0s infinite;
}

/* the hero wrapper already carries a translateX, so its fall is composed with it */

@keyframes sigma-hero-bin-drop {
	0%   { transform: translateX(-50%) translateY(-128%); }
	64%  { transform: translateX(-50%) translateY(2.5%); }
	78%  { transform: translateX(-50%) translateY(-4%); }
	89%  { transform: translateX(-50%) translateY(1.2%); }
	96%  { transform: translateX(-50%) translateY(-.4%); }
	100% { transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.sigma-drop,
	.sigma-drop img { animation: none !important; }
}

/* ---------------------------------------------------------------- header spacing */
/*
 * Figma 206:509's header instance measures 25px between menu items: Home ends at 599 and
 * the next item starts at 624, and that gap repeats exactly six times across the menu.
 * FlatSome's presets do not land on it, so it is set here rather than approximated.
 * The menu also sits well clear of the logo, 131px in the design.
 */

.header-main .header-nav-main > li > a {
	padding-left: 9px;
	padding-right: 9px;
	font-size: var(--fs-lead);
	line-height: 28px;
	letter-spacing: normal;
}

.header-main .flex-left .header-nav-main { margin-left: clamp(16px, 3vw, 70px); }

/* the design has no search icon in the header */
.header-main .header-search,
.header-main .header-search-form { display: none; }

/* the quote button is the design's pill: 271x50 at radius 30 */
.header-main .header-button-1 .button {
	height: 50px;
	line-height: 50px;
	border-radius: 30px;
	padding: 0 25px;
	font-size: var(--fs-lead);
	font-weight: 500;
	letter-spacing: normal;
	margin: 0;
}

/* ---------------------------------------------------------------- hanging bins elsewhere */
/*
 * Any bin that hangs gets the same treatment. On the CTA band and further down the page
 * the drop is triggered when the section scrolls into view rather than on load, because
 * an animation that has already finished by the time you reach it is a wasted animation.
 */

.sigma-cta__art--left,
.sigma-hang { transform-origin: 50% 0; }

.sigma-hang--pending { opacity: 0; }

.sigma-hang--go {
	opacity: 1;
	animation:
		sigma-bin-drop 2.7s cubic-bezier(.3, .5, .25, 1) both,
		sigma-bin-swing 3.4s ease-in-out 0s infinite;
}

/* the CTA band's bin hangs off the card's top edge, so it swings from its own top */
.sigma-cta__art--left.sigma-hang--go { animation-name: sigma-bin-drop, sigma-bin-settle, sigma-bin-swing; }

/* ---------------------------------------------------------------- focus glow */
/*
 * The postcode is the first thing anyone touches on this site, so it gets a visible,
 * branded focus state rather than the browser's default outline.
 */

.wdegp__field input:focus,
.wdegp__field select:focus,
.wdebk__field input:focus,
.wdebk__field select:focus,
.wdebk__field textarea:focus {
	outline: none;
	border-color: var(--sigma-navy);
	box-shadow:
		0 0 0 3px rgba(249, 180, 1, .45),
		0 0 18px 2px rgba(249, 180, 1, .55);
	transition: box-shadow .18s ease, border-color .18s ease;
}

/* in the hero card the fields sit ON yellow, so the glow goes light instead */
.sigma-hero__card .wdegp__field input:focus,
.sigma-hero__card .wdegp__field select:focus {
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, .85),
		0 0 20px 3px rgba(20, 29, 56, .25);
}

/* the design tints the hero fields rather than leaving them stark white */
/*
 * The fields on the hero's yellow card only. The design shows the yellow coming through
 * them, so the fill is white at 75% rather than the solid cream it was.
 *
 * It is rgba on background-color, not opacity: opacity would fade the typed value and
 * the placeholder with it, and a customer's postcode has to stay legible.
 */
/*
 * 50px to match the See prices button sitting beside the size select, and a white
 * hairline so each field reads as its own box against the yellow rather than as a pale
 * patch of it. box-sizing keeps the border inside the 50, so the row still lines up.
 */
.sigma-hero__card .wdegp__field input, .sigma-hero__card .wdegp__field select {
	height: 50px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--sigma-white);
	border-radius: 10px;
	box-shadow: none;
	font-size: var(--fs-body);
	color: var(--sigma-grey-2);
	background-color: rgba(255, 255, 255, .75);
}

/* ---------------------------------------------------------------- cta and footer seam */

/* the CTA band was sitting hard against the footer with no breathing room */

/* FlatSome drops a gradient over the footer top which muddied the navy */
.footer-1,
.footer-2 { background-image: none; }

.absolute-footer {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 18px 0;
	background: var(--sigma-navy-deep);
	text-align: left;
}

.absolute-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.absolute-footer .copyright-footer { order: 1; }
.absolute-footer .footer-secondary { order: 2; margin: 0; }
.absolute-footer .sigma-credit { margin-top: 4px; }

@media (max-width: 849px) {
	.absolute-footer .container { justify-content: center; text-align: center; }
	.sigma-cta { padding-bottom: 48px; }
}

/* ---------------------------------------------------------------- hanging bins in sections */

.sigma-feature__hang {
	position: absolute;
	right: 4%;
	top: -6%;
	width: 18%;
	max-width: 300px;
	z-index: 3;
	pointer-events: none;
}

.sigma-feature--img-left .sigma-feature__hang { right: auto; left: 4%; }
.sigma-feature__hang img { width: 100%; height: auto; display: block; }

.sigma-faq__hang {
	display: block;
	width: 20%;
	max-width: 320px;
	margin: 26px auto -60px;
	position: relative;
	z-index: 3;
	pointer-events: none;
}

.sigma-faq__hang img { width: 100%; height: auto; display: block; }

@media (max-width: 849px) {
	.sigma-feature__hang { width: 34%; top: -3%; right: 2%; }
	.sigma-faq__hang { width: 44%; margin-bottom: -38px; }
}

/* ---------------------------------------------------------------- size card type */
/* The design sets the card title bold and left aligned, not centred. */

.sigma-sizecard {
	display: flex;
	flex-direction: column;
	padding: 14px 14px 24px;
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-card);
	text-align: left;
}
.sigma-sizecard__title {
	margin: 18px 6px 14px;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 30px;
	color: var(--sigma-navy);
	position: relative;
	padding-bottom: 12px;
	text-align: left;
}

.sigma-sizecard__title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	background: var(--sigma-yellow);
}
.sigma-sizecard__price,
.sigma-sizecard__text { text-align: left; }
.sigma-sizecard .sigma-buttons {
	margin-top: auto;
	justify-content: center;
	padding: 0 6px;
}

.sigma-sizegrid__grid > .sigma-sizecard,
.sigma-sizegrid__grid > .uxb-wrapper {
	flex: 0 1 calc((100% - 60px) / 4);
	max-width: calc((100% - 60px) / 4);
}

@media (max-width: 1280px) {
	.sigma-sizegrid__grid > .sigma-sizecard, .sigma-sizegrid__grid > .uxb-wrapper { flex-basis: calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); }
}

@media (max-width: 849px) {
	.sigma-sizegrid__grid > .sigma-sizecard, .sigma-sizegrid__grid > .uxb-wrapper { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}

@media (max-width: 560px) {
	.sigma-sizegrid__grid > .sigma-sizecard, .sigma-sizegrid__grid > .uxb-wrapper { flex-basis: 100%; max-width: 100%; }
}

/* ---------------------------------------------------------------- designer artwork */
/*
 * Backgrounds exported from the Figma rather than rebuilt. Where a section has real
 * artwork behind it, the flat colour underneath stays as the fallback so nothing goes
 * blank if an image fails.
 */

.sigma-faq--art { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* The band stays the flat navy the design uses. An image here painted a pale strip the
   full width of the screen, which is what looked like a stray white background. Only the
   card carries artwork. */
.sigma-cta--art {
	background-image: none;
	background-repeat: no-repeat;
}

.sigma-cta__card--art {
	/* the card's own cream stays as the fallback, so a failed image never shows a hole */
	background-color: var(--sigma-cream-2);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

/* Retired. The composites that carried their own arrows were 303px wide with the
   backdrop baked in and are gone, D160. The rules below bring the labels back. */

/* The home banner background is the designer's own plate: a pale cream field with soft
   yellow shapes bleeding in from both edges and the fleet already faded into it. It
   replaces the blob SVG on the home hero, which was far too saturated. */
.sigma-hero--art {
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

/* with the fleet baked into the plate there is no need to draw it again */
.sigma-hero--art .sigma-hero__backdrop { display: none; }

.sigma-feature--art {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* ---------------------------------------------------------------- centred feature */
/* Figma 176:4076, "What we will not take": everything down the middle, artwork full
   width underneath rather than beside. */

.sigma-feature--centred .sigma-feature__grid { display: block; text-align: center; }

.sigma-feature--centred .sigma-section-title { text-align: center; }
.sigma-feature--centred .sigma-feature__body { max-width: none; }
.sigma-feature--centred .sigma-buttons { justify-content: center; }

.sigma-feature--centred .sigma-feature__media {
	margin: 36px auto 0;
	max-width: 1300px;
}

.sigma-feature--centred .sigma-feature__media img { border-radius: 0; }

/* ---------------------------------------------------------------- keep reading icons */
/* The design shows these as bare line icons, no plate behind them, and larger. */

.sigma-kr-card__icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sigma-kr-card__icon img {
	width: 52px;
	height: 52px;
	object-fit: contain;
}

/* ---------------------------------------------------------------- faq headings */
/* The design sets the question bold with a rule under each row. */

.sigma-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 28px;
	color: #000;
	cursor: pointer;
	list-style: none;
}

.sigma-faq__item[open] .sigma-faq__q { border-bottom: 1px solid rgba(0, 0, 0, .14); padding-bottom: 14px; }

/* FlatSome's markup is .footer-widgets.footer.footer-1, and it carries its own padding
   and a divider. Both are set here so the card has room to sit across the seam. */

.footer-widgets.footer-1 { padding-top: 200px; border-top: 0; box-shadow: none; }
.footer-wrapper .footer-1 { background-image: none; }

@media (max-width: 849px) {
	.sigma-cta { margin-bottom: -60px; }
	.footer-widgets.footer-1 { padding-top: 130px; }
	.sigma-feature--centred .sigma-feature__media { margin-top: 24px; }
}

/* ---------------------------------------------------------------- hero breathing room */
/* Content and form sit higher, and the extra height falls below the bin. */

@media (max-width: 1100px) {
	.sigma-hero__grid { padding: 40px 0 0; }
}

/* The inner banners use the same plate as the home page rather than the drawn blob.
   With a real plate behind them the SVG shape would double up, so it is switched off. */
.sigma-banner--art {
	background-color: var(--sigma-sand);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

.sigma-banner--art .sigma-banner__art::before { display: none; }

/* With the plate doing the work, the hanging bin is the only art in front of it. It sits
   where the design hangs it, to the right of the text and down from the header line. */
.sigma-banner--art .sigma-drop--banner { max-width: none; }

@media (max-width: 849px) {
	.sigma-banner--art .sigma-drop--banner { position: relative; right: auto; left: 0; top: 0; width: 62%; margin: 0 auto; }
}

/* ---------------------------------------------------------------- feature, white card */
/* Figma 206:4584. Navy band, prose in a white card at radius 24 on the left, artwork on
   the right. The card is 654x456 on a 1350 column, so roughly 48% of it. */

.sigma-feature--card .sigma-feature__grid { grid-template-columns: 48.4% 1fr; align-items: center; }
.sigma-feature--card.sigma-feature--img-left .sigma-feature__grid { grid-template-columns: 1fr 48.4%; }

/* inside the card the type goes back to navy on white, whatever the band behind it is */

.sigma-feature--card .sigma-feature__body { color: var(--sigma-grey-1); }
.sigma-feature--card .sigma-feature__body a { color: var(--sigma-navy); }
.sigma-feature--card .sigma-feature__body th { color: var(--sigma-navy); }
.sigma-feature--card .sigma-feature__body td,
.sigma-feature--card .sigma-feature__body th { border-bottom-color: rgba(20, 29, 56, .12); }

/* ---------------------------------------------------------------- centred, image card */
/* Figma 206:4620. Heading and prose full width, then the artwork in a white card. */

.sigma-feature--centred.sigma-feature--plate .sigma-feature__media {
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-card);
	overflow: hidden;
	max-width: 1350px;
}

.sigma-feature--centred .sigma-feature__col {
	max-width: 1350px;
	margin: 0 auto;
	text-align: left;
}
.sigma-feature--centred.sigma-feature--wide .sigma-section-title { text-align: left; }
.sigma-feature--centred.sigma-feature--wide .sigma-buttons { justify-content: flex-start; }

.sigma-feature--card .sigma-feature__col {
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-card);
	padding: 26px;
	max-height: none;
}

@media (max-width: 1100px) {
	.sigma-feature--card .sigma-feature__grid,
	.sigma-feature--card.sigma-feature--img-left .sigma-feature__grid { grid-template-columns: 1fr; }
	.sigma-feature--card .sigma-feature__col { padding: 24px; }
}

/* ---------------------------------------------------------------- height calibration */
/*
 * Measured against the design frame rather than guessed. Figma 206:4442:
 *   what fits   section 616, card 456, artwork 342
 *   where fits  section 910, artwork card 538
 *   keep read   section 376
 * Each was running over because the artwork had no ceiling and the section padding was
 * the generic 80 top and bottom on top of that.
 */

.sigma-feature--plate { padding: 62px 0; }

.sigma-feature--plate .sigma-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sigma-feature--plate .sigma-feature__media {
	margin-top: 20px;
	aspect-ratio: 1350 / 538;
}

.sigma-feature--card .sigma-feature__media img {
	border-radius: 0;
	max-height: 342px;
	width: auto;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* the white card on the navy band keeps its own larger padding, Figma 206:4442 band 2031 */
.sigma-feature--card {
	padding: 76px 0;
}

@media (max-width: 849px) {
	.sigma-feature--card,
	.sigma-feature--plate { padding: 44px 0; }
	.sigma-feature--plate .sigma-feature__media { aspect-ratio: 16 / 10; }
	.sigma-feature--card .sigma-feature__media img { max-height: 240px; }
}

/* Final calibration pass. What remains after this is text length, not layout: the real
   copy on these pages is longer than the placeholder text in the design. */

/* The section straight under the banner. Measured off three frames, banner curve to
   first pixel of content and last pixel to the next band: general waste 88 / 67, 2m3
   89 / 55, sizes hub 125 / 59. It was 44 / 44 and read as jammed against the banner.
   Babar, 27 September 2026. */
/* Babar, 29 September 2026: 88 / 64 read as too much, top and bottom. 64 both ways on
   desktop, clear of the 44 that felt jammed; 48 on a phone, the same as every other
   section. D225. */
.sigma-feature--intro {
	padding: 64px 0;
}
@media (max-width: 849px) {
	.sigma-feature--intro { padding: 48px 0; }
}
.sigma-feature--intro .sigma-feature__body p { margin-bottom: 12px; }
.sigma-feature--card .sigma-feature__body table { margin-bottom: 8px; font-size: var(--fs-small); }
.sigma-feature--card .sigma-feature__body th,
.sigma-feature--card .sigma-feature__body td { padding: 7px 10px; line-height: 20px; }
.sigma-feature--card .sigma-section-title {
	color: var(--sigma-navy);
	margin-bottom: 10px;
}
.sigma-feature--card .sigma-buttons { margin-top: 16px; }
.sigma-feature--plate .sigma-feature__body p { margin-bottom: 10px; }

/* ---------------------------------------------------------------- pair cards */
/*
 * Figma 206:508 section 4, "Every bin has two limits". Two 660 cards on the 1350 row
 * with a 30 gap, each a cream rounded rect with the photo flush to the top and the
 * caption centred underneath. The section's own band is 887 tall in the design, which
 * is 88 above the heading and 117 below the cards.
 */

.sigma-pair { padding: 88px 0 100px; }

.sigma-pair__lead {
	max-width: 1000px;
	margin: 0 auto 34px;
	text-align: center;
}

.sigma-pair__lead p {
	margin: 0 0 8px;
	font-size: var(--fs-body);
	line-height: 24px;
	color: var(--sigma-grey-1);
}

.sigma-pair__lead p:last-child { margin-bottom: 0; }

/* Figma 206:4442 band 1313 and band 4356. The band is cream and the card is WHITE, so
   the card reads as a card. Cream on cream made the picture look like it was floating
   with a caption under it. */
.sigma-paircard {
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sigma-paircard__media {
	aspect-ratio: 660 / 348;
	overflow: hidden;
	border-radius: var(--sigma-radius-card);
}

.sigma-paircard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sigma-paircard__body {
	padding: 22px 46px 30px;
	text-align: center;
}

.sigma-paircard__title {
	margin: 0 0 8px;
	font-size: var(--fs-h4);
	line-height: 30px;
	font-weight: 600;
	color: var(--sigma-navy);
	text-transform: none;
	letter-spacing: normal;
}

.sigma-paircard__body p {
	margin: 0 0 6px;
	font-size: var(--fs-body);
	line-height: 24px;
	color: var(--sigma-grey-1);
}

.sigma-paircard__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------- pair cards, three up and side by side */
/*
 * Figma 206:4442 band 1294 runs three of these on the 1350 row, so 430 wide with a 30
 * gap, and band 4321 runs two with the picture beside the text instead of over it.
 */

.sigma-pair__grid {
	display: grid;
	grid-template-columns: repeat(var(--sigma-cols, 2), minmax(0, 1fr));
	gap: 30px;
}

@media (max-width: 849px) {
	.sigma-pair { padding: 48px 0; }
	.sigma-pair__grid { grid-template-columns: 1fr; gap: 20px; }
	.sigma-paircard__body { padding: 20px 24px 26px; }
}

/* ---------------------------------------------------------------- orbit */
/*
 * Figma 206:508 section 5, "Pick by the job in front of you". A navy band 897 tall on
 * the 1920 canvas with the bin hanging down the middle and seven cards scattered round
 * it. Every card's position comes through --l/--t/--w as percentages of that band, so
 * the scatter scales with the viewport instead of only being right at 1920.
 */

.sigma-orbit {
	position: relative;
	overflow: hidden;
	min-height: var(--sigma-orbit-ratio, 46.72vw);
	padding: 0;
}

.sigma-orbit > .sigma-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100%;
	z-index: 2;
}

.sigma-orbit__head {
	position: absolute;
	left: var(--sigma-gutter);
	top: 8%;
	width: 40%;
}

.sigma-orbit__head .sigma-section-title { color: var(--sigma-white); margin-bottom: 10px; }

.sigma-orbit__head .sigma-section-sub {
	color: var(--sigma-blue-grey);
	font-size: var(--fs-body);
	line-height: 24px;
	margin: 0;
}

.sigma-orbit__bin {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.sigma-orbit__bin img { display: block; width: 100%; height: auto; }

.sigma-orbitcard {
	position: absolute;
	left: var(--l);
	top: var(--t);
	width: var(--w);
	z-index: 3;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 20px;
	border-radius: var(--sigma-radius-sm);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);
	backdrop-filter: blur(6px);
}

/* the cards are positioned against the full band, not against the 1350 container, which
   is why this layer is a sibling of the container rather than a child of it */
.sigma-orbit__cards { position: absolute; inset: 0; z-index: 3; }

.sigma-orbitcard__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sigma-orbitcard__icon img { width: 36px; height: 36px; object-fit: contain; }

.sigma-orbitcard__title {
	margin: 0 0 4px;
	font-size: var(--fs-h4);
	line-height: 26px;
	font-weight: 600;
	color: var(--sigma-white);
	text-transform: none;
	letter-spacing: normal;
}

.sigma-orbitcard__title a { color: inherit; }
.sigma-orbitcard__title a:hover { color: var(--sigma-yellow); }

.sigma-orbitcard__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 20px;
	color: var(--sigma-blue-grey);
}

/* Under 1100 the scatter cannot work. Everything goes back to flow: the bin sits at the
   top, the heading under it and the cards become a plain grid. */
@media (max-width: 1099px) {
	.sigma-orbit {
		min-height: 0;
		padding: 48px 0;
		display: flex;
		flex-direction: column;
	}
	/* the cards layer sits before the container in the source so it can be the full
	   width band on desktop, so the reading order is restored here instead */
	.sigma-orbit__bin { order: 1; }
	.sigma-orbit > .sigma-container { position: relative; height: auto; order: 2; }
	.sigma-orbit__cards { order: 3; }
	.sigma-orbit__bin {
		position: relative;
		left: auto !important;
		top: auto !important;
		width: min(320px, 70%) !important;
		display: block;
		margin: 0 auto 24px;
	}
	.sigma-orbit__head { position: static; left: auto; width: auto; margin-bottom: 24px; }
	/* the cards layer is a sibling of the container, so once it is back in flow it has
	   to carry the container's own gutter or the cards run to the screen edge */
	.sigma-orbit__cards {
		position: static;
		inset: auto;
		margin: 0 auto;
		max-width: calc(var(--sigma-container) + (2 * var(--sigma-gutter)));
		padding: 0 var(--sigma-gutter);
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.sigma-orbitcard { position: static; width: auto; }
}

@media (max-width: 549px) {
	.sigma-orbit__cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- waste grid, the compact row */
/*
 * Figma 206:508 section 7, "The seven pages". Same card object as the five waste
 * streams, but laid out icon left of the text rather than above it, four to a row, and
 * with the fleet photograph underneath. One component, a layout attribute. D105.
 */

.sigma-wastegrid--row .sigma-wastegrid__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.sigma-wastegrid--row .sigma-wastecard {
	flex: 0 0 calc((100% - (3 * 20px)) / 4);
	max-width: calc((100% - (3 * 20px)) / 4);
	display: flex;
	/* the base card stacks; the compact row puts the icon beside the text */
	flex-direction: row;
	gap: 14px;
	align-items: flex-start;
	text-align: left;
	padding: 18px 20px;
}

.sigma-wastegrid--row .sigma-wastecard__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	margin: 0;
	background: none;
	box-shadow: none;
}

.sigma-wastegrid--row .sigma-wastecard__title {
	margin: 0 0 2px;
	font-size: var(--fs-h4);
	line-height: 26px;
	text-align: left;
}

.sigma-wastegrid--row .sigma-wastecard__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 20px;
	text-align: left;
}

/* Figma 206:508 section 7. The fleet is 1220 wide, not the full 1350, and it hangs 40
   past the bottom of the cream band into the white section under it. */
.sigma-wastegrid__art {
	position: relative;
	z-index: 2;
	margin: 40px auto -40px;
	max-width: 1220px;
}

.sigma-wastegrid--row { padding: 80px 0 0; }

.sigma-wastegrid__art img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.sigma-wastegrid--row .sigma-wastecard {
	flex: 0 0 calc((100% - ((var(--sigma-cols, 4) - 1) * 20px)) / var(--sigma-cols, 4));
	max-width: calc((100% - ((var(--sigma-cols, 4) - 1) * 20px)) / var(--sigma-cols, 4));
	border: 1px solid rgba(20, 29, 56, .07);
	box-shadow: 0 2px 10px rgba(20, 29, 56, .04);
	transition: transform .18s ease, box-shadow .18s ease;
}

@media (max-width: 1099px) {
	.sigma-wastegrid--row .sigma-wastecard {
		flex-basis: calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}

/* ============================================ the job card rows */
/*
 * Two faults, both on the same section. The cards were white on a white band, so they
 * were not reading as cards at all, and the band had no bottom padding, so the last row
 * of cards sat hard against the navy section under it. D203.
 */
.sigma-wastegrid--row { padding: 80px 0 90px; }

@media (max-width: 849px) {
	/* the fleet only hangs past the band on a wide screen. On a phone it is small
	   enough that the overhang reads as a mistake. */
	.sigma-wastegrid--row { padding: 48px 0; }
	.sigma-wastegrid__art { margin: 24px auto 0; }
}

@media (max-width: 549px) {
	.sigma-wastegrid--row .sigma-wastecard { flex-basis: 100%; max-width: 100%; }
}

/* The card's title, text and link moved into a body wrapper when the compact row was
   added, so the "link sits on the bottom edge" rule follows them in. */
.sigma-wastecard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.sigma-wastegrid--row .sigma-wastecard__body { display: block; flex: 1 1 auto; }
.sigma-wastecard--link { text-decoration: none; color: inherit; }
.sigma-wastecard--link:hover .sigma-wastecard__title { color: var(--sigma-yellow-dark); }

.sigma-pair--side .sigma-paircard {
	flex-direction: row;
	align-items: center;
	background: var(--sigma-white);
	box-shadow: 0 4px 24px rgba(20, 29, 56, .06);
	padding: 26px 30px 26px 34px;
	gap: 10px;
}

.sigma-pair--side .sigma-paircard__body {
	order: 1;
	padding: 0;
	text-align: left;
	flex: 1 1 auto;
}

.sigma-pair--side .sigma-paircard__title { margin-bottom: 10px; }

/* the design reads text first, bin second, and the card markup is the other way round
   because the stacked variant needs the photo on top */
.sigma-pair--side .sigma-paircard__media {
	order: 2;
	flex: 0 0 44%;
	aspect-ratio: auto;
	border-radius: 0;
	/* the pale disc the design puts behind the bin illustration */
	background: radial-gradient(circle at 50% 50%, var(--sigma-cream-2) 0 58%, transparent 59%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sigma-pair--side .sigma-paircard__media img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media (max-width: 1099px) {
	.sigma-pair__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 849px) {
	.sigma-pair__grid { grid-template-columns: 1fr; }
	.sigma-pair--side .sigma-paircard { flex-direction: column; padding: 24px; }
	.sigma-pair--side .sigma-paircard__media { flex-basis: auto; width: 70%; }
	.sigma-pair--side .sigma-paircard__body { text-align: center; }
}

/* ---------------------------------------------------------------- the weight band */
/*
 * Figma 206:4442 band 3557. Yellow, the fleet ghosted in behind, centred heading and
 * lead, then the bin hanging in the stage below with a pill against each number. The
 * stage is a fixed ratio of the viewport width so the pills stay where the design puts
 * them at every size, the same rule as the orbit. D155.
 */

.sigma-weight {
	padding: 78px 0 0;
	position: relative;
	/* The bin hangs PAST the band's bottom edge onto the section below, as the frame
	   draws it, so the bottom is left open. overflow: hidden clipped it at the edge and
	   it read as sitting behind the next section. The top and sides are still clipped so
	   the drop animation never paints over the section above. Babar, 27 September 2026. */
	overflow: visible;
	clip-path: inset(0 0 -800px 0);
	z-index: 3;
}

/* The fleet is a watermark in the design, not a photograph: it reads as a shape in the
   yellow, and the hanging bin is the only thing actually in focus. Painting it as the
   section's own background put a full colour truck line across the band and lost the
   bin inside it. */
.sigma-weight--art { position: relative; }

/* The plate is the pale cream one the banners use. Multiplied over the yellow it turns
   into the ghosted fleet the design has, which is the same artwork reading as a tint
   rather than as a photograph sitting on top of the band. */
.sigma-weight--art::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--sigma-weight-art);
	/* the fleet spans 1662 of the design's 1920 and sits on the band's bottom edge */
	background-size: 86.6% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	/* Measured off the frame rather than guessed. Recovering the artwork from the band
	   with result = yellow*(1-a) + a*art lands on a = 0.06 to the pixel, and the white
	   of the photograph comes out ABOVE the yellow in blue, which a multiply cannot do.
	   So it is a normal blend at 6%, not a multiply at 22%. D196. */
	mix-blend-mode: normal;
	opacity: .06;
	pointer-events: none;
	z-index: 0;
}

.sigma-weight > .sigma-container { position: relative; z-index: 1; }

.sigma-weight .sigma-section-title { color: var(--sigma-navy); margin-bottom: 18px; }

.sigma-weight__lead {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.sigma-weight__lead p {
	margin: 0 0 12px;
	font-size: var(--fs-body);
	line-height: 24px;
	color: var(--sigma-navy);
}

.sigma-weight__lead a { color: var(--sigma-navy); text-decoration: underline; text-underline-offset: 3px; }

.sigma-weight__stage {
	position: relative;
	/* 500 tall on the design's 1350 container. A ratio of the container rather than of
	   the viewport, because the bin's width is a share of the container: with 26vw the
	   stage shrank under a bin that did not, and on a 1440 screen the bin ran 85px onto
	   the next section instead of the frame's 35. */
	aspect-ratio: 1350 / 500;
	max-height: 500px;
	z-index: 1;
}

.sigma-weight__bin { position: absolute; }
.sigma-weight__bin img { display: block; width: 100%; height: auto; }

.sigma-weight__pill {
	position: absolute;
	z-index: 2;
	transform: translate(-50%, -50%);
	background: var(--sigma-white);
	border-radius: var(--sigma-pill);
	padding: 10px 20px;
	font-size: var(--fs-body);
	line-height: 20px;
	color: var(--sigma-navy);
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(20, 29, 56, .12);
}

/* the design only puts one of the two in a pill. The other is the label on a dimension
   line, so it is plain type. This has to come after the rule above, not before it. */
.sigma-weight__pill--plain {
	background: none;
	box-shadow: none;
	padding: 0;
	font-weight: 500;
}

/* The bin hangs onto the section below, so that section starts its heading lower. Without
   this the feet sat right on top of the next heading. Babar, 27 September 2026. */
.sigma-weight + section { padding-top: 150px; }

@media (max-width: 849px) {
	.sigma-weight + section { padding-top: 80px; }
	.sigma-weight { padding: 48px 0 0; }
	.sigma-weight__stage { aspect-ratio: auto; height: 62vw; }
	.sigma-weight__pill { padding: 7px 13px; font-size: var(--fs-small); }
}

/* ------------------------------------------------- the spec list in the navy card */
/*
 * Figma 206:4442 band 2031. The "what fits" card is a label and value list, not a
 * table. A table there wraps badly and reads as a data dump; the design lines the
 * labels up and lets the last row, the prose one, run to three lines.
 */

.sigma-specs {
	margin: 0 0 22px;
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 18px;
	row-gap: 11px;
	align-items: baseline;
}

.sigma-specs dt {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 22px;
	font-weight: 500;
	color: var(--sigma-white);
	white-space: nowrap;
}

.sigma-specs dd {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 22px;
	color: var(--sigma-blue-grey);
}

.sigma-specs dt::after { content: ' :'; }

/* the same list on a light card */
.sigma-bg-white .sigma-specs dt,
.sigma-bg-cream .sigma-specs dt { color: var(--sigma-navy); }
.sigma-bg-white .sigma-specs dd,
.sigma-bg-cream .sigma-specs dd { color: var(--sigma-grey-1); }

/* the design sits the bin on a disc a shade lighter than the band behind it */

@media (max-width: 549px) {
	.sigma-specs { grid-template-columns: 1fr; row-gap: 4px; }
	.sigma-specs dd { margin-bottom: 8px; }
}

/* ------------------------------------------- the card on a navy band is not white */
/*
 * Figma 206:4442 band 2031. The card is #202842 on a #141D38 band, a shade lighter than
 * what is behind it, not white. An earlier pass made every card white, which is right on
 * a light band and wrong here: it inverted the whole section and made the spec labels
 * invisible, white on white.
 */

.sigma-feature--dark.sigma-feature--card .sigma-feature__col {
	background: #202842;
}

.sigma-feature--dark.sigma-feature--card .sigma-section-title { color: var(--sigma-white); }
.sigma-feature--dark.sigma-feature--card .sigma-feature__body { color: var(--sigma-blue-grey); }
.sigma-feature--dark.sigma-feature--card .sigma-feature__body a { color: var(--sigma-yellow); }
.sigma-feature--dark.sigma-feature--card .sigma-feature__body th { color: var(--sigma-white); }
.sigma-feature--dark.sigma-feature--card .sigma-feature__body td,
.sigma-feature--dark.sigma-feature--card .sigma-feature__body th { border-bottom-color: rgba(255, 255, 255, .12); }

/* the spec list follows the card it is in rather than the band */
.sigma-feature--card .sigma-specs dt { color: var(--sigma-navy); }
.sigma-feature--card .sigma-specs dd { color: var(--sigma-grey-1); }
.sigma-feature--dark.sigma-feature--card .sigma-specs dt { color: var(--sigma-white); }
.sigma-feature--dark.sigma-feature--card .sigma-specs dd { color: var(--sigma-blue-grey); }

/* ---------------------------------------- dimension lines back on the size cards */
/*
 * The bins the site was serving were 303px composites with the arrows and the white
 * studio backdrop baked in: a white rectangle on the navy band and soft on every screen.
 * They are now the file's own artwork, 1484 wide and cut out to alpha, D160, so the
 * dimension lines come back as type and rules rather than as pixels. Height runs up the
 * left of the bin, length runs along under it, both capped at each end.
 */

/* The bin is trimmed to its own bounding box, so the well has to hold the gutters the
   dimension lines live in: one up the left, one along the bottom. Without them the
   labels land on the bin's own size badge. */

.sigma-sizecard__dim {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: var(--fs-small);
	line-height: 16px;
	font-weight: 500;
	color: var(--sigma-navy);
	white-space: nowrap;
}

.sigma-sizecard__dim::before {
	content: none;
	width: 14px;
	height: 1px;
	background: var(--sigma-navy);
}

.sigma-sizecard__dim--h {
	left: 1%;
	top: 24%;
	bottom: 26%;
	flex-direction: row;
}

.sigma-sizecard__dim--h::after {
	content: '';
	width: 9px;
	align-self: stretch;
	border-top: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	background: linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}

.sigma-sizecard__dim--w {
	left: 21%;
	transform: none;
	bottom: 3%;
	right: 5%;
	flex-direction: column-reverse;
}

.sigma-sizecard__dim--w::after {
	content: '';
	height: 9px;
	align-self: stretch;
	border-left: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

/* on the navy card the lines and the type go light */
.sigma-feature--dark .sigma-sizecard__dim { color: var(--sigma-white); }

/* ------------------------------------------ the waste grid on the yellow band */
/* Figma 206:4675 band 3486, "which size suits this load". Left aligned heading, three
   cards, and the line that qualifies them sitting under the cards, not over them. */

.sigma-wastegrid.sigma-bg-yellow .sigma-section-title,
.sigma-wastegrid.sigma-bg-yellow .sigma-section-sub,
.sigma-wastegrid.sigma-bg-yellow .sigma-wastegrid__foot { color: var(--sigma-navy); }

.sigma-wastegrid__foot {
	margin: 26px 0 0;
	font-size: var(--fs-body);
	line-height: 24px;
	color: var(--sigma-grey-1);
}

/* ------------------------------------ the yes and no pair, read off its own frame */
/*
 * Figma 206:4675 band 1351. Both header bars are the same yellow gradient, not one
 * yellow and one navy: the difference between the two cards is the mark, the tick
 * against the cross, and nothing else. Each point in the list carries its own mark as
 * well, and the loaded bin hangs under the pair and overlaps both.
 */

.sigma-listcard--no .sigma-listcard__badge {
	background: linear-gradient(97deg, var(--sigma-yellow-2) 0%, var(--sigma-yellow-pale) 100%);
	color: var(--sigma-navy);
}

.sigma-listcard--yes .sigma-listcard__badge {
	background: linear-gradient(97deg, var(--sigma-yellow-2) 0%, var(--sigma-yellow-pale) 100%);
}

/* each point gets the card's own mark instead of a browser bullet */
.sigma-listcard__body ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.sigma-listcard__body li,
.sigma-listcard__body > p {
	position: relative;
	padding-left: 34px;
}

.sigma-listcard__body li::before,
.sigma-listcard__body > p::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sigma-yellow) no-repeat center / 11px 11px;
}

.sigma-listcard--yes .sigma-listcard__body li::before,
.sigma-listcard--yes .sigma-listcard__body > p::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 6.3 4.4 9 10.4 3' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sigma-listcard--no .sigma-listcard__body li::before,
.sigma-listcard--no .sigma-listcard__body > p::before {
	background-color: #F07A1A;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sigma-lists__art {
	width: 38%;
	margin: -46px auto 0;
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.sigma-lists__art img { display: block; width: 100%; height: auto; }

@media (max-width: 849px) {
	.sigma-lists__art { width: 70%; margin-top: 8px; }
	.sigma-listcard__body li,
	.sigma-listcard__body > p { padding-left: 28px; }
}

/* ---------------------------------------------------------------- place pills */
/* Figma 241:4021 band 1251. Three to a row on the 1350, each a white pill with a pin,
   the map under them, and the copy that qualifies the list under that. */

.sigma-pills { padding: 80px 0; }

.sigma-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 10px 18px;
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-sm);
	font-size: var(--fs-body);
	line-height: 22px;
	color: var(--sigma-navy);
}

.sigma-pill::before {
	content: '';
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background: url('icons/icon-kr-areas.svg') center / contain no-repeat;
}

.sigma-pills__map {
	margin-top: 26px;
	border-radius: var(--sigma-radius-card);
	overflow: hidden;
}

.sigma-pills__map img { display: block; width: 100%; height: auto; }

.sigma-pills__foot {
	max-width: 1050px;
	margin: 26px auto 0;
	text-align: center;
}

.sigma-pills__foot p {
	margin: 0 0 12px;
	font-size: var(--fs-body);
	line-height: 24px;
	color: var(--sigma-grey-1);
}

.sigma-pills__foot p:last-child { margin-bottom: 0; }

/* the card link centres in the card the design draws it in */
.sigma-wastecard__link {
	margin-top: auto;
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 28px;
	color: var(--sigma-navy);
	text-decoration: none;
	text-underline-offset: 4px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: center;
}

/* ------------------------------------------------- the place list is a scroller */
/*
 * Figma 241:4021 band 1251 shows seven rows of three and a pair of arrows on the right:
 * it is a fixed height box, not the whole list. We deliver to far more suburbs than the
 * designer drew, so rendering all of them ran the section 601px past the design and
 * pushed the map off the fold. It scrolls now, exactly as drawn.
 */

.sigma-pills__grid {
	display: grid;
	grid-template-columns: repeat(var(--sigma-cols, 3), minmax(0, 1fr));
	gap: 14px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
	max-height: 416px;
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--sigma-yellow) transparent;
}

@media (max-width: 1099px) { .sigma-pills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 649px)  { .sigma-pills__grid { grid-template-columns: 1fr; } .sigma-pills { padding: 48px 0; } }

/* home tints the size cards and leaves the band white, Figma 176:4076 band 2294 */
.sigma-sizegrid--cards-cream .sigma-sizecard { background: var(--sigma-cream); }

/* ------------------------------------------------- the rope above the hook */
/*
 * Figma 206:509. The bin hangs from a rope that runs up out of the top of the banner.
 * Two of the three bin photographs are cropped through the hook, so the rope is drawn
 * here instead: it is a plain line in the design, and drawn it is sharp at any width.
 */

.sigma-drop--banner {
	position: absolute;
	left: 50%;
	width: 34%;
	max-width: 660px;
}

.sigma-drop__cable {
	position: absolute;
	bottom: 100%;
	width: 3px;
	height: 60vw;
	margin-left: -1.5px;
	background: linear-gradient(90deg, #8A939E 0%, #C9CFD6 45%, #6E7782 100%);
	pointer-events: none;
}

@media (max-width: 849px) {
	.sigma-drop__cable { display: none; }
}

/* --------------------------------------- the disc and the dimensions on a card */
/*
 * Figma 206:4442 band 2031. A full circle a shade lighter than the band sits behind the
 * bin, and the bin carries the same two dimension lines the size cards do. The circle
 * was a radial-gradient painted on the media box, so anything of it that fell outside
 * that box was cut off, which is what Babar saw at the top.
 */

.sigma-feature--card .sigma-feature__media {
	background: none;
	position: relative;
	overflow: visible;
}

.sigma-feature__disc {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64%;
	aspect-ratio: 1;
	transform: translate(-50%, -54%);
	border-radius: 50%;
	background: rgba(255, 255, 255, .055);
	pointer-events: none;
	z-index: 0;
}

/* the same two lines as the size cards, and the same gutters to hold them */
.sigma-feature__media--dim {
	padding: 3% 2% 15% 16%;
	box-sizing: border-box;
}

.sigma-feature__media--dim .sigma-sizecard__dim { z-index: 2; }

@media (max-width: 849px) {
	.sigma-feature__media--dim { padding: 2% 2% 16% 18%; }
}

.sigma-tablecard table {
	width: 100%;
	border-collapse: separate;
	font-size: var(--fs-body);
	border-spacing: 0;
}

.sigma-tablecard thead th {
	padding: 17px 22px;
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 26px;
	color: var(--sigma-navy) !important;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	background: linear-gradient(97deg, var(--sigma-yellow-2) 0%, var(--sigma-yellow-pale) 100%);
	border: 0;
}

.sigma-tablecard thead th:first-child { padding-left: 30px; }
.sigma-tablecard thead th:last-child { padding-right: 30px; }

.sigma-tablecard tbody td {
	padding: 16px 22px;
	line-height: 24px;
	color: #414042;
	border-top: 1px solid rgba(20, 29, 56, .08);
	vertical-align: middle;
}

.sigma-tablecard tbody tr:first-child td {
	border-top: 0;
}
.sigma-tablecard tbody td:first-child { padding-left: 30px; font-weight: 500; color: var(--sigma-navy); }
.sigma-tablecard tbody td:last-child { padding-right: 30px; }

/* the pin the design puts against every row's first cell */
.sigma-tablecard--pin tbody td:first-child { position: relative; padding-left: 60px; }

.sigma-tablecard--pin tbody td:first-child::before {
	content: '';
	position: absolute;
	left: 30px;
	top: 50%;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	background: url('icons/icon-kr-areas.svg') center / contain no-repeat;
}

.sigma-tablecard thead th {
	background: none;
	padding: 24px 22px;
}

.sigma-tablecard thead th:first-child { padding-left: 58px; }

@media (max-width: 849px) {
	.sigma-tablecard { padding: 0; }
	.sigma-tablecard thead th,
	.sigma-tablecard tbody td { padding: 12px 14px; }
	.sigma-tablecard thead th:first-child,
	.sigma-tablecard tbody td:first-child { padding-left: 16px; }
	.sigma-tablecard--pin tbody td:first-child { padding-left: 42px; }
	.sigma-tablecard--pin tbody td:first-child::before { left: 14px; }
}

/* the prose above a table, with the artwork beside it. Figma 241:4021 band 2546 */
.sigma-tablesec__lead { margin: 14px 0 26px; }

.sigma-tablesec__lead--art {
	display: grid;
	grid-template-columns: 1fr 40%;
	gap: 30px;
	align-items: center;
}

.sigma-tablesec__prose p { margin: 0 0 12px; font-size: var(--fs-body); line-height: 24px; color: var(--sigma-grey-1); }
.sigma-tablesec__prose p:last-child { margin-bottom: 0; }
.sigma-tablesec__art img { display: block; width: 100%; height: auto; }

@media (max-width: 849px) {
	.sigma-tablesec__lead--art { grid-template-columns: 1fr; }
	.sigma-tablesec__art { display: none; }
}

/* ------------------------------------------------- the icon list on the navy band */
/*
 * Figma 206:4675 band 2386. Same list, inverted. The photograph beside it is a card
 * with a radius, not a bare image, and the whole section was rendering dark grey on
 * navy before this: unreadable, and the heading had disappeared into the background.
 */

.sigma-iconlist--dark .sigma-section-title { color: var(--sigma-white); }
.sigma-iconlist--dark .sigma-section-sub { color: var(--sigma-blue-grey); }
.sigma-iconlist--dark .sigma-iconitem__title { color: var(--sigma-white); }
.sigma-iconlist--dark .sigma-iconitem__text { color: var(--sigma-blue-grey); }
.sigma-iconlist--dark .sigma-iconitem__icon { background: rgba(255, 255, 255, .07); }

.sigma-iconlist--dark .sigma-iconlist__media img {
	border-radius: var(--sigma-radius-card);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

/* ------------------------------------------- a centred section with no picture */
/*
 * Figma 206:4675 band 3139, "what happens if the load is wrong". Centred heading AND
 * centred prose in a narrow column. The heading was centring and the body was not, so
 * it read as a centred title over a full width paragraph.
 */

.sigma-feature--centred.sigma-feature--noimg .sigma-feature__body {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.sigma-feature--centred.sigma-feature--noimg .sigma-feature__body p { margin: 0 0 14px; }
.sigma-feature--centred.sigma-feature--noimg .sigma-feature__body p:last-child { margin-bottom: 0; }
.sigma-feature--centred.sigma-feature--noimg .sigma-buttons { justify-content: center; }

.sigma-iconlist--img-right .sigma-iconlist__grid {
	grid-template-columns: 1fr 663px;
	grid-template-areas: "head media" "items media";
}

.sigma-iconlist__head { grid-area: head; }
.sigma-iconlist__col { grid-area: items; }
.sigma-iconlist__media { grid-area: media; align-self: center; }

.sigma-iconlist__head .sigma-section-sub { margin-bottom: 26px; }

@media (max-width: 1100px) {
	.sigma-iconlist--img-right .sigma-iconlist__grid,
	.sigma-iconlist--img-left .sigma-iconlist__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "head" "media" "items";
		gap: 24px 0;
	}
}
.sigma-feature--centred { padding: 76px 0; }

/* ================================================================ mobile, 308:10828 */
/*
 * The mobile frame is a different layout, not the desktop one narrowed. Everything in
 * the hero centres: the heading, the lead, the two buttons as pills rather than full
 * width blocks, and the quote card with its bin icon sitting above a centred title.
 */

@media (max-width: 849px) {
	.sigma-hero__col { text-align: center; }
	.sigma-hero__title,
	.sigma-hero__sub { text-align: center; }
	.sigma-hero__col .sigma-buttons {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.sigma-hero__col .sigma-btn {
		width: 100%;
		max-width: 320px;
		justify-content: center;
	}

	/* the card head stacks: icon, then title, then the line under it, all centred */
	.sigma-hero__cardhead {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
	}
	.sigma-hero__formtitle,
	.sigma-hero__formsub { text-align: center; }

	.sigma-hero__card .wdegp__submit,
	.sigma-hero__card .sigma-btn {
		width: 100%;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}
}

@media (max-width: 849px) {
	.sigma-cta__card { padding: 40px 24px; }
	.sigma-keep-reading { padding: 48px 0; }
}

.sigma-pills__grid::-webkit-scrollbar { width: 8px; }
.sigma-pills__grid::-webkit-scrollbar-track { background: transparent; }
.sigma-pills__grid::-webkit-scrollbar-thumb { background: var(--sigma-yellow); border-radius: 999px; }

/* ============================================ the suburb list runs open */
/*
 * Babar's call, 26 September 2026: no scrollbar. A capped, scrolling box hides half the
 * suburbs behind a gesture, and the suburbs are the reason anybody is on this page. The
 * list runs its full length and the page scrolls, which is what people expect. D207.
 */
.sigma-pills__grid {
	max-height: none;
	overflow-y: visible;
	padding-right: 0;
}

@media (max-width: 649px) { .sigma-pills__grid { max-height: 360px; } }

/* ---------------------------------------------------------------- enquiry form */
/*
 * The contact page had no form at all, so the only way to reach Sigma was a phone
 * number. The fields are the four things the page itself tells people to have ready,
 * in the same order, and the card matches the quote card on the home hero.
 */

.sigma-formsec { padding: 76px 0; }

.sigma-form {
	max-width: 900px;
	margin: 34px auto 0;
	padding: 40px clamp(20px, 3vw, 48px);
	background: var(--sigma-white);
	border-radius: var(--sigma-radius-card);
	box-shadow: 0 10px 40px rgba(20, 29, 56, .07);
}

.sigma-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
}

.sigma-form__field,
.sigma-form__field--wide,
.sigma-form__submit,
.sigma-form__note { margin: 0; }

.sigma-form__field--wide { margin-top: 18px; }

.sigma-form__field label {
	display: block;
	margin-bottom: 7px;
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 18px;
	color: var(--sigma-navy);
}

.sigma-form__field label .req { color: #D64545; margin-left: 3px; }

.sigma-form input[type="text"],
.sigma-form input[type="tel"],
.sigma-form input[type="email"],
.sigma-form input[type="date"],
.sigma-form select,
.sigma-form textarea {
	width: 100%;
	padding: 13px 16px;
	font-family: var(--sigma-font);
	font-size: var(--fs-body);
	line-height: 22px;
	color: var(--sigma-navy);
	background: var(--sigma-cream-2);
	border: 1px solid rgba(20, 29, 56, .12);
	border-radius: 12px;
	appearance: none;
}

.sigma-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141D38' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 40px;
}

.sigma-form__submit { margin-top: 24px; text-align: center; }

.sigma-form input[type="submit"]:hover { background: var(--sigma-yellow-dark); }

/* Contact Form 7's own furniture */
.sigma-form .wpcf7-spinner { display: block; margin: 12px auto 0; }
.sigma-form .wpcf7-not-valid-tip { margin-top: 5px; font-size: var(--fs-small); color: #D64545; }
.sigma-form .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid rgba(20, 29, 56, .14);
	font-size: var(--fs-body);
	line-height: 22px;
}
.sigma-form form.sent .wpcf7-response-output { border-color: #2E7D32; background: #F1F8F2; color: #1B5E20; }
.sigma-form form.invalid .wpcf7-response-output,
.sigma-form form.failed .wpcf7-response-output { border-color: #D64545; background: #FDF3F3; color: #9B2C2C; }

/* the enquiry form's submit is an <input>, so the arrow rides in as a background */
.sigma-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	padding: 15px 34px;
	font-family: var(--sigma-font);
	font-size: var(--fs-lead);
	font-weight: 600;
	color: var(--sigma-navy);
	background: var(--sigma-yellow);
	border: 0;
	border-radius: var(--sigma-pill);
	cursor: pointer;
	transition: background .15s ease;
	/* FlatSome uppercases form buttons; the design's buttons are sentence case */
	text-transform: none;
	letter-spacing: normal;
	padding-right: 52px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.3' fill='none' stroke='%23141D38' stroke-width='1.4'/%3E%3Cpath d='M6.6 10h6.8M10.4 6.9 13.5 10l-3.1 3.1' fill='none' stroke='%23141D38' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 22px center;
	background-size: 21px 21px;
}

@media (max-width: 749px) {
	.sigma-formsec { padding: 48px 0; }
	.sigma-form { padding: 26px 18px; }
	.sigma-form__grid { grid-template-columns: 1fr; }
	.sigma-form input[type="submit"] { width: 100%; min-width: 0; }
}

/* FlatSome sets its own height on selects and inputs, which clipped the option text
   against the bottom edge once the padding here was applied. */
.sigma-form input[type="text"],
.sigma-form input[type="tel"],
.sigma-form input[type="email"],
.sigma-form input[type="date"],
.sigma-form select {
	height: auto;
	min-height: 50px;
	box-sizing: border-box;
	margin: 0;
	box-shadow: none;
}

.sigma-form textarea {
	min-height: 96px;
	resize: vertical;
	box-sizing: border-box;
	margin: 0;
	box-shadow: none;
}
.sigma-form__note {
	margin: 18px 0 0;
	padding: 14px 18px;
	background: var(--sigma-cream);
	border-radius: 12px;
	font-size: var(--fs-small);
	line-height: 20px;
	color: var(--sigma-grey-1);
	margin-top: 22px;
}
.sigma-form p { margin-bottom: 0; }

/* ================================================ corrections, 24 September 2026 */
/*
 * The hero plate's bottom is CURVED, so reading its height off a column near the page
 * edge gives 737 when the real block is 856 at the middle: 706 from the header line.
 * 706 is what this was before it was "corrected" to 587. Measure a curved plate in the
 * middle, never at the edge.
 */

/*
 * Figma 176:4076 band 2294. The card is cream and the bin sits on its own WHITE panel
 * inside it. Removing the panel to tint the card took the panel with it.
 */
.sigma-sizecard__media {
	position: relative;
	aspect-ratio: 303 / 216;
	border-radius: var(--sigma-radius-sm);
	overflow: hidden;
	background: #FEFEF9;
	padding: 4% 3% 17% 19%;
	box-sizing: border-box;
}
.sigma-sizegrid--cards-cream .sigma-sizecard__media {
	background: var(--sigma-white);
}

/*
 * Figma 176:4076 band 4259, measured off the frame: the band is 551 tall, the copy is
 * centred in it, 88 from the top and 80 from the bottom, and the trucks' tyres run 33px
 * PAST the band's bottom edge onto the cream section below. Babar, 27 September 2026.
 *
 * The artwork is 677x609 with the arc baked in and 104px of transparent space under the
 * tyres (alpha bbox 14,0,659,505). So the picture is pinned to the band floor and pushed
 * down by that transparent share of its own height, 104/609 = 17.08%, plus the 33px
 * overhang. Translate percentages are of the element's own height, so this holds at any
 * width. The section sits above the next one so the tyres paint over it, not under it.
 */
.sigma-feature--floor {
	padding: 80px 0;
	position: relative;
	z-index: 3;
}
.sigma-feature--floor .sigma-feature__grid { align-items: center; min-height: 391px; }
.sigma-feature--floor .sigma-feature__col { padding-bottom: 0; }
.sigma-feature--floor .sigma-feature__media {
	align-self: stretch;
	position: relative;
}
.sigma-feature--floor .sigma-feature__media img {
	display: block;
	position: absolute;
	left: -16px;
	bottom: -80px;
	width: calc(100% + 32px);
	max-width: none;
	height: auto;
	margin: 0;
	border-radius: 0;
	transform: translateY(calc(17.08% + 33px));
}

@media (max-width: 1100px) {
	.sigma-feature--floor { padding: 56px 0 0; }
	.sigma-feature--floor .sigma-feature__grid { min-height: 0; }
	.sigma-feature--floor .sigma-feature__col { padding-bottom: 32px; }
	.sigma-feature--floor .sigma-feature__media img {
		position: static;
		left: auto;
		width: 100%;
		transform: none;
		/* the same transparent share, as a margin: margins are a share of the WIDTH,
		   104/677 = 15.36%, then 24px of overhang onto the band below */
		margin-bottom: calc(-15.36% - 24px);
	}
}

/* the top bar carries an icon against each line, Figma 176:4076 */

.sigma-topline svg {
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	display: block;
}

/* ================================================ corrections, second pass */

/* The banner heading was set bigger than the design and Babar asked for it smaller
   again, so it gets its own size rather than sharing the page h1 scale. */
.sigma-banner__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 2.85vw, 54px);
	font-weight: 600;
	line-height: 1.16;
	color: var(--sigma-navy);
}

.sigma-keep-reading__grid > * {
	flex: 0 0 calc((100% - 60px) / 4);
	max-width: calc((100% - 60px) / 4);
}

@media (max-width: 849px) {
	.sigma-keep-reading__grid > * {
		flex-basis: calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}

@media (max-width: 549px) {
	.sigma-keep-reading__grid > * { flex-basis: 100%; max-width: 100%; }
}

/* The top bar is bold in the design, both sides. */
/*
 * The two top bar lines, the phone number and the tagline. Sized on OUR class rather
 * than on FlatSome's `.nav-small.nav > li.html`, so a theme update cannot take the
 * styling with it and nobody has to guess which of the theme's nav rules is live.
 *
 * That theme selector is three classes and an element, which outweighs a single class,
 * so the two properties it sets are marked important rather than the selector being
 * padded out to beat it. It is the narrowest override that keeps the rule readable.
 */
.sigma-topline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 600;
}

.sigma-topline span { font-size: inherit; line-height: inherit; }

/* The quote button in the header reads black on yellow in the design, not navy. */
.header .button.is-outline,
.header .button,
.header-button .button,
.header-button a.button span { color: #000; }

/* ---------------------------------------------------------------- footer */
/*
 * The footer's gradient is artwork, not a flat colour: navy at the top lifting to a
 * warm grey at the bottom centre. It is cut from the frame and sits at the bottom of
 * the band, with the flat navy covering everything above it. The bottom bar carries no
 * colour of its own so the gradient runs through it, with a hairline above it.
 */

/* The gradient goes on the WRAPPER, not the widget row, because the copyright bar is a
   sibling of that row and has to sit on the same plate. It is a 240x52 lift of the
   design's own gradient with the type filtered out of it, stretched across the bottom
   420px; the flat navy covers everything above. */
.footer-wrapper {
	position: relative;
	background-color: var(--sigma-navy) !important;
	background-image: var(--sigma-footer-art) !important;
	background-repeat: no-repeat !important;
	background-position: center bottom !important;
	background-size: 100% 420px !important;
}

.footer-widgets.footer-1,
.footer-wrapper .footer-1 { background: transparent !important; }

.footer-wrapper .absolute-footer,
.absolute-footer {
	background: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, .10);
	color: rgba(255, 255, 255, .62);
}

.absolute-footer a { color: rgba(255, 255, 255, .78); }
.absolute-footer a:hover {
	color: var(--sigma-yellow);
}

/*
 * The second button in the hero was white on a near white plate and disappeared. It
 * takes the primary's yellow. Scoped to the hero: the same plain button on the inner
 * banners and in the CTA band sits on artwork where white is legible and is what the
 * design draws.
 */
/* The white button reads as a button because of its border, not because it is yellow.
   Every white button on the site carries the same hairline. */

@media (max-width: 1100px) {
	.sigma-hero__grid { min-height: 0; padding: 48px 0 80px; }
	.sigma-hero .sigma-drop { top: auto; bottom: 0; height: 78%; }
}

/* ============================================ the arrow, on every button */
/*
 * The design puts the same arrow on every button. Three of them were missing it: the
 * header's quote button, which is FlatSome's own markup, and the two form submits,
 * which this plugin does not render.
 *
 * Anything that is an <a> or a <button> gets it as a masked ::after, so it takes the
 * button's own text colour and needs no second file. An <input type="submit"> CANNOT
 * have a pseudo element at all, so the enquiry form's submit gets the arrow as a
 * background image instead, which is why that one is a data URI with the colour baked
 * in rather than currentColor.
 */

.header a.button,
.header .header-button a.button,
.wdegp__submit,
.wdebk__pay {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-weight: 600 !important;
}

.header a.button::after,
.wdegp__submit::after,
.wdebk__pay::after {
	content: '';
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	background: currentColor;
	-webkit-mask: url('icons/icon-arrow.svg') center / contain no-repeat;
	mask: url('icons/icon-arrow.svg') center / contain no-repeat;
}

/* FlatSome puts its own caret pseudo element on some header buttons; ours replaces it */
.header a.button::before { content: none; }

/* ============================================ the size grid's two ways round */
/*
 * The tint is derived from the band when the attribute is absent, so both states are
 * written out rather than one of them being "whatever the base rule happens to be".
 * Figma 176:4076 band 2294 is cream cards on white, Figma 206:552 is white cards on
 * cream. D193.
 */
.sigma-sizegrid--cards-white .sigma-sizecard { background: var(--sigma-white); }
.sigma-sizegrid--cards-white .sigma-sizecard__media { background: #FEFEF9; }

/* ============================================ what we will not take */
/*
 * Figma 176:4076 band 6374. Centred prose in a column 890 wide on the 1920, not the full
 * 1350 of the container. The heading was already centred and the paragraphs were not, so
 * the section read as a centred title sitting on a full width block of text.
 */
.sigma-feature--centred.sigma-feature--art .sigma-feature__body {
	max-width: 890px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ============================================ reveal on scroll */
/*
 * The start states only exist once the script has said it is running, so the page is
 * fully visible to a browser without JavaScript and to the crawler. is-in is the arrived
 * state and every animation shares it, which keeps the transition in one place.
 *
 * transform and opacity only: both are composited, so a section arriving does not force
 * the browser to lay the page out again mid scroll. D195.
 */
.sigma-anim-ready [data-sigma-anim] {
	opacity: 0;
	transition:
		opacity .8s cubic-bezier(.22, .61, .36, 1) var(--sigma-anim-delay, 0ms),
		transform .9s cubic-bezier(.22, .61, .36, 1) var(--sigma-anim-delay, 0ms);
	will-change: opacity, transform;
}

/* Far enough to read as movement. At 34px sideways the hero's in from the left and in
   from the right looked like a plain fade. */
.sigma-anim-ready [data-sigma-anim="fade-up"]    { transform: translateY(40px); }
.sigma-anim-ready [data-sigma-anim="fade-down"]  { transform: translateY(-40px); }
.sigma-anim-ready [data-sigma-anim="fade-left"]  { transform: translateX(90px); }
.sigma-anim-ready [data-sigma-anim="fade-right"] { transform: translateX(-90px); }
.sigma-anim-ready [data-sigma-anim="zoom"]       { transform: scale(.94); }

.sigma-anim-ready [data-sigma-anim].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Belt and braces for UX Builder: the script already stands down inside the builder
   iframe, and this keeps every section visible there even if it has not. */
.ux-builder-iframe [data-sigma-anim] {
	opacity: 1 !important;
	transform: none !important;
}
.ux-builder-iframe .sigma-hang--pending { opacity: 1 !important; }

/* The hero card is the one animated element that also carries the hanging bin's drop,
   so it hands the transform back rather than holding one for the life of the page. */
@media (prefers-reduced-motion: reduce) {
	.sigma-anim-ready [data-sigma-anim] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================ the footer logo */
/*
 * The footer itself is Babar's and untouched. The logo lives in the first column's text
 * widget, so all this does is size it and give it the gap the design has under it.
 * Figma 206:252 draws it 144 wide, left aligned on desktop and centred on mobile with
 * the column.
 */
.sigma-footer-logo {
	display: block;
	width: 144px;
	height: auto;
	margin: 0 0 18px;
}

@media (max-width: 849px) {
	.sigma-footer-logo { margin-left: auto; margin-right: auto; }
}

/* ============================================ the CTA artwork on a phone */
/*
 * Both pieces were switched off below 1100. The mobile frame has them: the bin breaks
 * the card's top left corner and the tipper sits under the buttons and breaks the bottom
 * right, which is what stops the card being a plain rounded rectangle on a phone as well
 * as on a desktop. Measured off design/mobile.png, card 390 of 430, truck 325 of that.
 *
 * The card takes the extra bottom padding so the truck lands on empty cream rather than
 * on the second button.
 */
@media (max-width: 1100px) {
	.sigma-cta__art { display: block; }
	/* The rope is dead space at the top of the artwork, so the image starts above the
	   card and the bin's body lands where the frame puts it, 17 down from the card's
	   top edge with the heading clearing it. */
	.sigma-cta__art--left  { left: -1%; top: -20px; bottom: auto; width: 42%; max-width: 190px; }
	.sigma-cta__art--right { right: -2%; bottom: -11%; left: auto; width: 83%; max-width: 360px; }
	/* The bin does not float over the heading in the frame, it sits above it: the card
	   carries 157 of top padding on the 430 wide frame and the heading starts under the
	   artwork. Same again at the bottom for the tipper. */
	.sigma-cta__card { padding-top: 150px; padding-bottom: 150px; }
}

/* ============================================ the weight band, corrected */
/*
 * The bin used to hang from a NEGATIVE top, which is fine on a page whose lead is two
 * paragraphs and wrong on every page whose lead is three: on the 3m3 page the rope ran
 * straight down through the last line of type. The stage is a flow sibling of the lead,
 * so a top of 0 means the rope starts under the copy whatever the copy does, and the
 * band's own overflow clips the bin at the bottom edge the way the frame does. D201.
 *
 * The ghost behind it was checked rather than adjusted: the frame's tonal range over the
 * band is R 230-246, G 184-199, B 0-15, and the fleet artwork composited at 6% gives
 * R 231-246, G 184-199, B 0-15. It was already right.
 */
.sigma-weight__stage { margin-top: 26px; }

/* The plain label is a measurement, so it is drawn on a dimension line with end caps,
   the same line the size cards use under each bin. */
.sigma-weight__pill--plain {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 5px;
	min-width: 132px;
	text-align: center;
}

.sigma-weight__pill--plain::after {
	content: '';
	height: 9px;
	border-left: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

/* The curve runs from the pill's lower left back towards the bin. It is decoration, so
   it never widens the pill and never catches a click. */
.sigma-weight__pill { overflow: visible; }

.sigma-weight__curve {
	position: absolute;
	right: 100%;
	top: 60%;
	width: 80px;
	height: 58px;
	margin-right: 2px;
	color: var(--sigma-navy);
	opacity: .55;
	pointer-events: none;
	transform: scaleX(-1);
}

@media (max-width: 849px) {
	.sigma-weight__curve { display: none; }
	.sigma-weight__pill--plain { min-width: 96px; }
}

/* ============================================ the table header plate */
/*
 * Figma 241:4780, "Do you need a council permit for a skip bin?". The header is its own
 * rounded plate INSIDE the card, 1290 wide in a 1350 card, so there is 30 of cream either
 * side of it and the plate never touches the card's edge. It was painting edge to edge as
 * a CSS gradient, which is why it read as a heavy bar rather than a plate. D204.
 *
 * The inset is done with background-size rather than markup, so the table stays one
 * table and every column still lines up with the row under it.
 */
.sigma-tablecard thead tr {
	background-image: var(--sigma-table-plate);
	background-size: calc(100% - 60px) 100%;
	background-position: center top;
	background-repeat: no-repeat;
}
.sigma-tablecard thead th:last-child  { padding-right: 58px; }

/* the first row sits under the plate, not tight against it */
.sigma-tablecard tbody tr:first-child td { padding-top: 22px; }

/*
 * The row lines stop where the plate stops. As cell borders they ran the full width of
 * the card, 30px past the plate at each end. Babar, 27 September 2026. A border cannot
 * be inset, so each line is a 1px background on the cell, cut short on the outer cells
 * by the same inset as the plate.
 */
.sigma-tablecard tbody td {
	border-top: 0;
	/* FlatSome draws its own #e2e2e2 line under every cell, full width. That was the
	   line Babar saw running past the plate. */
	border-bottom: 0;
	background-image: linear-gradient(rgba(20, 29, 56, .08), rgba(20, 29, 56, .08));
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 0;
}
.sigma-tablecard tbody td:first-child { background-size: calc(100% - 30px) 1px; background-position: 30px 0; }
.sigma-tablecard tbody td:last-child  { background-size: calc(100% - 30px) 1px; background-position: 0 0; }
.sigma-tablecard tbody tr:first-child td { background-image: none; }

@media (max-width: 849px) {
	.sigma-tablecard tbody td:first-child { background-size: calc(100% - 10px) 1px; background-position: 10px 0; }
	.sigma-tablecard tbody td:last-child  { background-size: calc(100% - 10px) 1px; }
	.sigma-tablecard thead tr { background-size: calc(100% - 20px) 100%; }
	.sigma-tablecard thead th { padding: 16px 14px; }
	.sigma-tablecard thead th:first-child { padding-left: 24px; }
	.sigma-tablecard thead th:last-child  { padding-right: 24px; }
}

.sigma-wastegrid--cards-cream .sigma-wastecard { background: var(--sigma-cream); }
.sigma-wastegrid--cards-white .sigma-wastecard { background: var(--sigma-white); }

a.sigma-wastecard:hover,
.sigma-wastegrid--row .sigma-wastecard:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 29, 56, .09);
}

@media (max-width: 1099px) {
	.sigma-wastegrid--row .sigma-wastecard {
		flex-basis: calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}

@media (max-width: 649px) {
	.sigma-wastegrid--row { padding: 48px 0 56px; }
	.sigma-wastegrid--row .sigma-wastecard { flex-basis: 100%; max-width: 100%; }
}

/* ============================================ the nav dropdown */
/*
 * Babar's call, 26 September 2026: the submenu takes the header's navy rather than the
 * theme's white, so it reads as part of the header instead of a panel landing on top of
 * the page. White type, yellow on the item you are on and on hover.
 */
.nav-dropdown,
.header-nav .nav-dropdown {
	background: var(--sigma-navy);
	border: 0;
	border-radius: 0 0 14px 14px;
	padding: 8px 0;
	box-shadow: 0 16px 34px rgba(1, 15, 37, .28);
}

.nav-dropdown > li > a,
.nav-dropdown li a {
	color: var(--sigma-white);
	border: 0;
	font-weight: 500;
}

.nav-dropdown > li > a:hover,
.nav-dropdown li a:hover,
.nav-dropdown li.current-menu-item > a,
.nav-dropdown li.current_page_item > a,
.nav-dropdown li.active > a {
	color: var(--sigma-yellow);
	background: rgba(255, 255, 255, .05);
}

/* the little pointer FlatSome draws above an open dropdown */
.nav-dropdown-has-arrow li.has-dropdown::before { border-bottom-color: var(--sigma-navy); }
.nav-dropdown-has-arrow li.has-dropdown::after  { border-bottom-color: var(--sigma-navy); }

/*
 * The rules above lost. flatsome.css loads AFTER this file, so at equal specificity its
 * white panel border (.nav-dropdown-has-border, 2px #ddd), its grey item type and its
 * #ececec rule under every item won, and the dropdown read as navy with white lines and
 * dark text. Babar, 27 September 2026: white type, yellow on the page you are on, no
 * outer border, no lines. Scoped to #header so they win on specificity, not on order.
 */
#header .nav-dropdown,
#header .nav-dropdown-has-border .nav-dropdown {
	background: var(--sigma-navy);
	border: 0;
}
#header .nav-dropdown > li > a,
#header .nav-dropdown.nav-dropdown-default > li > a,
#header .nav-dropdown-default .nav-column li > a {
	color: var(--sigma-white);
	border: 0;
	margin: 0;
	padding: 10px 22px;
}
#header .nav-dropdown > li > a:hover,
#header .nav-dropdown > li.current-menu-item > a,
#header .nav-dropdown > li.current_page_item > a,
#header .nav-dropdown > li.active > a {
	color: var(--sigma-yellow);
}
/* the pointer: the arrow class sits on body, outside #header, so match the li itself */
#header li.has-dropdown::before,
#header li.has-dropdown::after { border-bottom-color: var(--sigma-navy); }

/* ============================================ links on a dark band */
/*
 * The default link blue is #00559F, which on the navy band is one dark colour on another
 * and cannot be read at all. "Can you mix things" on general waste had two of them in the
 * opening sentence. Every dark section gets the same treatment: white, underlined so it
 * still reads as a link without colour doing the work, yellow on hover. D206.
 */
.sigma-bg-navy a:not(.sigma-btn):not(.button),
.sigma-bg-ink a:not(.sigma-btn):not(.button),
.sigma-iconlist--dark a:not(.sigma-btn):not(.button),
.sigma-feature--dark a:not(.sigma-btn):not(.button) {
	color: var(--sigma-white);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.sigma-bg-navy a:not(.sigma-btn):not(.button):hover,
.sigma-bg-ink a:not(.sigma-btn):not(.button):hover,
.sigma-iconlist--dark a:not(.sigma-btn):not(.button):hover,
.sigma-feature--dark a:not(.sigma-btn):not(.button):hover {
	color: var(--sigma-yellow);
}

/* ============================================ the picture beside a dark list */
/* The frame rounds this one the same 30 as every other photograph on the site. It was
   taking the 24 of a card, which read as a different shape beside the others. */
.sigma-iconlist--dark .sigma-iconlist__media img { border-radius: var(--sigma-radius); }

/* ============================================ the bin under the yes and no lists */
/*
 * Babar's call: it drops in and then stops. The swing is right on a banner where the bin
 * is the only thing moving, and wrong here, where it sits between two columns of type
 * that people are trying to read. It keeps the drop and loses the loop.
 */
.sigma-lists__art.sigma-hang--go {
	animation: sigma-bin-drop 2.2s cubic-bezier(.3, .5, .25, 1) both;
}

/*
 * The long rope cut, Figma 206:4675 band 1351, measured off the frame: the picture is
 * 1:1 at 619 wide (45.85% of the 1350 container), centred, its cable running down the
 * gutter between the cards from 50px under the card tops, the hook over the card edges
 * and the rim landing just under the card bottoms. Babar, 27 September 2026.
 *
 * It sits IN the grid, spanning the cards' row and one more, so the grid grows a second
 * row exactly as tall as the bin that hangs past the cards. The page below it moves
 * down by the right amount whatever length the lists run to, with no fixed offsets.
 */
@media (min-width: 850px) {
	.sigma-lists--rope { padding-bottom: 59px; }
	.sigma-lists--rope .sigma-lists__grid > .sigma-listcard { grid-row: 1; }
	.sigma-lists--rope .sigma-lists__grid > .sigma-listcard--yes { grid-column: 1; }
	.sigma-lists--rope .sigma-lists__grid > .sigma-listcard--no { grid-column: 2; }
	.sigma-lists--rope .sigma-lists__art {
		grid-row: 1 / span 2;
		grid-column: 1 / -1;
		align-self: start;
		justify-self: center;
		width: 45.85%;
		margin: 50px 0 0;
		/* The cable leaves the picture at 287 of 619, 3.63% left of its centre, so
		   centring the PICTURE put the rope against the left card. This centres the
		   ROPE on the gutter. */
		transform: translateX(3.63%);
	}
}

.sigma-pills__grid::-webkit-scrollbar { width: 0; }

/* ============================================ the contact page, split */
/*
 * Details on the left, form on the right. Babar's call, 26 September 2026. The form is a
 * general enquiry, not the booking form: booking is the instant quote and it lives on its
 * own page. D208.
 */
.sigma-formsec--split .sigma-formsec__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 60px;
	align-items: start;
}

.sigma-formsec--split .sigma-formsec__aside .sigma-section-title { text-align: left; }
.sigma-formsec--split .sigma-formsec__aside .sigma-section-sub { text-align: left; margin-bottom: 30px; }

.sigma-formsec__details { display: flex; flex-direction: column; gap: 18px; }

.sigma-formsec__details p {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
	font-size: var(--fs-body);
	line-height: 26px;
	color: var(--sigma-grey-1);
}

.sigma-formsec__details strong {
	flex: 0 0 104px;
	font-weight: 600;
	color: var(--sigma-navy);
}

.sigma-formsec__details a { color: var(--sigma-navy); text-decoration: underline; text-underline-offset: 3px; }
.sigma-formsec__details a:hover { color: var(--sigma-yellow-dark); }

.sigma-formsec__panel {
	background: var(--sigma-white);
	border: 1px solid rgba(20, 29, 56, .07);
	border-radius: var(--sigma-radius-card);
	padding: 36px 36px 40px;
	box-shadow: 0 10px 30px rgba(20, 29, 56, .06);
}

.sigma-formsec__paneltitle {
	margin: 0 0 22px;
	font-size: var(--fs-h3);
	line-height: 30px;
	font-weight: 600;
	color: var(--sigma-navy);
}

/*
 * One card, and it is the home banner's quote card. Babar, 27 September 2026: the same
 * yellow, the same 50px fields with a white hairline on a translucent white, the same
 * labels, the same white button at the same size, set to the right. Every value below is
 * the one .sigma-hero__card uses; see that block.
 */
.sigma-formsec--split .sigma-formsec__panel {
	background: var(--sigma-yellow-2);
	border: 0;
	border-radius: var(--sigma-radius-card);
	box-shadow: none;
	padding: 30px;
}
.sigma-formsec--split .sigma-formsec__paneltitle { margin-bottom: 18px; }
.sigma-formsec--split .sigma-form {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}
.sigma-formsec--split .sigma-form .wpcf7-row { margin: 0 0 16px; }
.sigma-formsec--split .sigma-form .wpcf7-row br { display: none; }
.sigma-formsec--split .sigma-form label {
	display: block;
	margin: 0 0 6px;
	font-size: var(--fs-small);
	line-height: 20px;
	font-weight: 600;
	color: var(--sigma-navy-deep);
	text-transform: none;
	letter-spacing: normal;
}
.sigma-formsec--split .sigma-form input[type="text"],
.sigma-formsec--split .sigma-form input[type="tel"],
.sigma-formsec--split .sigma-form input[type="email"],
.sigma-formsec--split .sigma-form select {
	height: 50px;
	min-height: 50px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--sigma-white);
	border-radius: 10px;
	box-shadow: none;
	font-size: var(--fs-body);
	color: var(--sigma-grey-2);
	background-color: rgba(255, 255, 255, .75);
}
.sigma-formsec--split .sigma-form textarea {
	min-height: 110px;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--sigma-white);
	border-radius: 10px;
	box-shadow: none;
	font-size: var(--fs-body);
	color: var(--sigma-grey-2);
	background-color: rgba(255, 255, 255, .75);
}
/* the button row: right aligned, a clear gap above it, nothing hanging below it */
.sigma-formsec--split .sigma-form .wpcf7-row:last-of-type { margin: 22px 0 0; text-align: right; }
.sigma-formsec--split .sigma-form input[type="submit"] {
	display: inline-block;
	width: auto;
	min-width: 0;
	height: 50px;
	margin: 0;
	padding: 0 52px 0 25px;
	border: 1px solid #DDD;
	border-radius: var(--sigma-radius);
	background-color: var(--sigma-white);
	color: var(--sigma-grey-2);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 48px;
	box-shadow: none;
}
.sigma-formsec--split .sigma-form input[type="submit"]:hover { background-color: var(--sigma-cream); }
.sigma-formsec--split .sigma-form .wpcf7-spinner { display: none; }
.sigma-formsec--split .sigma-form .wpcf7-response-output { margin: 16px 0 0; }

.sigma-formsec__pic {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-top: 32px;
}

@media (max-width: 1099px) {
	.sigma-formsec--split .sigma-formsec__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
	.sigma-formsec--split .sigma-formsec__panel { padding: 24px 20px 28px; }
}

@media (max-width: 560px) {
	.sigma-formsec__panel { padding: 24px 20px 28px; }
	.sigma-formsec__details strong { flex-basis: 84px; }
}

/* ============================================ a tool in a section */
/*
 * The booking form is not prose. Dropped into a feature it inherited the text column and
 * came out 870 wide inside a 1350 container, which squeezed the two columns of the frame
 * into one narrow pair. This modifier hands the whole container back. D209.
 */
.sigma-feature--tool .sigma-feature__grid {
	display: block;
	grid-template-columns: none;
}

.sigma-feature--tool .sigma-feature__col,
.sigma-feature--tool .sigma-feature__body {
	max-width: none;
	width: 100%;
}

.sigma-feature--tool { padding-top: 0; }

/* ============================================ the permit block, service areas */
/*
 * Figma 241:4021 band 2546: the table, "what it costs" and the three tips are one white
 * block. The generator emits them as three sections, so their paddings are pulled in here
 * or they read as three bands with 160px of nothing between them. 27 September 2026.
 */
.sigma-tablesec:has(.sigma-tablecard--pin) { padding-bottom: 40px; }
.sigma-tablesec:has(.sigma-tablecard--pin) + .sigma-feature--centred { padding-top: 30px; padding-bottom: 0; }
.sigma-tablesec:has(.sigma-tablecard--pin) + .sigma-feature--centred + .sigma-wastegrid { padding-top: 36px; }

/* ============================================ UX Builder preview */
/*
 * UX Builder wraps every child element in its own div.uxb-wrapper, so a card is no longer
 * a direct child of its grid and every grid and flex row in the library fell apart in the
 * builder: one size card the full width of the page, the price section squeezed to one
 * edge. Babar, 27 September 2026. Inside the builder only, the wrappers round the CHILD
 * elements drop out of layout so the preview matches the page. Sections keep theirs, so
 * they stay selectable on the canvas; the children are picked from the tree on the left.
 */
.ux-builder-iframe .uxb-wrapper--sigma_icon_item,
.ux-builder-iframe .uxb-wrapper--sigma_waste_card,
.ux-builder-iframe .uxb-wrapper--sigma_faq_item,
.ux-builder-iframe .uxb-wrapper--sigma_list_card,
.ux-builder-iframe .uxb-wrapper--sigma_pair_card,
.ux-builder-iframe .uxb-wrapper--sigma_orbit_card { display: contents; }
/* The size and keep reading grids size their children with a child combinator, which
   a wrapper that has no box still breaks, so there the wrapper takes the card's place
   in the row (see .sigma-sizegrid__grid > .uxb-wrapper) and the card fills it. */
.ux-builder-iframe .uxb-wrapper--sigma_size_card > .sigma-sizecard,
.ux-builder-iframe .uxb-wrapper--sigma_kr_card > * { height: 100%; max-width: none; }

/* ============================================ single post */
/* No comments on posts, Babar, 27 September 2026. comments_open is false in PHP; this
   also hides any notice the theme prints for a closed thread. The booking band sits
   straight under the related cards, the same as on every page. */
.single-post #comments,
.single-post .comments-area,
.single-post .comment-respond { display: none; }
.single-post .blog-wrapper .sigma-keep-reading { margin-top: 40px; }

/* ============================================ the quote page, what the price includes */
/*
 * Figma 241:2721 band 2928, measured: navy band 418 tall, no heading, four cards 322 wide
 * on a 20 gap starting 80 below the band's top edge. Each card is a lighter navy at the
 * top fading into the band by its foot, so it has a top edge and no bottom one. Yellow
 * line icon, white title, white text, all centred. Babar called it on 27 September 2026.
 */
.sigma-wastegrid.sigma-bg-navy.sigma-wastegrid--row { padding: 80px 0 110px; }
.sigma-bg-navy.sigma-wastegrid--row .sigma-wastegrid__grid { gap: 20px; margin-top: 0; }
.sigma-bg-navy.sigma-wastegrid--row .sigma-wastecard {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 30px 24px 40px;
	background: linear-gradient(180deg, #454C63 0%, rgba(69, 76, 99, .35) 55%, rgba(20, 29, 56, 0) 100%);
	border: 0;
	border-radius: 24px 24px 0 0;
	box-shadow: none;
}
.sigma-bg-navy.sigma-wastegrid--row .sigma-wastecard__icon {
	width: 52px;
	height: 52px;
	background: none;
	border: 0;
	box-shadow: none;
}
.sigma-bg-navy.sigma-wastegrid--row .sigma-wastecard__icon img {
	width: 48px;
	height: 48px;
	/* the line icons are navy; the frame draws them yellow on the navy card */
	filter: brightness(0) saturate(100%) invert(71%) sepia(75%) saturate(1400%) hue-rotate(2deg) brightness(101%);
}
.sigma-bg-navy.sigma-wastegrid--row .sigma-wastecard__title { color: var(--sigma-white); font-size: var(--fs-h4, 20px); margin: 0 0 8px; }
.sigma-bg-navy.sigma-wastegrid--row .sigma-wastecard__text { color: rgba(255, 255, 255, .9); margin: 0; }

@media (max-width: 849px) {
	.sigma-wastegrid.sigma-bg-navy.sigma-wastegrid--row { padding: 48px 0 56px; }
}

/* ============================================ UX Blocks */
/* The seven size cards are one shared UX Block dropped inside each size grid. FlatSome
   puts an empty edit-link div in front of a block's content for logged in admins, and
   inside the card row that div became an eighth flex item. Out of the flow, it still
   works as the edit link. 27 September 2026. */
.sigma-sizegrid__grid > .block-edit-link { position: absolute; }

/* ============================================ home, phone, Figma mobile frame */
/*
 * design/mobile.png, 430 wide, measured. Babar, 27 September 2026: "match the design", and
 * then "every single page looks like the home page": the prose, icon list, slider and
 * button treatment below applies on every page. Only the hero rules are home's own.
 */
@media (max-width: 849px) {

	/* ---- hero: pill buttons, not full width bars. Primary 250x50, secondary 190x48 in
	   the frame; auto width with the frame's 25px side padding gives both. */
	.home .sigma-hero__col .sigma-buttons { flex-direction: column; align-items: center; gap: 14px; }
	.home .sigma-hero__col .sigma-btn {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		height: 50px;
		line-height: 50px;
		padding: 0 25px;
	}

	/* ---- hero: the bin hangs UNDER the quote card, over the fleet, and the hero ends in
	   a round bottom. Frame: bin body 204 wide centred, top at 1156, card bottom at 1047;
	   the image's body is 640 of its 699 width and starts 651 of 1024 down, so at 223
	   wide the image top sits 99px above the card's bottom edge and the rope runs up
	   behind the card. The hero's edge is at 1295 at the sides and about 1388 in the
	   middle, so a 93px sag. */
	.home .sigma-hero {
		border-radius: 0 0 50% 50% / 0 0 96px 96px;
	}
	.home .sigma-hero .sigma-container { position: relative; z-index: 2; }
	.home .sigma-hero__stage {
		position: relative;
		z-index: 1;
		display: block;
		margin-top: -99px;
		padding-bottom: 118px;
	}
	.home .sigma-hero .sigma-drop {
		display: block;
		position: static;
		width: 223px;
		height: auto;
		margin: 0 auto;
		transform: none;
		animation-name: sigma-bin-drop;
	}
	.home .sigma-hero__bin { display: block; width: 100%; height: auto; }

	/* ---- prose sections: the picture first, then everything centred, pill buttons.
	   Frame: "Skip Bin Hire in Brisbane" and "Where we deliver" both lead with the art. */
	.sigma-feature--img-left .sigma-feature__media { order: -1; }
	.sigma-feature .sigma-feature__col,
	.sigma-feature .sigma-section-title { text-align: center; }
	/* running text centres, but a list or a table inside it stays left, or the legal
	   pages turn into a column of ragged centred bullets */
	.sigma-feature__body ul,
	.sigma-feature__body ol,
	.sigma-feature__body table { text-align: left; }
	.sigma-feature .sigma-buttons,
	.sigma-iconlist .sigma-buttons { justify-content: center; }
	.sigma-feature .sigma-btn,
	.sigma-iconlist .sigma-btn { flex: 0 0 auto; width: auto; }

	/* ---- the two icon lists: picture, then the centred heading, then the items */
	.sigma-iconlist--img-right .sigma-iconlist__grid,
	.sigma-iconlist--img-left .sigma-iconlist__grid { grid-template-areas: "media" "head" "items"; }
	.sigma-iconlist__head,
	.sigma-iconlist__head .sigma-section-title,
	.sigma-iconlist__head .sigma-section-sub { text-align: center; }
	.sigma-iconlist__col .sigma-buttons { display: flex; }

	/* ---- the seven sizes and the five streams are sliders, not a long scroll. Frame: a
	   size card 365 wide with the next one peeking, a stream card 250 wide, 20 gaps, 20
	   in from the edge, and dots underneath. The page never scrolls sideways: the row
	   scrolls inside itself. */
	.sigma-sizegrid__grid,
	.sigma-wastegrid:not(.sigma-wastegrid--row) .sigma-wastegrid__grid {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 20px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--sigma-gutter);
		margin: 0 calc(-1 * var(--sigma-gutter));
		padding: 0 var(--sigma-gutter) 6px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.sigma-sizegrid__grid::-webkit-scrollbar,
	.sigma-wastegrid__grid::-webkit-scrollbar { display: none; }
	/* the size cards are a UX Block, so in a grid they may sit behind the block's edit
	   link; the card is still the slide */
	.sigma-sizegrid__grid > .sigma-sizecard { scroll-snap-align: start; }
	.sigma-sizegrid__grid > .sigma-sizecard {
		flex: 0 0 85%;
		max-width: 85%;
		scroll-snap-align: start;
	}
	.sigma-wastegrid:not(.sigma-wastegrid--row) .sigma-wastegrid__grid > .sigma-wastecard {
		flex: 0 0 62%;
		max-width: 62%;
		scroll-snap-align: start;
	}
	.sigma-dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin: 26px 0 0;
		padding: 0;
		list-style: none;
	}
	.sigma-dots button {
		width: 10px;
		height: 10px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--sigma-yellow-pale);
		cursor: pointer;
	}
	.sigma-dots button.is-on { background: var(--sigma-yellow); }
}

/* ---- keep reading on a phone: icon on top, title and line centred under it, 2 x 2.
   Every page and every phone width, Babar, 27 September 2026. */
@media (max-width: 849px) {
	.sigma-keep-reading__grid { gap: 16px; }
	.sigma-keep-reading__grid > * { flex-basis: calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); }
	.sigma-kr-card {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		gap: 12px;
		min-height: 0;
		padding: 22px 12px;
	}
	.sigma-kr-card__title { font-size: 18px; line-height: 24px; }
}

/* ---- the callout pill over a section's picture. Mobile frame: 189x45 white pill at
   x43 over the fleet's top left edge, a drawn arrow curving down to the trucks, the same
   pill and curve the weight band uses. */
.sigma-feature__media { position: relative; }
.sigma-feature__pill {
	position: absolute;
	z-index: 2;
	left: 4%;
	top: -34px;
	display: inline-flex;
	align-items: center;
	padding: 12px 18px;
	background: var(--sigma-white);
	border-radius: var(--sigma-pill);
	box-shadow: 0 6px 20px rgba(20, 29, 56, .12);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 20px;
	color: var(--sigma-navy);
	white-space: nowrap;
}
.sigma-feature__pillarrow {
	position: absolute;
	left: calc(100% + 4px);
	top: 50%;
	width: 48px;
	height: 44px;
	color: var(--sigma-navy);
}

@media (max-width: 849px) {
	/* round dots, 10px: FlatSome's button defaults were stretching them into ovals */
	.sigma-dots button {
		flex: 0 0 10px;
		width: 10px !important;
		min-width: 0 !important;
		max-width: 10px;
		height: 10px !important;
		line-height: 0;
		box-shadow: none;
		font-size: 0;
	}
	/* the booking band's buttons are pills in the frame, not full width bars */
	.sigma-cta .sigma-buttons { flex-direction: column; align-items: center; }
	.sigma-cta .sigma-btn { flex: 0 0 auto; width: auto; max-width: none; }
	.sigma-feature__pill { top: -26px; left: 10px; }
}

/* ============================================ where we deliver, the bin on its rope */
/* The rope comes out of the section's own top edge, desktop and phone. Figma home band
   5460: the hook is cut by the edge and the bin is 560 wide. Babar, 27 September 2026. */
.sigma-feature--hangtop .sigma-feature__media { align-self: start; margin-top: -54px; }
.sigma-feature--hangtop .sigma-feature__media img { max-width: 560px; margin: 0 auto; }
@media (max-width: 849px) {
	.sigma-feature--hangtop .sigma-feature__media { margin-top: -48px; }
}

/* ============================================ the booking band, the bin measured */
/*
 * Desktop, Figma home: the card is 1350 x 393 and the bin hangs from the card's top edge,
 * rope 145 in from the left, bin 256 wide. The artwork is 560 wide with its rope at 280
 * and the bin 526 wide, so it draws at 272 (20.15% of the card), 9 in, top 0, and ends 67
 * above the card's foot. It was 275 wide in a 268 tall card and ran 61px into the footer.
 * Phone, design/mobile.png: bin 155 wide, rope 100 in from the card edge entering at the
 * card's top, heading 124 down. At 165 wide the artwork's rope starts 30 above the card,
 * so the top 30px is clipped at the card's edge.
 */
@media (min-width: 1101px) {
	.sigma-cta__card { min-height: 393px; display: flex; flex-direction: column; justify-content: center; }
	.sigma-cta__art--left { left: 9px; top: 0; width: 20.15%; max-width: 272px; }
}
@media (max-width: 849px) {
	.sigma-cta__art--left { left: 0; top: -30px; width: 165px; max-width: none; clip-path: inset(30px 0 0 0); }
	/* the heading starts 150 down, under the bin; 124 was the bin's own logo, not the
	   heading, and put the heading behind the bin */
	.sigma-cta__card { padding-top: 150px; }
}

/* ============================================ footer, phone */
/*
 * design/mobile.png: logo and line centred on top, then two columns, Quick Links beside
 * What Goes In, then Bin Sizes beside Contact Detail. On a large phone only; below 380
 * the single column stays, as Babar asked. The widgets are his; this is layout only.
 */
@media (min-width: 380px) and (max-width: 849px) {
	#footer .footer-widgets > .row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
		column-gap: 16px;
		padding: 0 20px;
	}
	/* FlatSome's clearfix pseudo elements on .row became grid items and took a cell */
	#footer .footer-widgets > .row::before,
	#footer .footer-widgets > .row::after { display: none; }
	#footer .footer-widgets > .row > .col { max-width: none; width: auto; flex: none; padding: 0 0 26px; }
	#footer #text-2 { grid-column: 1 / -1; order: 0; text-align: center; }
	#footer #text-2 img { margin-left: auto; margin-right: auto; }
	#footer #custom_html-5 { order: 1; }
	#footer #custom_html-3 { order: 2; }
	#footer #custom_html-2 { order: 3; }
	#footer #custom_html-4 { order: 4; }
	/* the email is one long word; the frame breaks it onto a second line */
	#footer .footer-contact a,
	#footer .footer-contact span { overflow-wrap: anywhere; }
}

/* ============================================ every page on a phone, like home */
/* Babar, 27 September 2026: "every single page looks like the home page". The inner
   banners centre and take the home hero's pill buttons, and every prose section leads
   with its picture, except the ones the frame draws picture-last: the navy room band with
   its trucks on the floor, and the centred sections with the fleet underneath. */
@media (max-width: 849px) {
	.sigma-banner__inner,
	.sigma-banner__inner .sigma-banner__crumbs,
	.sigma-banner__inner h1,
	.sigma-banner__inner .sigma-banner__title,
	.sigma-banner__inner .sigma-banner__sub { text-align: center; }
	.sigma-banner__inner .sigma-buttons { flex-direction: column; align-items: center; gap: 14px; justify-content: center; }
	.sigma-banner__inner .sigma-btn {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		height: 50px;
		line-height: 50px;
		padding: 0 25px;
	}
	.sigma-feature--img-right:not(.sigma-feature--floor):not(.sigma-feature--centred) .sigma-feature__media { order: -1; }
}

/* ============================================ the top bar */
/* Babar, 27 September 2026: yellow bar, #000 type, so the phone number reads. It hides
   when the header goes sticky, which is FlatSome's own behaviour and left alone. */
#top-bar.header-top { background-color: var(--sigma-yellow) !important; }
#top-bar,
#top-bar a,
#top-bar span,
#top-bar .nav > li > a,
#top-bar .html { color: #000 !important; }
#top-bar svg { color: #000; stroke: #000; }

/* Phones: Get a Quote on the left, the number on the right, in the top bar that stays
   in view as you scroll. Replaces the floating bar at the bottom, which took 68px off
   a small screen. Babar, 2 October 2026, D245. The link is the header's html-3 element,
   theme mod top_right_text, shown only in header_mobile_elements_top. */
@media (max-width: 849px) {
	#top-bar .show-for-medium .nav { justify-content: space-between; flex-wrap: nowrap; width: 100%; }
	#top-bar .show-for-medium .nav > li { margin: 0; }
	.sigma-topquote { display: inline-flex; align-items: center; gap: 8px; font-size: 16px !important; line-height: 24px !important; font-weight: 600 !important; text-decoration: none; white-space: nowrap; }
	.sigma-topquote svg { width: 20px; height: 20px; flex: 0 0 20px; display: block; }
	#top-bar .sigma-topline { white-space: nowrap; }
}
@media (max-width: 359px) {
	.sigma-topquote, #top-bar .sigma-topline { font-size: 14px !important; gap: 6px; }
	.sigma-topquote svg, #top-bar .sigma-topline svg { width: 18px; height: 18px; flex-basis: 18px; }
}

/* ============================================ the permit section, compact */
/*
 * Babar, 27 September 2026: too much air round "Do you need a council permit". The lead
 * was centred beside a 308 tall picture, which left 97px between the heading and the
 * text and 108 between the text and the table. As the frame draws it, the text starts
 * under the heading and the trucks sit to the right of heading and text together, so
 * the table follows the text straight away. Phone is unchanged: the picture is hidden
 * there and the spacing was already tight.
 */
@media (min-width: 850px) {
	.sigma-tablesec:has(.sigma-tablesec__lead--art) .sigma-container { position: relative; }
	.sigma-tablesec__lead--art { display: block; margin: 12px 0 28px; }
	.sigma-tablesec__lead--art .sigma-tablesec__prose { max-width: calc(100% - 460px); }
	.sigma-tablesec__lead--art .sigma-tablesec__art {
		position: absolute;
		top: 0;
		right: 24px;
		/* 400 wide the trucks stand 230 tall, heading top to the table's top edge, so
		   their wheels rest on the card rather than on its header plate */
		width: 400px;
	}
}

/* ============================================ the phone menu, where you are */
/* Babar, 27 September 2026: the full screen phone menu gave no sign of the page you are
   on. The current page is yellow, and so is its parent, so on the 2m3 page "Skip Bin
   Sizes" lights as well as "2m3 Skip Bin". The desktop menu already did this. */
/* Babar kept the menu white in the end, 27 September 2026: the page you are on, and its
   parent section, are yellow type. No pill, no background. */
#main-menu li.current-menu-item > a,
#main-menu li.current_page_item > a,
#main-menu li.current-menu-ancestor > a,
#main-menu li.current-menu-parent > a,
#main-menu li.current_page_ancestor > a { color: var(--sigma-yellow) !important; }

/* ============================================ phone, Babar's list, 27 September 2026 */
@media (max-width: 849px) {

	/* ---- the menu toggle: three bold bars, no arrow, no yellow box. FlatSome styles it
	   as a primary button inside div.header-button, and our primary buttons carry the
	   arrow, so it is targeted by what it opens rather than by where it sits. */
	.header-main a.button[data-open="#main-menu"],
	.header-main a.button[data-open="#main-menu"]:hover {
		width: 44px;
		min-width: 0;
		height: 44px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background:
			linear-gradient(#fff, #fff) center 12px / 28px 3px no-repeat,
			linear-gradient(#fff, #fff) center 20px / 28px 3px no-repeat,
			linear-gradient(#fff, #fff) center 28px / 28px 3px no-repeat !important;
		background-color: transparent !important;
	}
	.header-main a.button[data-open="#main-menu"]::before,
	.header-main a.button[data-open="#main-menu"]::after { content: none !important; display: none !important; }
	.header-main a.button[data-open="#main-menu"] > i { display: none !important; }

	/* ---- home hero: the two buttons go UNDER the quote form, because the form already
	   asks the same thing. The text column dissolves into the grid so its parts can be
	   ordered round the card. */
	.home .sigma-hero__col { display: contents; }
	.home .sigma-hero__title { order: 1; }
	.home .sigma-hero__sub { order: 2; margin-bottom: 0; }
	.home .sigma-hero__card { order: 3; }
	.home .sigma-hero__col .sigma-buttons { order: 4; }

	/* ---- the small blue bin on the form hangs from the card's top edge, not mid air */
	.home .sigma-hero__cardhead { padding-top: 0; }
	.home .sigma-hero__badge { margin-top: -22px; }

	/* ---- the big bin sits up under the buttons, so the hero is shorter. The artwork has
	   142px of rope above the bin; the stage rises 120 and its top 120 is clipped, so 22
	   of rope shows under the buttons instead of the rope streaking behind them. */
	/* The hero content ends 80 below the buttons, so the stage rises 200 and shows from
	   120 down: the short length of rope starts right under the buttons. */
	.home .sigma-hero__stage { margin-top: -200px; padding-bottom: 80px; clip-path: inset(120px 0 0 0); }

	/* ---- more of the fleet: the plate is fitted by width rather than covering. The hero
	   takes the plate's own top colour so there is no seam where the plate starts. */
	.home .sigma-hero--art {
		background-size: 170% auto;
		background-position: center bottom;
		background-color: rgb(251, 250, 239);
	}
	.home .sigma-hero__title { margin-bottom: 0; }

	/* ---- the stream cards nearly full width, the next one just showing */
	.sigma-wastegrid:not(.sigma-wastegrid--row) .sigma-wastegrid__grid > .sigma-wastecard {
		flex-basis: 85%;
		max-width: 85%;
	}

	/* ---- the callout under the picture on a phone, not over it like a button */
	.sigma-feature__pill {
		position: static;
		display: table;
		margin: 14px auto 0;
		box-shadow: 0 2px 10px rgba(20, 29, 56, .08);
		background: var(--sigma-white);
	}
	.sigma-feature__pillarrow { display: none; }
}

/* ============================================ home hero form, phone, spacing */
/* Babar, 27 September 2026. The line under the card title goes; the space between the
   last field and See prices opens from 18 to 30; the space under See prices matches the
   31 either side of it (it was 43); the card is shorter than before, not taller. Under
   the card, 44 before the two buttons, both 272 wide, and more room below them. */
@media (max-width: 849px) {
	.home .sigma-hero__formsub { display: none; }
	.home .sigma-hero__card { padding-bottom: 31px; }
	.home .sigma-hero__card .wdegp,
	.home .sigma-hero__card .wdegp__form { margin-bottom: 0; padding-bottom: 0; }
	.home .sigma-hero__card .wdegp__submit { margin-top: 12px; margin-bottom: 0; }
	/* no extra room under the buttons: the bin's rope has to start right at them */
	.home .sigma-hero__col .sigma-buttons { margin-top: 16px; margin-bottom: 0; }
	/* 280, a little over the primary's natural 272, and one line: at exactly 272 the
	   rounding wrapped "Get Your Instant Quote" onto two lines */
	.home .sigma-hero__col .sigma-btn { width: 280px; box-sizing: border-box; justify-content: center; white-space: nowrap; }
}

/* ============================================ phone gutter */
/* Babar, 27 September 2026: 15 a side on a phone, not 24. That is 18px more width for
   the content on a 430 screen. Every section's container, the sliders' edge to edge
   bleed and the orbit all read this one variable. */
@media (max-width: 849px) {
	:root { --sigma-gutter: 15px; }
}

/* ============================================ inner banners on a phone, like home */
/* Babar, 27 September 2026: the page banners take the home hero's phone treatment. Both
   buttons one width, the fleet plate fitted rather than covering, the U shaped foot, and
   the page's own hanging bin hanging from the buttons with the fleet under it. */
@media (max-width: 849px) {
	.sigma-banner {
		border-radius: 0 0 50% 50% / 0 0 96px 96px;
		overflow: hidden;
		background-size: 170% auto !important;
		background-position: center bottom !important;
		background-color: rgb(251, 250, 239);
	}
	.sigma-banner__inner { padding-bottom: 0; }
	.sigma-banner__inner .sigma-btn { width: 280px; box-sizing: border-box; white-space: nowrap; }
	.sigma-banner__art {
		height: auto;
		padding: 0 0 86px;
		text-align: center;
	}
	.sigma-banner__art .sigma-drop--banner {
		display: block;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		width: 210px !important;
		margin: 0 auto;
		transform: none;
		animation-name: sigma-bin-drop;
	}
	.sigma-banner__art .sigma-banner__art2 {
		display: block;
		position: static;
		width: 100%;
		height: auto;
	}
}

/* ============================================ keep reading, a slider on a phone */
/* Babar, 27 September 2026: swipe, not a 2 x 2 block. The icon-on-top cards stay; the
   next one peeks in so it reads as scrollable, with dots under it. */
@media (max-width: 849px) {
	.sigma-keep-reading__grid {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--sigma-gutter);
		margin: 0 calc(-1 * var(--sigma-gutter));
		padding: 0 var(--sigma-gutter) 6px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.sigma-keep-reading__grid::-webkit-scrollbar { display: none; }
	.sigma-keep-reading__grid > * {
		flex: 0 0 62% !important;
		max-width: 62% !important;
		scroll-snap-align: start;
	}
}

/* ============================================ service areas, the suburbs on a phone */
/* The list ran open with no scrollbar (D207) but a 360px cap was left on phones, so 41
   suburbs spilled out over the map and the text under it. Babar, 27 September 2026: two
   to a row, smaller, full length, no cap. */
@media (max-width: 649px) {
	.sigma-pills__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		max-height: none;
		height: auto;
	}
	.sigma-pill {
		min-height: 40px;
		padding: 8px 10px;
		gap: 8px;
		font-size: 14px;
		line-height: 18px;
	}
	.sigma-pill::before { flex-basis: 16px; width: 16px; height: 16px; }
}

/* ============================================ banner bin, out from behind the buttons */
/* On a phone the bin used to drop in from above, detached, over the buttons. Its box is
   clipped at the top so the drop happens BEHIND the buttons and the bin slides out from
   under them. Babar, 27 September 2026. */
@media (max-width: 849px) {
	.sigma-banner .sigma-container { position: relative; z-index: 2; }
	.sigma-banner__art { position: relative; z-index: 1; clip-path: inset(0 -50% -50% -50%); }
}

/* ============================================ yes and no lists, tighter */
/* Babar, 27 September 2026: the lines in "what counts as green waste" and its siblings
   ran at 26 on 16 and read loose. 22 on 16, and 12 between items. */
.sigma-listcard__body li,
.sigma-listcard__body > p { line-height: 22px; margin-bottom: 12px; }
.sigma-listcard__body li::before,
.sigma-listcard__body > p::before { top: 1px; }

/* ============================================ FAQ straight above the booking band */
/* Babar, 27 September 2026: "Worth checking first" ran straight into "Would rather talk to
   someone?" on the booking page. The band starts lower so there is air between them. */
.sigma-faq + .sigma-cta { padding-top: 70px; }
@media (max-width: 849px) { .sigma-faq + .sigma-cta { padding-top: 44px; } }

/* ============================================ the phone bar */
/*
 * Call and Get a Quote, pinned to the bottom on phones. Babar, 29 September 2026. Same
 * band as the booking page's own price bar (navy, yellow pill), so the two read as one
 * thing, and it never shows on that page. The page gets the bar's height back at the
 * bottom so the footer's last line is not hidden under it.
 */
.sigma-mbar { display: none; }

@media (max-width: 849px) {
	.sigma-mbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		gap: 10px;
		padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--sigma-navy);
		box-shadow: 0 -6px 20px rgba(1, 15, 37, .18);
	}
	.sigma-mbar a {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 12px;
		border-radius: var(--sigma-pill);
		font-size: 16px;
		font-weight: 600;
		white-space: nowrap;
		text-decoration: none;
	}
	.sigma-mbar__call { color: var(--sigma-white); border: 1px solid rgba(255, 255, 255, .5); }
	.sigma-mbar__call:hover, .sigma-mbar__call:focus { color: var(--sigma-white); }
	.sigma-mbar__quote { background: var(--sigma-yellow-2); color: var(--sigma-grey-2); }
	.sigma-mbar__quote:hover, .sigma-mbar__quote:focus { background: var(--sigma-yellow-dark); color: var(--sigma-grey-2); }
	body:has(.sigma-mbar) { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
	body:has(.sigma-mbar) .back-to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================ the main menu, narrow desktops */
/*
 * Commercial joined the menu on 29 September 2026 (D221) and pushed it onto two lines
 * between 1100 and 1249 wide. Tighter spacing holds it on one line down to 1150, and 16px
 * type holds it to 1100. At 1250 and up nothing changes. Below 1100 it wrapped before the
 * new item too.
 */
/* Same selector weight as the base menu rule above (.header-main .header-nav-main), or it
   loses and nothing changes. */
@media (min-width: 850px) and (max-width: 1249px) {
	.header-main .header-nav-main > li { margin-left: 2px; margin-right: 2px; }
	.header-main .header-nav-main > li > a { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 850px) and (max-width: 1149px) {
	.header-main .header-nav-main > li > a { font-size: 16px; }
}

/* ============================================ inner banner text, centred */
/*
 * Babar, 29 September 2026: the banner text sat at a fixed distance from the top, so a
 * page with a longer heading or line grew downwards and ran close to the banner's bottom
 * edge. Centred instead: extra content grows up and down equally. The banner keeps its
 * height. Desktop only; on a phone the banner is stacked and this does not apply.
 */
@media (min-width: 850px) {
	.sigma-banner .sigma-banner__inner {
		align-items: center;
		padding-top: clamp(40px, 4.2vw, 80px);
		padding-bottom: clamp(40px, 4.2vw, 80px);
	}
}

/* ============================================ the trade account form, two across */
/*
 * Babar, 29 September 2026: nine fields one under another made the form too long. Two per
 * row on the trade page only (its section carries the #trade-account anchor); the message
 * and the button keep the full width. One column on a phone. The contact form is not
 * touched.
 */
@media (min-width: 550px) {
	#trade-account .sigma-form .wpcf7-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}
	#trade-account .sigma-form .wpcf7-form > * { grid-column: 1 / -1; }
	#trade-account .sigma-form .wpcf7-form > .wpcf7-row:not(.wpcf7-row--full) { grid-column: auto; }
	#trade-account .sigma-form .wpcf7-form > .wpcf7-row { min-width: 0; }
}