/* BANDO SYSTEMS V2 — accessible editorial engineering design.
   Independent preview, inspired by Very's clarity and Vention's product hierarchy.
   Original CSS; no third-party code or copyrighted artwork. */
:root {
  --ink: #1d1920;
  --paper: #f8f7f4;
  --line: #dad6d1;
  --orange: #b93e25;
  --muted: #514b52;
  --teal: #3a234c;
}
html {scroll-padding-top: 18px;}
body {overflow-x: clip; font-family: "Pretendard","Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif; letter-spacing: -.027em;}
button, input, textarea {font-family: inherit;}
a:focus-visible, button:focus-visible, textarea:focus-visible {
  outline: 3px solid #2760a6; outline-offset: 4px;
}
.nav {position: relative; z-index: 5; min-width: 0;}
.nav .brand {flex-shrink: 0; font-size: 18px;}
.nav-links a:hover {text-decoration: underline; text-underline-offset: 7px;}
.nav-links .contact-link:hover {background: #c83f27; text-decoration: none;}
.eyebrow {letter-spacing: .11em; font-size: 11px; line-height: 1.5;}
.eyebrow-divider {padding-inline: 5px; opacity: .5;}
.hero {
  min-height: 650px;
  grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr);
  gap: clamp(28px,4vw,64px);
  padding-block: clamp(50px,7vw,100px);
}
.hero>div {min-width: 0;}
.hero h1 {
  font-family: inherit;
  font-size: clamp(36px,4.4vw,69px);
  line-height: 1.12;
  margin: 23px 0 25px;
  letter-spacing: -.066em;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 13.6em;
}
.hero h1 .accent {display: inline; color: var(--orange);}
.hero .lead {
  max-width: 560px;
  margin: 0;
  color: #373039;
  font-size: clamp(16px,1.5vw,19px);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hero .actions {display: flex; flex-wrap: wrap; margin-top: 28px;}
.button {
  gap: 12px;
  border-radius: 7px;
  min-height: 50px;
  padding: 13px 18px;
  font-size: 14px;
  line-height: 1.4;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.button:hover {transform: translateY(-2px);}
.button.primary {background:var(--orange); border-color:var(--orange); color:#fff;}
.button.primary:hover {background:#c93d23;border-color:#c93d23;}
.hero-visual {min-width: 0; height: min(38vw,505px); min-height:400px; background: #38204f;}
.hero-visual img {object-position: center center;}
.visual-label {font-family:monospace; font-size:10px; line-height:1.35; max-width:calc(100% - 42px);}
.proof-list {margin-top:35px;}
.proof-list li {font-size: 12px; color: #453b46; line-height: 1.5;}
.section h2 {font-size:clamp(35px,4.7vw,66px);line-height:1.12;word-break:keep-all;}
.section-head {align-items: start; margin-bottom:43px;}
.service-grid {border-color:#53494d;}
.service {min-width:0; gap:12px; padding-top:33px;}
.service h3 {font-size:clamp(20px,2.05vw,26px);line-height:1.3;}
.service p {color:#514b52; font-size: 15px; line-height:1.75; word-break:keep-all;}
.service .tag {font-family:inherit;font-weight:700;font-size:12px;border-color:#c6bfc6;border-radius:999px;padding:7px 11px;}
.process {background:#251d2e;}
.process .step p {color:#e3dfe5;}
.process .step b {color:#ffae97;}
.portfolio {gap:13px;}
.project {min-height:325px; border-radius:9px; padding:24px;}
.project .placeholder {font-family:inherit; font-weight:800; font-size:11px; background:#fff; border-color:#54464f;border-radius:4px;}
.project h3 {font-size:clamp(22px,2.2vw,28px);line-height:1.3;}
.project p {font-size:14px;line-height:1.7;color:#403c43;}
.truth {background:#ffcfbf; padding-block:76px;}
.truth h2 {font-size:clamp(45px,5.5vw,70px);line-height:1.04;}
.truth p {font-size:17px;line-height:1.75;word-break:keep-all;}
.truth .truth-footnote {font-size:13px;color:#4d3940;margin-top:18px;}
.truth .text-link {text-decoration-thickness:2px; font-size:15px;}
.contact {background:#38204f; padding-block:90px;}
.contact h2 {font-size:clamp(36px,5.1vw,74px);line-height:1.15;word-break:keep-all;}
.contact h2 span {color:#ffad92;}
.contact-card {padding:clamp(22px,3vw,38px);border-radius:10px;}
.contact-card h3 {font-size:25px;margin:10px 0;}
.contact-card>p {font-size:14px;line-height:1.7;}
.brief-form {display:grid;gap:9px;margin-top:22px;}
.brief-form label {font-size:13px;font-weight:800;color:#29212c;}
.brief-form textarea {
  display:block;width:100%;resize:vertical;min-height:72px;
  padding:12px 13px;margin-bottom:10px;border:1px solid #aa9faa;
  background:#fff;color:#24202a;border-radius:7px;
  font-size:14px;line-height:1.6;
}
.brief-form textarea::placeholder {color:#68626b;opacity:1;}
.brief-form .brief-copy {width:100%;cursor:pointer;}
.brief-status {margin:2px 0 0!important;font-size:12px!important;line-height:1.6!important;color:#4d454f!important;}
.footer-row {font-size:12px;line-height:1.6;}
.reveal:not(.visible) {opacity:1;transform:none;}
@media (max-width:1100px) {
  .hero {grid-template-columns:minmax(0,1fr) minmax(0,.8fr);}
  .hero h1 {font-size:clamp(35px,4.8vw,62px);}
}
@media (max-width:900px) {
  .hero {grid-template-columns:1fr;min-height:0;}
  .hero h1 {font-size:clamp(42px,7vw,62px);}
  .hero-visual {height:auto;min-height:380px;}
  .contact-inner {gap:30px;}
}
@media (max-width:760px) {
  html {scroll-padding-top:16px;}
  .shell {width:calc(100% - 34px);max-width:640px;}
  .nav {height:68px;gap:10px;}
  .nav .brand {font-size:14px;letter-spacing:-.035em;white-space:nowrap;gap:9px;min-width:0;}
  .brand-mark {width:23px;height:23px;border-width:6px;flex-shrink:0;}
  .menu-toggle {display:inline-flex;align-items:center;justify-content:center;
    min-width:73px;min-height:44px;padding:10px 12px;flex-shrink:0;
    border:1px solid #a89ea5;border-radius:6px;background:#fff;color:#221c25;font-size:13px;}
  .nav-links {top:68px;left:17px;right:17px;box-shadow:0 15px 30px #21171d20;border-radius:8px;}
  .nav-links a {min-height:44px;display:flex;align-items:center;}
  .hero {gap:34px;padding:56px 0 52px;}
  .hero h1 {font-size:clamp(35px,9.8vw,48px);line-height:1.17;letter-spacing:-.06em;margin:18px 0 18px;}
  .hero .lead {font-size:16px;line-height:1.75;max-width:100%;}
  .mobile-break {display:none!important;}
  .hero .actions {flex-direction:column;gap:10px;margin-top:25px;}
  .hero .button {width:100%;min-height:51px;}
  .proof-list {grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0 0;}
  .proof-list li {font-size:11px;padding:12px 8px 12px 0;min-width:0;word-break:keep-all;}
  .proof-list li+li {border-left:1px solid var(--line);border-top:0;padding-left:9px;}
  .hero-visual {min-height:0;aspect-ratio:4/3;box-shadow:9px 9px 0 #e2d7e9;}
  .hero-visual img {object-position:55% center;}
  .visual-label {font-size:9px;max-width:calc(100% - 26px);bottom:12px;left:12px;}
  .section {padding:67px 0;}
  .section h2 {font-size:clamp(33px,8.6vw,48px);line-height:1.2;}
  .section-head {gap:18px;margin-bottom:26px;}
  .service {grid-template-columns:34px minmax(0,1fr);gap:13px;padding:23px 0;}
  .service h3 {font-size:22px;}
  .service p {font-size:14px;}
  .tags {gap:7px;margin-top:14px;}
  .tag {font-size:11px!important;padding:6px 10px!important;}
  .step {padding:22px 0;}
  .step b {margin-bottom:14px;}
  .step h3 {margin:7px 0;font-size:21px;}
  .step p {font-size:14px;}
  .portfolio {grid-template-columns:1fr;gap:12px;}
  .project {min-height:235px;padding:21px;}
  .project p {margin-bottom:0;}
  .truth {padding:55px 0;}
  .truth h2 {font-size:clamp(40px,10vw,56px);}
  .truth p {font-size:15px;}
  .contact {padding:65px 0;}
  .contact h2 {font-size:clamp(40px,10vw,58px);}
  .contact-card {padding:23px 20px;}
  .footer-row {font-size:11px;overflow-wrap:anywhere;}
}
@media (max-width:350px) {
  .nav .brand{font-size:12px;}
  .hero h1{font-size:34px;}
  .proof-list {grid-template-columns:1fr;}
  .proof-list li+li {border-top:1px solid var(--line);border-left:0;padding-left:0;}
  .hero-visual{aspect-ratio:1;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

.brief-output-label[hidden]{display:none;}
#brief-output[hidden]{display:none;}
#brief-output:not([hidden]){border:2px solid #1b5e7c;background:#fff;color:#1d1920;}

/* Ensure the synthetic-picture disclosure remains readable on phones. */
.visual-label{font-size:11px;line-height:1.4;}
@media(max-width:760px){.visual-label{font-size:11px;line-height:1.4;}}

/* WCAG AA contrast: darker vermilion on white; nav contact always white text. */
.nav-links .contact-link{background:var(--orange);color:#fff;}
.num{color:var(--orange);}

/* Footer-only company identification, operated by BANDO SEMICONDUCTOR. */
.footer-company{background:#1d1920;color:#f6f3ef;padding:48px 0 25px}
.footer-company-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);column-gap:70px;row-gap:35px}
.footer-company-brand{font-size:20px;font-weight:900;letter-spacing:-.025em}
.footer-company-about p{font-size:14px;line-height:1.75;color:#e3dee3;max-width:330px;margin:12px 0 0;word-break:keep-all}
.footer-company-details{display:grid;grid-template-columns:1fr;gap:11px;margin:0}
.footer-company-details>div{display:grid;grid-template-columns:94px minmax(0,1fr);align-items:start;gap:14px}
.footer-company-details dt{color:#bdb4c0;font-size:13px;font-weight:700}
.footer-company-details dd{margin:0;font-size:14px;line-height:1.6;color:#f6f3ef;overflow-wrap:anywhere;word-break:keep-all}
.footer-company-details a{color:inherit;text-underline-offset:3px}
.footer-company-bottom{grid-column:1/-1;border-top:1px solid #524a55;padding-top:19px;display:flex;justify-content:space-between;gap:12px;color:#c4bbc7;font-size:12px;line-height:1.6}
@media (max-width:760px){
.footer-company{padding:38px 0 22px}
.footer-company-inner{grid-template-columns:1fr;gap:26px}
.footer-company-brand{font-size:18px}
.footer-company-details>div{grid-template-columns:82px minmax(0,1fr);gap:12px}
.footer-company-bottom{grid-column:1;flex-direction:column;gap:3px}
}

/* V3 bilingual IA and layout refinement. No inherited BDWEB styles. */
.top-controls{order:2;display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:24px}
.nav-links{order:1;margin-left:auto;gap:23px}
.lang-switch{display:flex;align-items:center;border:1px solid #9b9198;border-radius:7px;overflow:hidden;background:#fff}
.lang-switch a{display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:900;font-size:12px;color:#514b52;min-width:42px;min-height:38px;letter-spacing:.01em}
.lang-switch a+a{border-left:1px solid #c9c3c7}
.lang-switch a[aria-current="page"]{background:#29222c;color:#fff}
.lang-switch a:not([aria-current="page"]):hover{background:#efe8e7}
.section-intro{max-width:780px;margin:-12px 0 28px auto;color:#48424b;font-size:16px;line-height:1.8;word-break:keep-all}
.evidence-grid .project{min-height:295px}
.evidence-label{display:inline-block;align-self:flex-start;background:#fff;border:1px solid #61565c;border-radius:4px;padding:9px 11px;color:#332a33;font-size:11px;font-weight:900;letter-spacing:.045em}
.hero h1{letter-spacing:-.065em}
.service,.step,.project{transition:background-color .2s ease,transform .2s ease}
.service:hover{background:#f0ece8}
.project:hover{transform:translateY(-3px)}
.footer-company-details dd{word-break:normal}
html[lang="en"] .hero h1{font-size:clamp(38px,4.2vw,65px);line-height:1.11;letter-spacing:-.057em;overflow-wrap:break-word;word-break:normal}
html[lang="en"] .hero .lead{word-break:normal;overflow-wrap:break-word}
html[lang="en"] .section h2{word-break:normal;letter-spacing:-.048em}
html[lang="en"] .section-intro{word-break:normal}
html[lang="en"] .truth p{word-break:normal}
html[lang="en"] .contact h2{letter-spacing:-.055em}
@media(max-width:980px) and (min-width:761px){.nav-links{gap:12px}.nav-links a{font-size:12px}.top-controls{margin-left:8px}}
@media(max-width:760px){
.top-controls{margin-left:auto;gap:8px}
.nav-links{margin-left:0;order:3}
.lang-switch a{min-width:35px;min-height:42px;font-size:11px}
.menu-toggle{min-width:58px}
.section-intro{max-width:none;margin:-6px 0 24px;font-size:14px;line-height:1.8}
.evidence-grid .project{min-height:225px}
html[lang="en"] .hero h1{font-size:clamp(32px,8.8vw,48px);line-height:1.13;letter-spacing:-.052em}
html[lang="en"] .hero .lead{font-size:16px}
html[lang="en"] .service h3{font-size:21px}
html[lang="en"] .section h2{font-size:clamp(30px,8vw,43px)}
html[lang="en"] .contact h2{font-size:clamp(38px,10vw,58px)}
}
@media(max-width:350px){
.top-controls{gap:5px}
.lang-switch a{min-width:30px;min-height:39px}
.menu-toggle{min-width:52px;min-height:42px;padding:8px}
.nav .brand{font-size:12px}
html[lang="en"] .hero h1{font-size:31px}
}

/* V3 technical scope disclosure near service descriptions. */
.scope-statement{margin:-8px 0 27px auto;max-width:790px;font-size:13px;color:#514550;line-height:1.7;border-left:3px solid #b93e25;padding:6px 0 6px 15px;word-break:keep-all}
html[lang=en] .scope-statement{word-break:normal}
@media(max-width:760px){.scope-statement{margin:0 0 21px;font-size:12px}}
