/* ===========================================================================
 * Global site footer — Elementor footer template #2395.
 *
 * Loads on EVERY page (the footer is `include/general`), so it cannot sit behind a
 * context guard the way the page-type stylesheets do. Keep it small and self-contained.
 *
 * `--ftr-accent` and `--ftr-map` are injected as inline custom properties by
 * inc/footer.php, so the accent colour and the background image are ACF edits, not
 * CSS edits.
 *
 * The `.loc-list` block at the end used to live in style.css for exactly this
 * "renders in the footer, where location.css is not enqueued" reason — it now lives
 * here with the rest of the footer.
 * ======================================================================== */

.ftr{
	--ftr-accent:#0AA3D6;
	--ftr-bg:#170D3D;
	--ftr-text:rgba(255,255,255,.86);
	--ftr-muted:rgba(255,255,255,.72);
	--ftr-rule:rgba(255,255,255,.12);
	--ftr-chip-bg:rgba(255,255,255,.06);
	--ftr-chip-bd:rgba(255,255,255,.16);

	position:relative;
	isolation:isolate;
	background:var(--ftr-bg);
	color:var(--ftr-text);
	font-family:"Montserrat",sans-serif;
	overflow:hidden;
}

/* Dotted world map — NO LONGER PAINTED HERE.
 *
 * It is now a native Elementor **Background Overlay** on the outer footer container (4ce2504 in
 * template #2395), so it is editable at Elementor → Footer → outer container → Style → Background
 * Overlay: image, position, size, repeat and opacity are all controls. Moved 2026-07-30 on request.
 *
 * WHY IT HAD TO MOVE RATHER THAN BE DUPLICATED: `.ftr` IS an Elementor container (`e-con e-parent`),
 * and Elementor paints container overlays through `:is(.e-con,.e-con>.e-con-inner)::before` using
 * `content:var(--background-overlay)` + `opacity:var(--overlay-opacity)`. Two owners on one
 * pseudo-element is the exact failure documented for `.svc-hero`, `.svc1-cta` and
 * `.cs-challenge__card` — so the theme rule is gone, not merely overridden.
 *
 * Keep in mind when editing in the UI:
 *   - opacity was .055 here on purpose; above roughly .06 the dot grid competes with the link text.
 *   - an SVG loaded as a CSS background has no inheriting colour context, so `currentColor` resolves
 *     to black; footer-world-map.svg carries an explicit `fill="#ffffff"`.
 *   - the theme used to clip this to the top 72% of the footer (46% below 768px). An Elementor
 *     overlay always spans the whole container, so slightly more of the map shows — adjust with the
 *     overlay's own size/position controls rather than reintroducing a height here.
 *
 * `.ftr` keeps `position:relative` + `overflow:hidden` above, which the overlay relies on. */

/* --- layout ------------------------------------------------------------- */

/* Layout is written directly onto the Elementor containers at two-class specificity —
   the same pattern as `.ind1-*__inner` / `.loc-*__inner` elsewhere in this theme, which
   is what makes a `display` other than Elementor's own stick on an `.e-con`.

   FLEX, NOT GRID, and the reason matters. This was a grid with a `grid-template-columns` per
   `ftr-cols-{n}` — but `ftr-cols-{n}` counts the four optional columns' DATA, while the tracks have
   to match the number of CONTAINERS in the template. Those were the same number until someone put
   the Company menu and the Services list in one container in the editor, at which point the row
   declared three tracks for two items and left a 502px hole (measured at 1440).

   A flex row cannot get that wrong: it lays out however many children it is given. It also gets the
   Locations behaviour for free — that block asks for enough width to hold its three country columns
   and, when the row cannot give it, `flex-wrap` drops it to a row of its own instead of squeezing
   it. No breakpoint decides that; the content does. Measured, the changeover lands near 1270px.

   Editing note: the widths below are `flex-basis` (a starting size the row grows from), not fixed
   widths. To give a column more or less of the row, change its basis. */
.ftr .ftr__inner{
	width:100%;
	max-width:1600px;
	margin:0 auto;
	padding:88px clamp(20px, 4vw, 56px) 0;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:60px 40px;
}
/* Columns are flex containers; Elementor's kit gap would otherwise add 20px between
   every widget in them. Spacing inside a column is set by the child margins. */
.ftr .ftr-col{display:flex;flex-direction:column;gap:0;padding:0;min-width:0;}

