:root {
  --oc-blue: #4f56f6;
  --oc-violet: #7957f6;
  --oc-cyan: #18b2c7;
  --oc-navy: #0f1834;
  --oc-ink: #111a34;
  --oc-muted: #5f6880;
  --oc-line: #dfe4f2;
  --oc-soft: #f5f7ff;
  --oc-paper: #ffffff;
}

body[data-page="overseas-consumer"] {
  color: var(--oc-ink);
  background: #fff;
}

body[data-page="overseas-consumer"] .brand-lockup-art {
  width: 148px;
  height: 52px;
  object-fit: contain;
}

body[data-page="overseas-consumer"] .main-nav {
  gap: clamp(16px, 2vw, 28px);
}

body[data-page="overseas-consumer"] .main-nav > a {
  font-size: 13.5px;
}

body[data-page="overseas-consumer"] :focus-visible {
  outline: 3px solid rgba(24, 178, 199, .68);
  outline-offset: 4px;
}

.oc-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 18%, rgba(122, 87, 246, .16), transparent 29%),
    radial-gradient(circle at 9% 86%, rgba(24, 178, 199, .12), transparent 28%),
    linear-gradient(132deg, #fbfcff 0%, #f5f7ff 49%, #fff 100%);
  border-bottom: 1px solid #e8ebf5;
}

.oc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .42;
  background-image:
    linear-gradient(rgba(79, 86, 246, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 86, 246, .06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 78%, transparent);
}

.oc-hero-glow,
.oc-hero-glow i {
  position: absolute;
  pointer-events: none;
}

.oc-hero-glow {
  inset: 0;
  z-index: -1;
}

.oc-hero-glow i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(79, 86, 246, .2);
  box-shadow: 0 0 36px 14px rgba(79, 86, 246, .13);
}

.oc-hero-glow i:nth-child(1) { left: 9%; top: 24%; }
.oc-hero-glow i:nth-child(2) { right: 14%; top: 16%; background: rgba(24, 178, 199, .23); }
.oc-hero-glow i:nth-child(3) { left: 48%; bottom: 12%; }

.oc-hero-grid {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr);
  align-items: center;
  gap: clamp(44px, 6vw, 88px);
  padding-block: clamp(72px, 8vw, 112px);
}

.oc-hero-copy {
  position: relative;
  z-index: 2;
}

.oc-hero-copy h1 {
  max-width: 720px;
  margin-top: 22px;
  font-size: clamp(48px, 5.7vw, 78px);
  line-height: 1.06;
}

.oc-hero-copy h1 strong {
  color: transparent;
  background: linear-gradient(92deg, #3848ed, #7957f6 58%, #16a9c3);
  -webkit-background-clip: text;
  background-clip: text;
}

.oc-hero-copy > p {
  max-width: 650px;
  margin-top: 25px;
  color: #424e68;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.8;
}

.oc-hero-note {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(79, 86, 246, .18);
}

.oc-hero-note b {
  color: #273cd4;
  font-size: 13px;
}

.oc-hero-note span {
  color: #69738a;
  font-size: 13px;
}

.oc-validation-unit {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 27px;
  border: 1px solid rgba(79, 86, 246, .2);
  border-radius: 34px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 32px 90px rgba(39, 52, 112, .14);
  backdrop-filter: blur(18px);
}

.oc-validation-unit::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(24, 178, 199, .12);
  border-radius: 25px;
}

.oc-validation-unit figcaption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--oc-line);
}

