/* =====================================================================
   東洋商事株式会社 — 中日双语静态站
   (layout skeleton 1:1 reproduced from the reference site)
   Desktop reference canvas: 1440px (all blocks are anchored to the centre
   or to fixed offsets, so the same pixel geometry holds at any width >=1000).
   Mobile reference canvas: 320px.
   ===================================================================== */

:root {
  --brand: #0c68ab;
  --page-bg: #e0ecff;
  --black: #000;
  /* Subset webfont first, then the closest system gothic: any kanji outside the
     shipped subsets degrades to Yu Gothic / Hiragino instead of a generic sans. */
  --ja-font: 'ot-yu-gothic-pr6n', 'Yu Gothic', 'YuGothic', '游ゴシック体', '游ゴシック',
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Meiryo', sans-serif;
  --zh-font: 'helvetica-w01-roman', sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--black);
  font-family: var(--ja-font);
  font-weight: 400;
  font-size: 16px;
}

html[lang='zh'] body { font-family: var(--zh-font); }

img { display: block; border: 0; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4 { margin: 0; }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.hd {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
}

.hd-in {
  position: relative;
  width: max(980px, calc(100% - 160px));
  height: 108px;
  margin: 0 auto;
}

.hd-logo {
  position: absolute;
  left: 0;
  top: 18px;
  width: 136px;
  height: 63px;
}

.hd-logo img { width: 136px; height: 63px; }

.hd-nav {
  position: absolute;
  right: 215px;
  top: 36px;
  display: flex;
  gap: 8px;
  height: 28px;
}

.hd-nav a {
  display: block;
  height: 28px;
  padding-right: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  text-align: right;
  white-space: nowrap;
  color: var(--black);
}

.hd-nav a.is-current { color: var(--brand); }

html[lang='ja'] .hd-nav a:nth-child(1) { width: 109.53px; }
html[lang='ja'] .hd-nav a:nth-child(2) { width: 124.23px; }
html[lang='ja'] .hd-nav a:nth-child(3) { width: 156.23px; }
html[lang='zh'] .hd-nav a:nth-child(1) { width: 111.33px; }
html[lang='zh'] .hd-nav a:nth-child(2) { width: 139.34px; }
html[lang='zh'] .hd-nav a:nth-child(3) { width: 139.33px; }

.lang {
  position: absolute;
  right: 0;
  top: 35px;
  display: flex;
  height: 30px;
  background: #fff;
}

.lang a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  white-space: nowrap;
  color: var(--black);
}

.lang a:nth-child(1) { width: 109.5px; padding-left: 14px; }
.lang a:nth-child(2) { width: 96.5px; padding-left: 15px; }
.lang a img { width: 22px; height: 22px; flex: none; }
.lang a.is-current { color: var(--brand); }

.hd-burger { display: none; }

/* ------------------------------------------------------------------ */
/* Hero (home)                                                         */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  height: 800px;
  overflow: hidden;
  background: #fff;
}

