.bs-contact {
  --contact-navy: #04142f;
  --contact-blue: #006dff;
  --contact-cyan: #28d7ff;
  --contact-gold: #d8ae5f;
  --contact-bg: #f2f6fc;
  --contact-white: #fff;
  --contact-ink: #10213e;
  --contact-muted: #63728e;
  --contact-line: #dce5f2;
  --contact-radius: 22px;
  --contact-shadow: 0 22px 60px rgba(4, 20, 47, 0.12);
  color: var(--contact-ink);
  background: var(--contact-white);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height: 1.8;
}

.bs-contact *, .bs-contact *::before, .bs-contact *::after { box-sizing: border-box; }
.bs-contact h1, .bs-contact h2, .bs-contact h3 { margin: 0 0 18px; color: var(--contact-navy); line-height: 1.35; }
.bs-contact h1 { color: var(--contact-white); font-size: clamp(2.5rem, 5vw, 5.3rem); letter-spacing: -0.045em; }
.bs-contact h2 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); letter-spacing: -0.025em; }
.bs-contact p { margin: 0 0 20px; }
.bs-contact a { text-underline-offset: 3px; }
.contact-container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.contact-section { padding: 104px 0; }
.contact-eyebrow { margin-bottom: 12px !important; color: var(--contact-blue); font-size: 0.73rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.contact-section-head { max-width: 810px; margin-bottom: 42px; }
.contact-section-head > p:last-child { color: var(--contact-muted); }

.contact-hero {
  padding: 120px 0 108px;
  color: rgba(255,255,255,.82);
  background: radial-gradient(circle at 82% 22%, rgba(40,215,255,.23), transparent 26%), radial-gradient(circle at 12% 90%, rgba(216,174,95,.16), transparent 30%), linear-gradient(135deg, #020d25, #073b83);
  overflow: hidden;
}
.contact-hero__layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 70px; align-items: center; }
.contact-hero .contact-eyebrow { color: var(--contact-cyan); }
.contact-hero__lead { max-width: 720px; font-size: 1.08rem; }
.contact-hero__assurance { padding: 28px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--contact-radius); backdrop-filter: blur(10px); }
.contact-hero__photo { position: relative; height: 210px; margin: -12px -12px 12px; overflow: hidden; border-radius: 16px; background: #0a2d5d; }
.contact-hero__photo::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,rgba(2,13,37,.88)); pointer-events: none; }
.contact-hero__photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 35%; }
.contact-hero__photo figcaption { position: absolute; z-index: 1; inset: auto 16px 14px; margin: 0; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.contact-hero__assurance p { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; margin: 0; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-hero__assurance p:last-child { border-bottom: 0; }
.contact-hero__assurance span { display: grid; place-items: center; width: 32px; height: 32px; color: var(--contact-navy); background: var(--contact-cyan); border-radius: 50%; font-size: .7rem; font-weight: 900; }

.contact-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 13px 25px; border: 1px solid transparent; border-radius: 999px; font-weight: 900; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.contact-btn:hover { transform: translateY(-2px); }
.contact-btn--primary { color: var(--contact-navy); background: var(--contact-cyan); box-shadow: 0 16px 36px rgba(40,215,255,.22); }
.contact-btn--light { color: var(--contact-blue); background: var(--contact-white); }
.contact-btn--gold { color: #18243b; border-color: #c49a45; background: #dfbf73; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 28px rgba(111,77,21,.16); }

.contact-section--types { background: var(--contact-bg); }
.contact-type-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.contact-type-grid article { position: relative; min-height: 310px; padding: 28px; background: var(--contact-white); border: 1px solid var(--contact-line); border-radius: var(--contact-radius); box-shadow: var(--contact-shadow); overflow: hidden; }
.contact-type-grid article > span { position: absolute; top: 16px; right: 20px; color: rgba(0,109,255,.12); font-size: 3rem; font-weight: 900; line-height: 1; }
.contact-type-grid h3 { margin-top: 28px; font-size: 1.25rem; }
.contact-type-grid p:not(.contact-badge) { color: var(--contact-muted); font-size: .9rem; }
.contact-type-grid a { color: var(--contact-blue); font-weight: 900; text-decoration: none; }
.contact-type-grid a::after { content: " →"; }
.contact-type-card--lask { border-top: 4px solid var(--contact-cyan) !important; }
.contact-type-card--media { border-top: 4px solid var(--contact-gold) !important; }
.contact-badge { display: inline-flex; margin: 0 !important; padding: 5px 10px; color: var(--contact-blue); background: #eaf3ff; border-radius: 999px; font-size: .68rem; font-weight: 900; }
.contact-badge--gold { color: #795410; background: #fff5dc; }

.contact-section--featured { background: var(--contact-white); }
.contact-featured-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.contact-featured-card { padding: 42px; border-radius: 28px; box-shadow: var(--contact-shadow); }
.contact-featured-card--lask { color: rgba(255,255,255,.82); background: radial-gradient(circle at 90% 10%, rgba(40,215,255,.25), transparent 30%), linear-gradient(135deg, #04142f, #0751a8); }
.contact-featured-card--lask h2 { color: var(--contact-white); }
.contact-featured-card--lask .contact-eyebrow { color: var(--contact-cyan); }
.contact-featured-card--lask ul { margin: 0 0 28px; padding-left: 1.2em; }
.contact-featured-card--media { background: linear-gradient(145deg, #fff9eb, #fff); border: 1px solid #ead8b0; }
.contact-featured-card--media .contact-eyebrow { color: #966c1f; }
.contact-small { color: var(--contact-muted); font-size: .88rem; }
.contact-small--light { color: rgba(255,255,255,.72); }
.contact-button-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin: 24px 0 14px; }
.contact-inline-link { display: inline-flex; align-items: center; font-size: .84rem; font-weight: 800; }
.contact-inline-link--light { color: rgba(255,255,255,.88); }

.contact-section--form { background: linear-gradient(180deg, #eef4fc, #f8fbff); }
.contact-form-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 58px; align-items: start; }
.contact-form-intro { position: sticky; top: 30px; }
.contact-form-welcome { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.contact-form-welcome > img { flex: 0 0 auto; width: 90px; height: auto; object-fit: contain; }
.contact-form-welcome > p { margin: 0; }
@media (max-width: 640px) { .contact-form-welcome > img { width: 70px; } }
.contact-action-guide { padding: 14px 16px; color: var(--contact-muted); background: rgba(5, 30, 75, 0.045); border-left: 3px solid var(--contact-gold); }
.contact-action-guide strong { color: var(--contact-navy); }
.contact-safety-note { margin-top: 28px; padding: 20px; background: #fff7e6; border: 1px solid #ecd7a6; border-radius: 16px; }
.contact-safety-note strong { display: block; color: #815b14; }
.contact-safety-note p { margin: 5px 0 0; color: #755d33; font-size: .83rem; }
.contact-form { padding: 38px; background: var(--contact-white); border: 1px solid var(--contact-line); border-radius: 28px; box-shadow: var(--contact-shadow); }
.contact-form__notice { padding-bottom: 18px; color: var(--contact-muted); border-bottom: 1px solid var(--contact-line); font-size: .84rem; }
.contact-field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.contact-field { margin-top: 20px; }
.contact-field label { display: block; margin-bottom: 7px; color: var(--contact-navy); font-size: .87rem; font-weight: 800; }
.contact-field em, .contact-consent em { margin-left: 6px; color: #b42318; font-size: .68rem; font-style: normal; }
.contact-field label span { margin-left: 6px; color: var(--contact-muted); font-size: .68rem; font-weight: 600; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; color: var(--contact-ink); background: #fbfdff; border: 1px solid #cbd8e8; border-radius: 10px; font: inherit; }
.contact-field textarea { min-height: 170px; resize: vertical; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: 3px solid rgba(0,109,255,.15); border-color: var(--contact-blue); }
.contact-media-fields { margin-top: 22px; padding: 0 18px 18px; background: #f7faff; border: 1px solid var(--contact-line); border-radius: 14px; }
.contact-media-fields summary { padding: 16px 0 0; color: var(--contact-blue); font-weight: 800; cursor: pointer; }
.contact-consent { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0; padding: 16px; background: #f5f8fc; border-radius: 12px; font-size: .84rem; }
.contact-consent input { margin-top: 6px; }
.contact-consent small { display: block; color: var(--contact-muted); }
.contact-btn--submit { width: 100%; color: rgba(255,255,255,.68); background: #71829c; border: 0; cursor: not-allowed; }

.contact-section--policy { background: var(--contact-white); }
.contact-policy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.contact-policy-grid article { padding: 30px; background: #f8fbff; border: 1px solid var(--contact-line); border-radius: var(--contact-radius); }
.contact-policy-grid article > span { color: var(--contact-blue); font-size: .73rem; font-weight: 900; letter-spacing: .14em; }
.contact-policy-grid h3 { margin-top: 15px; font-size: 1.15rem; }
.contact-policy-grid p { margin-bottom: 0; color: var(--contact-muted); font-size: .88rem; }

.contact-section--faq { background: var(--contact-bg); }
.contact-faq-layout { display: grid; grid-template-columns: minmax(260px,.65fr) minmax(0,1.35fr); gap: 60px; }
.contact-faq-list details { background: var(--contact-white); border-bottom: 1px solid var(--contact-line); }
.contact-faq-list details:first-child { border-radius: 18px 18px 0 0; }
.contact-faq-list details:last-child { border-bottom: 0; border-radius: 0 0 18px 18px; }
.contact-faq-list summary { padding: 20px 24px; color: var(--contact-navy); font-weight: 800; cursor: pointer; }
.contact-faq-list details p { padding: 0 24px 22px; color: var(--contact-muted); }

.contact-section--company { padding: 44px 0; color: rgba(255,255,255,.76); background: var(--contact-navy); }
.contact-company-bar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; align-items: center; }
.contact-company-bar strong { color: var(--contact-white); font-size: 1.1rem; }
.contact-company-bar p { margin: 4px 0 0; font-size: .84rem; }
.contact-company-bar a { color: var(--contact-cyan); }

@media (max-width: 980px) {
  .contact-hero__layout, .contact-form-layout, .contact-faq-layout { grid-template-columns: 1fr; }
  .contact-hero__layout { gap: 42px; }
  .contact-type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-featured-grid { grid-template-columns: 1fr; }
  .contact-form-intro { position: static; }
}

@media (max-width: 680px) {
  .contact-container { width: min(100% - 28px,1120px); }
  .contact-section { padding: 74px 0; }
  .contact-hero { padding: 86px 0 72px; }
  .contact-type-grid, .contact-policy-grid, .contact-field-row, .contact-company-bar { grid-template-columns: 1fr; }
  .contact-type-grid article { min-height: auto; }
  .contact-featured-card, .contact-form { padding: 24px; }
  .contact-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-btn { transition: none; }
  .contact-btn:hover { transform: none; }
}

/* 2026-08-14: welcoming photographic hero */
.bs-contact .contact-hero {
  min-height: 680px;
  display: grid;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(2,17,45,.97), rgba(4,35,77,.84) 58%, rgba(4,31,69,.48)),
    url("../images/generated-concepts/premium-tech-practical-value-v1.webp") center / cover no-repeat;
}
.bs-contact .contact-action-guide {
  background: linear-gradient(135deg, #fff7dc, #e7f9f1);
  border-color: #e5b94f;
  color: #24324a;
}

/* Final cascade: welcoming photographic hero */
.bs-contact .contact-hero{min-height:680px;display:grid;align-items:center;background:linear-gradient(90deg,rgba(2,17,45,.97),rgba(4,35,77,.84) 58%,rgba(4,31,69,.48)),url("../images/generated-concepts/premium-tech-practical-value-v1.webp") center/cover no-repeat}
.bs-contact .contact-action-guide{background:linear-gradient(135deg,#fff7dc,#e7f9f1);border-color:#e5b94f;color:#24324a}

/* 2026-09-14: intent-specific contact entries, with preview sending disabled. */
.bs-contact .contact-entry-links { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 18px; }
.bs-contact .contact-entry-links a { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; padding:11px 15px; border:1px solid rgba(255,255,255,.5); border-radius:12px; color:#fff; background:rgba(0,0,102,.4); font-size:.87rem; font-weight:800; line-height:1.5; text-decoration:none; }
.bs-contact .contact-entry-links a.is-current { color:#000066; background:#fff; border-color:#fff; }
.bs-contact .contact-entry-state { display:none; font-size:.7rem; }
.bs-contact .contact-entry-links a.is-current .contact-entry-state { display:inline; }
.bs-contact .contact-entry-summary { margin:0 0 22px; padding:17px 20px; border-left:3px solid #dfbf73; border-radius:0 12px 12px 0; color:#fff; background:rgba(0,0,66,.58); }
.bs-contact .contact-entry-summary strong { font-size:1.05rem; }
.bs-contact .contact-entry-summary p { margin:8px 0 0; color:#f0f5ff; font-size:.9rem; line-height:1.8; }
.bs-contact .contact-form-intent { margin:0 0 18px; padding:17px; color:#000066; background:#edf4ff; border-left:4px solid #000066; border-radius:0 10px 10px 0; }
.bs-contact .contact-form-intent p { margin:8px 0 0; color:#263b5d; font-size:.88rem; line-height:1.8; }
.bs-contact [data-contact-summary][hidden] { display:none; }
.bs-contact .contact-featured-card--partnership { display:grid; grid-template-columns:1.05fr 1fr; gap:32px; grid-column:1/-1; border-top:4px solid #d8ae5f; background:#f1f5fc; }
.bs-contact .contact-featured-card--partnership h2 { font-size:clamp(1.4rem,2.4vw,2rem); }
.bs-contact .contact-featured-card--partnership h3 { margin:0 0 12px; }
.bs-contact .contact-featured-card--partnership .contact-btn { margin-top:10px; }
.bs-contact .contact-entry-links a:focus-visible { outline:3px solid #dfbf73; outline-offset:4px; }
.bs-contact #contact-form { scroll-margin-top:25px; }
@media(max-width:760px) { .bs-contact .contact-featured-card--partnership { grid-template-columns:1fr; gap:24px; } }