.oc-validation-unit figcaption span {
  color: #5360df;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}

.oc-validation-unit figcaption b {
  font-size: 14px;
}

.oc-unit-core {
  position: relative;
  z-index: 2;
  width: 194px;
  height: 194px;
  margin: 34px auto 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 25%, rgba(255, 255, 255, .24), transparent 24%),
    linear-gradient(145deg, #3848ed, #7453ee 62%, #13a8c5);
  box-shadow: 0 18px 55px rgba(79, 86, 246, .28), 0 0 0 14px rgba(79, 86, 246, .07);
}

.oc-unit-core::after {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px dashed rgba(255, 255, 255, .5);
  border-radius: inherit;
}

.oc-unit-core small,
.oc-unit-core strong,
.oc-unit-core span {
  position: relative;
  z-index: 1;
}

.oc-unit-core small {
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .72;
}

.oc-unit-core strong {
  margin-top: 6px;
  font-size: 31px;
}

.oc-unit-core span {
  max-width: 120px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  opacity: .88;
}

.oc-validation-unit ol {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  list-style: none;
}

.oc-validation-unit li {
  min-width: 0;
  padding: 13px 8px;
  text-align: center;
  border: 1px solid #e2e6f2;
  border-radius: 13px;
  background: #fff;
}

.oc-validation-unit li i,
.oc-validation-unit li b,
.oc-validation-unit li small {
  display: block;
  font-style: normal;
}

.oc-validation-unit li i {
  color: #6070ec;
  font-size: 9px;
  font-weight: 850;
}

.oc-validation-unit li b {
  margin-top: 6px;
  font-size: 13px;
}

.oc-validation-unit li small {
  margin-top: 3px;
  color: #7a8398;
  font-size: 9.5px;
  line-height: 1.35;
}

.oc-validation-unit > p {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  color: #59627a;
  font-size: 11px;
  line-height: 1.5;
}

.oc-validation-unit > p span {
  color: #5560dd;
  font-weight: 800;
}

.oc-validation-unit > p i {
  color: #16a9c3;
  font-size: 20px;
  font-style: normal;
}

.oc-friction,
.oc-journey,
.oc-method,
.oc-execution,
.oc-works,
.oc-boundary,
.oc-start {
  padding-block: clamp(76px, 8vw, 120px);
}

.oc-friction {
  background: #fff;
}

.oc-section-head {
  max-width: 900px;
  margin-bottom: clamp(34px, 4vw, 54px);
}

.oc-section-head > span,
.oc-boundary-copy > span,
.oc-start-grid > div > span {
  display: block;
  color: #4f5cdf;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
}

.oc-section-head h2 {
  margin-top: 13px;
  color: var(--oc-ink);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.15;
}

.oc-section-head > p,
.oc-section-head > div + p {
  margin-top: 17px;
  max-width: 790px;
  color: var(--oc-muted);
  font-size: 17px;
}

.oc-section-head.is-row {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr);
  align-items: end;
  gap: 42px;
}

.oc-section-head.is-row > p {
  margin: 0;
}

.oc-friction-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid #cfd5e7;
  border-bottom: 1px solid #cfd5e7;
}

.oc-friction-rail article {
  position: relative;
  min-width: 0;
  padding: 29px 21px 32px;
  border-right: 1px solid #dfe3ef;
}

.oc-friction-rail article:last-child {
  border-right: 0;
}

.oc-friction-rail span {
  color: #6371e8;
  font-size: 11px;
  font-weight: 850;
}

.oc-friction-rail b {
  display: block;
  margin-top: 18px;
  font-size: 18px;
}

.oc-friction-rail p {
  margin-top: 10px;
  color: #697188;
  font-size: 13px;
  line-height: 1.7;
}

.oc-journey {
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 4%, rgba(24, 178, 199, .1), transparent 24%),
    var(--oc-soft);
  border-block: 1px solid #e7eaf5;
}

.oc-journey-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 38px 0 0;
  list-style: none;
}

.oc-journey-track::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 59px;
  height: 2px;
  background: linear-gradient(90deg, #4f56f6, #7957f6 48%, #18b2c7);
}

.oc-journey-track li {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 14px;
  text-align: center;
}