.hero-media {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-inner {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
}

.hero-logo {
  position: absolute;
  left: -221px;
  top: 101px;
  width: 461px;
  height: 129px;
}

.hero-title {
  position: absolute;
  left: -300px;
  top: 273px;
  width: 600px;
  font-size: 56px;
  font-weight: 700;
  line-height: 67.2px;
  text-align: center;
  color: #fff;
}

.hero-panel {
  position: absolute;
  left: -338px;
  top: 360.2px;
  width: 696px;
  padding: 30px 30px 20px;
  background: rgba(0, 0, 0, 0.5);
}

.hero-panel p {
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
}

.hero-cta {
  position: absolute;
  left: -90px;
  top: 654.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 60px;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.6px;
}

html[lang='zh'] .hero-cta { top: 661.2px; }
html[lang='zh'] .hero-panel p { line-height: 33px; }

/* On the Chinese pages the reference keeps the Japanese gothic for navigation,
   the CTA label, the copyright line and the contact name. */
html[lang='zh'] .hd-nav a,
html[lang='zh'] .lang a,
html[lang='zh'] .hd-menu-lang a,
html[lang='zh'] .hd-menu-list a,
html[lang='zh'] .hero-cta,
html[lang='zh'] .ft-copy,
html[lang='zh'] .profile-name .value { font-family: var(--ja-font); }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.ft {
  position: relative;
  height: 278.2px;
  border-top: 1px solid #595959;
  background: var(--brand);
}

.ft-in {
  position: relative;
  width: 1200px;
  height: 277.2px;
  margin: 0 auto;
}

.ft-logo {
  position: absolute;
  left: 0;
  top: 49px;
  width: 90px;
  height: 45px;
}

.ft-link {
  position: absolute;
  top: 124.6px;
  font-size: 14px;
  line-height: 16.8px;
  white-space: nowrap;
  color: #fff;
}

html[lang='ja'] .ft-link:nth-of-type(1) { left: 2.84px; }
html[lang='ja'] .ft-link:nth-of-type(2) { left: 99px; }
html[lang='ja'] .ft-link:nth-of-type(3) { left: 212px; }
html[lang='ja'] .ft-link:nth-of-type(4) { left: 1057.84px; }
html[lang='zh'] .ft-link:nth-of-type(1) { left: 1px; }
html[lang='zh'] .ft-link:nth-of-type(2) { left: 99px; }
html[lang='zh'] .ft-link:nth-of-type(3) { left: 206px; }
html[lang='zh'] .ft-link:nth-of-type(4) { left: 1144px; }

.ft-line {
  position: absolute;
  left: 0;
  top: 161.8px;
  width: 1200px;
  border-top: 1px solid #fff;
}

.ft-addr {
  position: absolute;
  left: 2px;
  top: 181.6px;
  font-size: 14px;
  line-height: 22.4px;
  white-space: nowrap;
  color: #fff;
}

.ft-copy {
  position: absolute;
  right: 0;
  top: 204.2px;
  font-size: 14px;
  line-height: 22.4px;
  white-space: nowrap;
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Page banner (about / contact)                                       */
/* ------------------------------------------------------------------ */

.page-bg { background: var(--page-bg); }

.banner {
  position: relative;
  height: 300px;
  background: #fff;
}

.banner-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 50% 50%;
}

.deco { position: absolute; pointer-events: none; }
.deco svg { display: block; width: 100%; height: 100%; }

.deco-a { left: -0.5px; top: 0.5px; width: 375px; height: 300px; opacity: 0.8; }
.deco-b { right: 200px; top: 0; width: 375px; height: 300px; }
.deco-c { right: 0; top: 0; width: 201px; height: 300px; background: #fff; }
.deco-d { right: 1px; top: 0; width: 290px; height: 400px; }

/* ------------------------------------------------------------------ */
/* Shared inner-page scaffolding                                       */
/* ------------------------------------------------------------------ */

.wrap {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

.crumbs {
  padding-top: 15px;
  padding-left: 1px;
  font-size: 14px;
  line-height: 16.8px;
}

.crumbs a { color: var(--black); }

.page-title {
  padding-top: 69.2px;
  font-size: 68px;
  font-weight: 700;
  line-height: 81.6px;
  text-align: center;
  color: var(--brand);
}

.page-sub {
  padding-top: 50px;
  font-size: 38px;
  font-weight: 700;
  line-height: 43.2px;
  text-align: center;
}

.page-lead {
  width: 980px;
  margin: 0 auto;
  padding-top: 20.01px;
  font-size: 16px;
  line-height: 25.6px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* About page                                                          */
/* ------------------------------------------------------------------ */

.cards {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 50px 0 0;
  list-style: none;
}

.cards li {
  width: 224px;
  height: 117px;
  padding: 20px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: center;
}

.cards-note {
  width: 700px;
  margin: 0 auto;
  padding-top: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: center;
}

.blocks {
  padding-top: 100px;
  padding-bottom: 50.01px;
}

.blk {
  display: flex;
  gap: 0;
  padding-left: 1px;
}

.blk-txt { margin-right: 24px; }

.blk-rev { flex-direction: row-reverse; }
.blk-rev .blk-txt { margin-right: 0; margin-left: 24px; }

.blk-txt { width: 575px; flex: none; }

.blk-img {
  width: 600px;
  height: 400px;
  flex: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.blk h2 {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 700;
  line-height: 33.6px;
}

.blk p,
.blk .bt {
  font-size: 16px;
  line-height: 25.6px;
}

.blk .bt { display: block; font-weight: 700; }

.blk-txt .lead { margin-bottom: 20px; }

.blk ul {
  margin: 0 0 20px;
  padding: 4px 0 0 28.8px;
  list-style: none;
}

.blk ul li {
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 25.6px;
}

.blk ul li:last-child { margin-bottom: 0; }

.blk .note {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
}

.blk-1 { margin-bottom: 2.75px; }
.blk-2 { margin-bottom: 3.94px; }
.blk-1 .blk-txt { padding-top: 53px; }
.blk-2 .blk-txt { padding-top: 19px; }
.blk-3 .blk-txt { padding-top: 40px; }

/* who-is-it-for band */
.audience {
  position: relative;
  height: 670.41px;
}

.audience-blob {
  position: absolute;
  left: 0;
  top: 50px;
  width: 688px;
  height: 234px;
}

.audience-blob svg { display: block; width: 100%; height: 100%; }

.audience h3 {
  position: absolute;
  right: 0;
  top: 51.8px;
  width: 499px;
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px;
  text-align: right;
  color: var(--brand);
}

.audience-txt {
  position: absolute;
  left: 30px;
  top: 79.41px;
  width: 560px;
  font-size: 16px;
  line-height: 25.6px;
  color: #fff;
}

.audience-img {
  position: absolute;
  left: 0;
  top: 120.41px;
  width: 1200px;
  height: 500px;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ------------------------------------------------------------------ */
/* Contact page                                                        */
/* ------------------------------------------------------------------ */

.profile-img {
  display: block;
  width: 650px;
  height: 299px;
  margin: 50.01px auto 0;
  object-fit: cover;
  object-position: 50% 50%;
}

.profile-bio {
  width: 650px;
  margin: 55px auto 0;
  font-size: 16px;
  line-height: 25.6px;
}

.profile-name {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 14.45px;
  width: 650px;
  height: 29.8px;
  margin: 34.59px auto 0;
}

.profile-name .label {
  font-size: 14px;
  line-height: 22.4px;
}

.profile-name .value {
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
}

.company { width: 650px; margin: 0 auto; }

.company-rule {
  height: 5px;
  margin: 50px 0 45px;
  border-top: 1px solid #282626;
}

.company h3 {
  margin-bottom: 50px;
  font-size: 38px;
  font-weight: 700;
  line-height: 43.2px;
  text-align: center;
}

.company dl { margin: 0; }

.company .row {
  display: flex;
  align-items: flex-start;
  height: 37.8px;
  font-size: 14px;
  line-height: 16.8px;
}

.company .row--tall { height: 50.59px; }

.company .rule {
  height: 5px;
  margin-bottom: 15px;
  border-top: 1px solid #282626;
}

.company .row--last { height: 37.8px; margin-bottom: 30px; }

.company dt {
  width: 210px;
  font-weight: 700;
}

.company dd { margin: 0; }

.contact-title { padding-top: 70.2px; }

/* --- Chinese page rhythm (Latin first-line metrics grow the line boxes) --- */
html[lang='zh'] .page-title { line-height: 83.59px; }
html[lang='zh'] .page-sub { padding-top: 50px; }
html[lang='zh'] .page-lead { padding-top: 21px; }
html[lang='zh'] .blocks { padding-bottom: 50px; }
html[lang='zh'] .blk-1,
html[lang='zh'] .blk-2 { margin-bottom: 0; }
html[lang='zh'] .audience-txt { top: 79.4px; }
html[lang='zh'] .audience-txt p { line-height: 21.8px; }
html[lang='zh'] .audience-img { top: 120.4px; }
html[lang='zh'] .contact-title { padding-top: 70.2px; }
html[lang='zh'] .profile-bio { margin-top: 55px; }
html[lang='zh'] .profile-name { margin-top: 34.56px; }
html[lang='zh'] .company .row { height: 36.8px; }
html[lang='zh'] .company .row--tall { height: 49.59px; }
html[lang='zh'] .company .row--last { height: 36.8px; margin-bottom: 31px; }

/* --- Chinese mobile rhythm --- */
html.mode-mobile[lang='zh'] .hero { height: 810px; }
html.mode-mobile[lang='zh'] .hero-cta { top: 729.59px; }
html.mode-mobile[lang='zh'] .hero-panel { padding-top: 11px; }
html.mode-mobile[lang='zh'] .hero-panel p { line-height: 33px; }
html.mode-mobile[lang='zh'] .ft { height: 427.41px; }
html.mode-mobile[lang='zh'] .ft-in { height: 426.41px; }
html.mode-mobile[lang='zh'] .ft-line { top: 175.19px; }
html.mode-mobile[lang='zh'] .ft-addr { top: 196px; }
html.mode-mobile[lang='zh'] .ft-copy { top: 306.62px; }
html.mode-mobile[lang='zh'] .crumbs { padding-top: 18.2px; }
html.mode-mobile[lang='zh'] .page-title { padding-top: 20.6px; line-height: 33.6px; }
html.mode-mobile[lang='zh'] .page-sub { padding-top: 10.6px; }
html.mode-mobile[lang='zh'] .page-lead { padding-top: 12.6px; }
html.mode-mobile[lang='zh'] .cards-note { padding-top: 19.78px; }
html.mode-mobile[lang='zh'] .blocks { padding-top: 41.19px; }
html.mode-mobile[lang='zh'] .blk ul { margin-top: 10px; padding-top: 0; }
html.mode-mobile[lang='zh'] .blk ul li { margin-bottom: 0; }
html.mode-mobile[lang='zh'] .blk .note { margin-top: 10px; }
html.mode-mobile[lang='zh'] .blk-img { margin-bottom: 19px; }
html.mode-mobile[lang='zh'] .blk-3 { margin-bottom: 4.78px; }
html.mode-mobile[lang='zh'] .audience { padding: 20px 0; }
html.mode-mobile[lang='zh'] .audience h3 { padding-top: 20px; }
html.mode-mobile[lang='zh'] .audience-txt { padding-top: 19px; }
html.mode-mobile[lang='zh'] .audience-txt p { line-height: 18.2px; }

/* ------------------------------------------------------------------ */
/* Desktop-only helpers                                                */
/* ------------------------------------------------------------------ */

.hd-menu { display: none; }
.to-top { display: none; }

/* ==================================================================== */
/* Mobile canvas — 320px, mirroring the reference mobile layout          */
/* ==================================================================== */

html.mode-mobile body { width: 320px; }

/* --- header --- */
html.mode-mobile .hd-in { width: 320px; height: 80px; margin: 0; }
html.mode-mobile .hd-logo { left: 19px; top: 15px; width: 110px; height: 50px; }
html.mode-mobile .hd-logo img { width: 110px; height: 50px; }
html.mode-mobile .hd-nav,
html.mode-mobile .lang { display: none; }

html.mode-mobile .hd-burger {
  display: block;
  position: absolute;
  right: 11px;
  top: 15px;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #e0ecff;
  cursor: pointer;
  z-index: 100000;
}

.hd-burger-lines { position: absolute; left: 12.5px; top: 15px; width: 25px; height: 20px; }
.hd-burger-lines i {
  position: absolute;
  left: 0;
  width: 25px;
  height: 3px;
  border-radius: 1px;
  background: #000;
}
.hd-burger-lines i:nth-child(1) { top: 0; }
.hd-burger-lines i:nth-child(2) { top: 8px; }
.hd-burger-lines i:nth-child(3) { top: 16px; }

html.menu-open .hd-burger-lines i:nth-child(1) { left: 9px; top: 17px; width: 16px; transform: none; }
html.menu-open .hd-burger-lines i:nth-child(2) { left: 4.31px; top: 11.78px; width: 16px; transform: rotate(-45deg); }
html.menu-open .hd-burger-lines i:nth-child(3) { left: 14.21px; top: 11.3px; width: 16px; transform: rotate(45deg); }

/* --- mobile menu overlay --- */
html.mode-mobile .hd-menu {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  height: 100%;
  background: #fff;
  z-index: 99999;
  overflow: hidden;
}

html.mode-mobile.menu-open .hd-menu { display: block; }

.hd-menu-lang {
  position: absolute;
  left: 20px;
  top: 18px;
  display: flex;
  height: 40px;
}

.hd-menu-lang a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  color: var(--black);
}

.hd-menu-lang a:nth-child(1) { width: 106px; padding-left: 14px; }
.hd-menu-lang a:nth-child(2) { width: 92px; padding-left: 15px; }
.hd-menu-lang a img { width: 22px; height: 22px; flex: none; }
.hd-menu-lang a.is-current { color: var(--brand); }

.hd-menu-list {
  position: absolute;
  left: 66px;
  top: 223px;
  width: 188px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-menu-list a {
  display: block;
  height: 56px;
  font-size: 18px;
  line-height: 56px;
  text-align: center;
  color: var(--black);
}

.hd-menu-list a.is-current { color: var(--brand); }

/* --- home hero --- */
html.mode-mobile .hero { height: 761.59px; }
html.mode-mobile .hero-media-video { display: none; }

html.mode-mobile .hero-logo { left: -140px; top: 20px; width: 280px; height: 78px; }
html.mode-mobile .hero-title {
  /* The reference box (220.48px) was sized for the previous 6.5-character name.
     "東洋商事株式会社" is 8 full-width glyphs = 224px at 28px, so the box has to
     be a little wider, otherwise the last glyph wraps and the extra line pushes
     the panel down (and overlaps it). */
  left: -120px;
  top: 107.2px;
  width: 240px;
  font-size: 28px;
  line-height: 33.6px;
}
html.mode-mobile .hero-panel {
  left: -140px;
  top: 161.59px;
  width: 280px;
  padding: 10px;
}
html.mode-mobile .hero-panel p { font-size: 16px; line-height: 32px; }
html.mode-mobile .hero-cta { left: -90px; top: 681.59px; width: 180px; height: 60px; }
html.mode-mobile[lang='zh'] .hero-cta { top: 681.59px; }

/* --- footer --- */
html.mode-mobile .ft { height: 450.03px; }
html.mode-mobile .ft-in { width: 320px; height: 449.03px; margin: 0; }
html.mode-mobile .ft-logo { left: 20px; top: 19px; width: 60px; height: 30px; }
html.mode-mobile .ft-link { left: 20px; }
html.mode-mobile .ft-in .ft-link:nth-of-type(1) { left: 20px; top: 58.6px; }
html.mode-mobile .ft-in .ft-link:nth-of-type(2) { left: 20px; top: 85.4px; }
html.mode-mobile .ft-in .ft-link:nth-of-type(3) { left: 20px; top: 112.2px; }
html.mode-mobile .ft-in .ft-link:nth-of-type(4) { left: 20px; top: 138.99px; }
html.mode-mobile .ft-line { left: 20px; top: 176.19px; width: 280px; }
html.mode-mobile .ft-addr { left: 20px; top: 197px; white-space: normal; width: 280px; }
html.mode-mobile .ft-copy {
  left: 20px;
  right: auto;
  top: 329.02px;
  width: 280px;
  white-space: normal;
}

/* --- page banner (about / contact) --- */
html.mode-mobile .banner { height: 150px; }
html.mode-mobile .banner { overflow-x: clip; overflow-y: visible; }
html.mode-mobile .banner-img { height: 150px; }
html.mode-mobile .deco-a { left: 0; top: 0; width: 162px; height: 150px; }
html.mode-mobile .deco-b { left: 131px; right: auto; top: 0; width: 189px; height: 151px; }
html.mode-mobile .deco-c { display: none; }
html.mode-mobile .deco-d { left: 213px; right: auto; top: 40px; width: 109px; height: 150px; }

/* --- shared inner scaffolding --- */
html.mode-mobile .wrap { width: 320px; margin: 0; }
html.mode-mobile .crumbs { padding: 19.6px 0 0 20px; }
html.mode-mobile .page-title { padding-top: 19.8px; font-size: 28px; line-height: 33.6px; }
html.mode-mobile .page-sub { padding-top: 10px; font-size: 24px; line-height: 27.6px; }
html.mode-mobile .page-lead { width: 320px; margin: 0; padding: 10.79px 20px 0; font-size: 14px; line-height: 22.4px; }

/* --- about --- */
html.mode-mobile .cards {
  flex-direction: column;
  gap: 20px;
  padding: 20px 20px 0;
}
html.mode-mobile .cards li {
  width: 280px;
  height: 91.19px;
  padding: 19.2px 20px 0;
  font-size: 16px;
  line-height: 25.6px;
}
html.mode-mobile .cards-note { padding-top: 19.2px; }
html.mode-mobile .cards-note,
html.mode-mobile .audience h3 { padding-left: 20px; padding-right: 20px; }
html.mode-mobile .cards-note { width: 320px; margin: 0; padding: 19.2px 20px 0; font-size: 16px; line-height: 25.6px; }

html.mode-mobile .blocks { padding: 40.79px 0 0; }
html.mode-mobile .blk,
html.mode-mobile .blk-rev {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  margin-bottom: 27.6px;
}
html.mode-mobile .blk-img { order: -1; }
html.mode-mobile .blk h2 { margin-bottom: 0; }
html.mode-mobile .blk-1 { margin-bottom: 19.21px; }
html.mode-mobile .blk-2 { margin-bottom: 16.81px; }
html.mode-mobile .blk-3 { margin-bottom: 0; }
html.mode-mobile .blk-txt,
html.mode-mobile .blk-rev .blk-txt { width: 280px; margin: 0; padding-top: 0; }
html.mode-mobile .blk-img { width: 280px; height: 187px; margin: 0 0 19.5px; }
html.mode-mobile .blk-rev .blk-img { margin-bottom: 19.5px; }
html.mode-mobile .blk h2 { font-size: 20px; line-height: 24px; }
html.mode-mobile .blk .lead,
html.mode-mobile .blk-txt .lead,
html.mode-mobile .blk-rev .blk-txt .lead { padding-top: 10px; margin-bottom: 0; font-size: 14px; line-height: 22.4px; }
html.mode-mobile .blk ul { margin: 9px 0 0; padding: 4px 0 0 25.19px; }
html.mode-mobile .blk ul li { margin-bottom: 3px; font-size: 14px; line-height: 22.4px; }
html.mode-mobile .blk .note { margin-top: 9.8px; font-size: 14px; line-height: 22.4px; }
html.mode-mobile .blk-2 .blk-img { margin-top: 0; }

html.mode-mobile .audience { height: auto; padding: 40.41px 0 21.28px; }
html.mode-mobile .audience-blob { display: none; }
html.mode-mobile .audience-img {
  position: static;
  width: 280px;
  height: 117px;
  margin: 0 20px;
}
html.mode-mobile .audience h3 {
  position: static;
  width: auto;
  padding-top: 20.6px;
  font-size: 24px;
  line-height: 28.8px;
  text-align: left;
}
html.mode-mobile .audience-txt {
  position: static;
  width: auto;
  padding: 20.19px 20px 0;
  /* The desktop rule paints this copy white because it sits on the blue
     triangle (`.audience-blob`). That shape is display:none below 750px, so
     the white text would land on the #E0ECFF page background at ~1.2:1
     contrast. The reference site switches this copy to black on mobile; match
     it here. */
  color: #000;
}
html.mode-mobile .audience-txt p { font-size: 14px; line-height: 22.4px; }

/* --- contact --- */
html.mode-mobile .profile-img { width: 280px; height: 129px; margin: 10.8px 20px 0; }
html.mode-mobile .profile-bio { width: 280px; margin: 20px 20px 0; font-size: 14px; line-height: 22.4px; }
html.mode-mobile .profile-name { width: 280px; height: 29.8px; margin: 11.1px 20px 0; gap: 8.73px; }
html.mode-mobile .profile-name .label { font-size: 14px; line-height: 22.4px; }
html.mode-mobile .profile-name .value { font-size: 19px; line-height: 22.8px; }
html.mode-mobile .company { width: 280px; margin: 0 20px; }
html.mode-mobile .company-rule { height: 2px; margin: 13.9px 0 19.8px; }
html.mode-mobile .company h3 { padding-top: 0; margin-bottom: 20.8px; font-size: 28px; line-height: 32.4px; }
html.mode-mobile .company .rule { display: none; }
html.mode-mobile .company .row,
html.mode-mobile .company .row--tall,
html.mode-mobile .company .row--last {
  display: block;
  height: auto;
  margin: 0;
  padding: 10.6px 0 20.4px;
  border-top: 1px solid #282626;
}
html.mode-mobile .company dl > .row:first-child { padding-top: 0; border-top: 0; }
html.mode-mobile .company dt { width: auto; margin-bottom: 10px; }

/* --- back to top --- */
html.mode-mobile .to-top {
  display: block;
  position: fixed;
  right: 20px;
  bottom: 40px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 80;
}
html.mode-mobile .to-top svg { display: block; width: 44px; height: 44px; }