/* ==========================================================================
   Samfood International — Company Profile
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --green: #1F8233;        /* hijau utama: tombol, section hijau */
  --green-dark: #17692A;   /* hover */
  --green-logo: #49B649;   /* dekorasi */
  --leaf: #8CC43C;         /* hijau daun */
  --yellow: #F7E228;       /* kuning logo */
  --gold: #F2B90F;         /* kuning emas: ikon & eyebrow */
  --footer: #155C27;

  --ink: #13261B;          /* teks utama */
  --text: #3E4F44;         /* paragraf */
  --muted: #4A5A4F;        /* label kecil */
  --white: #FFFFFF;
  --tint: #F2F8EC;         /* hijau sangat muda */
  --placeholder: #E4EFDC;
  --line: rgba(19, 38, 27, .12);

  --font: 'Poppins', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;

  --container: 1240px;
  --gutter: 24px;
  --section-y: 112px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --header-breakpoint: 1100px; /* dokumentasi; dipakai di media query di bawah */
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
}

h1, h2, h3, p, dl, dd, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] p { word-break: auto-phrase; }

img { display: block; max-width: 100%; }

a { color: var(--green); }
a:hover { color: var(--green-dark); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.container {
  max-width: calc(var(--container) + 2 * var(--gutter)); /* lebar konten 1240px */
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Icons ---------- */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 18px; height: 18px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 40px; height: 40px; stroke-width: 1.8; }
.icon--gold { stroke: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--green-dark); color: var(--white); }
.btn--outline { border: 1.5px solid var(--green); color: var(--green); }
.btn--outline:hover { background: #EAF4E2; color: var(--green); }
.btn--yellow { background: var(--yellow); color: var(--ink); padding: 0 24px; }
.btn--yellow:hover { color: var(--ink); filter: brightness(.96); }
.btn--block { display: flex; width: 100%; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid rgba(19, 38, 27, .15);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Section scaffolding ---------- */
.section { padding: var(--section-y) 0; }
.section--tint { background: var(--tint); }
.section--green { background: var(--green); color: var(--white); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-head--split {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 48px;
}
.section > .container > .section-head,
.section > .container > .section-head--split { margin-bottom: 56px; }
#company .container > .section-head { margin-bottom: 48px; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--green);
}
.eyebrow--gold { color: var(--gold); }

.section-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.section--green .section-title { color: var(--white); }

.lead {
  max-width: 30em;
  font-size: 15.5px;
  color: var(--muted);
}

/* ---------- Placeholder (foto sementara) ---------- */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(19, 38, 27, .07) 0 2px, transparent 2px 14px);
}
.placeholder__label {
  padding: 8px 14px;
  border: 1px dashed rgba(19, 38, 27, .4);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text);
  text-align: center;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: var(--white);
  border-bottom: 1px solid rgba(19, 38, 27, .1);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand__logo { width: 52px; height: 46px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-size: 22px; font-weight: 700; letter-spacing: .08em; }
.brand__sub { font-size: 10.5px; font-weight: 500; letter-spacing: .22em; color: var(--muted); }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  font-size: 14px;
  font-weight: 500;
}
.nav__link { color: var(--ink); text-decoration: none; }
.nav__link:hover { color: var(--green); }

/* Language switch */
.lang-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(19, 38, 27, .2);
  border-radius: var(--radius-pill);
  background: var(--white);
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.lang-btn[aria-pressed="true"] { background: var(--green); color: var(--white); }
.lang-switch--full .lang-btn { flex: 1 1 0; min-height: 48px; padding: 0 12px; }

.flag { width: 22px; height: 22px; flex: none; }
.flag__ring { fill: none; stroke: rgba(0, 0, 0, .18); stroke-width: 1; }

.menu-btn { display: none; }

/* ---------- Mobile sidebar ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}
body:has(.drawer:not([hidden])) { overflow: hidden; } /* kunci scroll saat sidebar terbuka */
.drawer__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(19, 38, 27, .45);
  cursor: pointer;
}
.drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(340px, 86vw);
  height: 100%;
  padding: 16px 24px 32px;
  overflow-y: auto;
  background: var(--white);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer__logo { width: 48px; height: 42px; object-fit: contain; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid rgba(19, 38, 27, .08);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}