.oc-journey-track i {
  width: 43px;
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 6px solid var(--oc-soft);
  border-radius: 50%;
  background: #505bf1;
  box-sizing: content-box;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.oc-journey-track li:nth-child(n+4) i {
  background: #18a9c2;
}

.oc-journey-track b,
.oc-journey-track small,
.oc-journey-track span {
  display: block;
}

.oc-journey-track b {
  margin-top: 18px;
  color: var(--oc-ink);
  font-size: 20px;
}

.oc-journey-track small {
  margin-top: 5px;
  color: #626c85;
  font-size: 12px;
}

.oc-journey-track span {
  margin-top: 12px;
  color: #7a8297;
  font-size: 11px;
  line-height: 1.55;
}

.oc-journey-key {
  width: max-content;
  max-width: 100%;
  margin: 50px auto 0;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px 15px;
  border: 1px solid #dce1f2;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 13px 35px rgba(36, 49, 108, .06);
  color: #3f4961;
  font-size: 13px;
}

.oc-journey-key i {
  color: #6c72e6;
  font-style: normal;
  font-weight: 900;
}

.oc-method {
  background: #fff;
}

.oc-method-layout {
  display: grid;
  grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(48px, 7vw, 100px);
}

.oc-method-intro {
  position: sticky;
  top: 112px;
  margin-bottom: 0;
}

.oc-method-intro .text-link {
  margin-top: 22px;
}

.oc-method-track {
  position: relative;
  padding: 0;
  list-style: none;
  border-top: 1px solid #d9deeb;
}

.oc-method-track::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 36px;
  bottom: 36px;
  width: 1px;
  background: linear-gradient(#505bf1, #7957f6 48%, #18a9c2);
}

.oc-method-track li {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(150px, .38fr);
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid #d9deeb;
}

.oc-method-track i {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 8px solid #fff;
  border-radius: 50%;
  background: #515bf0;
  box-sizing: border-box;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.oc-method-track li:nth-child(n+4) i {
  background: #16a9c1;
}

.oc-method-track b {
  display: block;
  font-size: 19px;
}

.oc-method-track p {
  margin-top: 6px;
  color: #5f6880;
  font-size: 14px;
  line-height: 1.65;
}

.oc-method-track small {
  color: #6370de;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.55;
}

.oc-execution {
  color: #fff;
  background:
    radial-gradient(circle at 7% 12%, rgba(78, 91, 242, .28), transparent 28%),
    radial-gradient(circle at 92% 88%, rgba(24, 178, 199, .17), transparent 31%),
    #111a35;
}

.oc-execution .oc-section-head h2 {
  color: #fff;
}

.oc-execution .oc-section-head > span {
  color: #8d98ff;
}

.oc-execution .oc-section-head > p,
.oc-execution .oc-section-head > div + p {
  color: #b8c0d8;
}

.oc-execution-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.oc-execution-map article {
  min-width: 0;
  padding: clamp(27px, 3.5vw, 45px);
  border-right: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .025);
}

.oc-execution-map article > i {
  color: #7fd7e6;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .12em;
}

.oc-execution-map h3 {
  margin-top: 13px;
  color: #fff;
  font-size: 26px;
}

.oc-execution-map p {
  margin-top: 12px;
  color: #bec6db;
  font-size: 15px;
}

.oc-execution-map b {
  display: inline-block;
  margin-top: 21px;
  color: #8d98ff;
  font-size: 11px;
}

.oc-execution-map b + span {
  display: inline;
  margin-left: 8px;
  color: #e0e5f4;
  font-size: 12px;
  line-height: 1.6;
}

.oc-resource-network {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 20px;
}

.oc-resource-input,
.oc-resource-output {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  text-align: center;
}

.oc-resource-input span,
.oc-resource-output span {
  width: 100%;
  color: #8d98ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.oc-resource-input b,
.oc-resource-output b {
  font-size: 11px;
}

.oc-resource-input i,
.oc-resource-output i {
  color: #6d7692;
  font-style: normal;
}

.oc-resource-core {
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(129, 141, 255, .62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 24%, rgba(255, 255, 255, .12), transparent 24%),
    linear-gradient(145deg, rgba(79, 86, 246, .64), rgba(22, 169, 193, .35));
  box-shadow: 0 0 0 13px rgba(110, 121, 244, .07);
}

.oc-resource-core::before,
.oc-resource-core::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: #6d78db;
}

.oc-resource-core::before { right: 100%; }
.oc-resource-core::after { left: 100%; }

.oc-resource-core small {
  color: #9de3ee;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.oc-resource-core h3 {
  max-width: 280px;
  margin-top: 10px;
  color: #fff;
  font-size: 24px;
}

.oc-resource-core p {
  max-width: 340px;
  margin-top: 10px;
  color: #d4daeb;
  font-size: 12px;
  line-height: 1.65;
}

.oc-resource-note {
  max-width: 900px;
  margin: 32px auto 0;
  color: #aeb8d1;
  font-size: 12px;
  text-align: center;
}

.oc-works {
  overflow: hidden;
  background: #fff;
}

.oc-work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.oc-work-card {
  grid-column: span 5;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--oc-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(32, 44, 99, .07);
}

.oc-work-card.is-wide {
  grid-column: span 7;
}

.oc-work-card.is-portrait {
  grid-column: span 5;
}

.oc-work-card > a {
  display: block;
  overflow: hidden;
  background: #e9edf7;
}

.oc-work-card img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform .5s ease;
}

