/* BOM Bridge Group — layout and components per design system §3–§5.
   Square corners everywhere except .portrait; no shadows, gradients or blur. */

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

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0;
  background:var(--paper) url('../assets/backgrounds/dots-light.svg');
  color:var(--ink);
  font:400 17px/1.5 var(--font-body);
}

/* ---------- Type ---------- */

h1, h2, h3, h4 { color:var(--navy); font-family:var(--font-display); margin:0; }
h1 { font-size:40px; font-weight:600; line-height:1.05; letter-spacing:-0.005em; }
h2 { font-size:28px; font-weight:600; line-height:1.1; }
h3 { font-size:22px; font-weight:600; line-height:1.15; }

.hero-title { font-size:64px; font-weight:600; line-height:1.02; letter-spacing:-0.01em; }

.eyebrow {
  font:700 14px/1 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--blue); margin:0 0 var(--s2);
}
.lead { font-size:20px; line-height:1.4; margin:0; }
.small { font-size:15px; line-height:1.4; }
p { margin:0; }
p + p { margin-top:var(--s2); }

a { color:var(--blue); text-decoration:none; }
a:hover { color:var(--navy); text-decoration:underline; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* ---------- Page scaffolding ---------- */

.skip {
  position:absolute; left:-9999px; top:0;
  background:var(--blue); color:#FFFFFF; padding:10px 16px;
  font:700 15px var(--font-display);
}
.skip:focus { left:0; z-index:100; color:#FFFFFF; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }

.section { padding:var(--s5) 0; }
/* the closing rule is the section's last element; no extra space below it, so every gap is the same 96px */
.wrap > .rule:last-child { margin-bottom:0; }
/* light sections show the page-wide dots on body, so the pattern runs unbroken from top to bottom */
.section--light { background:none; }
.section--dark {
  background:var(--navy) url('../assets/backgrounds/dots-navy.svg');
  color:#FFFFFF;
}
.section--dark h2, .section--dark h3 { color:#FFFFFF; }
.section--dark .section-sub { color:var(--blue-pale); }
.section--dark .eyebrow { color:var(--label-on-dark); }
.section--dark .rule { border-color:var(--line-on-dark); }
.section--dark .footnote { color:var(--blue-pale); }

.section-sub { font-size:20px; line-height:1.4; color:var(--ink); margin:var(--s2) 0 0; max-width:72ch; }

.rule { border:0; border-top:1px solid var(--line); margin:var(--s4) 0; flex:none; }

.footnote { font-size:14px; line-height:1.4; color:var(--ink-soft); margin:var(--s3) 0 0; }

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

.topbar {
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:14px var(--gutter);
  max-width:var(--wrap); margin:0 auto;
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand svg { height:40px; width:auto; display:block; }
.brand-text { display:flex; flex-direction:column; }
.brand-name {
  font:600 21px/1.02 var(--font-display);
  letter-spacing:0.01em; color:var(--navy);
}
.brand-sub {
  font:700 10px/1.2 var(--font-display);
  letter-spacing:0.30em; text-transform:uppercase;
  color:var(--blue); margin-left:1px;
}
.nav { display:flex; align-items:center; gap:var(--s3); }
.nav a:not(.btn) {
  font:700 14px/1 var(--font-display);
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--blue);
}
.nav a:not(.btn):hover { color:var(--navy); text-decoration:underline; }
.btn.nav-toggle { display:none; }

/* ---------- Buttons ---------- */

.btn {
  display:inline-block;
  background:var(--blue); color:#FFFFFF;
  font:700 15px/1 var(--font-display); letter-spacing:0.06em;
  padding:14px 24px; border:0; cursor:pointer;
  text-decoration:none;
}
.btn:hover { background:var(--blue-mid); color:#FFFFFF; text-decoration:none; }
.btn--secondary {
  background:transparent; color:var(--blue);
  border:1px solid var(--blue);
  padding:13px 23px;
}
.btn--secondary:hover { background:var(--blue-tint); color:var(--blue); }

/* ---------- Components (§5) ---------- */

.card {
  background:#FFFFFF; border:1px solid var(--line); border-top:3px solid var(--blue);
  padding:24px 28px;
}
.card--red {
  border:1px solid var(--red-line); border-top:3px solid var(--red);
  background:var(--red-tint);
}

.chip {
  background:var(--blue-tint); color:var(--navy);
  font:700 15px/1.2 var(--font-body);
  padding:10px 14px; text-align:center;
  /* chips share a row height when a neighbour wraps, so centre the text vertically */
  display:flex; align-items:center; justify-content:center;
}
.chip-row { display:grid; gap:var(--s1); }
.chip-row--5 { grid-template-columns:repeat(5, minmax(0,1fr)); }

.callout { background:var(--blue); padding:26px 32px; }
.callout h3 { color:#FFFFFF; font:600 24px/1.1 var(--font-display); margin:0; }
.callout p { color:var(--blue-pale); font:400 16px/1.35 var(--font-body); margin:8px 0 0; }

.steps { display:flex; flex-direction:column; }
.step { display:grid; grid-template-columns:52px 1fr; gap:var(--s3); padding:var(--s3) 0; }
.step + .step { border-top:1px solid var(--line); }
.step-key {
  width:52px; height:52px; border:1px solid var(--blue);
  display:grid; place-content:center;
  font:700 18px var(--font-display); color:var(--blue);
}
.step h3 { font-size:22px; }
.step p { font-size:16px; color:var(--ink-soft); margin-top:6px; }

.bullets { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); }
.bullets li { display:grid; grid-template-columns:14px 1fr; gap:16px; font-size:17px; line-height:1.4; color:var(--ink); }
.bullets li::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--blue); margin-top:7px;
}
.bullets--red li::before { background:var(--red); }

.figure { font:600 44px/1 var(--font-display); color:var(--blue); }
.figure--red { color:var(--red); }
.figure-label {
  font:700 14px/1.4 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:var(--s1);
}

.portrait {
  width:96px; height:96px; flex:none;
  border:3px solid var(--blue); background:var(--blue-tint);
  border-radius:50%; overflow:hidden;
}
.portrait img { width:100%; height:100%; object-fit:cover; display:block; }

.person { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0; }
.person + .person { border-top:1px solid var(--line); }
.person h3 { font-size:24px; }
.person .role {
  font:700 14px/1.4 var(--font-display);
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--blue); margin-top:4px;
}
.person .cv { font-size:15px; line-height:1.4; color:var(--ink-soft); margin-top:6px; }

.logo-tile {
  background:#FFFFFF; border:1px solid var(--line); padding:12px;
  margin:0; display:flex; flex-direction:column; gap:10px;
}
.logo-tile img { height:48px; width:100%; object-fit:contain; display:block; }
.logo-tile figcaption { font-size:15px; line-height:1.4; color:var(--ink-soft); text-align:center; }

.quote { font:italic 400 15px/1.4 var(--font-body); color:var(--ink-soft); margin:0; }
.quote-attr {
  font:700 14px/1.4 var(--font-display);
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--ink-soft); font-style:normal; display:block; margin-top:var(--s1);
}
.quote--closer { font:500 22px/1.3 var(--font-display); color:var(--navy); font-style:normal; }
.quote--closer .quote-attr { color:var(--blue); }