.ftr .ftr-col--brand{flex:1 1 300px;}
/* The cap is what stops a lone link column stretching across whatever the row has spare — measured
   at 1200, where Locations has wrapped below and Services grew to 724px with its labels adrift in
   it. It only ever binds when a column is alone on its line; at 1920 the column measures 329px. */
.ftr .ftr-col--services,
.ftr .ftr-col--industries,
.ftr .ftr-col--company{flex:1 1 190px;max-width:360px;}
/* 600px is what three country columns plus their dividers need before the text starts wrapping —
   see the `.ftr-locgrid` block. Below it the row wraps and Locations takes the full width. */
.ftr .ftr-col--locations{flex:1 1 600px;}

.ftr-no-services   .ftr-col--services{display:none;}
.ftr-no-industries .ftr-col--industries{display:none;}
.ftr-no-company    .ftr-col--company{display:none;}
.ftr-no-locations  .ftr-col--locations{display:none;}

/* --- column headings ---------------------------------------------------- */

.ftr .ftr-col__title{
	margin:0 0 32px;
	padding:0;
	font-family:"Heebo",sans-serif;
	font-weight:700;
	font-size:20px;
	line-height:1.3;
	color:#fff;
	position:relative;
}
.ftr .ftr-col__title::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-14px;
	width:34px;
	height:3px;
	border-radius:2px;
	background:var(--ftr-accent);
}

/* --- brand column ------------------------------------------------------- */

.ftr-brand{max-width:340px;}
/* Elementor's Image widget defaults to text-align:center, which centred the logo in its
   column. The reference has it flush left with the copy below it. */
.ftr .ftr-brand .elementor-widget-image{text-align:left;}
.ftr-brand .elementor-widget-image img,
.ftr-brand :is(img,svg).ftr-brand__logo{
	width:auto;
	max-width:190px;
	height:auto;
}
.ftr-brand__blurb{
	margin:26px 0 0;
	font-size:16px;
	line-height:1.75;
	color:var(--ftr-text);
}
.ftr-brand__blurb p:last-child{margin-bottom:0;}