.oc-work-card.is-portrait img,
.oc-work-card.is-note img {
  object-position: center 34%;
}

.oc-work-card a:hover img {
  transform: scale(1.025);
}

.oc-work-card > div {
  padding: clamp(22px, 3vw, 32px);
}

.oc-work-card > div > span {
  color: #5663dc;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.oc-work-card h3 {
  margin-top: 9px;
  font-size: 24px;
}

.oc-work-card dl {
  margin: 20px 0 0;
  border-top: 1px solid #e2e6ef;
}

.oc-work-card dl > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #edf0f6;
}

.oc-work-card dt {
  color: #6770dc;
  font-size: 11px;
  font-weight: 800;
}

.oc-work-card dd {
  margin: 0;
  color: #515b71;
  font-size: 12px;
  line-height: 1.6;
}

.oc-work-card > div > p {
  margin-top: 17px;
  color: #7b8295;
  font-size: 11px;
  line-height: 1.55;
}

.oc-works-action {
  margin-top: 34px;
  text-align: center;
}

.oc-boundary {
  color: #fff;
  background: #10172c;
}

.oc-boundary-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 50px 80px;
}

.oc-boundary-copy > span {
  color: #8b96ff;
}

.oc-boundary-copy h2 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(34px, 4vw, 52px);
}

.oc-boundary-copy p {
  margin-top: 18px;
  color: #b7bfd5;
  font-size: 16px;
}

.oc-boundary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-left: 1px solid rgba(255, 255, 255, .2);
}

.oc-boundary-list article {
  padding: 24px;
  border-right: 1px solid rgba(255, 255, 255, .2);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.oc-boundary-list b {
  font-size: 14px;
}

.oc-boundary-list p {
  margin-top: 8px;
  color: #b4bdd3;
  font-size: 12px;
  line-height: 1.65;
}

.oc-boundary-statement {
  grid-column: 1 / -1;
  padding: 20px 24px;
  color: #c7cfe1;
  border: 1px solid rgba(139, 150, 255, .35);
  border-radius: 16px;
  background: rgba(139, 150, 255, .07);
  font-size: 13px;
  line-height: 1.75;
}

.oc-start {
  background:
    radial-gradient(circle at 90% 20%, rgba(24, 178, 199, .1), transparent 28%),
    linear-gradient(135deg, #f7f8ff, #fff);
}

.oc-start-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  align-items: start;
  gap: clamp(45px, 7vw, 90px);
}

.oc-start-grid > div > span {
  color: #5360df;
}

.oc-start-grid > div h2 {
  margin-top: 14px;
  font-size: clamp(38px, 4.4vw, 58px);
}

.oc-start-grid > div p {
  margin-top: 17px;
  color: #5d667f;
  font-size: 17px;
}

.oc-start-grid > div .btn {
  margin-top: 25px;
}

.oc-brief-builder {
  padding: clamp(25px, 3.5vw, 40px);
  border: 1px solid #dce1ef;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(31, 45, 105, .08);
}

.oc-brief-builder fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.oc-brief-builder legend {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 17px;
  color: var(--oc-ink);
  font-size: 20px;
  font-weight: 800;
}

.oc-brief-builder label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #3d4760;
  font-size: 12px;
  font-weight: 750;
}

