/* ==========================================================================
   Office Locations & Contacts  (/company/locations/)

   The ninth Company child. Shared: the banner (page-banner.css) and Related
   (product-family.css). Page-local:
     .loc-routes / .loc-route   the sales / support split, stated once
     .loc-region / .loc-card    one band per region, one card per location
     .loc-enquiry / .loc-form   the enquiry form (js/contact-route.js)

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner        white          §5  Europe        white
     §2  sales/support neutral-2-100  §6  enquiry       neutral-2-100
     §3  The Americas  white          §7  related       white
     §4  Asia          neutral-2-100
   ========================================================================== */

#americas,#asia,#europe,#enquiry,.loc-card{scroll-margin-top:96px}

/* phones: the large buttons can be wider than a 320px column; let them wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   Band frame (§2 to §6)
   -------------------------------------------------------------------------- */
.loc-routes,.loc-region,.loc-enquiry{padding-block:48px}
.loc-routes__inner,.loc-region__inner,.loc-enquiry__inner{grid-column-end:span var(--ps-grid-columns)}
@media (min-width:640px){.loc-routes,.loc-region,.loc-enquiry{padding-block:64px}}
@media (min-width:1024px){.loc-routes,.loc-region,.loc-enquiry{padding-block:80px}}
@media (min-width:1350px){
  .loc-routes__inner,.loc-region__inner,.loc-enquiry__inner,
  .loc-related .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}
.loc-routes__title,.loc-region__title,.loc-enquiry__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.loc-routes__title{margin-bottom:24px}
.loc-region__lead,.loc-enquiry__lead{color:var(--ps-color-secondary-5-500);margin:0 0 28px;max-width:70ch}

/* --------------------------------------------------------------------------
   §2 Sales or support: two blocks side by side from 768
   -------------------------------------------------------------------------- */
.loc-routes__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:768px){.loc-routes__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.loc-route{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;padding:24px 22px;
}
.loc-route__name{margin:0 0 8px;font:500 20px/28px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.loc-route__body{margin:0 0 16px;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.loc-route__list{margin:0 0 18px;display:grid;gap:8px}
.loc-route__list div{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:12px;font:400 14px/22px var(--ps-font);letter-spacing:normal}
.loc-route__list dt{font-weight:500}
.loc-route__list dd{margin:0;color:var(--ps-color-secondary-5-500);overflow-wrap:anywhere}
.loc-route__list a,.loc-card__fields a,.loc-form__support a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.loc-route__list a:hover,.loc-card__fields a:hover,.loc-form__support a:hover{color:var(--ps-color-brand-500)}
.loc-route__links{display:flex;flex-wrap:wrap;gap:8px 24px}
.loc-route__link{margin-top:auto;align-self:flex-start}
.loc-route__links .loc-route__link{margin-top:0}
.loc-route__links{margin-top:auto}

/* --------------------------------------------------------------------------
   §3-§5 Location cards: 1 / 2 / 3 across
   -------------------------------------------------------------------------- */
.loc-region__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.loc-region__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.loc-region__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.loc-card{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;padding:22px 20px;
}
.loc-card:target{box-shadow:inset 0 3px 0 var(--ps-color-brand-500)}
.loc-card__type{
  margin:0 0 8px;align-self:flex-start;
  font:500 11px/18px var(--ps-font);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ps-color-secondary-5-500);
}
.loc-card--hq .loc-card__type{color:var(--ps-color-brand-600)}
.loc-card--dist .loc-card__type{padding:1px 8px;border:1px solid var(--ps-color-neutral-2-500);border-radius:999px;color:var(--ps-color-neutral-3-500)}
.loc-card__name{margin:0 0 10px;font:500 17px/25px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.loc-card__territory{margin:0 0 10px;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.loc-card__key{display:block;font:500 11px/18px var(--ps-font);letter-spacing:.04em;text-transform:uppercase;color:var(--ps-color-secondary-5-500)}
.loc-card__address{margin:0 0 12px;font:400 14px/22px var(--ps-font);font-style:normal;letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.loc-card__fields{margin:0 0 16px;display:grid;gap:4px}
.loc-card__fields div{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:10px;font:400 14px/22px var(--ps-font);letter-spacing:normal}
.loc-card__fields dt{font-weight:500;color:var(--ps-color-neutral-3-500)}
.loc-card__fields dd{margin:0;color:var(--ps-color-secondary-5-500);overflow-wrap:anywhere}
.loc-card__contact{margin-top:auto;align-self:flex-start}

/* --------------------------------------------------------------------------
   §6 Enquiry form (the FTCO expert form's field styles, page-local)
   -------------------------------------------------------------------------- */
.loc-enquiry__head{max-width:70ch}
.loc-form{
  max-width:760px;display:flex;flex-direction:column;gap:16px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;padding:24px 20px;
}
@media (min-width:640px){.loc-form{padding:32px 28px}}
.loc-form__req{margin:0;font:400 12px/18px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.loc-form__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:640px){
  .loc-form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loc-form__field--wide{grid-column:1 / -1}
}
.loc-form__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.loc-form__label{font:500 13px/18px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.loc-form__input{
  width:100%;min-width:0;box-sizing:border-box;
  font:400 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:8px;padding:10px 12px;
  transition:border-color .2s ease-out;
}
.loc-form__textarea{resize:vertical;min-height:120px}
.loc-form__input:hover{border-color:var(--ps-color-neutral-2-500)}
.loc-form__input:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:1px;border-color:transparent}
.loc-form__support{margin:0;padding:12px 14px;border-radius:8px;background:var(--ps-color-neutral-2-100);font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.loc-form__support[hidden]{display:none}
.loc-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.loc-form__send{max-width:100%}
.loc-form__send[hidden]{display:none}
.loc-form__send .ps-btn__text{white-space:normal;min-width:0}
.loc-form__status{margin:0;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.loc-form__status:empty{display:none}

/* §7 Related: four tiles; the shared list goes five across at 1024 */
@media (min-width:640px){.loc-related .pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.loc-related .pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.loc-routes,.loc-region--asia,.loc-enquiry{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.loc-region--americas,.loc-region--europe,.loc-related{background:var(--sv-white)}