/* contact rows */
.ftr-contact{list-style:none;margin:30px 0 0;padding:0;}
.ftr-contact__row{
	display:grid;
	grid-template-columns:40px 1fr;
	align-items:start;
	gap:16px;
	margin:0 0 18px;
}
.ftr-contact__row:last-child{margin-bottom:0;}
.ftr-contact__chip{
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	background:var(--ftr-chip-bg);
	border:1px solid var(--ftr-chip-bd);
	color:var(--ftr-accent);
	flex:0 0 auto;
}
.ftr-contact__body{
	min-width:0;
	padding-top:9px;
	/* The brand grid track is ~250px at the 1200px container; at 15px the presence line
	   wraps onto a third row. */
	font-size:14px;
	line-height:1.55;
	color:var(--ftr-text);
	overflow-wrap:anywhere;
}
.ftr-contact__body a{color:inherit;text-decoration:none;transition:color .2s ease;}
.ftr-contact__body a:hover{color:#fff;text-decoration:underline;}
.ftr-contact__line{display:block;}
.ftr-contact__line--soft{color:var(--ftr-muted);}

/* social row */
.ftr-social{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin:32px 0 0;
	padding:0;
}
.ftr-social__link{
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:50%;
	border:1px solid var(--ftr-chip-bd);
	background:transparent;
	color:#fff;
	transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.ftr-social__link:hover,
.ftr-social__link:focus-visible{
	background:var(--ftr-accent);
	border-color:var(--ftr-accent);
	color:#fff;
}

/* --- link columns (Services / Industries / Company menu) ---------------- */

/* One block styles the taxonomy columns (SaifTec Term Links) and the menu columns
   (SaifTec Menu Links) — both render identical markup on purpose. */
.ftr-links__items{
	list-style:none;
	margin:0;
	padding:0;
}
.ftr-links__item{
	margin:0 0 18px;
	line-height:1.45;
}
.ftr-links__item:last-child{margin-bottom:0;}

.ftr-links__item > a{
	display:inline-flex;
	align-items:baseline;
	gap:10px;
	padding:0;
	background:none;
	font-size:15px;
	line-height:1.45;
	font-weight:400;
	color:var(--ftr-muted);
	text-decoration:none;
	transition:color .2s ease;
}
/* Chevron drawn in CSS: fifteen inline SVGs per page for pure decoration is waste on a
   component that renders on every URL. */
.ftr-links--stacked .ftr-links__item > a::before,
.ftr-links--service-category .ftr-links__item > a::before,
.ftr-links--industry .ftr-links__item > a::before{
	content:"";
	flex:0 0 auto;
	width:6px;
	height:6px;
	margin-top:.42em;
	border-right:1.5px solid var(--ftr-accent);
	border-bottom:1.5px solid var(--ftr-accent);
	transform:rotate(-45deg);
	transition:transform .2s ease;
}
.ftr-links__item > a:hover,
.ftr-links__item > a:focus-visible{color:#fff;}
.ftr-links__item > a:hover::before{transform:rotate(-45deg) translate(2px,2px);}
.ftr-links__item > a[aria-current="page"]{color:#fff;}

/* --- locations column --------------------------------------------------- */

.ftr-loc__list{list-style:none;margin:0;padding:0;}
.ftr-loc__group{
	display:grid;
	grid-template-columns:44px 1fr;
	gap:16px;
	align-items:center;
	padding:18px 0;
	border-bottom:1px solid var(--ftr-rule);
}
.ftr-loc__group:first-child{padding-top:0;}
.ftr-loc__group:last-child{border-bottom:0;}
/* Explicit single-column track when there is no flag: an image that silently
   disappears is how sibling elements end up reflowed into the wrong cells. */
.ftr-loc__group--noflag{grid-template-columns:1fr;}
.ftr-loc__flag{
	width:44px;
	height:44px;
	border-radius:50%;
	overflow:hidden;
	display:block;
	border:1px solid var(--ftr-chip-bd);
	background:var(--ftr-chip-bg);
}
.ftr-loc__flag img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border-radius:50%;
}
.ftr-loc__body{display:block;min-width:0;}
.ftr-loc__country{
	display:block;
	font-family:"Heebo",sans-serif;
	font-weight:700;
	font-size:16px;
	line-height:1.35;
	color:#fff;
}
.ftr-loc__country a{color:inherit;text-decoration:none;}
.ftr-loc__country a:hover{text-decoration:underline;}
.ftr-loc__cityrow{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-top:2px;
}
.ftr-loc__city{
	font-size:15px;
	line-height:1.5;
	color:var(--ftr-muted);
	text-decoration:none;
	transition:color .2s ease;
}
.ftr-loc__city:hover,.ftr-loc__city:focus-visible{color:#fff;}
/* "3 more in Canada" — shown when the per-country cap truncated a country, so the footer stays short
   without hiding cities behind nothing. Quieter than a city link: it is a route, not a destination. */
.ftr-loc__cityrow--more{margin-top:5px;}
.loc-list__more a{
	font-size:13.5px;
	line-height:1.4;
	color:var(--ftr-muted);
	text-decoration:none;
	border-bottom:1px dotted currentColor;
	transition:color .2s ease;
}
.loc-list__more a:hover,.loc-list__more a:focus-visible{color:#fff;}
.ftr-loc__pin{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	margin:-13px -10px -13px 0;
	color:var(--ftr-accent);
	transition:color .2s ease,transform .2s ease;
}
.ftr-loc__pin:hover,.ftr-loc__pin:focus-visible{color:#fff;transform:translateY(-1px);}

/* --- bottom bar --------------------------------------------------------- */

/* Same cap and the same fluid gutter as `.ftr__inner`, so the rule above the copyright line starts
   and ends exactly under the columns. They were 1600 and 1200 before, which put the rule 200px
   inside the row on a wide screen. */
.ftr .ftr-bottom{
	max-width:1600px;
	margin:0 auto;
	padding:0 clamp(20px, 4vw, 56px);
	display:block;
}
/* Elementor gives every container `width:var(--width)` with `--width:100%`, so two side-by-side
   children of a flex row are each full width and wrap. They must size to content. */
.ftr .ftr-bottom__copy,
.ftr .ftr-col--legal{width:auto;max-width:100%;}

.ftr .ftr-bottom__inner{
	display:flex;
	/* flex-direction MUST be stated: Elementor sets `--flex-direction:column` on every
	   container and applies it at equal specificity, so omitting it stacks and centres
	   the whole bottom bar. */
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:20px 40px;
	margin-top:72px;
	padding:26px 0 56px;
	border-top:1px solid var(--ftr-rule);
}
.ftr .ftr-bottom__copy{
	display:flex;
	flex-direction:column;
	gap:0;
	padding:0;
	margin:0;
	font-size:15px;
	line-height:1.6;
	color:var(--ftr-muted);
}
.ftr .ftr-bottom__copy p,
.ftr .ftr-bottom__copy .elementor-heading-title{
	margin:0;
	font-family:inherit;
	font-size:inherit;
	font-weight:400;
	line-height:inherit;
	color:inherit;
}
.ftr .ftr-legal{padding:0;}

.ftr .ftr-links--inline .ftr-links__items{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
.ftr .ftr-links--inline .ftr-links__item{position:relative;margin:0;}
/* Separator drawn in CSS, not as a literal pipe character — a screen reader
   announces a text pipe. */
.ftr .ftr-links--inline .ftr-links__item + .ftr-links__item::before{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	width:1px;
	height:15px;
	transform:translateY(-50%);
	background:var(--ftr-rule);
}
.ftr .ftr-links--inline .ftr-links__item > a{padding:4px 22px;}
.ftr .ftr-links--inline .ftr-links__item:first-child > a{padding-left:0;}
.ftr .ftr-links--inline .ftr-links__item:last-child > a{padding-right:0;}
.ftr-no-legal .ftr-col--legal{display:none;}

/* --- focus + editor affordances ---------------------------------------- */

.ftr a:focus-visible{
	outline:2px solid var(--ftr-accent);
	outline-offset:3px;
	border-radius:3px;
}
.ftr-links--empty,.ftr-contact--empty,.ftr-social--empty{
	padding:14px;border:1px dashed rgba(255,255,255,.35);border-radius:8px;
	color:var(--ftr-muted);font-size:13px;
}

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

/* Locations is pinned to a full row below 1025 rather than left to wrap on its own: the row is not
   wide enough for it plus anything else, and stating it keeps the block's own column rules (which
   are written against a full-width block) reading true at every width under here.

   The link columns get a cap as well as a basis. Alone on a line a `flex-grow` column would stretch
   to the whole 728px at 768 and leave its short labels adrift in it; 360px is close to the 350px the
   old two-track grid gave it there. */
@media (max-width:1024px){
	.ftr .ftr__inner{gap:48px 36px;padding-top:72px;}
	.ftr-brand{max-width:520px;}
	.ftr .ftr-col--services,
	.ftr .ftr-col--industries,
	.ftr .ftr-col--company{flex:1 1 240px;}
	.ftr .ftr-col--locations{flex:1 1 100%;}
	.ftr .ftr-bottom__inner{margin-top:56px;}
}
/* the map's mobile size is now the overlay's own responsive Width control in Elementor */
@media (max-width:560px){
	.ftr .ftr__inner{gap:34px;padding-top:56px;}
	.ftr .ftr-col{flex:1 1 100%;max-width:none;}
	.ftr-brand{max-width:none;}
	.ftr .ftr-col__title{font-size:18px;margin-bottom:28px;}
	.ftr .ftr-bottom__inner{
		flex-direction:column;
		align-items:flex-start;
		gap:16px;
		padding-bottom:44px;
	}
	.ftr .ftr-links--inline .ftr-links__items{gap:2px 0;}
	.ftr-loc__pin{margin-right:0;}
}

/* ===========================================================================
 * SaifTec Location List widget — `flat` layout.
 *
 * Moved here from style.css (same reason it was there: the widget renders in the
 * footer on every page, where assets/location.css is not enqueued). Deliberately
 * minimal so it inherits the surrounding footer/hub typography and colours.
 * ======================================================================== */
.loc-list__title{
	margin:0 0 14px;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:16px;line-height:1.3;color:inherit;
}
.loc-list__items{list-style:none;margin:0;padding:0;}
.loc-list__item{margin:0 0 9px;line-height:1.4;}
.loc-list__item:last-child{margin-bottom:0;}
.loc-list__item a{
	font-size:14px;color:inherit;text-decoration:none;opacity:.82;
	transition:opacity .2s ease,color .2s ease;
}
.loc-list__item a:hover{opacity:1;color:#0AA3D6;}
.loc-list__group{margin-bottom:18px;}
.loc-list__group:last-child{margin-bottom:0;}
.loc-list__country{
	display:inline-block;margin:0 0 8px;font-family:"Montserrat",sans-serif;font-weight:600;
	font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:inherit;opacity:.6;text-decoration:none;
}
.loc-list__country:hover{opacity:1;color:#0AA3D6;}
.loc-list--empty{
	padding:14px;border:1px dashed #b9c4d8;border-radius:8px;color:#5A5A72;font-size:13px;
}

/* =============================================================================
 * Locations — country grid (footer style "grid")
 *
 * One column per country that has city pages, reading the SAME data as the header Locations menu, so
 * the two can never disagree about what Saiftec covers. A city that passed readiness is a link; a
 * capability or a region is plain text, for the same reason as in the header — "Nationwide Coverage"
 * is not a place you can navigate to, and a link that goes nowhere is worse than no link.
 *
 * The block spans the full footer row (see the desktop block at the end of this file). It was a
 * fifth column until 2026-08-13, which is why the footer had been widened to 1600px — three country
 * columns and a divider between each will not fit in a 460px track. Locations on its own row buys
 * the width honestly and lets the footer go back to the 1200px every section above it uses.
 * ========================================================================== */

.ftr-locgrid__title{
	margin:0;font-family:'Heebo',sans-serif;font-size:17px;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:#fff;
}

/* The short accent rule under the heading, matching the other footer columns' headings. */
.ftr-locgrid__rule{
	display:block;width:26px;height:3px;margin:12px 0 0;border-radius:3px;
	background:var(--ftr-accent,#0aa3d6);
}

.ftr-locgrid__tagline{
	margin:14px 0 0;font-family:'Montserrat',sans-serif;font-size:14px;line-height:1.6;
	color:rgba(255,255,255,.72);
}

/* The column count comes from the markup (`--n2`..`--n4`) rather than from `auto-fit`, because the
   dividers below are a `border-inline-start` on every column but the first — under `auto-fit` a
   wrapped row would draw a stray rule down its leftmost column. */
.ftr-locgrid__grid{
	display:grid;
	grid-template-columns:repeat(var(--ftr-locgrid-cols,3),minmax(0,1fr));
	column-gap:0;row-gap:34px;
	list-style:none;margin:30px 0 0;padding:0;
}
.ftr-locgrid__grid--n1{--ftr-locgrid-cols:1;}
.ftr-locgrid__grid--n2{--ftr-locgrid-cols:2;}
.ftr-locgrid__grid--n3{--ftr-locgrid-cols:3;}
.ftr-locgrid__grid--n4{--ftr-locgrid-cols:4;}

/* Grid items stretch by default, so the rule runs the full height of the tallest column — which is
   what makes it read as a divider between columns rather than a border on a box. */
/* The gutter is fluid because the block's own width now depends on whether it fits in the footer row
   or wraps below it. At a flat 38px the three columns cannot hold "Kitchener-Waterloo, ON" (158px,
   the longest label) once the block drops under ~640px; clamped, they hold it down to ~590px, which
   is what sets the 600px basis on `.ftr-col--locations`. */
.ftr-locgrid__col{
	margin:0;min-width:0;
	padding-inline:clamp(14px, 1.5vw, 36px);
}
.ftr-locgrid__col:first-child{padding-inline-start:0;}
.ftr-locgrid__col:last-child{padding-inline-end:0;}
.ftr-locgrid__col + .ftr-locgrid__col{border-inline-start:1px solid rgba(255,255,255,.10);}

/* A second country in the same column (the remote-served ones tucked under the last city column)
   gets a horizontal rule, the same weight as the vertical ones. */
.ftr-locgrid__country + .ftr-locgrid__country{
	margin-top:26px;padding-top:26px;
	border-top:1px solid rgba(255,255,255,.10);
}

.ftr-locgrid__head{display:flex;align-items:center;gap:11px;margin-bottom:15px;}

/* Nothing follows the heading in a compact country, so its bottom margin is the block's spacing. */
.ftr-locgrid__country--compact .ftr-locgrid__head{margin-bottom:11px;}

.ftr-locgrid__flag{
	flex:0 0 auto;display:flex;align-items:center;justify-content:center;
	width:34px;height:34px;border-radius:50%;overflow:hidden;
	box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

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

/* The Worldwide plate: the same masked globe the header draws, so no flag asset is invented for a
   thing that is not a country. */
.ftr-locgrid__flag--globe{background:rgba(10,163,214,.18);box-shadow:0 0 0 1px rgba(10,163,214,.42);}

.ftr-locgrid__flag--globe::after{
	content:"";width:19px;height:19px;background-color:var(--ftr-accent,#0aa3d6);
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10'/%3E%3C/svg%3E");
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-mask-size:contain;mask-size:contain;
}

.ftr-locgrid__country-name{
	font-family:'Heebo',sans-serif;font-size:15px;font-weight:700;line-height:1.3;
	letter-spacing:.06em;text-transform:uppercase;color:#fff;
}

/* Worldwide only. It is the one column with no cities to list, so a sentence does the work the city
   rows do elsewhere: says what the column is before the regions start. */
.ftr-locgrid__blurb{
	margin:0 0 16px;font-family:'Montserrat',sans-serif;font-size:14px;line-height:1.6;
	color:rgba(255,255,255,.72);
}

.ftr-locgrid__items{list-style:none;margin:0;padding:0;display:grid;row-gap:8px;}
.ftr-locgrid__item{margin:0;padding:0;}

.ftr-locgrid__link,
.ftr-locgrid__static{
	font-family:'Montserrat',sans-serif;font-size:14px;line-height:1.5;
	color:rgba(255,255,255,.66);text-decoration:none;
}

.ftr-locgrid__link{transition:color .18s ease;}
.ftr-locgrid__link:hover,
.ftr-locgrid__link:focus-visible{color:#fff;}

/* A tick marks a row with no page behind it — same mark, same technique and the same reasoning as
   the header menu's `--lm-check` (one masked data URI recoloured by `background-color`, no asset and
   no extra element per row). City rows carry no mark at all: the link is the affordance. */
.ftr-locgrid__static{display:flex;align-items:flex-start;gap:10px;}

.ftr-locgrid__static::before{
	content:"";flex:0 0 auto;width:15px;height:15px;margin-top:3px;
	background-color:var(--ftr-accent,#0aa3d6);
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-mask-size:contain;mask-size:contain;
}

.ftr-locgrid__more{
	display:inline-block;margin-top:18px;
	font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;line-height:1.5;
	color:var(--ftr-accent,#0aa3d6);text-decoration:none;
}

/* Nothing sits above it in a compact country, so the 18px would double the head's own spacing. */
.ftr-locgrid__country--compact .ftr-locgrid__more{margin-top:0;}

.ftr-locgrid__more:hover,
.ftr-locgrid__more:focus-visible{text-decoration:underline;}

/* Tablet keeps every column on ONE row and pays for it out of the gutters, rather than dropping to
   two and wrapping. Wrapping is what breaks the dividers: they are drawn with `+`, which is DOM
   adjacency, so the first column of a wrapped row is still "not the first column" and draws a rule
   down the left edge of the block. (Measured at 768 before this rule: a stray 1px line beside
   WORLDWIDE.) Keeping one row keeps DOM adjacency and visual adjacency the same thing.

   It fits: at 768 the block is 728px, so three columns are 242px each, 194px of content after the
   24px gutters — "Kitchener-Waterloo, ON" is 158px, the longest label in the list.

   Four columns cannot be paid for that way, so that case does drop to two — and because 4/2 is two
   full rows, its wrapped rule spans the whole width instead of stopping halfway. */
@media (max-width:1024px){
	.ftr-locgrid__col{padding-inline:24px;}

	.ftr-locgrid__grid--n4{--ftr-locgrid-cols:2;row-gap:0;}
	.ftr-locgrid__grid--n4 .ftr-locgrid__col:nth-child(odd){border-inline-start:0;padding-inline-start:0;}
	.ftr-locgrid__grid--n4 .ftr-locgrid__col:nth-child(even){padding-inline-end:0;}
	.ftr-locgrid__grid--n4 .ftr-locgrid__col:nth-child(n+3){
		margin-top:30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.10);
	}
}
@media (max-width:767px){
	.ftr-locgrid__grid{--ftr-locgrid-cols:1;row-gap:0;}
	.ftr-locgrid__col{padding-inline:0;}
	.ftr-locgrid__col + .ftr-locgrid__col{
		border-inline-start:0;
		margin-top:26px;padding-top:26px;
		border-top:1px solid rgba(255,255,255,.10);
	}
}

/* Nothing further is needed for the desktop row: `.ftr__inner` is a flex row (see the layout block
   at the top of this file), so Locations sits beside the link columns when the row can give it the
   600px its three country columns need, and takes a row of its own when it cannot. */