.drawer__link:hover { color: var(--green); }
.drawer__lang { display: flex; flex-direction: column; gap: 10px; }
.drawer__label { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--muted); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 56px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 72px;
}
.hero__text { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hero__tagline { font-size: 12px; font-weight: 700; letter-spacing: .24em; color: var(--green); }
.hero__title {
  font-size: clamp(36px, 4.3vw, 60px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .01em;
}
html[lang="ja"] .hero__title { font-size: clamp(40px, 5vw, 70px); }
.hero__sub { max-width: 34em; font-size: 17px; line-height: 1.9; color: var(--text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__visual { display: flex; justify-content: center; min-width: 0; }
.hero__badge { position: relative; width: min(460px, 100%); aspect-ratio: 1 / 1; }
.hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__ring-outer { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: 1; }
.hero__ring-inner { fill: var(--tint); stroke: var(--green-logo); stroke-width: 2; }
.hero__ring-text { font-family: var(--font); font-size: 14px; font-weight: 600; fill: var(--green); }
.hero__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  transform: translate(-50%, -50%);
}

/* Key facts */
.hero { padding-bottom: 80px; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  border-top: 1.5px solid var(--ink);
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 24px 8px;
  border-right: 1px solid var(--line);
}
.fact:first-child { padding-left: 0; }
.fact:last-child { padding-right: 0; border-right: 0; }
.fact__label { font-size: 13px; font-weight: 500; color: var(--muted); }
.fact__row { display: flex; align-items: baseline; gap: 8px; }
.fact__value { font-size: 40px; font-weight: 700; line-height: 1.1; }
.fact__value--sm { font-size: 24px; line-height: 1.35; }
.fact__unit { font-size: 14px; color: var(--text); }
.fact__note { font-size: 13px; color: var(--muted); }

/* ==========================================================================
   About
   ========================================================================== */
.about { display: flex; flex-wrap: wrap; gap: 48px 80px; }
.about__intro { display: flex; flex-direction: column; gap: 16px; flex: 1 1 300px; min-width: 0; }
.about__img {
  width: 100%;
  max-width: 440px;
  margin-top: 24px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}
.about__body { display: flex; flex-direction: column; gap: 24px; flex: 2 1 520px; min-width: 0; max-width: 760px; }
.about__lead { font-size: 24px; font-weight: 600; line-height: 1.7; color: var(--white); }
.about__text { font-size: 16.5px; line-height: 1.95; color: var(--tint); }

/* ==========================================================================
   Carousel
   ========================================================================== */
.carousel { display: flex; flex-direction: column; gap: 8px; }
.carousel__track {
  position: relative;
  display: flex;
  gap: 24px;
  margin-bottom: -16px;
  padding: 4px 2px 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.carousel__dots { display: flex; justify-content: center; gap: 2px; }
.dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.dot__bar {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(19, 38, 27, .22);
  transition: width .2s ease;
}
.dot[aria-current="true"] .dot__bar { width: 24px; background: var(--green); }
.carousel__dots--on-dark .dot__bar { background: rgba(255, 255, 255, .45); }
.carousel__dots--on-dark .dot[aria-current="true"] .dot__bar { background: var(--gold); }

/* ---------- Business card ---------- */
.biz-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  border: 1px solid rgba(19, 38, 27, .08);
  border-radius: var(--radius-md);
  background: var(--tint);
}
.biz-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.biz-card__label { min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--muted); }
.biz-card__title { font-size: 24px; font-weight: 700; line-height: 1.35; }
.biz-card__desc { font-size: 14.5px; line-height: 1.85; color: var(--text); }

/* ---------- Generic card (Brand & Gudang) ---------- */
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(19, 38, 27, .08);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(31, 130, 51, .08);
}
.card--shadow-dark { box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.card__media { height: 260px; }
.card__media--photo { height: auto; aspect-ratio: 4 / 3; }
img.card__media,
img.owner__photo { width: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: 14px; padding: 36px 36px 40px; }
.card__body--sm { gap: 12px; padding: 28px 28px 32px; }
.card__title { font-size: 24px; font-weight: 700; line-height: 1.3; }
.card__title--lg { font-size: 36px; line-height: 1.2; }
.card__tag { font-size: 16px; font-weight: 700; color: var(--green); }
.card__desc { font-size: 15.5px; line-height: 1.85; color: var(--text); }
.card__desc--sm { font-size: 15px; }
.card__loc { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--green); }
.card__link { align-self: flex-start; min-height: 44px; margin-top: 4px; padding: 0 20px; font-size: 14px; }
.card__todo {
  align-self: flex-start;
  padding: 8px 12px;
  border: 1px dashed rgba(19, 38, 27, .5);
  font-size: 14px;
  font-weight: 700;
}

.pill {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}
.pill--green { background: var(--green); color: var(--white); }
.pill--yellow { background: var(--yellow); color: var(--ink); }
.pill--leaf { background: var(--leaf); color: var(--ink); }

/* ==========================================================================
   Management & workforce
   ========================================================================== */
.mgmt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: 64px;
}
.mgmt__col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }

.owner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.owner__photo { flex: 1 1 180px; max-width: 240px; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); }
.owner__photo .placeholder__label { padding: 6px 12px; font-size: 12px; }
.owner__info { display: flex; flex-direction: column; gap: 10px; flex: 2 1 260px; min-width: 0; }
.owner__role { font-size: 13px; font-weight: 700; color: var(--green); }
.owner__name { font-size: 32px; font-weight: 700; line-height: 1.2; }
.owner__latin { font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--muted); }
.owner__latin:empty { display: none; }
.owner + .owner { padding-top: 32px; border-top: 1px solid var(--line); }
.owner__bio { margin-top: 8px; font-size: 15.5px; line-height: 1.9; color: var(--text); }

.workforce__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.workforce__num { font-size: 88px; font-weight: 700; line-height: 1; color: var(--green); }
.workforce__unit { font-size: 18px; font-weight: 700; }
.workforce__bar {
  display: flex;
  height: 14px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--placeholder);
}
.workforce__bar-ft { width: 16.67%; background: var(--green); }  /* 6 / 36 */
.workforce__bar-pt { width: 83.33%; background: var(--leaf); }   /* 30 / 36 */
.workforce__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}
.wf-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--tint);
}
.wf-card__head { display: flex; align-items: center; gap: 10px; }
.wf-card__label { font-size: 14px; font-weight: 700; }
.wf-card__num { font-size: 40px; font-weight: 700; line-height: 1.1; }
.wf-card__desc { font-size: 14px; line-height: 1.8; color: var(--text); }
.swatch { width: 12px; height: 12px; flex: none; border-radius: 3px; }
.swatch--ft { background: var(--green); }
.swatch--pt { background: var(--leaf); }

/* ==========================================================================
   Vision & mission
   ========================================================================== */
.vision {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 88px;
  text-align: center;
}
.vision__text {
  max-width: 22em;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
}
html[lang="ja"] .vision__text { font-size: clamp(28px, 3.4vw, 44px); }
.vision__rule { width: 72px; height: 4px; border-radius: 2px; background: var(--yellow); }

.mission { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.mission__head { flex: 0 0 200px; min-width: 0; }
.mission__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0 40px;
  flex: 1 1 560px;
  min-width: 0;
  padding: 0;
  list-style: none;
}
.mission__item {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.mission__num { flex: none; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--yellow); }
.mission__text { font-size: 16px; font-weight: 500; line-height: 1.75; color: var(--white); }

/* ==========================================================================
   Values
   ========================================================================== */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  border-top: 1.5px solid var(--ink);
}
.value { display: flex; flex-direction: column; gap: 14px; padding: 32px 24px 8px 0; }
.value__num { font-size: 18px; font-weight: 700; color: var(--green); }
.value__en { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--muted); }
.value__title { font-size: 28px; font-weight: 700; line-height: 1.25; }
.value__text { font-size: 14.5px; line-height: 1.85; color: var(--text); }

/* ==========================================================================
   Company information
   ========================================================================== */
