/* GENERATED by locations-rebuild/build-assets.mjs from locations-rebuild/prototype/. Edit there, then rebuild. */
/*
 * /locations/ archive prototype. Values come from the live site, measured 2026-09-23 (measure-home.mjs):
 * content 1280px inside 20px gutters; section padding 96 / 72 (<=1024) / 56 (<=767); H1 54/44/36 Lato 700;
 * H2 40px on the homepage; card title 24px; button accent, 3px radius, 12px 24px padding.
 * Colours are the Elementor kit globals only (post-6.kit.before.css). Accent on white is 3.21:1, so it is used
 * for fills, rings, stars and underlines, never for small text on white. Hover follows hover.css (966 card).
 */
.lr {
  --navy: var(--e-global-color-primary, #022046);
  --accent: var(--e-global-color-accent, #E17021);
  --grey: var(--e-global-color-secondary, #F2F4F6);
  --line: #D9DEE5;
  --muted: #43546B; /* navy family, 7.9:1 on white, 7.2:1 on grey */
  --pad: 96px;
  --lr-gap: 32px; /* not --gap: Elementor containers define --gap themselves (0px 0px here), and the nearest one wins */
  font-family: "Lato", sans-serif;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.6;
}
.lr *, .lr *::before, .lr *::after { box-sizing: border-box; }
.lr p, .lr ul, .lr ol, .lr dl, .lr dd, .lr blockquote, .lr h1, .lr h2, .lr h3 { margin: 0; padding: 0; }
.lr ul, .lr ol { list-style: none; }
.lr img { display: block; max-width: 100%; height: auto; }
/* The kit paints every link accent (.elementor-kit-6 a, 0,1,1) and loads in an order we don't control, so every
   link rule here is at least (0,2,1). */
.lr .lr-wrap a { color: inherit; }
.lr-wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }

/* type */
.lr .lr-h1 { font: 700 54px/1.1 "Lato", sans-serif; color: #fff; margin: 16px 0 20px; letter-spacing: 0; }
.lr .lr-h2 { font: 700 40px/1.15 "Lato", sans-serif; color: var(--navy); margin-bottom: 40px; }
.lr .lr-h3 { font: 700 14px/1.3 "Lato", sans-serif; color: var(--navy); text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* button */
.lr .lr-wrap .lr-btn { display: inline-block; background: var(--accent); color: #fff; font: 700 16px/24px "Lato", sans-serif;
  letter-spacing: .02em; padding: 12px 24px; border-radius: 3px; text-decoration: none; }

/* sections */
.lr-section { padding: var(--pad) 0; }
.lr-steps-sec, .lr-reviews-sec { background: var(--grey); }

/* ---------- hero ---------- */
.lr-hero { background: var(--navy); color: #fff; padding: 88px 0; }
.lr-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.lr-crumbs { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.82); display: flex; gap: 8px; flex-wrap: wrap; }
.lr .lr-crumbs a { color: #fff; text-decoration: none; }
.lr-crumbs [aria-current] { color: rgba(255,255,255,.82); }
.lr .lr-hero__intro { max-width: 62ch; color: #fff; margin-bottom: 28px; }
.lr-hero__media img { width: 100%; }
.lr-hero--no-media .lr-hero__grid { grid-template-columns: 1fr; }

/* ---------- finder ---------- */
.lr-finder__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: var(--pad); padding-bottom: 0; }
/* the tabs belong to the locations below them: the section starts 48px under the tabs, not a full --pad */
.lr .lr-locations { padding-top: 48px; }
.lr:has(.lr-finder .lr-tabs[hidden]) .lr-locations { padding-top: var(--pad); }
/* Tabs are <button type="button">. Hello Elementor's reset.css paints [type=button]:hover/:focus pink (#c36) at
   (0,2,0); the base tab/arrow rules are (0,3,0), which beats it whatever the stylesheet order. */
.lr .lr-tabs .lr-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; margin: 0;
  border: 1px solid var(--navy); border-radius: 3px; background: #fff; color: var(--navy); font: 700 16px/1.2 "Lato", sans-serif;
  cursor: pointer; text-decoration: none; }
.lr .lr-tabs .lr-tab[aria-selected="true"] { background: var(--navy); color: #fff; }
.lr-tab__n { font-size: 13px; font-weight: 700; background: var(--grey); color: var(--navy); border-radius: 3px; padding: 1px 7px; }
.lr-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.lr-tabs[hidden] { display: none; }
.lr-finder:has(.lr-tabs[hidden]) { display: none; } /* no JS or one country: no empty band */
.lr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lr-is-filtered, .lr .lr-country.lr-is-filtered { display: none; }
.lr-country.lr-is-filtered + .lr-country { margin-top: 0; }
.lr-country { scroll-margin-top: 140px; }
.lr-country + .lr-country { margin-top: 80px; }

/* ---------- grouped location cards ---------- */
/* Each province is a subgrid spanning as many columns as it has cards, so a one-card province sits beside
   the next one instead of leaving a two-card hole. The span is set from the card count (data-n). */
.lr-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--lr-gap); row-gap: 56px; }
.lr-group { display: grid; grid-template-columns: subgrid; row-gap: 20px; align-content: start; grid-column: span 1; }
.lr-group[data-n="2"] { grid-column: span 2; }
.lr-group[data-n="3"], .lr-group[data-n="many"] { grid-column: span 3; }
.lr-group > .lr-h3 { grid-column: 1 / -1; }

.lr .lr-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden; color: var(--navy); height: 100%; }
/* One link per card (spec 5): the CTA carries the descriptive anchor text and stretches over the whole card, so the
   card is clickable, the link's accessible name is just "Shipping containers in <City>", and the photo keeps its alt. */
.lr .lr-wrap .lr-card__cta, .lr .lr-wrap .lr-prod__cta { color: var(--navy); text-decoration: none; }
.lr .lr-card__cta::after, .lr .lr-prod__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@supports selector(:has(*)) { /* without :has() the CTA keeps its own ring rather than showing none */
  .lr .lr-card .lr-card__cta:focus-visible, .lr .lr-prod .lr-prod__cta:focus-visible { outline: none; }
  .lr .lr-card:has(.lr-card__cta:focus-visible), .lr .lr-prod:has(.lr-prod__cta:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
}
.lr-card__img { display: block; aspect-ratio: 25 / 16; overflow: hidden; background: var(--grey); }
.lr-card__img img { width: 100%; height: 100%; object-fit: cover; }
.lr-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 24px; flex: 1; }
.lr-card__city { font-size: 24px; line-height: 1.2; font-weight: 700; }
.lr-card__price { font-size: 18px; line-height: 1.35; font-weight: 700; }
.lr-price { white-space: nowrap; }
.lr-card__excerpt { color: var(--muted); }
.lr-card__price abbr { text-decoration: none; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.lr-card__cta { margin-top: auto; padding-top: 12px; font-weight: 700; }

/* Elementor + JetEngine build: the nested listing grids wrap every item in widget / grid / document divs. Make
   them transparent (display: contents) so .lr-groups > .lr-group > h3 + cards lay out exactly like the prototype,
   and no JetEngine grid margin can push past the viewport. The prototype markup has none of these wrappers. */
.lr .lr-locations :is(.elementor-element, .elementor-widget-container, .elementor-shortcode, .jet-listing-grid,
  .jet-listing-grid__items, .jet-listing-grid__item, [data-elementor-type]):not(.lr-country, .lr-groups, .lr-group, .lr-wrap) { display: contents; }
.lr .lr-group .lr-h3 { grid-column: 1 / -1; }
/* Elementor containers carry `.e-con { display: var(--display); gap: ... }`, which outranks the single-class grid
   rules above: restate display + gaps one class higher so the build lays out like the prototype */
.lr .lr-groups { display: grid; column-gap: var(--lr-gap); row-gap: 56px; }
.lr .lr-group { display: grid; row-gap: 20px; column-gap: var(--lr-gap); }
/* province width from its card count, with no hand-typed data-n. Scoped by breakpoint, NOT reset on phones: a
   :has() with a longer argument out-specifies the shorter phone reset, and a 3-card province would span 2 columns
   of a 1-column grid (review, 2026-09-23). Phones get the default span 1. */
@media (min-width: 1025px) {
  .lr .lr-groups .lr-group:has(.jet-listing-grid__item + .jet-listing-grid__item) { grid-column: span 2; }
  .lr .lr-groups .lr-group:has(.jet-listing-grid__item + .jet-listing-grid__item + .jet-listing-grid__item) { grid-column: span 3; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .lr .lr-groups .lr-group:has(.jet-listing-grid__item + .jet-listing-grid__item) { grid-column: span 2; }
}
.lr .lr-locations .jet-listing-grid__item:not(:first-child) > [data-elementor-type] > .lr-country { margin-top: 80px; }
/* Elementor containers set their own padding and width (.e-con, 0,1,0) and Elementor's frontend CSS resets
   `.elementor img { height: auto }` after this file: restate the frame rules one class higher. Scoped to .e-con /
   the card frames so the prototype markup is unaffected. */
.lr .lr-wrap.e-con { max-width: 1320px; width: 100%; margin-left: auto; margin-right: auto; padding: 0 20px; }
.lr .lr-section.e-con { padding: var(--pad) 0; }
.lr .lr-section.lr-locations.e-con { padding-top: 48px; } /* the built section is also .e-con: restate the tabs gap above it */
.lr .lr-card__img img, .lr .lr-prod__img img { width: 100%; height: 100%; object-fit: cover; }
/* Rank Math breadcrumb inside the hero */
.lr .lr-crumbs .rank-math-breadcrumb p { margin: 0; }
.lr .lr-crumbs .rank-math-breadcrumb a { color: #fff; text-decoration: none; }
.lr .lr-crumbs .rank-math-breadcrumb .separator { margin: 0 6px; }

/* ---------- how it works ---------- */
.lr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lr-gap); }
.lr-step { position: relative; border-top: 1px solid var(--line); padding-top: 28px; }
.lr-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 3px; background: var(--accent); }
.lr-step__n { display: block; font: 700 44px/1 "Lato", sans-serif; color: var(--navy); font-variant-numeric: tabular-nums; margin-bottom: 20px; }
.lr .lr-step__title { font-size: 20px; text-transform: none; letter-spacing: 0; border: 0; padding: 0; margin-bottom: 8px; }
.lr-step p { color: var(--muted); max-width: 32ch; }

/* ---------- areas ---------- */
.lr-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 32px 48px; }
.lr-area dt { font-weight: 700; margin-bottom: 6px; }
.lr-area dd { color: var(--muted); }
.lr .lr-area dd a, .lr .lr-areas__close a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lr .lr-areas__close { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- products ---------- */
.lr .lr-products-sec { padding-top: 0; }
.lr-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lr-gap); }
.lr .lr-prod { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden; color: var(--navy); background: #fff; }
.lr-prod__img { display: block; aspect-ratio: 25 / 16; overflow: hidden; background: var(--grey); }
.lr-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.lr-prod__name { font-size: 20px; line-height: 1.25; font-weight: 700; padding: 20px 24px 0; }
.lr-prod__fit { color: var(--muted); padding: 8px 24px 0; }
.lr-prod__cta { margin-top: auto; padding: 16px 24px 24px; font-weight: 700; }

/* ---------- reviews ---------- */
.lr-reviews { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
.lr-review { display: flex; flex-direction: column; gap: 10px; grid-column: 2; padding: 20px 0 20px 40px; border-left: 1px solid var(--line); }
.lr-review + .lr-review { border-top: 1px solid var(--line); }
.lr-review:nth-child(2) { padding-top: 0; border-top: 0; }
/* the lead: the first review, set large, held in view while the rail scrolls past it */
/* span 20 rows: more than any rail will hold, so the lead's column runs the rail's full height; top: spacing only */
.lr-review:first-child { grid-column: 1; grid-row: 1 / span 20; gap: 20px; padding: 0; border: 0; position: sticky; top: 140px; }
.lr-review:first-child blockquote { font-size: 28px; line-height: 1.35; font-weight: 700; }
.lr-review:first-child .lr-stars { font-size: 22px; }
.lr-stars { color: var(--accent); letter-spacing: 2px; font-size: 15px; line-height: 1; }
.lr-review blockquote { font-size: 17px; line-height: 1.55; }
.lr-review__by { font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.lr .lr-reviews__more { margin-top: 32px; }
.lr .lr-reviews__more a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- browse ---------- */
.lr-browse-sec { padding: 40px 0; border-bottom: 1px solid var(--line); }
.lr-browse { display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; }
.lr-browse__label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.lr-browse__list { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.lr .lr-browse__list a { display: inline-block; padding: 10px 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }

/* ---------- faq ---------- */
.lr-faq-wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.lr-faq details { border-bottom: 1px solid var(--line); }
.lr-faq details:first-child { border-top: 1px solid var(--line); }
.lr-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0;
  font-size: 18px; font-weight: 700; line-height: 1.4; }
.lr-faq summary::-webkit-details-marker { display: none; }
.lr-faq summary::after { content: "+" / ""; font-size: 24px; line-height: 1; font-weight: 400; flex: none; }
.lr-faq details[open] summary::after { content: "−" / ""; }
.lr .lr-faq details p { padding: 0 48px 24px 0; color: var(--muted); max-width: 72ch; }

/* ---------- interaction (hover.css conventions) ---------- */
@media (hover: hover) and (pointer: fine) {
  .lr .lr-btn { transition: filter .12s ease-out, transform .16s ease-out; }
  .lr .lr-btn:hover { filter: brightness(.92); transform: translateY(-1px); }
  .lr-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .lr .lr-tabs .lr-tab { transition: background-color .12s ease-out, color .12s ease-out; }
  .lr .lr-tabs .lr-tab:not([aria-selected="true"]):hover { background: var(--grey); color: var(--navy); }
  .lr .lr-tabs .lr-tab[aria-selected="true"]:hover { background: var(--navy); color: #fff; }
  .lr .lr-card, .lr .lr-prod { transition: transform .16s ease-out, box-shadow .12s ease-out; }
  .lr .lr-card:hover, .lr .lr-prod:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(2, 32, 70, .12); }
  .lr-card__img img, .lr-prod__img img { transition: transform .24s ease-out; }
  .lr .lr-card:hover .lr-card__img img, .lr .lr-prod:hover .lr-prod__img img { transform: scale(1.04); }
  .lr .lr-card:hover .lr-card__cta, .lr .lr-prod:hover .lr-prod__cta { text-decoration: underline; text-decoration-color: var(--accent);
    text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .lr-area dd a:hover, .lr-areas__close a:hover, .lr-reviews__more a:hover, .lr-browse__list a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
  .lr-faq summary:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .lr .lr-btn:hover, .lr .lr-card:hover, .lr .lr-prod:hover { transform: none; }
  .lr .lr-card:hover .lr-card__img img, .lr .lr-prod:hover .lr-prod__img img { transform: none; }
}
.lr a:focus-visible, .lr button:focus-visible, .lr summary:focus-visible, .lr [tabindex]:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 3px; }
.lr-hero a:focus-visible { outline-color: #fff; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .lr { --pad: 72px; --lr-gap: 24px; }
  .lr-hero { padding: 72px 0; }
  .lr .lr-h1 { font-size: 44px; }
  .lr .lr-h2 { font-size: 32px; margin-bottom: 32px; }
  .lr-groups, .lr-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr-group[data-n="3"], .lr-group[data-n="many"] { grid-column: span 2; }
  .lr-reviews { column-gap: 40px; }
  .lr-review { padding-left: 28px; }
  .lr-review:first-child blockquote { font-size: 24px; }
  .lr-faq-wrap { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .lr { --pad: 56px; }
  .lr-hero { padding: 48px 0 40px; }
  .lr-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .lr-hero__media { max-width: 360px; }
  .lr .lr-h1 { font-size: 36px; }
  .lr .lr-h2 { font-size: 28px; margin-bottom: 24px; }
  .lr-groups { grid-template-columns: 1fr; row-gap: 40px; }
  .lr-group[data-n] { grid-column: span 1; }
  .lr .lr-groups { row-gap: 40px; }
  .lr .lr-locations .jet-listing-grid__item:not(:first-child) > [data-elementor-type] > .lr-country { margin-top: 56px; }
  .lr-country + .lr-country { margin-top: 56px; }
  .lr .lr-locations, .lr .lr-section.lr-locations.e-con { padding-top: 32px; }
  .lr-steps { grid-template-columns: 1fr; gap: 28px; }
  .lr-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding-top: 20px; }
  .lr-step__n { grid-row: span 2; font-size: 32px; margin: 0; }
  .lr-reviews { grid-template-columns: 1fr; }
  .lr-review { grid-column: 1; padding: 20px 0; border-left: 0; }
  .lr-review:first-child { grid-row: auto; position: static; padding-bottom: 28px; }
  .lr-review:nth-child(2) { padding-top: 20px; border-top: 1px solid var(--line); }
  .lr-review:first-child blockquote { font-size: 22px; }
  /* six product cards stacked were ~2,000px of scrolling: a swipeable row instead */
  .lr-products { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 12px; }
  .lr-products > li { scroll-snap-align: start; }
  .lr-areas { grid-template-columns: 1fr; gap: 24px; }
  .lr .lr-faq details p { padding-right: 0; }
  .lr-browse { flex-direction: column; align-items: flex-start; }
}