.colhead {
  font:700 14px/1 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:var(--s2);
  border-bottom:2px solid var(--blue);
  margin:0 0 var(--s1);
}
/* Non-tabular caps label: 1px rule, since 2px is reserved for roster/table headers */
.speclabel {
  font:700 14px/1 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
  margin:var(--s4) 0 var(--s2);
}

/* ---------- Hero ---------- */

.hero { padding:var(--s6) 0 var(--s5); }
.hero-grid {
  display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:var(--s6); align-items:center;
}
.hero-tagline {
  font:700 14px/1 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--blue); margin:0 0 var(--s3);
}
.hero-copy .lead { margin:var(--s3) 0 0; max-width:46ch; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.hero-visual { display:grid; place-content:center; }

.stamp {
  width:232px; height:232px;
  border:3px solid var(--blue); background:var(--paper);
  transform:rotate(-8deg);
  display:grid; place-content:center; gap:10px;
  text-align:center; color:var(--blue);
}
.stamp-hanzi { font:700 84px/1 var(--font-cjk); }
.stamp-caps {
  font:700 15px/1.5 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
}

/* ---------- Section-specific layout ---------- */

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s4); }

.case-label {
  font:700 14px/1 var(--font-display);
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--blue);
}
.prob-card h3 { margin-top:var(--s2); }
.prob-toggle {
  background:none; border:0; padding:0; cursor:pointer;
  font:700 14px/1 var(--font-display);
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--blue); margin-top:var(--s2);
}
.prob-toggle:hover { color:var(--navy); text-decoration:underline; }
.prob-body { margin-top:var(--s3); }
.prob-body[hidden] { display:none; }
.prob-body .rule { margin:var(--s3) 0; }

