/* Location pages (/location/{country}/{city}/) — city landing system.
   Brand: navy #170D3D, teal #0AA3D6, purple #3A0CA3, text #5A5A72. Fonts: Heebo/Montserrat.
   Section chrome is shared from service-sections.css (svc-hero, .svc-faqs accordion, svc1-chips,
   .cs-success-cta band); this file holds only location-specific layout, added per section. */

/* Full-width Elementor content, no Astra page padding (sections manage their own inner max-width). */
.saiftec-location .site-content .ast-container,
.saiftec-location #primary{padding-left:0;padding-right:0;max-width:100%;}
.saiftec-location #primary{margin:0;}

/* ============================ LOC – 00 Hero ============================ */
/* Reuses .svc-hero from service-sections.css verbatim (brand navy + diagonal overlay, breadcrumb,
   H1, subhead, CTA, right media) so the city hero is consistent with the service, case-study and
   industries heroes. Everything below is a location-only ADDITION, scoped under .saiftec-location
   so the other heroes are untouched. */

/* Eyebrow above the H1 (teal on navy, matching the brand accent used site-wide). */
.saiftec-location .loc-hero__eyebrow .elementor-heading-title{
	display:inline-block;margin:0 0 12px;
	font-family:"Montserrat",sans-serif;font-weight:700;font-size:13px;letter-spacing:1.5px;
	text-transform:uppercase;color:#0AA3D6;
}

