/* Office locations suite: intentionally scoped to this component only. */
.sto-office-suite {
  padding: clamp(64px, 8vw, 112px) 0;
  background: linear-gradient(135deg, #f8faf4 0%, #eef6f0 48%, #edf5f7 100%);
  color: var(--sto-ink);
}
.sto-office-suite .sto-office-suite__header { max-width: 860px; margin-bottom: clamp(30px, 4vw, 48px); }
.sto-office-suite .sto-office-suite__header h2 {
  margin: 0 0 13px; color: var(--sto-navy); font-family: var(--sto-serif);
  font-size: clamp(28px, 3vw, 32px); font-weight: 600; letter-spacing: .035em; line-height: 1.42;
}
.sto-office-suite .sto-office-suite__header p {
  max-width: 760px; margin: 0; color: var(--sto-muted); font-size: 16px; line-height: 1.9;
}

.sto-office-suite .sto-office-suite__cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.sto-office-suite .sto-office-card {
  display: grid; grid-template-rows: auto auto auto minmax(4.4rem, auto) minmax(3.6rem, auto) 1fr auto;
  min-width: 0; padding: clamp(21px, 2.2vw, 30px); border: 1px solid rgba(102, 141, 137, .32);
  border-top: 2px solid var(--sto-copper); border-radius: 8px; background: rgba(255, 253, 250, .76);
}
.sto-office-suite .sto-office-card,
.sto-office-suite .sto-office-guide,
.sto-office-suite .sto-office-guides { scroll-margin-top: 220px; }
.sto-office-suite .sto-office-card__top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px;
}
.sto-office-suite .sto-office-card__number {
  color: #84602e; font: 600 28px/1 var(--sto-sans); letter-spacing: .08em;
}
.sto-office-suite .sto-office-card__locale,
.sto-office-suite .sto-office-card__service span {
  color: var(--sto-green); font-size: 12px; font-weight: 700; letter-spacing: .05em; line-height: 1.55;
}
.sto-office-suite .sto-office-card__locale {
  padding: 4px 8px; border: 1px solid rgba(23, 102, 77, .26); border-radius: 5px;
  background: rgba(232, 243, 235, .82); text-align: right;
}
.sto-office-suite .sto-office-card h3 {
  margin: 0 0 10px; color: var(--sto-navy); font-family: var(--sto-serif);
  font-size: clamp(22px, 1.85vw, 29px); font-weight: 600; letter-spacing: .02em; line-height: 1.45;
}
.sto-office-suite .sto-office-card__service { min-height: 24px; margin: 0 0 14px; }
.sto-office-suite .sto-office-card__service span {
  display: inline-block; padding: 3px 8px; border-left: 2px solid var(--sto-copper);
  background: rgba(229, 193, 148, .17);
}
.sto-office-suite .sto-office-card__address {
  display: flex; align-items: flex-start; gap: 9px; min-width: 0; color: var(--sto-ink);
  font-size: 16px; font-weight: 600; line-height: 1.75;
}
.sto-office-suite .sto-office-card__address > svg,
.sto-office-suite .sto-office-card__phones svg {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: .45em; color: var(--sto-copper);
}
.sto-office-suite .sto-office-card__address span { min-width: 0; }
.sto-office-suite .sto-office-card__address::after {
  flex: 0 0 auto; align-self: center; content: "↗"; color: var(--sto-copper); font-size: 15px;
}
.sto-office-suite .sto-office-card__address:hover,
.sto-office-suite .sto-office-card__address:focus-visible {
  color: #0b506d; text-decoration: underline; text-decoration-color: var(--sto-copper); text-underline-offset: 4px;
}
.sto-office-suite .sto-office-card__english {
  margin: 11px 0 14px 26px; color: var(--sto-muted); font-size: 14px; line-height: 1.7;
}
.sto-office-suite .sto-office-card__phones {
  display: grid; align-self: end; gap: 3px; margin: 0 0 17px; padding-top: 14px;
  border-top: 1px solid rgba(113, 146, 143, .28);
}
.sto-office-suite .sto-office-card__phones small { color: var(--sto-muted); font-size: 11px; letter-spacing: .08em; }
.sto-office-suite .sto-office-card__phones a {
  display: flex; align-items: flex-start; gap: 8px; min-height: 27px; color: var(--sto-navy);
  font-size: 16px; font-weight: 600; line-height: 1.65;
}
.sto-office-suite .sto-office-card__phones a:hover,
.sto-office-suite .sto-office-card__phones a:focus-visible {
  color: var(--sto-navy); text-decoration: underline; text-decoration-color: var(--sto-copper); text-underline-offset: 4px;
}
.sto-office-suite .sto-office-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 17px;
  border: 1px solid var(--sto-navy); border-radius: 6px; color: var(--sto-navy); font-size: 14px; font-weight: 700; line-height: 1.4;
}
.sto-office-suite .sto-office-action > svg { flex: 0 0 17px; width: 17px; height: 17px; }
.sto-office-suite a:focus-visible { outline: 2px solid #84602e; outline-offset: 3px; }
.sto-office-suite .sto-office-action:hover,
.sto-office-suite .sto-office-action:focus-visible {
  border-color: var(--sto-copper); background: var(--sto-navy); color: var(--sto-paper);
}

.sto-office-suite .sto-office-guides {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 48px);
}
.sto-office-suite .sto-office-guide {
  min-width: 0; padding: clamp(22px, 2.5vw, 32px); border: 1px solid rgba(229, 193, 148, .68);
  border-radius: 8px; background: var(--sto-navy); color: #e6efed;
}
.sto-office-suite .sto-office-guide > span { color: var(--sto-copper-light); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.sto-office-suite .sto-office-guide h3 {
  margin: 9px 0 13px; color: var(--sto-paper); font-family: var(--sto-serif);
  font-size: 22px; font-weight: 600; line-height: 1.45;
}
.sto-office-suite .sto-office-guide ol { margin: 0 0 15px; padding-left: 1.35em; font-size: 15px; line-height: 1.8; }
.sto-office-suite .sto-office-guide li + li { margin-top: 4px; }
.sto-office-suite .sto-office-guide small { color: #c7d8d5; font-size: 12px; line-height: 1.75; }

.sto-office-suite .sto-office-visit-notice {
  display: flex; align-items: center; gap: 17px; margin-top: 16px; padding: 18px 20px;
  border: 1px solid var(--sto-line); border-left: 3px solid var(--sto-copper); border-radius: 7px; background: rgba(255, 253, 250, .68);
}
.sto-office-suite .sto-office-visit-notice > svg { flex: 0 0 23px; width: 23px; height: 23px; color: var(--sto-copper); }
.sto-office-suite .sto-office-visit-notice > div { flex: 1 1 280px; min-width: 0; }
.sto-office-suite .sto-office-visit-notice h3 { margin: 0 0 2px; color: var(--sto-navy); font-size: 16px; }
.sto-office-suite .sto-office-visit-notice p { margin: 0; color: var(--sto-muted); font-size: 14px; line-height: 1.7; }
.sto-office-suite .sto-office-action--navy { border-color: var(--sto-navy); background: var(--sto-navy); color: var(--sto-paper); white-space: nowrap; }
.sto-office-suite .sto-office-action--navy:hover,
.sto-office-suite .sto-office-action--navy:focus-visible { background: #164351; color: var(--sto-paper); }

.sto-office-suite .sto-office-network,
.sto-office-suite .sto-office-quick-contact {
  display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 2fr); gap: 24px; align-items: start;
  margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid rgba(113, 146, 143, .35);
}
.sto-office-suite .sto-office-network h3,
.sto-office-suite .sto-office-quick-contact h3 {
  margin: 0 0 6px; color: var(--sto-navy); font-family: var(--sto-serif); font-size: 20px; font-weight: 600; line-height: 1.45;
}
.sto-office-suite .sto-office-network p,
.sto-office-suite .sto-office-quick-contact p { margin: 0; color: var(--sto-muted); font-size: 14px; line-height: 1.75; }
.sto-office-suite .sto-office-network nav,
.sto-office-suite .sto-office-quick-contact__links { display: flex; flex-wrap: wrap; gap: 9px; }
.sto-office-suite .sto-office-network nav a {
  display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--sto-line); border-radius: 6px;
  background: rgba(255, 253, 250, .7); color: var(--sto-ink); font-size: 13px; overflow: hidden;
}
.sto-office-suite .sto-office-network nav a span { padding: 7px 9px; color: var(--sto-muted); }
.sto-office-suite .sto-office-network nav a span:first-child {
  border-right: 1px solid var(--sto-line); background: rgba(232, 238, 237, .75); color: var(--sto-green);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.sto-office-suite .sto-office-network nav a:hover,
.sto-office-suite .sto-office-network nav a:focus-visible { border-color: var(--sto-copper); background: #fff8ea; color: var(--sto-navy); }
.sto-office-suite .sto-office-quick-contact__links a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 13px;
  border: 1px solid var(--sto-line); border-radius: 6px; background: rgba(255, 253, 250, .7); color: var(--sto-navy); font-size: 14px; font-weight: 700;
}
.sto-office-suite .sto-office-quick-contact__links svg { width: 17px; height: 17px; color: var(--sto-copper); }
.sto-office-suite .sto-office-quick-contact__links a:hover,
.sto-office-suite .sto-office-quick-contact__links a:focus-visible { border-color: var(--sto-copper); background: #fff8ea; color: var(--sto-navy); text-decoration: underline; text-underline-offset: 3px; }
.sto-office-suite .sto-office-scope-note { margin: 26px 0 0; color: var(--sto-muted); font-size: 13px; line-height: 1.8; }

@media (max-width: 900px) {
  .sto-office-suite .sto-office-suite__cards { grid-template-columns: 1fr; }
  .sto-office-suite .sto-office-card { grid-template-rows: auto auto auto auto auto auto auto; }
  .sto-office-suite .sto-office-card,
  .sto-office-suite .sto-office-guide,
  .sto-office-suite .sto-office-guides { scroll-margin-top: 190px; }
  .sto-office-suite .sto-office-network,
  .sto-office-suite .sto-office-quick-contact { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .sto-office-suite { padding: 56px 0; }
  .sto-office-suite .sto-office-suite__header p { font-size: 15px; }
  .sto-office-suite .sto-office-card { padding: 20px; }
  .sto-office-suite .sto-office-guides { grid-template-columns: 1fr; }
  .sto-office-suite .sto-office-visit-notice { align-items: flex-start; flex-wrap: wrap; padding: 17px; }
  .sto-office-suite .sto-office-visit-notice .sto-office-action--navy { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sto-office-suite *, .sto-office-suite *::before, .sto-office-suite *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}