:root {
  color-scheme: light;
  --bg: #f6faf8;
  --surface: #fff;
  --ink: #112821;
  --muted: #425950;
  --line: #cddbd4;
  --accent: #006854;
  --accent-bg: #dff3eb;
  --serif: Georgia, "Times New Roman", serif;
  font: 100%/1.55 system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  accent-color: var(--accent);
}
[data-site="forwarder"] {
  --bg: #f7f8fa;
  --ink: #111f33;
  --muted: #46566c;
  --line: #d6dce4;
  --accent: #a83b0b;
  --accent-bg: #ffeadc;
}
[data-site="warehousing"] {
  --bg: #faf6ed;
  --surface: #fffcf6;
  --ink: #162d23;
  --muted: #46574d;
  --line: #ddd8cb;
  --accent: #225941;
  --accent-bg: #e3ebdc;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .12em; }
a, button, input, textarea { outline-offset: .24rem; }
:focus-visible { outline: .15rem solid var(--accent); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
figure { margin: 0; }
h1, h2, h3 { line-height: 1.1; text-wrap: balance; margin: 0 0 .55em; }
h1 { font: 700 clamp(2.4rem, 5vw, 4.75rem)/1.04 var(--serif); letter-spacing: -.035em; }
h2 { font: 700 clamp(1.55rem, 3vw, 2.25rem)/1.12 var(--serif); letter-spacing: -.022em; }
h3 { font-size: 1.15rem; }
.frame { width: min(90%, 77rem); margin: 0 auto; }
.narrow { width: min(100%, 49rem); margin-inline: auto; }
.skip { position: absolute; top: .5rem; left: .5rem; padding: .75rem; background: var(--surface); transform: translateY(-150%); z-index: 2; }
.skip:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.mast { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 4.75rem; }
.wordmark { display: inline-flex; gap: .6rem; align-items: center; color: var(--ink); text-decoration: none; font-weight: 750; font-size: clamp(1rem, 2.1vw, 1.3rem); }
.wordmark img { object-fit: contain; }
.mast nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.mast nav a { display: grid; align-items: center; min-height: 44px; font-weight: 650; }
.intro { color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.22rem); }
figcaption { font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.button, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid transparent; border-radius: .45rem; font-weight: 700; text-decoration: none; padding: .6rem 1rem; text-align: center; }
.button { background: var(--accent); color: #fff; }
.button:hover { filter: brightness(.9); }
.secondary { color: var(--accent); background: var(--surface); border-color: var(--line); }
.secondary:hover { background: var(--accent-bg); }
.home-copy section + section, .article section + section { margin-top: 2rem; }
.request { background: var(--accent-bg); border-radius: .9rem; padding: clamp(1rem, 3vw, 2rem); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
label { display: grid; align-content: start; gap: .25rem; font-weight: 650; min-width: 0; }
label:has(textarea) { grid-column: 1 / -1; }
small { color: var(--muted); font-weight: 450; }
input, textarea { width: 100%; min-height: 44px; padding: .45rem .55rem; border-radius: .3rem; border: 1px solid var(--muted); color: var(--ink); background: var(--surface); }
textarea { resize: vertical; }
fieldset { border: 1px solid var(--muted); border-radius: .35rem; margin: 0 0 1rem; padding: .75rem; min-width: 0; }
legend { font-weight: 650; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .75rem; }
.result { margin-top: 1.3rem; }
.guides, .questions { margin-block: clamp(2.5rem, 6vw, 5rem); }
.guides ul { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; }
.guides li, details { border-top: 1px solid var(--line); padding: 1rem 0 .25rem; }
.guides li p { margin-bottom: 0; color: var(--muted); }
summary { min-height: 44px; cursor: pointer; font-weight: 650; }
.article { padding-top: 2.5rem; }
.article nav { font-size: .9rem; margin-bottom: 1.4rem; }
.article h1 { font-size: clamp(2.1rem, 5.6vw, 3.8rem); }
.byline { margin-bottom: 2rem; font-size: .92rem; }
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 2rem; }
@media (max-width: 750px) {
}
@media (max-width: 460px) {
  .mast { align-items: flex-start; flex-direction: column; gap: 0; padding-top: .6rem; }
  .fields, .guides ul { grid-template-columns: 1fr; }
}

/* Each homepage uses the same service controls with its own visual hierarchy. */
[data-site="shipping-agent"] {
  --bg: #fff;
  --ink: #101d3b;
  --muted: #3e4759;
  --accent: #007664;
  --accent-bg: #def4ed;
}
[data-site="forwarder"] {
  --bg: #faf8f3;
  --ink: #101c32;
  --accent: #a23805;
  --accent-bg: #fff1e8;
  --night: #051d37;
  --orange: #ff761b;
}
[data-site="warehousing"] {
  --bg: #fbf6ec;
  --ink: #122e21;
  --accent: #155437;
  --accent-bg: #f9e7d5;
  --peach: #f1a174;
}
.home-page > main { width: 100%; }
.home-page .mast { width: min(96%, 100rem); min-height: 5.25rem; gap: clamp(.55rem, 2vw, 2rem); }
.home-page .wordmark { flex-shrink: 0; font-size: clamp(1.15rem, 2.35vw, 2.25rem); letter-spacing: -.035em; line-height: 1; }
.home-page .wordmark img { width: clamp(2.5rem, 4.6vw, 4.8rem); height: auto; }
.operator { padding: .45rem .8rem; border-radius: 2rem; background: var(--accent-bg); color: var(--ink); font-size: .9rem; white-space: nowrap; }
.home-page .mast nav { margin-left: auto; column-gap: clamp(.75rem, 2.2vw, 2rem); }
.home-page .mast nav a { color: var(--ink); text-decoration: none; }
.home-page .mast nav a:hover { text-decoration: underline; }
[data-site="shipping-agent"] .home-page .operator { order: 1; }
[data-site="warehousing"] .home-page .operator { order: 1; }
[data-site="warehousing"] .home-page .wordmark, [data-site="warehousing"] .home-page .mast nav { font-family: var(--serif); }
[data-site="forwarder"] .home-page .site-header { background: var(--night); border-color: #36516c; }
[data-site="forwarder"] .home-page .mast { width: min(91%, 100rem); min-height: 5rem; }
[data-site="forwarder"] .home-page .mast a { color: #fff; }
[data-site="forwarder"] .home-page .operator { background: transparent; color: #fff; border-left: 1px solid #7890aa; border-radius: 0; }
[data-site="forwarder"] .home-page .mast nav .button { background: var(--orange); color: var(--night); }
[data-site="forwarder"] .home-page .mast :focus-visible { outline-color: #fff; }

.process { background: var(--bg); border-bottom: 1px solid var(--line); }
.process ol { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; margin: 0 auto; width: min(96%, 100rem); padding: clamp(1rem, 2.2vw, 2rem) 0; }
.process li { display: flex; align-items: center; gap: clamp(.45rem, 1.2vw, 1.35rem); padding: 0 clamp(.5rem, 1.4vw, 1.5rem); }
.process li + li { border-left: 1px solid var(--line); }
.process strong { display: block; font-size: clamp(1.1rem, 2.05vw, 2.1rem); letter-spacing: -.03em; line-height: 1.18; }
.process p { margin: .4rem 0 0; line-height: 1.35; }
.step-icon { display: grid; place-items: center; flex: none; width: clamp(2.6rem, 5.4vw, 5.5rem); aspect-ratio: 1; color: var(--accent); background: var(--accent-bg); border-radius: .95rem; }
.step-icon svg { width: 62%; height: auto; }
[data-site="forwarder"] .process { background: #f8f4eb; }
[data-site="forwarder"] .process li { justify-content: center; }
[data-site="forwarder"] .step-icon { background: transparent; }
[data-site="warehousing"] .process { background: #fbebdd; font-family: var(--serif); }
[data-site="warehousing"] .process li { justify-content: center; }

.service-overview, .home-page main > .guides { width: min(92%, 77rem); margin-inline: auto; }
.service-overview { padding-top: clamp(2rem, 4vw, 3.75rem); }
.service-overview > h2 { overflow-wrap: anywhere; text-align: center; font-size: clamp(1.8rem, 3.2vw, 3.1rem); }
[data-site="forwarder"] .service-overview h2, [data-site="shipping-agent"] .service-overview h2 { font-family: system-ui, sans-serif; font-weight: 800; }
.home-page #faq { width: min(92%, 49rem); }

@media (max-width: 1080px) {
  .home-page .mast { flex-wrap: wrap; padding-block: .6rem; }
  .home-page .mast nav { column-gap: .85rem; }
}
@media (max-width: 750px) {
  .home-page .mast { flex-direction: row; align-items: center; }
  .home-page .mast nav { order: 2; margin: 0; width: 100%; }
  .operator { margin-left: auto; font-size: .74rem; }
  .process ol { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
  .process li + li { border: 0; }
  [data-site="shipping-agent"] .process ol { grid-template-columns: 1fr; }
}
@media (max-width: 365px) {
  .home-page .mast .operator { margin-left: 0; }
}

.process li > a {
  display: flex;
  align-items: center;
  gap: inherit;
  flex: 1;
  min-height: 44px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.process li > a:hover strong { text-decoration: underline; text-underline-offset: .17em; }
.step-arrow { color: var(--accent); font-size: 1.15rem; margin-left: auto; }
[data-site="forwarder"] .process li > a, [data-site="warehousing"] .process li > a { justify-content: center; }
[data-site="forwarder"] .step-arrow, [data-site="warehousing"] .step-arrow { margin-left: 0; }
@media (max-width: 420px) {
  .step-arrow { display: none; }
}

.home-page p { text-wrap: pretty; }
[data-site="forwarder"] .request fieldset {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding-inline: 0;
}
@media (min-width: 1081px) {
  [data-site="shipping-agent"] .home-page .mast { min-height: 6.85rem; }
  .home-page .mast nav a { font-size: clamp(.95rem, 1.2vw, 1.2rem); }
}
@media (max-width: 750px) {
  .home-page .wordmark { flex-shrink: 1; max-width: 100%; min-width: 0; }
  .process ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
}

/* Place the request beside the service explanation, before supporting content. */
.wordmark img, .home-page .wordmark img {
  display: block;
  width: clamp(10rem, 22vw, 18.5rem);
  max-width: 100%;
  height: auto;
}
.task-workspace {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  width: min(92%, 77rem);
  margin: 0 auto;
  padding-block: clamp(2rem, 5.2vw, 4.75rem);
}
.workspace-intro { min-width: 0; }
.workspace-intro h1 { font-size: clamp(2.65rem, 4.9vw, 5rem); overflow-wrap: anywhere; }
[data-site="shipping-agent"] .workspace-intro h1, [data-site="forwarder"] .workspace-intro h1 {
  font-family: system-ui, sans-serif;
  font-weight: 820;
}
[data-site="warehousing"] .workspace-intro h1 { font-size: clamp(2.45rem, 4.2vw, 4.4rem); }
.workspace-lead { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 40ch; }
.workspace-guide { display: inline-flex; min-height: 44px; align-items: center; }
.workspace-start { margin: 0 .9rem .25rem 0; }
.workspace-intro figure { margin-top: 1.65rem; position: relative; }
.workspace-intro .hero-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.35;
  object-fit: cover;
  border-radius: .65rem;
}
.workspace-intro .hero-inset {
  position: absolute;
  width: 28%;
  height: auto;
  right: .6rem;
  bottom: 1.9rem;
  border: 3px solid var(--surface);
  border-radius: .45rem;
}
.request-area {
  min-width: 0;
  scroll-margin-top: 1rem;
  border-radius: .65rem;
  background: var(--surface);
  padding: clamp(1rem, 3vw, 2.2rem);
  box-shadow: 0 .5rem 1.8rem rgb(18 38 50 / .09);
}
.request-area h2 { font-family: system-ui, sans-serif; font-size: clamp(1.35rem, 2.35vw, 2rem); }
.request-area .request { border-radius: 0; padding: 0; background: transparent; }
.request-area .request > p { color: var(--muted); }
.request-area .request form > .button { width: 100%; }
.request-area label { min-width: 0; overflow-wrap: anywhere; }
.request-area .fields { column-gap: .85rem; row-gap: .75rem; }
.request-area input, .request-area textarea { min-width: 0; }
.request-help, .optional-fields { border-top: 1px solid var(--line); padding: 0; margin: .8rem 0; }
.request-help summary, .optional-fields summary { align-content: center; }
.request-help ul { padding-left: 1.25em; }
.request-alternative { font-size: .92rem; margin: .85rem 0 0; }
.result { border-top: 2px solid var(--accent); padding-top: 1rem; }
.result textarea { resize: vertical; }
.service-switch {
  display: flex;
  gap: .1rem 1.35rem;
  flex-wrap: wrap;
  align-items: center;
  width: min(92%, 77rem);
  margin: 0 auto 1.75rem;
  padding-block: .35rem;
  border-block: 1px solid var(--line);
}
.service-switch span { color: var(--muted); }
.service-switch a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.service-overview .home-copy { max-width: 38rem; margin: 2rem auto; }
@media (max-width: 760px) {
  .task-workspace { grid-template-columns: 1fr; gap: 1rem; padding-block: 1.4rem; }
  .workspace-intro h1, [data-site="warehousing"] .workspace-intro h1 { font-size: clamp(2rem, 7.8vw, 3rem); margin-bottom: .4em; }
  .workspace-intro { display: contents; }
  .workspace-intro-copy { grid-row: 1; }
  .request-area { grid-row: 2; }
  .workspace-intro figure { grid-row: 3; margin: .5rem 0 0; }
  .workspace-start { display: none; }
  .workspace-lead { margin-bottom: .25rem; }
  .workspace-guide { font-size: .93rem; }
  .service-switch { align-items: start; flex-direction: column; }
}