.model-steps { display:flex; flex-direction:column; }
.model-step { display:grid; grid-template-columns:52px 1fr; gap:var(--s3); padding:var(--s3) 0; }
.model-step + .model-step { border-top:1px solid var(--line); }
.model-step h4 { font-size:20px; line-height:1.2; }
.model-step p { font-size:16px; color:var(--ink-soft); margin-top:6px; }

.map-frame { border:1px solid var(--blue); padding:24px; background:#FFFFFF; margin:0;
  /* the frame stretches to the tier column's height, so centre the map inside it */
  display:flex; align-items:center; }
.map-frame img { width:100%; height:auto; display:block; }

.tier { padding:var(--s3) 0; }
.tier + .tier { border-top:1px solid var(--line); }
.tier-head { display:flex; align-items:center; gap:12px; }
.tier-swatch { width:12px; height:12px; flex:none; }
.tier-label {
  font:700 14px/1 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
.tier .figure { margin-top:var(--s2); }
.tier .chip-row { margin-top:var(--s2); grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }

.clients-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--s2); }

.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.stat { padding:var(--s3) 0; }

/* ---------- Connect (dark) ---------- */

.form-grid { display:flex; flex-direction:column; gap:var(--s3); }
.field label {
  display:block;
  font:700 14px/1 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--label-on-dark); margin-bottom:var(--s1);
}
.field input, .field select, .field textarea {
  width:100%;
  background:transparent; color:#FFFFFF;
  border:1px solid var(--line-on-dark);
  padding:12px 14px;
  font:400 17px/1.4 var(--font-body);
}
.field input::placeholder, .field textarea::placeholder { color:var(--label-on-dark); }
.field select option { color:var(--ink); background:#FFFFFF; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:#FFFFFF; outline:none;
}
.contact-block { padding:var(--s3) 0; }
.contact-block + .contact-block { border-top:1px solid var(--line-on-dark); }
.contact-block h3 {
  font:700 14px/1 var(--font-display);
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--label-on-dark); margin-bottom:var(--s2);
}
.contact-block p { color:var(--blue-pale); font-size:16px; }
.contact-block .email { font:600 22px/1.2 var(--font-display); color:#FFFFFF; }
.btn--on-dark {
  background:transparent; color:#FFFFFF; border:1px solid var(--line-on-dark);
}
.btn--on-dark:hover { background:transparent; color:#FFFFFF; border-color:#FFFFFF; }

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

.footer { background:var(--navy) url('../assets/backgrounds/dots-navy.svg'); padding:var(--s5) 0; }
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;
  border-top:1px solid var(--line-on-dark);
  padding-top:var(--s4);
}
.footer .brand-name { color:#FFFFFF; }
.footer .brand-sub { color:var(--blue-light); }
.footer-labels {
  display:flex; flex-direction:column; gap:6px; text-align:right;
  font:700 14px/1.4 var(--font-display);
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--label-on-dark);
}

/* ---------- Responsive ---------- */

@media (max-width:1100px) {
  :root { --gutter:48px; }
}

@media (max-width:900px) {
  .hero-grid, .grid-2, .grid-3, .stat-row { grid-template-columns:1fr; }
  .hero-title { font-size:44px; }
  .hero-visual { margin-top:var(--s4); }
  .clients-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width:840px) {
  .nav { display:none; }
  .btn.nav-toggle { display:inline-block; }
  .nav.open {
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:0 var(--gutter);
  }
  .nav.open a:not(.btn) { padding:14px 0; border-bottom:1px solid var(--line); }
  .nav.open .btn { margin:var(--s2) 0 var(--s3); text-align:center; }
  /* .topbar is position:sticky, so it is the containing block for the
     absolutely positioned open nav panel, which then spans the viewport. */
}

@media (max-width:700px) {
  :root { --gutter:24px; }
  .hero-title { font-size:40px; }
  h2 { font-size:24px; }
  .section { padding:40px 0; }
  .hero { padding:40px 0 32px; }
  .clients-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .chip-row--5 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stamp { width:168px; height:168px; }
  .stamp-hanzi { font-size:60px; }
  .figure { font-size:36px; }
}