/* Two CTAs side by side (the service hero has one). */
.saiftec-location .svc-hero .loc-hero__actions{
	display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 34px;
}
.saiftec-location .loc-hero__actions .svc-hero__cta{margin:0;}
.saiftec-location .loc-hero__cta2 .elementor-button{
	background:transparent;color:#ffffff;border:1px solid rgba(255,255,255,.45);border-radius:8px;
	font-family:"Heebo",sans-serif;font-weight:600;font-size:16px;padding:14px 28px;
	transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.saiftec-location .loc-hero__cta2 .elementor-button:hover{
	background:rgba(255,255,255,.12);border-color:#ffffff;transform:translateY(-2px);
}

/* Credibility stat strip — reuses the shared .cs-metrics-grid markup from SaifTec Metric Cards,
   recoloured for the navy hero. */
.saiftec-location .loc-hero__stats .cs-metrics-grid{
	display:grid;grid-template-columns:repeat(4,1fr);gap:18px 22px;margin:0;
	padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
}
.saiftec-location .loc-hero__stats .cs-metric{
	display:flex;flex-direction:column;gap:4px;background:none;border:0;box-shadow:none;padding:0;text-align:left;
}
.saiftec-location .loc-hero__stats .cs-metric__icon :is(img,svg){width:24px;height:24px;object-fit:contain;}
.saiftec-location .loc-hero__stats .cs-metric__value{
	font-family:"Heebo",sans-serif;font-weight:800;font-size:26px;line-height:1.1;color:#ffffff;
}
.saiftec-location .loc-hero__stats .cs-metric__label{
	font-size:13px;line-height:1.35;color:rgba(255,255,255,.70);
}

/* No city hero image yet → the copy takes the full width instead of leaving a dead column.
   (Readiness check #7 still flags the missing image in wp-admin.) */
.loc-no-hero-image .svc-hero .svc-hero__media{display:none;}
.loc-no-hero-image .svc-hero .svc-hero__text{flex:1 1 100%;}
.loc-no-hero-image .svc-hero .svc-hero__inner{max-width:1000px;}

@media (max-width:1024px){
	.saiftec-location .loc-hero__stats .cs-metrics-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
	.saiftec-location .loc-hero__stats .cs-metric__value{font-size:22px;}
}

/* ============================ LOC – 01 Partner / trust bar ============================ */
/* A white card that lifts off the navy hero: region-scoped trust label on the left, the
   partner/credential strip on the right. Content is global (edit once for every city); only the
   region label is per-city (inherited from the country when a city leaves it empty). */
.loc-no-partners .loc-partners{display:none;}
.loc-partners{background:transparent;}
.loc-partners .loc-partners__inner{max-width:1200px;margin:0 auto;padding:0 24px;}
.loc-partners .loc-partners__card{
	position:relative;z-index:2;margin-top:-38px;
	display:flex;flex-direction:row;align-items:center;gap:36px;
	background:#ffffff;border:1px solid #ECECF3;border-radius:16px;
	padding:24px 32px;box-shadow:0 22px 50px -26px rgba(17,17,51,.28);
}
/* Left label — two lines, matching the reference ("Trusted by Businesses" / "Across Ontario"). */
.loc-partners .loc-partners__label{flex:0 0 auto;max-width:230px;}
.loc-partners .loc-partners__title .elementor-heading-title,
.loc-partners .loc-partners__region .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:17px;line-height:1.35;color:#170D3D;
}
.loc-partners .loc-partners__region .elementor-heading-title{color:#3A0CA3;}

/* Partner strip — the logo-row relayout of SaifTec Feature List now lives in
   service-sections.css as the shared `.gc-logostrip` primitive (the industry pages use it too).
   Only the location-specific card chrome remains here. */
.loc-partners .loc-partners__logos{flex:1 1 auto;min-width:0;}

@media (max-width:1024px){
	.loc-partners .loc-partners__card{flex-direction:column;align-items:flex-start;gap:20px;padding:22px 24px;}
	.loc-partners .loc-partners__label{max-width:none;}
	.loc-partners .svc1-featlist{justify-content:flex-start;}
}
@media (max-width:600px){
	.loc-partners .loc-partners__card{margin-top:-24px;}
}

/* LOC – 10 Market context: RETIRED 2026-08-03 with the band and its readiness check. The 150-word
   requirement now measures RENDERED city prose (why-rows + FAQ answers) via
   saiftec_location_city_prose_words(), so there is no longer a field whose copy nobody sees.
   The `.loc-market` chrome was deleted rather than left as dead CSS on every city page; the band
   is recoverable from the git history of this file and from the stored loc_market_context meta. */

/* ============================ LOC – 02 Services | Industries ============================ */
/* Two columns of compact tiles, each driven by a taxonomy Loop Grid (service_category / industry),
   so the grids grow automatically when a term is added — nothing is hardcoded. */
.loc-no-offer .loc-offer{display:none;}
.loc-offer{background:#ffffff;}
.loc-offer .loc-offer__inner{
	max-width:1200px;margin:0 auto;padding:76px 24px;
	display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
}
.loc-offer .loc-offer__col{min-width:0;}
.loc-offer .loc-offer__heading .elementor-heading-title{
	margin:0 0 6px;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:26px;line-height:1.25;color:#170D3D;
}
.loc-offer .loc-offer__intro,.loc-offer .loc-offer__intro p{
	margin:0 0 22px;font-size:15px;line-height:1.6;color:#5A5A72;
}

/* Tile grid */
.loc-offer .elementor-grid{grid-template-columns:repeat(3,1fr);gap:14px;}

/* The compact `.loc-tile` skin MOVED to service-sections.css on 2026-08-07 (search for
   "compact term tile"): the About page adopted the same loop item #3858, and this stylesheet
   only loads in a location context, so the tile arrived there unstyled. Same reason and same
   fix as `.ind-tech-logo` before it. location.css depends on `saiftec-service-sections`, so
   the per-page rules below still cascade over the moved base. */

/* "View All …" text link */
.loc-offer .loc-offer__all{margin-top:18px;}
.loc-offer .loc-offer__all .elementor-button{
	background:transparent;padding:0;border:0;color:#3A0CA3;
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;
	display:inline-flex;align-items:center;gap:7px;transition:gap .2s ease,color .2s ease;
}
.loc-offer .loc-offer__all .elementor-button:hover{gap:11px;color:#170D3D;}
.loc-offer .loc-offer__all .elementor-button::after{
	content:"";width:15px;height:15px;flex:0 0 auto;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0CA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-size:contain;background-repeat:no-repeat;
}

@media (max-width:900px){
	.loc-offer .loc-offer__inner{grid-template-columns:1fr;gap:44px;padding:60px 20px;}
}
@media (max-width:420px){
	.loc-offer .elementor-grid{grid-template-columns:repeat(2,1fr);}
}

/* ============================ LOC – 03 Why us | Recent projects ============================ */
/* Left: ONE navy panel holding an eyebrow heading, the illustration and the reasons accordion.
   Right: the projects heading with its "View All" link inline, then three case-study cards.
   Both section headings are <h2> and stay <h2>; only their treatment is eyebrow-sized, so the
   document outline and the single-H1 rule are unaffected. */
.loc-proof{background:#F9FAFC;}
.loc-proof .loc-proof__inner{
	max-width:1200px;margin:0 auto;padding:76px 24px;
	/* Equal columns. The 1 : 1.55 split was sized for three cards side by side, each needing ~215px;
	   the projects column is a single-card slider now, so the extra width only made the card oversized
	   next to a panel that was left cramped. */
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start;
}
.loc-proof .loc-proof__col{min-width:0;}
.loc-proof .loc-proof__heading .elementor-heading-title{
	margin:0;font-family:"Montserrat",sans-serif;font-weight:700;
	font-size:12.5px;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:#170D3D;
}
.loc-proof .loc-proof__intro,.loc-proof .loc-proof__intro p{
	margin:0;font-size:14px;line-height:1.6;color:#5A5A72;
}

/* --- Left: the navy panel --- */
.loc-no-why .loc-proof__why{display:none;}
/* Elementor sizes .e-con children with its own gap, which loads AFTER this file, so the gap is
   zeroed at (0,2,0) and spacing is set per child. An empty intro then costs nothing. */
.saiftec-location .loc-why__panel{
	gap:0;border-radius:20px;padding:30px 28px 32px;
	background:linear-gradient(150deg,#1D1250 0%,#170D3D 52%,#251563 100%);
	box-shadow:0 26px 60px -30px rgba(23,13,61,.55);
}
.loc-why__panel .loc-proof__heading .elementor-heading-title{color:#0AA3D6;}
/* margin-top on the WIDGET, not on a <p>: an ACF textarea comes through the text-editor widget as a
   bare text node, so a `p` rule would never fire. */
.loc-why__panel .loc-proof__intro{margin:11px 0 0;}
.loc-why__panel .loc-proof__intro,
.loc-why__panel .loc-proof__intro p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);}
.loc-why__panel .loc-proof__intro p{margin:0;}

/* Illustration beside the accordion. When the ACF image is empty Elementor OMITS the widget
   entirely, so the accordion would otherwise be left sitting in a narrow first column. */
.saiftec-location .loc-why__body{
	gap:16px;margin-top:20px;
	/* The accordion gets the larger share: a row title has to fit on one line, or five rows of two
	   lines each make the panel twice the height of the projects column beside it. */
	display:grid;grid-template-columns:0.6fr 1fr;align-items:center;
}
.saiftec-location .loc-why__body:not(:has(.loc-why__image)){grid-template-columns:1fr;}
.loc-why__panel .loc-why__image img{width:100%;max-width:100%;height:auto;display:block;}

/* --- Reasons accordion ---
   Reuses the Feature List "accordion" style (.svc1-inc-acc / .svc1-inc-item) and the single-open
   behaviour service-sections.js already binds to it. Only the dark treatment is here.
   `--inc-ink` and `--inc-line` re-point cleanly; `--inc-navy` is NOT re-pointed because it means
   "title colour" and redefining its meaning would mislead the next reader, so the title, the item
   background and the open state are set explicitly. */
.loc-why__panel .loc-why__acc{
	--inc-ink:rgba(255,255,255,.66);
	--inc-line:rgba(255,255,255,.11);
	--inc-accent:#0AA3D6;
}
.loc-why__panel .loc-why__acc .svc1-inc-acc{gap:8px;}
.loc-why__panel .loc-why__acc .svc1-inc-item{
	background:rgba(255,255,255,.055);border-radius:12px;box-shadow:none;
}
.loc-why__panel .loc-why__acc .svc1-inc-item:hover{
	background:rgba(255,255,255,.09);transform:none;box-shadow:none;
}
.loc-why__panel .loc-why__acc .svc1-inc-item.is-open{
	background:rgba(10,163,214,.15);border-color:rgba(10,163,214,.40);box-shadow:none;
}
/* The 4px gradient rail belongs to the light "Everything Included" band; the reference has none. */
.loc-why__panel .loc-why__acc .svc1-inc-item.is-open::before{display:none;}
.loc-why__panel .loc-why__acc .svc1-inc-item__head{padding:10px 13px;gap:8px;}
/* No icons in this panel (the reference shows none), which also frees the 90px panel inset. */
.loc-why__panel .loc-why__acc .svc1-inc-item__icon{display:none;}
.loc-why__panel .loc-why__acc .svc1-inc-item__title{
	font-family:"Heebo",sans-serif;font-weight:600;font-size:12px;line-height:1.35;color:#ffffff;
}
.loc-why__panel .loc-why__acc .svc1-inc-item__sub{display:none;}
.loc-why__panel .loc-why__acc .svc1-inc-item__panel-inner{padding:0 14px 14px;}
.loc-why__panel .loc-why__acc .svc1-inc-item__text{
	margin:0;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.66);
}
/* Plus / minus rather than the shared chevron, matching the reference. The base rule rotates this
   element, so transform is neutralised in BOTH states at (0,4,0) — equal specificity relying on
   file order is what made the FAQ accordion silently revert once before. */
.loc-why__panel .loc-why__acc .svc1-inc-item .svc1-inc-item__chev,
.loc-why__panel .loc-why__acc .svc1-inc-item.is-open .svc1-inc-item__chev{
	position:relative;flex:0 0 auto;width:14px;height:14px;
	border:0;transform:none;margin-left:8px;
}
.loc-why__panel .loc-why__acc .svc1-inc-item__chev::before,
.loc-why__panel .loc-why__acc .svc1-inc-item__chev::after{
	content:"";position:absolute;left:50%;top:50%;background:#0AA3D6;border-radius:1px;
}
.loc-why__panel .loc-why__acc .svc1-inc-item__chev::before{width:13px;height:2px;transform:translate(-50%,-50%);}
.loc-why__panel .loc-why__acc .svc1-inc-item__chev::after{
	width:2px;height:13px;transform:translate(-50%,-50%);transition:opacity .2s ease,transform .2s ease;
}
.loc-why__panel .loc-why__acc .svc1-inc-item.is-open .svc1-inc-item__chev::after{
	opacity:0;transform:translate(-50%,-50%) rotate(90deg);
}

/* --- Right: heading row + 3 project cards --- */
.loc-no-projects .loc-proof__projects{display:none;}
/* Heading and "View All Case Studies" on one line. Baseline alignment rather than centre so the
   two different type sizes sit on the same line the reference shows. */
.saiftec-location .loc-proof__head{
	display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
	gap:10px 20px;margin-bottom:14px;
}
.loc-proof .loc-proof__head .loc-proof__all{margin:0;}
/* Elementor's own container gap loads after this file and would add a second, larger rhythm on top
   of the margins below, so the column drives its own spacing. */
.saiftec-location .loc-proof__projects{gap:0;}
.loc-proof .loc-proof__projects .loc-proof__intro{margin:0 0 18px;}
.loc-proof .loc-proof__projects .elementor-grid{grid-template-columns:repeat(3,1fr);gap:16px;}

/* Base chrome for the badge pills and the metric list.
   These come from the [cs_card_badges] / [cs_card_metrics] shortcodes and are styled in
   assets/case-study.css, which does NOT load on a city page — so the metrics rendered as a default
   bulleted <ul> here until 2026-08-02. Duplicated rather than broadening that stylesheet's guard:
   case-study.css also carries base `.cs-metric` / `.cs-metrics` rules and this page's hero stat
   strip is built from that same markup, so loading the whole file to reach two selectors risks
   shifting the hero. */
.saiftec-location .cs-card__badges{display:flex;flex-wrap:wrap;gap:6px;}
.saiftec-location .cs-badge{
	font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
	padding:4px 10px;border-radius:999px;line-height:1;
}
.saiftec-location .cs-badge--industry{background:#f0e9ff;color:#531dab;}
.saiftec-location .cs-badge--cs_service{background:#e6f4ff;color:#0958d9;}
.saiftec-location .cs-card__metrics{list-style:none;margin:0;padding:0;display:flex;}
.saiftec-location .cs-card__metric{display:flex;align-items:center;gap:10px;margin:0;padding:0;}
.loc-proj-card{
	position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;
	background:#ffffff;border:1px solid #ECECF3;border-radius:12px;
	transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.e-loop-item:hover .loc-proj-card,.loc-proj-card:hover{
	border-color:#3A0CA3;transform:translateY(-3px);box-shadow:0 18px 38px -20px rgba(58,12,163,.28);
}
/* Cover: fixed window, full-page screenshot pans on hover. Elementor's .e-con sets
   height/overflow from --height/--overflow, which load AFTER this file — so set the custom props. */
.loc-proj-card .loc-proj-card__cover{
	--height:148px;--overflow:hidden;
	position:relative;width:100%;height:148px;overflow:hidden;background:#f2f2f8;
}
.loc-proj-card__cover .elementor-widget-container{line-height:0;}
.loc-proj-card__cover img{width:100%;height:auto !important;display:block;transition:transform 5s ease;}
.e-loop-item:hover .loc-proj-card__cover img{transform:translateY(min(0px, calc(148px - 100%)));}
.loc-proj-card__body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;}
/* Industry + service labels above the title, from [cs_card_badges] — the taxonomy terms, so a
   retagged case study relabels itself.
   Rendered as dotted inline labels rather than the pills case-study.css gives them: the reference
   shows "REAL ESTATE - WEB DEVELOPMENT" as one quiet line, and at this card width two pills wrap to
   a second row on the longer pairs, which pushed one card's title out of line with its neighbours. */
/* min-height reserves the second line the longest pairs need, so every card's title starts at the
   same y whether its labels wrap or not. */
.loc-proj-card .cs-card__badges{
	display:flex;flex-wrap:wrap;align-items:center;gap:1px 11px;min-height:24px;
}
.loc-proj-card .cs-badge{
	position:relative;background:none;padding:0;border-radius:0;
	font-family:"Montserrat",sans-serif;font-size:8.5px;font-weight:600;letter-spacing:.06em;
	line-height:1.35;color:#8A8AA3;
}
.loc-proj-card .cs-badge + .cs-badge::before{
	content:"";position:absolute;left:-6.5px;top:50%;transform:translateY(-50%);
	width:3px;height:3px;border-radius:50%;background:#C9C9DA;
}
.loc-proj-card__title .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:14.5px;line-height:1.3;color:#170D3D;
}
.loc-proj-card__title a{color:inherit;text-decoration:none;}
.loc-proj-card__title a::after{content:"";position:absolute;inset:0;z-index:1;}
.loc-proj-card__title a:focus-visible{outline:2px solid #3A0CA3;outline-offset:3px;}
.loc-proj-card__excerpt,.loc-proj-card__excerpt p{
	margin:0;font-size:12px;line-height:1.5;color:#5A5A72;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* All three metrics across the card footer, as the reference shows. A grid rather than the flex
   the base rule sets, so the columns stay even whatever the label lengths are. */
/* minmax(0,1fr), not 1fr: the figures are nowrap, and an `auto` minimum lets a wide one push its
   column into the next, which ran "+118%" and "2x" together. */
.loc-proj-card .cs-card__metrics{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;
	margin-top:auto;padding-top:11px;
}
.loc-proj-card .cs-card__metric{flex-direction:column;align-items:flex-start;gap:1px;min-width:0;}
.loc-proj-card .cs-card__metric-icon{display:none;}
/* nowrap on the figure: "+118%" split across two lines otherwise, and a broken number reads as a
   different number. The label may wrap, but only between words — Astra's break-word would give
   "activatio / n". */
.loc-proj-card .cs-card__metric-value{
	font-size:15px;line-height:1.1;color:#0AA3D6;font-weight:800;
	font-variant-numeric:tabular-nums;white-space:nowrap;
}
.loc-proj-card .cs-card__metric-label{
	font-size:9px;line-height:1.3;color:#5A5A72;
	overflow-wrap:normal;word-break:normal;hyphens:none;
}

.loc-proof .loc-proof__all{margin-top:18px;}
.loc-proof .loc-proof__all .elementor-button{
	background:transparent;padding:0;border:0;color:#3A0CA3;
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;
	display:inline-flex;align-items:center;gap:7px;transition:gap .2s ease,color .2s ease;
}
.loc-proof .loc-proof__all .elementor-button:hover{gap:11px;color:#170D3D;}
.loc-proof .loc-proof__all .elementor-button::after{
	content:"";width:15px;height:15px;flex:0 0 auto;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0CA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-size:contain;background-repeat:no-repeat;
}

/* Between the duo stacking (900px) and full desktop the panel is too narrow to carry an
   illustration beside a five-row accordion, so the accordion takes the whole panel rather than
   being squeezed. Below 900px the panel is full width again and the illustration returns. */
@media (min-width:901px) and (max-width:1150px){
	.saiftec-location .loc-why__body{grid-template-columns:1fr;}
	.loc-why__panel .loc-why__image{display:none;}
}
@media (max-width:900px){
	.loc-proof .loc-proof__inner{grid-template-columns:1fr;gap:44px;padding:60px 20px;}
	.saiftec-location .loc-why__panel{padding:26px 22px 28px;}
}
@media (max-width:700px){
	.saiftec-location .loc-why__body{grid-template-columns:1fr;}
	.loc-why__panel .loc-why__image img{max-width:380px;margin:0 auto;}
}
@media (max-width:560px){
	.loc-proof .loc-proof__projects .elementor-grid{grid-template-columns:1fr;}
	.loc-proj-card .loc-proj-card__cover{--height:170px;height:170px;}
	.e-loop-item:hover .loc-proj-card__cover img{transform:translateY(min(0px, calc(170px - 100%)));}
	/* One card per row means the footer has the width for larger figures again. */
	.loc-proj-card .cs-card__metric-value{font-size:18px;}
	.loc-proj-card .cs-card__metric-label{font-size:10.5px;}
}

/* ============================ LOC – 04 Our Proven Process ============================ */
/* The band is now `svc1-process loc-process` and takes the SAME treatment as the industry pages:
   eyebrow, big centred heading with a rule under the intro, then the shared `gcp_steps` rows as
   4 + 3 icon cards with chevron connectors and a dashed track behind them. All of that lives in
   `.svc1-process` in service-sections.css, which already loads here, so only the band identity and
   the gate belong in this file.

   RETIRED 2026-08-03: the 7-step chevron timeline that used to be here. It was scoped
   `.loc-process .svc1-featlist…` at (0,2,0), which BEATS the `.svc1-process …` rules at the same
   specificity because this file loads after service-sections.css — so leaving it in place would
   have silently kept the old timeline while the markup said cards. */
.loc-no-process .loc-process{display:none;}
.loc-process{background:#ffffff;}

/* ============================ LOC – 05 Technology | FAQ ============================ */
/* Was Testimonials | FAQ until 2026-08-02. The technology wall is the same component the
   Industries page runs (loop item #3689 over the `technology` taxonomy), and the ratio matches the
   approved `.ind-techfaq__inner` so the two pages read as one system. */
.loc-no-social .loc-social{display:none;}
.loc-social{background:#F9FAFC;}
.loc-social .loc-social__inner{
	max-width:1200px;margin:0 auto;padding:76px 24px;
	display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start;
}
.loc-social .loc-social__col{min-width:0;}
.loc-social .loc-social__heading .elementor-heading-title{
	margin:0 0 6px;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:26px;line-height:1.25;color:#170D3D;
}
.loc-social .loc-social__intro,.loc-social .loc-social__intro p{
	margin:0 0 22px;font-size:15px;line-height:1.6;color:#5A5A72;
}
/* Each column hides independently when its own content is missing; the survivor takes the row. */
.loc-no-tech .loc-social__tech{display:none;}
.loc-no-faqs .loc-social__faq{display:none;}
.saiftec-location.loc-no-tech .loc-social__inner,
.saiftec-location.loc-no-faqs .loc-social__inner{grid-template-columns:1fr;}

/* --- Left: technology logo wall ---
   The `.ind-tech-logo` tile is shared from service-sections.css; only the grid and the surface
   colour are local. The tile's own #F7F8FC would disappear against this band, so tiles go white,
   matching the FAQ rows beside them. */
.loc-social .loc-social__tech-grid .elementor-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
.loc-social .loc-social__tech .ind-tech-logo{background:#ffffff;padding:18px 12px;gap:9px;}
.loc-social .loc-social__tech .ind-tech-logo__img :is(img,svg){width:34px;height:34px;}
.loc-social .loc-social__tech .ind-tech-logo__name .elementor-heading-title{font-size:12px;}
/* The heading is the only widget above the grid, so it carries the whole gap. */
.loc-social .loc-social__tech .loc-social__intro:last-of-type{margin-bottom:0;}

/* --- Testimonial cards: RETIRED 2026-08-02 ---
   The "What Our Clients Say" column was replaced by the technology wall above, so `.loc-tst-card`
   (loop item #3936) renders nowhere. The ~35 lines of card chrome were deleted rather than left as
   dead CSS on every city page; the card design is recoverable from the loop template, which is
   still in the library. See inc/locations.php for the two lines that re-enable the column. */

/* --- FAQ accordion: reuses .svc-faqs / .svc-faq from service-sections.css (JS binds to .svc-faqs) --- */
.loc-social .loc-social__faq .svc-faqs .elementor-loop-container{max-width:none;margin:0;}
.loc-social .loc-social__faq .svc-faqs .e-loop-item{
	background:#ffffff;border:1px solid #ECECF3;border-bottom:1px solid #ECECF3;
	border-radius:10px;margin-bottom:10px;
}
.loc-social .loc-social__faq .svc-faq__q .elementor-heading-title{padding:14px 18px;font-size:14.5px;}
.loc-social .loc-social__faq .svc-faq__a{padding:0 18px 16px;}
.loc-social .loc-social__faq .svc-faq__a-inner,
.loc-social .loc-social__faq .svc-faq__a-inner p{font-size:13.5px;line-height:1.65;}

/* --- "View All …" text links (same treatment as the other sections) --- */
.loc-social .loc-social__all{margin-top:18px;}
.loc-social .loc-social__all .elementor-button{
	background:transparent;padding:0;border:0;color:#3A0CA3;
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;
	display:inline-flex;align-items:center;gap:7px;transition:gap .2s ease,color .2s ease;
}
.loc-social .loc-social__all .elementor-button:hover{gap:11px;color:#170D3D;}
.loc-social .loc-social__all .elementor-button::after{
	content:"";width:15px;height:15px;flex:0 0 auto;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0CA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-size:contain;background-repeat:no-repeat;
}

@media (max-width:900px){
	.loc-social .loc-social__inner{grid-template-columns:1fr;gap:44px;padding:60px 20px;}
}
@media (max-width:480px){
	.loc-social .loc-social__tech-grid .elementor-grid{grid-template-columns:repeat(2,1fr);}
}

/* ============================ LOC – 06 Areas We Serve ============================ */
/* The CTA card that used to occupy the right half was removed from the template on 2026-08-02: the
   Contact band below carries the same details plus the form, and two consecutive asks is one too
   many. Areas now takes the row on its own.
   Written at (0,2,0) so it beats `.loc-close .loc-close__inner`, which is also (0,2,0) but earlier
   in the file — the specificity trap that broke the industry software panel once already. */
.loc-close{background:#ffffff;}
.loc-close .loc-close__inner{
	max-width:1200px;margin:0 auto;padding:70px 24px 84px;
	display:grid;grid-template-columns:0.85fr 1.15fr;gap:28px;align-items:stretch;
}
.saiftec-location .loc-close__inner{grid-template-columns:1fr;}
.loc-close .loc-close__col{min-width:0;}

/* --- Left: service-area chips --- */
.loc-no-areas .loc-areas{display:none;}
.loc-areas{
	background:#F9FAFC;border:1px solid #ECECF3;border-radius:14px;padding:26px 24px;
}
.loc-areas .loc-areas__heading .elementor-heading-title{
	margin:0 0 16px;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:19px;line-height:1.3;color:#170D3D;
}
/* Reuses .svc1-chips from service-sections.css, restyled as compact area pills (that component
   uses a warning icon for challenge points, which is not wanted here). */
.loc-areas .svc1-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none;}
.loc-areas .svc1-chips__item{
	position:static;padding:7px 13px;border-radius:6px;
	background:#ffffff;border:1px solid #E4E4EF;
	font-family:"Montserrat",sans-serif;font-weight:500;font-size:12.5px;line-height:1.2;color:#5A5A72;
	transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.loc-areas .svc1-chips__item::before{display:none;}     /* drop the inherited warning icon */
.loc-areas .svc1-chips__item--link:hover{border-color:#3A0CA3;background:#F7F4FF;}
.loc-areas .svc1-chips__item a{color:#3A0CA3;text-decoration:none;font-weight:600;}

/* --- Right: contact CTA card (faint world map behind) --- */
.loc-no-cta .loc-cta{display:none;}
.loc-cta{
	position:relative;overflow:hidden;
	background-color:#170D3D;background-repeat:no-repeat;background-position:right center;background-size:auto 130%;
	border-radius:14px;padding:30px 32px;
	display:flex;flex-direction:column;gap:14px;
}
.loc-cta::before{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(100deg,#170D3D 18%,rgba(23,13,61,.86) 55%,rgba(58,12,163,.55) 120%);
}
.loc-cta > *{position:relative;z-index:1;}
.loc-cta .loc-cta__heading .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:800;
	font-size:24px;line-height:1.25;color:#ffffff;
}
.loc-cta .loc-cta__text,.loc-cta .loc-cta__text p{
	margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.80);max-width:520px;
}
/* Inline phone / email / hours row */
.loc-cta .loc-cta__contact{
	display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:2px;
}
.loc-cta .loc-cta__contact .elementor-widget{margin:0;}
.loc-cta__phone .elementor-heading-title,
.loc-cta__email .elementor-heading-title,
.loc-cta__hours .elementor-heading-title{
	position:relative;margin:0;padding-left:24px;
	font-family:"Montserrat",sans-serif;font-weight:500;font-size:13.5px;line-height:1.3;color:#ffffff;
}
.loc-cta__phone .elementor-heading-title a,
.loc-cta__email .elementor-heading-title a{color:#ffffff;text-decoration:none;}
.loc-cta__phone .elementor-heading-title a:hover,
.loc-cta__email .elementor-heading-title a:hover{color:#0AA3D6;}
.loc-cta__phone .elementor-heading-title::before,
.loc-cta__email .elementor-heading-title::before,
.loc-cta__hours .elementor-heading-title::before{
	content:"";position:absolute;left:0;top:0;width:16px;height:16px;
	background-repeat:no-repeat;background-size:contain;opacity:.9;
}
.loc-cta__phone .elementor-heading-title::before{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230AA3D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.loc-cta__email .elementor-heading-title::before{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230AA3D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}
.loc-cta__hours .elementor-heading-title::before{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230AA3D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");
}
/* Hide an empty contact line rather than leaving a stray icon. */
.loc-cta__phone .elementor-heading-title:empty,
.loc-cta__email .elementor-heading-title:empty,
.loc-cta__hours .elementor-heading-title:empty{display:none;}

.loc-cta .loc-cta__btn{margin-top:6px;}
.loc-cta .loc-cta__btn .elementor-button{
	background:#0AA3D6;color:#ffffff;border-radius:8px;
	font-family:"Heebo",sans-serif;font-weight:700;font-size:15px;padding:14px 26px;
	transition:background .2s ease,transform .2s ease;
}
.loc-cta .loc-cta__btn .elementor-button:hover{background:#ffffff;color:#170D3D;transform:translateY(-2px);}

@media (max-width:900px){
	.loc-close .loc-close__inner{grid-template-columns:1fr;gap:24px;padding:56px 20px 68px;}
}
@media (max-width:480px){
	.loc-cta{padding:26px 22px;}
	.loc-cta .loc-cta__heading .elementor-heading-title{font-size:21px;}
	.loc-cta .loc-cta__contact{gap:10px 18px;}
}

/* ============================ LOC – 07 Contact ============================ */
/* The shared GC — Lead Form band (#3305), the same one on the home, service and industry pages.
   All of its chrome is in assets/leadform.css, which inc/leadform.php now loads for
   is_singular('location') — without that guard the markup renders and arrives unstyled, which is
   exactly how it failed on the industry terms. Nothing but the gate belongs here. */
.loc-no-contact .loc-contact{display:none;}

/* ---------------------------------------------------------------------------
 * Hub pages — /location/ and /location/{country}/
 *
 * These are the default Astra archive, not Elementor templates (see inc/locations.php §7):
 * a header supplied by `astra_archive_header`, then Astra's post grid rendering city cards
 * with the blog furniture removed. Styling stays light so it inherits the site's type scale.
 * ------------------------------------------------------------------------ */
.saiftec-location-hub .loc-hub__header{
	max-width:1200px;margin:0 auto;padding:64px 20px 28px;text-align:center;
}
.saiftec-location-hub .loc-hub__title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:clamp(30px,4.2vw,46px);line-height:1.15;color:#170D3D;
}
.saiftec-location-hub .loc-hub__intro{
	max-width:760px;margin:16px auto 0;
}
.saiftec-location-hub .loc-hub__intro p{
	margin:0 0 10px;font-family:"Montserrat",sans-serif;font-size:16px;line-height:1.7;color:#5A5A72;
}
.saiftec-location-hub .loc-hub__intro p:last-child{margin-bottom:0;}

/* City cards: the Astra grid, quietened down into a simple card list. */
.saiftec-location-hub .site-main{padding-bottom:72px;}
.saiftec-location-hub .ast-article-post .ast-article-inner{
	border:1px solid #e6e8f0;border-radius:12px;background:#ffffff;
	box-shadow:0 6px 15px -2px rgba(16,24,40,.05);
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.saiftec-location-hub .ast-article-post .ast-article-inner:hover{
	transform:translateY(-3px);border-color:#0AA3D6;box-shadow:0 14px 30px -8px rgba(23,13,61,.18);
}
.saiftec-location-hub .ast-article-post .post-content{padding:26px 24px;}
.saiftec-location-hub .entry-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:22px;line-height:1.3;
}
.saiftec-location-hub .entry-title a{color:#170D3D;text-decoration:none;}
.saiftec-location-hub .entry-title a:hover{color:#0AA3D6;}
/* The location archives use Astra's page-builder content layout (chosen for the city pages, which
   are entirely Elementor). That layout drops the container's horizontal padding, but Astra's blog
   grid still applies its own -20px row margins, so the card row ends up 40px wider than the
   viewport and the page scrolls sideways. Zeroing the row margin restores the gutters the padding
   used to supply. Only /location/ still runs this loop — the country hubs have an Elementor
   template and no `.ast-row` at all. */
.saiftec-location-hub .site-main .ast-row{margin-left:0;margin-right:0;}

/* Belt and braces: the byline and excerpt are removed in PHP, never let them reappear. */
.saiftec-location-hub .ast-article-post .entry-meta,
.saiftec-location-hub .ast-article-post .ast-excerpt-container,
.saiftec-location-hub .ast-article-post .read-more{display:none;}

@media (max-width:600px){
	.saiftec-location-hub .loc-hub__header{padding:44px 20px 22px;}
}

/* -----------------------------------------------------------------------------
 * Recent Projects — the one-per-view case-study slider.
 *
 * At 1440 the projects column is ~690px and the card lands at 656, close to the 585 it was designed
 * at. Below the layout's stacking point the column takes the full row and the card measured 820px,
 * where the 16:9 preview alone is 460px tall and the card reads as a different component from the
 * one on /portfolio/. Capped and centred instead.
 * -------------------------------------------------------------------------- */
@media (max-width:1024px){
	/* Only once the two columns stack: an equal column is ~540px at 1200 and needs no cap, but the
	   full-width stacked row would give the single card 820px. */
	/* Doubled to (0,3,0): Elementor gives every widget in a container `max-width:100%` at (0,2,0)
	   and loads after the theme, so a single-class cap ties and loses — measured, the card stayed 820. */
	.loc-proof .loc-proof__slider.loc-proof__slider{max-width:660px;margin-inline:auto;}
}

/* =========================================================================================
   COUNTRY HUB — /location/{country}/  (Elementor archive template "Location — Country Hub")

   One template serves Canada, the UAE and the United States, so every band that can be empty is
   removed by a body-class gate rather than rendered hollow. Bands: hero (the shared `svc-hero`),
   optional prose, coverage map + city list, services + industries, why us, process, contact — the
   last two are the same components the city pages use and need no rules here beyond a background.
   ========================================================================================= */

.lochub-no-about .lochub-about,
.lochub-no-world .lochub-world,
.lochub-no-why .lochub-why,
.lochub-no-regions .lochub-regions,
.lochub-no-cities .lochub-cities{display:none;}

/* ---- band: long-form intro (only for a country carried by prose, e.g. the US page) ---- */
.lochub-about{background:#ffffff;}
.lochub-about .lochub-about__inner{max-width:840px;margin:0 auto;padding:70px 24px 10px;display:flex;flex-direction:column;gap:0;}
.lochub-about__heading .elementor-heading-title{
	margin:0 0 16px;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:clamp(24px,2.6vw,30px);line-height:1.25;color:#170D3D;
}
.lochub-about__body p{margin:0 0 14px;font-size:16px;line-height:1.75;color:#5A5A72;}
.lochub-about__body p:last-child{margin-bottom:0;}

/* ---- band: coverage map + city list ---- */
.lochub-cities{background:#ffffff;}
.lochub-cities .lochub-cities__inner{
	max-width:1200px;margin:0 auto;padding:76px 24px 40px;
	display:flex;flex-direction:column;gap:36px;
}
.lochub-cities .lochub-cities__head{max-width:760px;margin:0 auto;text-align:center;align-items:center;gap:0;}
.lochub-cities__eyebrow .elementor-heading-title{
	margin:0 0 10px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;
	line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#0AA3D6;
}
.lochub-cities__heading .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:clamp(26px,3vw,34px);line-height:1.2;color:#170D3D;
}
.lochub-cities__intro,.lochub-cities__intro p{margin:14px 0 0;font-size:16px;line-height:1.7;color:#5A5A72;}
.lochub-cities .lochub-cities__body{
	display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start;
}
.lochub-cities .lochub-cities__mapcol,
.lochub-cities .lochub-cities__listcol{min-width:0;}

/* Elementor turns every container into a WRAPPING column flex box below 768px
   (`--flex-wrap-mobile:wrap`). A wrapping column container has to know its main size before it can
   place items, so the map — whose height comes from an `aspect-ratio` on a descendant — resolved to
   zero and the city panel was drawn straight over it. The column holds one widget, so wrapping has
   nothing to do; doubled to (0,3,0) because Elementor's `.e-con.e-flex{flex-wrap:var(--flex-wrap)}`
   is (0,2,0) and its stylesheet loads after this one. */
.lochub-cities .lochub-cities__mapcol.lochub-cities__mapcol{flex-wrap:nowrap;}

/* With no map for this country the list takes the whole row rather than sitting in half of one. */
.lochub-no-map .lochub-cities .lochub-cities__body{grid-template-columns:minmax(0,1fr);}
.lochub-no-map .lochub-cities .lochub-cities__mapcol{display:none;}

/* ---- the map itself (SaifTec Location Map widget) ----------------------------------------
   The pin overlay must be exactly the SVG's box or every pin drifts, so the aspect ratio comes
   from the generated map's own viewBox (`--loc-map-ratio`, set by the widget) and the outline is
   absolutely positioned to fill it. Do not give either box padding. */
.loc-map{margin:0;position:relative;width:100%;}
.loc-map__art{position:relative;aspect-ratio:var(--loc-map-ratio,8/7);container-type:inline-size;}
.loc-map__outline{position:absolute;inset:0;width:100%;height:100%;display:block;color:#DDE4FA;}
.loc-map__pins{position:absolute;inset:0;margin:0;padding:0;list-style:none;}
.loc-map__pin{position:absolute;transform:translate(-50%,-50%);}
.loc-map__pin:hover,.loc-map__pin:focus-within{z-index:3;}

/* Markers are sized in CONTAINER units, not pixels. Pin positions are percentages of the map, so a
   fixed-pixel dot grows relative to the country as the map shrinks: at a phone width a 28px cluster
   marker completely swallows the next city 170km away. In `cqw` the whole marker layer scales with
   the outline, and two cities that read as separate on a desktop still do on a phone. The `max()`
   floors stop the dots disappearing on a very narrow map, at which point they are only decoration
   anyway — the full city list sits directly beneath. */
.loc-map__dot{
	position:relative;display:flex;align-items:center;justify-content:center;
	width:max(8px,2.5cqw);height:max(8px,2.5cqw);border-radius:50%;text-decoration:none;
	background:var(--loc-pin,#3A0CA3);border:max(1.5px,.42cqw) solid #ffffff;
	box-shadow:0 0 0 max(2px,.67cqw) var(--loc-pin-ring,rgba(58,12,163,.15)),0 3px 8px rgba(23,13,61,.22);
	transition:transform .18s ease,box-shadow .18s ease;
}
.loc-map__pin--group .loc-map__dot{width:max(14px,4.7cqw);height:max(14px,4.7cqw);}
.loc-map__dot:is(:hover,:focus-visible){transform:scale(1.12);box-shadow:0 0 0 max(4px,1.2cqw) var(--loc-pin-ring,rgba(58,12,163,.15)),0 6px 14px rgba(23,13,61,.3);}
.loc-map__dot:focus-visible{outline:2px solid #170D3D;outline-offset:3px;}
.loc-map__count{font-family:"Heebo",sans-serif;font-weight:700;font-size:max(8px,1.85cqw);line-height:1;color:#ffffff;}

/* A country whose rows carry no icon must not render five empty outlined squares. */
.lochub-why .svc1-featlist__icon:empty{display:none;}

/* The label is the LINK TEXT, not decoration: hiding it with display:none or visibility:hidden
   would leave the anchor with no accessible name. It is faded out and re-shown on hover/focus. */
.loc-map__label{
	position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%);
	max-width:230px;width:max-content;text-align:center;
	background:#170D3D;color:#ffffff;border-radius:8px;padding:7px 11px;
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;line-height:1.45;
	opacity:0;pointer-events:none;transition:opacity .16s ease;
	box-shadow:0 8px 22px rgba(23,13,61,.28);
}
.loc-map__label::after{
	content:"";position:absolute;top:100%;left:50%;margin-left:-5px;
	border:5px solid transparent;border-top-color:#170D3D;
}
.loc-map__dot:is(:hover,:focus-visible) .loc-map__label{opacity:1;}
/* "No labels" clips the name instead of removing it, for the same accessible-name reason. */
.loc-map--nolabels .loc-map__label{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
	clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;box-shadow:none;
}
.loc-map--nolabels .loc-map__label::after{display:none;}

/* ---- the city list beside it (SaifTec Location List, "hub" layout) ---- */
.lochub-cities .lochub-cities__listcol{
	background:#F9FAFC;border:1px solid #ECECF3;border-radius:16px;padding:26px 24px 22px;
	display:flex;flex-direction:column;gap:0;
	/* Centred against the map rather than top-aligned: the northern half of a country map is empty
	   space, so a panel pinned to the top leaves the row looking bottom-heavy. */
	align-self:center;
}
.lochub-cities__listhead .elementor-heading-title{
	margin:0 0 14px;font-family:"Heebo",sans-serif;font-weight:700;font-size:17px;
	line-height:1.3;color:#170D3D;
}
.loc-citylist__items{
	list-style:none;margin:0;padding:0;display:grid;
	grid-template-columns:repeat(var(--loc-citylist-cols,1),minmax(0,1fr));gap:0 20px;
}
.loc-citylist__link{
	display:flex;align-items:center;gap:10px;padding:7px 0;text-decoration:none;color:#170D3D;
	font-family:"Montserrat",sans-serif;font-weight:500;font-size:14.5px;line-height:1.4;
	transition:color .18s ease;
}
.loc-citylist__marker{
	position:relative;flex:0 0 auto;width:15px;height:15px;border-radius:50%;
	border:1.5px solid #C9D2EA;transition:border-color .18s ease;
}
.loc-citylist__marker::after{
	content:"";position:absolute;inset:3px;border-radius:50%;background:#0AA3D6;
	opacity:.5;transition:opacity .18s ease;
}
.loc-citylist__link:hover{color:#3A0CA3;}
.loc-citylist__link:hover .loc-citylist__marker{border-color:#0AA3D6;}
.loc-citylist__link:hover .loc-citylist__marker::after{opacity:1;}
.loc-citylist__link:focus-visible{outline:2px solid #3A0CA3;outline-offset:3px;border-radius:5px;}

/* ---- band: services + industries ---- */
.lochub-offer{background:#F7F8FC;}
.lochub-offer .lochub-offer__inner{
	max-width:1200px;margin:0 auto;padding:40px 24px 60px;
	display:flex;flex-direction:column;gap:20px;
}
.lochub-offer .lochub-offer__card{
	background:#ffffff;border:1px solid #E9EBF4;border-radius:16px;padding:22px 24px 24px;
	display:flex;flex-direction:column;gap:0;box-shadow:0 10px 30px rgba(17,17,51,.045);
}
.lochub-offer__label .elementor-heading-title{
	margin:0 0 16px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:11.5px;
	line-height:1.4;letter-spacing:.13em;text-transform:uppercase;color:#3A0CA3;
}
.lochub-offer .lochub-offer__grid .elementor-grid{
	display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;
}
/* Same `.loc-tile` skin as the city pages, laid out horizontally: six stacked tiles in one row are
   each about 160px wide, too narrow for a centred two-line label.

   The class is DOUBLED to reach (0,3,0). Elementor's `.e-con-full.e-flex{flex-direction:var(--flex-direction)}`
   is (0,2,0) and frontend.min.css loads after this file, so a single-class rule ties and loses —
   measured, the tile stayed in a column. */
.lochub-offer .loc-tile.loc-tile{
	flex-direction:row;align-items:center;text-align:left;gap:11px;
	padding:13px;background:#ffffff;border-color:#E9EBF4;
}
.lochub-offer .loc-tile__icon{
	flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:#F2F1FE;
	display:flex;align-items:center;justify-content:center;
}
.lochub-offer .loc-tile__icon :is(img,svg){width:18px;height:18px;}
.lochub-offer .loc-tile__name .elementor-heading-title{font-size:12px;line-height:1.3;}
.lochub-offer .lochub-offer__all{margin-top:16px;align-self:flex-end;}

/* The arrow text-link, shared by the two places on this template that use one. */
.lochub-cities .lochub-cities__all .elementor-button,
.lochub-offer .lochub-offer__all .elementor-button{
	background:transparent;padding:0;border:0;color:#3A0CA3;
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;
	display:inline-flex;align-items:center;gap:7px;transition:gap .2s ease,color .2s ease;
}
.lochub-cities .lochub-cities__all .elementor-button:hover,
.lochub-offer .lochub-offer__all .elementor-button:hover{gap:11px;color:#170D3D;}
.lochub-cities .lochub-cities__all .elementor-button::after,
.lochub-offer .lochub-offer__all .elementor-button::after{
	content:"";width:15px;height:15px;flex:0 0 auto;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0CA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-size:contain;background-repeat:no-repeat;
}
.lochub-cities .lochub-cities__all{margin-top:16px;}

/* ---- band: why this country's businesses choose us (navy) ----
   Reuses the shared Feature List `cards` style, stripped back for a dark ground: the card
   background and shadow are removed and only the colours are re-pointed, so a row added in
   wp-admin needs no CSS. Selectors are (0,2,0) to outrank the base `.svc1-featlist__*` rules. */
.lochub-why{background:#170D3D;}
.lochub-why .lochub-why__inner{
	max-width:1200px;margin:0 auto;padding:54px 24px 58px;display:flex;flex-direction:column;gap:0;
}
.lochub-why__eyebrow .elementor-heading-title{
	margin:0 0 26px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;
	line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#0AA3D6;
}
.lochub-why .svc1-featlist{margin:0;gap:26px 24px;}
.lochub-why .svc1-featlist__item{background:transparent;box-shadow:none;padding:0;gap:12px;}
.lochub-why .svc1-featlist__icon{
	width:44px;height:44px;border-radius:11px;background:transparent;
	border:1px solid rgba(255,255,255,.22);
}
.lochub-why .svc1-featlist__icon :is(img,svg){width:21px;height:21px;}
.lochub-why .svc1-featlist__title{font-size:15px;line-height:1.35;color:#ffffff;}
.lochub-why .svc1-featlist__text{font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);}

/* ---- band: regions, for a country served remotely (no city pages to link to) ----------------
   Same two-column shape as the cities band, and the map inside it is the same widget — only the
   right column differs, because a region is not a destination. The list is the shared Feature List
   `cards` style at one column, stripped to a divider rail. */
.lochub-regions{background:#ffffff;}
.lochub-regions .lochub-regions__inner{
	max-width:1200px;margin:0 auto;padding:70px 24px 44px;
	display:flex;flex-direction:column;gap:30px;
}
.lochub-regions .lochub-regions__head{max-width:760px;margin:0 auto;text-align:center;align-items:center;gap:0;}
.lochub-regions__eyebrow .elementor-heading-title{
	margin:0 0 10px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;
	line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#0AA3D6;
}
.lochub-regions__heading .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:clamp(26px,3vw,34px);line-height:1.2;color:#170D3D;
}
.lochub-regions .lochub-regions__body{
	display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center;
}
.lochub-regions .lochub-regions__mapcol,
.lochub-regions .lochub-regions__listcol{min-width:0;}
/* Same reason as the cities band: Elementor makes containers wrapping column flex boxes below
   768px, which zeroes a column whose child is sized by `aspect-ratio`. */
.lochub-regions .lochub-regions__mapcol.lochub-regions__mapcol{flex-wrap:nowrap;}

.lochub-regions .svc1-featlist{margin:0;gap:0;grid-template-columns:minmax(0,1fr);}
.lochub-regions .svc1-featlist__item{
	background:transparent;box-shadow:none;border-radius:0;
	padding:18px 0 18px 22px;gap:4px;
	border-left:2px solid #E4E8F6;
	display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;
	column-gap:14px;align-items:center;
}
.lochub-regions .svc1-featlist__item + .svc1-featlist__item{border-top:1px solid #F0F2F9;}
.lochub-regions .svc1-featlist__icon{
	grid-row:1 / span 2;width:38px;height:38px;border-radius:10px;background:#F2F1FE;
}
.lochub-regions .svc1-featlist__icon :is(img,svg){width:19px;height:19px;}
.lochub-regions .svc1-featlist__title{
	grid-column:2;margin:0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:16px;line-height:1.3;color:#170D3D;
}
.lochub-regions .svc1-featlist__text{
	grid-column:2;margin:3px 0 0;font-size:13.5px;line-height:1.5;color:#6B6B85;
}
/* A region with no icon must not leave a 38px hole where the title should start. */
.lochub-regions .svc1-featlist__item:not(:has(.svc1-featlist__icon)){grid-template-columns:minmax(0,1fr);}
.lochub-regions .svc1-featlist__item:not(:has(.svc1-featlist__icon)) :is(.svc1-featlist__title,.svc1-featlist__text){grid-column:1;}

@media (max-width:1024px){
	.lochub-regions .lochub-regions__body{grid-template-columns:minmax(0,1fr);gap:26px;}
	.lochub-regions .lochub-regions__mapcol{max-width:560px;margin-inline:auto;width:100%;}
}
@media (max-width:768px){
	.lochub-regions .lochub-regions__inner{padding:54px 20px 34px;}
}

/* ---- band: the world map, for the country row that stands for everywhere else ---------------
   The dot field is a CSS mask rather than inline SVG: it is 3,690 circles, and as a mask the file
   is fetched once, cached, and still takes its colour from a token. Markers and routes sit in the
   same percentage space the projection produces, so the mask box must never gain padding. */
.lochub-world{background:#ffffff;}
.lochub-world .lochub-world__inner{
	max-width:1240px;margin:0 auto;padding:66px 24px 30px;
	display:flex;flex-direction:column;gap:34px;
}
.lochub-world .lochub-world__head{max-width:980px;margin:0 auto;text-align:center;align-items:center;gap:0;}
.lochub-world__eyebrow .elementor-heading-title{
	margin:0 0 10px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;
	line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#0AA3D6;
}
.lochub-world__heading .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:clamp(27px,3.4vw,40px);line-height:1.18;color:#170D3D;
}
.lochub-world__intro,.lochub-world__intro p{margin:14px 0 0;font-size:16px;line-height:1.7;color:#5A5A72;}
.lochub-world .lochub-world__body{
	display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:44px;align-items:center;
}
.lochub-world .lochub-world__mapcol,
.lochub-world .lochub-world__listcol{min-width:0;}
/* Elementor makes containers wrapping column flex boxes below 768px, which zeroes a column whose
   child is sized by `aspect-ratio`. Same fix, same reason, as the cities and regions bands. */
.lochub-world .lochub-world__mapcol.lochub-world__mapcol{flex-wrap:nowrap;}

/* ---- the map itself ---- */
.loc-world{
	--world-land:#D7DEF6;--world-route:#8B7BE8;--world-hub:#3A0CA3;--accent:#0AA3D6;
	margin:0;position:relative;width:100%;
}
.loc-world__art{position:relative;aspect-ratio:var(--world-ratio,2/1);container-type:inline-size;}
.loc-world__dots{
	position:absolute;inset:0;display:block;background-color:var(--world-land);
	-webkit-mask:url("maps/worldwide.svg") center/100% 100% no-repeat;
	mask:url("maps/worldwide.svg") center/100% 100% no-repeat;
}
.loc-world__routes{
	position:absolute;inset:0;width:100%;height:100%;overflow:visible;
	fill:none;stroke:var(--world-route);stroke-width:1.2;stroke-opacity:.6;
	stroke-dasharray:3.5 3.5;stroke-linecap:round;
}

/* Delivery hub: a solid node with two rings. The rings only breathe where motion is welcome. */
.loc-world__hub{
	position:absolute;transform:translate(-50%,-50%);
	width:max(9px,1.6cqw);height:max(9px,1.6cqw);border-radius:50%;
	background:var(--world-hub);z-index:2;
	box-shadow:0 0 0 max(4px,.9cqw) rgba(58,12,163,.20),0 0 0 max(9px,2cqw) rgba(58,12,163,.09);
}
@media (prefers-reduced-motion:no-preference){
	.loc-world__hub::after{
		content:"";position:absolute;inset:0;border-radius:50%;
		box-shadow:0 0 0 2px rgba(58,12,163,.5);
		animation:loc-world-ping 2.8s cubic-bezier(0,0,.2,1) infinite;
	}
	@keyframes loc-world-ping{
		0%{transform:scale(1);opacity:.7}
		70%,100%{transform:scale(3.4);opacity:0}
	}
}

.loc-world__regions{position:absolute;inset:0;margin:0;padding:0;list-style:none;}
.loc-world__region{position:absolute;inset:0;}
.loc-world__pin{
	position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);
	width:max(11px,1.9cqw);height:max(15px,2.6cqw);
	background:var(--accent);
	/* A teardrop: a circle at the top tapering to the point that sits on the coordinate. */
	border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
	clip-path:polygon(50% 100%,0 45%,0 0,100% 0,100% 45%);
	box-shadow:0 3px 7px rgba(23,13,61,.28);
}
.loc-world__pin::after{
	content:"";position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);
	width:38%;height:27%;border-radius:50%;background:#ffffff;
}

/* Label cards float at coordinates set per region — layout, not geography, and editable in
   wp-admin. Below the map's breakpoint they stop floating and become a plain list, because six
   overlapping cards on a phone are unreadable. */
.loc-world__card{
	position:absolute;left:var(--cx,50%);top:var(--cy,50%);transform:translate(-50%,-50%);
	display:flex;align-items:center;gap:9px;width:max-content;max-width:min(34%,180px);
	background:#ffffff;border:1px solid #ECEDF6;border-radius:12px;padding:9px 12px;
	box-shadow:0 12px 28px -14px rgba(23,13,61,.30);
}
.loc-world__icon{
	flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--accent) 14%,#fff);
}
.loc-world__icon :is(img,svg){width:15px;height:15px;display:block;}
.loc-world__cardtext{display:flex;flex-direction:column;gap:1px;min-width:0;}
.loc-world__name{
	font-family:"Heebo",sans-serif;font-weight:700;font-size:12.5px;line-height:1.25;color:#170D3D;
}
.loc-world__places{
	font-family:"Montserrat",sans-serif;font-size:10.5px;line-height:1.35;color:#7B7B93;
}
/* A region with no coordinate has no pin, so its card cannot float — it is listed under the map. */
.loc-world__region--nopin{position:static;}
.loc-world__region--nopin .loc-world__card{position:static;transform:none;max-width:none;}

/* ---- the reasons beside the map (shared Feature List, one column) ---- */
.lochub-world .svc1-featlist{margin:0;gap:0;grid-template-columns:minmax(0,1fr);}
.lochub-world .svc1-featlist__item{
	background:transparent;box-shadow:none;border-radius:0;padding:15px 0;gap:3px;
	display:grid;grid-template-columns:38px 1fr;column-gap:14px;align-items:center;
}
.lochub-world .svc1-featlist__item + .svc1-featlist__item{border-top:1px solid #EFF1F8;}
.lochub-world .svc1-featlist__icon{grid-row:1 / span 2;width:38px;height:38px;border-radius:10px;background:#F2F1FE;}
.lochub-world .svc1-featlist__icon :is(img,svg){width:18px;height:18px;}
.lochub-world .svc1-featlist__title{
	grid-column:2;margin:0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:15px;line-height:1.3;color:#170D3D;
}
.lochub-world .svc1-featlist__text{grid-column:2;margin:3px 0 0;font-size:13px;line-height:1.55;color:#6B6B85;}

@media (max-width:1100px){
	.lochub-world .lochub-world__body{grid-template-columns:minmax(0,1fr);gap:30px;}
	.lochub-world .lochub-world__mapcol{max-width:720px;margin-inline:auto;width:100%;}
	.lochub-world .lochub-world__listcol{max-width:720px;margin-inline:auto;width:100%;}
}
@media (max-width:820px){
	/* Cards stop floating: at this width they overlap each other and the map is unreadable under
	   them. The pins stay, and the same six names read as a list underneath. */
	.loc-world__regions{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;}
	.loc-world__region{position:static;}
	.loc-world__region .loc-world__pin{display:none;}
	.loc-world__card{position:static;transform:none;max-width:none;width:auto;}
	.lochub-world .lochub-world__inner{padding:52px 20px 36px;}
}
@media (max-width:520px){
	.loc-world__regions{grid-template-columns:minmax(0,1fr);}
}

/* ---- band: process (the shared svc1-process treatment, on white like the city pages) ---- */
.lochub-process{background:#ffffff;}

/* ---- responsive ---- */
@media (max-width:1024px){
	.lochub-cities .lochub-cities__body{grid-template-columns:minmax(0,1fr);gap:32px;}
	.lochub-cities .lochub-cities__mapcol{max-width:560px;margin-inline:auto;width:100%;}
	.lochub-offer .lochub-offer__grid .elementor-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:768px){
	.lochub-cities .lochub-cities__inner{padding:56px 20px 32px;}
	.lochub-offer .lochub-offer__inner{padding:32px 20px 48px;}
	.lochub-offer .lochub-offer__grid .elementor-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.lochub-why .lochub-why__inner{padding:44px 20px 48px;}
	.lochub-about .lochub-about__inner{padding:52px 20px 6px;}
}
@media (max-width:560px){
	/* Two columns of city names wrap to two lines each at this width, which reads worse than one
	   longer column. */
	.loc-citylist__items{grid-template-columns:minmax(0,1fr);}
	.lochub-offer .lochub-offer__all{align-self:flex-start;}
}