.oc-brief-builder input,
.oc-brief-builder select,
.oc-brief-builder textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  color: #26314c;
  border: 1px solid #d6ddeb;
  border-radius: 11px;
  background: #fbfcff;
  font-size: 14px;
}

.oc-brief-builder > p {
  margin-top: 15px;
  color: #7b8295;
  font-size: 11px;
  line-height: 1.55;
}

.oc-brief-output {
  margin-top: 21px;
  padding-top: 20px;
  border-top: 1px solid #e0e4ef;
}

.oc-brief-output[hidden] {
  display: none;
}

.oc-brief-output textarea {
  min-height: 148px;
  resize: vertical;
  line-height: 1.65;
}

.oc-brief-output button {
  min-height: 42px;
  margin-top: 10px;
  padding: 0 16px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: #515bf0;
  cursor: pointer;
  font-weight: 750;
}

.oc-brief-output span {
  margin-left: 10px;
  color: #697188;
  font-size: 11px;
}

@media (max-width: 1080px) {
  .oc-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr);
    gap: 38px;
  }

  .oc-hero-copy h1 {
    font-size: clamp(45px, 5.8vw, 66px);
  }

  .oc-validation-unit {
    padding: 23px;
  }

  .oc-unit-core {
    width: 172px;
    height: 172px;
  }

  .oc-friction-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid #dfe3ef;
  }

  .oc-friction-rail article,
  .oc-friction-rail article:last-child {
    border-right: 1px solid #dfe3ef;
    border-bottom: 1px solid #dfe3ef;
  }

  .oc-friction-rail article:nth-child(n+4) {
    border-bottom: 0;
  }

  .oc-method-layout {
    grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
    gap: 48px;
  }

  .oc-work-card img {
    height: 270px;
  }
}

@media (max-width: 820px) {
  body[data-page="overseas-consumer"] .brand-lockup-art {
    width: 130px;
    height: 46px;
  }

  .oc-hero-grid {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-block: 66px 76px;
  }

  .oc-hero-copy {
    max-width: 680px;
  }

  .oc-validation-unit {
    max-width: 680px;
    margin-inline: auto;
  }

  .oc-section-head.is-row,
  .oc-method-layout,
  .oc-boundary-grid,
  .oc-start-grid {
    grid-template-columns: 1fr;
  }

  .oc-section-head.is-row {
    gap: 18px;
  }

  .oc-method-intro {
    position: static;
  }

  .oc-journey-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px 0;
  }

  .oc-journey-track::before {
    display: none;
  }

  .oc-journey-track li {
    padding-inline: 18px;
  }

  .oc-resource-network {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }

  .oc-resource-core {
    width: min(390px, 80vw);
    min-height: 250px;
    margin-inline: auto;
  }

  .oc-resource-core::before,
  .oc-resource-core::after {
    left: 50%;
    top: auto;
    width: 1px;
    height: 20px;
  }

  .oc-resource-core::before { bottom: 100%; }
  .oc-resource-core::after { top: 100%; }

  .oc-work-card,
  .oc-work-card.is-wide,
  .oc-work-card.is-portrait {
    grid-column: span 6;
  }

  .oc-boundary-grid {
    gap: 38px;
  }

  .oc-boundary-statement {
    grid-column: auto;
  }

  .oc-start-grid {
    gap: 38px;
  }
}