.company { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; }
.info-list { flex: 999 1 560px; min-width: 0; border-top: 1.5px solid var(--ink); }
.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(19, 38, 27, .15);
}
.info-row__key { flex: 0 0 180px; font-size: 14px; font-weight: 700; color: var(--green); }
.info-row__val { flex: 1 1 320px; min-width: 0; font-size: 16px; line-height: 1.75; white-space: pre-line; }

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1 1 412px;
  min-width: 0;
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  background: var(--green);
  color: var(--white);
}
.contact-card__head { display: flex; flex-direction: column; gap: 8px; }
.contact-card__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--leaf); }
.contact-card__title { font-size: 28px; font-weight: 700; line-height: 1.3; }
.contact-card__group { display: flex; flex-direction: column; gap: 6px; }
.contact-card__label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .8); }
.contact-card__phone { color: var(--white); font-size: 26px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.contact-card__email { color: var(--white); font-size: 16px; font-weight: 500; word-break: break-all; }
.contact-card__phone:hover,
.contact-card__email:hover { color: var(--yellow); }
.contact-card__addr { font-size: 15px; line-height: 1.7; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--footer); color: var(--white); }
.site-footer .container { display: flex; flex-direction: column; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  background: var(--white);
}
.site-footer__logo img { width: 44px; height: 40px; object-fit: contain; }
.site-footer__text { display: flex; flex-direction: column; line-height: 1.3; }
.site-footer__name { font-size: 20px; font-weight: 700; letter-spacing: .06em; }
.site-footer__sub { font-size: 13px; color: rgba(255, 255, 255, .75); }
.site-footer__tag { font-size: 13px; font-weight: 700; letter-spacing: .3em; color: var(--leaf); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Header → tombol menu + sidebar */
@media (max-width: 1100px) {
  .nav,
  .lang-switch--header { display: none; }
  .menu-btn { display: inline-flex; }
}

/* Tablet: 2 kartu per layar */
@media (max-width: 1000px) {
  .carousel__track > * { flex-basis: calc((100% - 24px) / 2); }
}

/* Tablet kecil */
@media (max-width: 900px) {
  :root { --section-y: 88px; }
  .section-title { font-size: 38px; }
}

/* HP */
@media (max-width: 640px) {
  :root { --gutter: 16px; --section-y: 64px; }

  .section > .container > .section-head,
  .section > .container > .section-head--split,
  #company .container > .section-head { margin-bottom: 32px; }
  .section-head { gap: 12px; }
  .section-title { font-size: 30px; }
  .lead { font-size: 14.5px; }

  /* Header */
  .site-header__inner { padding-top: 12px; padding-bottom: 12px; }
  .brand { gap: 10px; }
  .brand__logo { width: 42px; height: 38px; }
  .brand__name { font-size: 18px; }
  .brand__sub { font-size: 9px; letter-spacing: .16em; }
  .icon-btn { width: 44px; height: 44px; }

  /* Hero */
  .hero { padding-bottom: 56px; }
  .hero__grid { gap: 32px; padding-top: 48px; padding-bottom: 40px; }
  .hero__visual { display: none; }
  .hero__text { gap: 20px; }
  .hero__tagline { font-size: 11px; letter-spacing: .18em; }
  .hero__title,
  html[lang="ja"] .hero__title { font-size: 32px; }
  .hero__sub { font-size: 15.5px; line-height: 1.8; }
  .hero__actions .btn { flex: 1 1 100%; }

  /* Key facts: 2 x 2 */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact,
  .fact:first-child,
  .fact:last-child {
    padding: 20px 12px 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .fact:nth-child(even) { padding: 20px 0 16px 16px; border-left: 1px solid var(--line); }
  .fact__label,
  .fact__note { font-size: 12px; }
  .fact__value { font-size: 32px; }
  .fact__value--sm { font-size: 18px; }

  /* About */
  .about { gap: 32px; }
  .about__img { max-width: none; margin-top: 8px; }
  .about__lead { font-size: 19px; }
  .about__text { font-size: 15.5px; line-height: 1.85; }

  /* Carousel & kartu */
  .carousel__track { gap: 16px; }
  .carousel__track > * { flex-basis: 85%; }

  .biz-card { gap: 14px; padding: 24px 20px; }
  .biz-card__title { font-size: 20px; }
  .biz-card__desc { font-size: 14px; }

  .card__media,
  .card__media--photo { height: 170px; aspect-ratio: auto; }
  .card__body,
  .card__body--sm { gap: 10px; padding: 20px 20px 24px; }
  .card__title,
  .card__title--lg { font-size: 22px; }
  .card__tag { font-size: 15px; }
  .card__desc,
  .card__desc--sm { font-size: 14px; line-height: 1.7; }

  /* Management & workforce */
  .mgmt { gap: 56px; }
  .mgmt__col { gap: 24px; }
  .owner { flex-direction: column; align-items: center; gap: 24px; }
  .owner__photo { flex: none; width: 100%; max-width: 220px; }
  .owner__info { flex: none; width: 100%; align-items: center; text-align: center; }
  .owner__name { font-size: 26px; }
  .owner__bio { font-size: 15px; line-height: 1.8; }
  .workforce__num { font-size: 64px; }
  .workforce__unit { font-size: 16px; }
  .wf-card { padding: 20px; }
  .wf-card__num { font-size: 32px; }

  /* Vision & mission */
  .vision { gap: 20px; margin-bottom: 56px; }
  .vision__text,
  html[lang="ja"] .vision__text { font-size: 24px; }
  .mission__head { flex-basis: 100%; }
  .mission__item { gap: 16px; padding: 18px 0; }
  .mission__num { font-size: 18px; }
  .mission__text { font-size: 15px; }

  /* Values */
  .value { gap: 10px; padding: 24px 0 20px; border-bottom: 1px solid var(--line); }
  .value__title { font-size: 24px; }
  .value__text { font-size: 14px; }

  /* Company information */
  .company { gap: 32px; }
  .info-row { padding: 16px 0; }
  .info-row__key { flex-basis: 100%; font-size: 13px; }
  .info-row__val { flex-basis: 100%; font-size: 15px; }
  .contact-card { gap: 22px; padding: 28px 22px; }
  .contact-card__title { font-size: 24px; }
  .contact-card__phone { font-size: 22px; }
  .contact-card .btn { width: 100%; }

  /* Footer */
  .site-footer .container { gap: 24px; padding-top: 40px; padding-bottom: 32px; }
  .site-footer__logo { width: 52px; height: 52px; }
  .site-footer__logo img { width: 36px; height: 32px; }
  .site-footer__name { font-size: 15px; }
  .site-footer__tag { font-size: 12px; letter-spacing: .2em; }
  .site-footer__bottom { flex-direction: column; gap: 6px; }
}