@media (max-width: 600px) {
  .oc-hero-grid {
    gap: 34px;
    padding-block: 50px 62px;
  }

  .oc-hero-copy .eyebrow {
    font-size: 10px;
  }

  .oc-hero-copy h1 {
    margin-top: 17px;
    font-size: clamp(39px, 12vw, 52px);
    line-height: 1.08;
  }

  .oc-hero-copy > p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.72;
  }

  .oc-hero-copy .actions {
    flex-direction: column;
  }

  .oc-hero-copy .actions .btn {
    width: 100%;
  }

  .oc-validation-unit {
    padding: 20px 15px;
    border-radius: 24px;
  }

  .oc-validation-unit figcaption {
    display: block;
    padding-inline: 7px;
  }

  .oc-validation-unit figcaption b {
    display: block;
    margin-top: 6px;
    font-size: 13px;
  }

  .oc-unit-core {
    width: 158px;
    height: 158px;
    margin-block: 30px 22px;
  }

  .oc-unit-core strong {
    font-size: 27px;
  }

  .oc-validation-unit ol {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .oc-validation-unit li {
    padding: 10px 3px;
    border-radius: 9px;
  }

  .oc-validation-unit li b {
    font-size: 11px;
  }

  .oc-validation-unit li small {
    font-size: 8px;
  }

  .oc-validation-unit > p {
    align-items: flex-start;
    padding-inline: 7px;
    text-align: left;
  }

  .oc-friction,
  .oc-journey,
  .oc-method,
  .oc-execution,
  .oc-works,
  .oc-boundary,
  .oc-start {
    padding-block: 68px;
  }

  .oc-section-head h2,
  .oc-boundary-copy h2 {
    font-size: 34px;
    line-height: 1.18;
  }

  .oc-section-head > p,
  .oc-section-head > div + p,
  .oc-boundary-copy p,
  .oc-start-grid > div p {
    font-size: 16px;
  }

  .oc-friction-rail {
    grid-template-columns: 1fr;
  }

  .oc-friction-rail article,
  .oc-friction-rail article:nth-child(n+4),
  .oc-friction-rail article:last-child {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px 10px;
    padding: 20px 17px;
    border-bottom: 1px solid #dfe3ef;
  }

  .oc-friction-rail article:last-child {
    border-bottom: 0;
  }

  .oc-friction-rail span {
    grid-row: span 2;
    padding-top: 3px;
  }

  .oc-friction-rail b,
  .oc-friction-rail p {
    margin: 0;
  }

  .oc-friction-rail b {
    font-size: 17px;
  }

  .oc-journey-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 31px 0;
    padding-top: 20px;
  }

  .oc-journey-track li {
    padding-inline: 8px;
  }

  .oc-journey-track b {
    font-size: 18px;
  }

  .oc-journey-key {
    width: 100%;
    border-radius: 18px;
    font-size: 12px;
  }

  .oc-method-track::before {
    left: 23px;
  }

  .oc-method-track li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding-block: 20px;
  }

  .oc-method-track i {
    width: 48px;
    height: 48px;
    border-width: 6px;
  }

  .oc-method-track small {
    grid-column: 2;
    margin-top: -8px;
  }

  .oc-execution-map {
    grid-template-columns: 1fr;
  }

  .oc-execution-map h3 {
    font-size: 24px;
  }

  .oc-resource-core {
    width: min(270px, 76vw);
    min-height: 270px;
  }

  .oc-work-grid {
    grid-template-columns: 1fr;
  }

  .oc-work-card,
  .oc-work-card.is-wide,
  .oc-work-card.is-portrait {
    grid-column: 1;
  }

  .oc-work-card img {
    height: auto;
    max-height: 330px;
    object-fit: cover;
  }

  .oc-work-card dl > div {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .oc-boundary-list,
  .oc-brief-builder fieldset {
    grid-template-columns: 1fr;
  }

  .oc-boundary-statement {
    padding: 18px;
  }

  .oc-start-grid > div .btn {
    width: 100%;
  }

  .oc-brief-builder {
    padding: 22px 17px;
    border-radius: 20px;
  }

  .oc-brief-output button {
    width: 100%;
  }

  .oc-brief-output span {
    display: block;
    margin: 8px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oc-work-card img,
  .btn { transition: none !important; }
  .oc-work-card a:hover img,
  .btn:hover { transform: none !important; }
}