@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(jetbrains-400.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(jetbrains-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(jakarta-300.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(jakarta-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(jakarta-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(jakarta-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(jakarta-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(jakarta-800.ttf) format('truetype');
}
:root {
  --orange:#F18525;
  --graphite:#3C3C3B;
  --gray:#878787;
  --muted:#545453;
  --light:#F5F5F4;
  --display:'Gilroy','Plus Jakarta Sans',sans-serif;
  --mono:'Monoglyphic','JetBrains Mono',monospace
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px
}
body {
  margin:0;
  background:#fff;
  color:var(--graphite);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  max-width:100%;
  display:block
}
svg {
  display:block;
  width:100%;
  height:100%
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:700
}
h2 {
  font-size:48px;
  line-height:1.25;
  letter-spacing:-.025em;
  margin-bottom:24px
}
h3 {
  font-size:20px;
  line-height:1.375;
  font-weight:600;
  margin-bottom:16px
}
p {
  color:var(--muted);
  font-size:16px;
  line-height:1.625
}
ul {
  list-style:none;
  margin:0;
  padding:0
}
:focus-visible {
  outline:3px solid var(--graphite);
  outline-offset:5px
}
.dark :focus-visible {
  outline-color:var(--orange)
}
.container {
  max-width:1152px;
  margin:0 auto;
  padding:0 24px
}
.section {
  padding:112px 0
}
.light {
  background:var(--light)
}
.dark {
  background:var(--graphite);
  color:#fff
}
.dark p {
  color:rgb(255 255 255 / .6)
}
.eyebrow,.dark .eyebrow {
  font-family:var(--mono);
  font-size:18px;
  line-height:1.5;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:20px
}
.lead {
  font-size:18px;
  line-height:1.625
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  background:white;
  padding:14px;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:none
}
.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent
}
.site-header.scrolled,.site-header.menu-open {
  background:rgb(255 255 255 / .96);
  backdrop-filter:blur(8px);
  border-color:rgb(60 60 59 / .07)
}
.navigation {
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  flex-shrink:0
}
.brand img {
  height:60px;
  width:auto
}
.navigation-links {
  display:flex;
  align-items:center;
  gap:32px
}
.navigation-links>a:not(.button) {
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  transition:color .2s
}
.navigation-links>a:hover {
  color:var(--graphite)
}
.button {
  display:inline-block;
  border:1px solid transparent;
  background:var(--orange);
  color:#fff;
  padding:15px 31px;
  font-weight:600;
  font-size:16px;
  line-height:24px;
  text-align:center;
  border-radius:2px;
  transition:opacity .2s,border-color .2s
}
.button:hover:not(:disabled) {
  opacity:.9
}
.button-small {
  font-size:14px;
  padding:9px 19px;
  margin-left:16px;
  line-height:20px
}
.button-outline {
  background:transparent;
  color:var(--graphite);
  border-color:rgb(60 60 59 / .25);
  font-weight:500
}
.button-outline:hover {
  border-color:rgb(60 60 59 / .6)
}
.button:disabled {
  cursor:not-allowed
}
.menu-toggle {
  display:none
}
.hero {
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden
}
.hero:before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(0deg,#3c3c3b 0,#3c3c3b 1px,transparent 1px,transparent 72px),repeating-linear-gradient(90deg,#3c3c3b 0,#3c3c3b 1px,transparent 1px,transparent 72px);
  opacity:.025
}
.hero-grid {
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  padding-top:112px;
  padding-bottom:80px
}
.hero-eyebrow {
  margin-bottom:32px
}
h1 {
  font-size:84px;
  line-height:1.04;
  letter-spacing:-.045em;
  margin-bottom:28px
}
.hero-description {
  font-size:20px;
  line-height:1.625;
  max-width:448px;
  margin-bottom:40px
}
.hero-actions {
  display:flex;
  gap:12px
}
.hero-art {
  height:460px
}
.hero-art svg text {
  font-size:13.3px
}
.scroll-cue {
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  opacity:.3
}
.scroll-cue span {
  font:10px var(--mono);
  letter-spacing:.1em
}
.scroll-cue i {
  width:1px;
  height:32px;
  background:var(--graphite)
}
.section-intro {
  max-width:768px;
  margin-bottom:64px
}
.section-intro .lead {
  font-size:20px
}
.solutions-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:rgb(60 60 59 / .1)
}
.solution {
  background:var(--light);
  padding:48px;
  transition:background .3s
}
.solution:hover {
  background:#fff
}
.accent-line {
  width:32px;
  height:1px;
  background:var(--orange);
  margin-bottom:32px;
  transition:width .3s
}
.solution:hover .accent-line {
  width:56px
}
.capabilities-intro {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:80px
}
.capabilities-intro h2 {
  max-width:560px;
  margin:0
}
.capabilities-intro>div {
  max-width:320px;
  text-align:right
}
.capabilities-intro .eyebrow {
  margin-bottom:12px
}
.capabilities-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgb(60 60 59 / .1)
}
.capability {
  padding:40px;
  background:#fff;
  transition:background .2s,color .2s;
  font-weight:600
}
.number {
  display:block;
  font:12px var(--mono);
  letter-spacing:.1em;
  color:var(--gray);
  margin-bottom:16px
}
.capability:hover,.capability:focus-visible {
  background:var(--graphite);
  color:white
}
.capability:hover .number,.capability:focus-visible .number {
  color:var(--orange)
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:80px
}
.step {
  padding:32px 40px;
  border-left:1px solid rgb(255 255 255 / .15)
}
.step:first-child {
  padding-left:0;
  border:0
}
.step .number {
  font-size:14px;
  color:var(--orange);
  margin-bottom:28px
}
.step h3 {
  font-size:24px
}
.quote {
  font-size:36px;
  line-height:1.375;
  font-weight:600;
  color:var(--graphite);
  max-width:768px;
  margin-bottom:80px
}
.quote span {
  color:var(--orange)
}
.split {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;
  align-items:center
}
.smaller-title {
  font-size:36px
}
.difference-art {
  height:320px
}
.difference-art svg text {
  font-size:14px
}
.about-split {
  align-items:start
}
.about-split h2 {
  margin-bottom:28px
}
.about-split blockquote {
  margin:32px 0 0;
  border-left:3px solid var(--orange);
  padding-left:24px;
  font-size:18px;
  font-weight:600;
  line-height:1.375
}
.mosaic {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:rgb(60 60 59 / .1)
}
.mosaic>div {
  background:var(--light);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  font-size:14px;
  font-weight:500;
  line-height:1.25;
  color:rgb(60 60 59 / .7);
  transition:background .2s
}
.mosaic>div:hover {
  background:#fff
}
.mosaic .mosaic-accent,.mosaic .mosaic-accent:hover {
  background:var(--orange)
}
.mosaic-accent svg {
  width:38px;
  height:34px
}
.convergence-art svg {
  height:auto
}
.empathy-description {
  font-size:20px
}
.contact {
  padding:128px 0;
  position:relative;
  overflow:hidden;
  text-align:center
}
.contact:before {
  content:'';
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:40%;
  background-image:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 56px),repeating-linear-gradient(90deg,#fff 0,#fff 1px,transparent 1px,transparent 56px);
  opacity:.035;
  pointer-events:none
}
.contact>.container {
  position:relative
}
.contact .eyebrow {
  margin-bottom:28px
}
.contact h2 {
  font-size:60px;
  line-height:1.08;
  letter-spacing:-.025em;
  max-width:768px;
  margin:0 auto 28px
}
.contact-description {
  font-size:18px;
  max-width:512px;
  margin:0 auto 40px
}
.contact .button {
  padding-left:39px;
  padding-right:39px
}
.site-footer {
  padding:40px 0;
  border-top:1px solid rgb(60 60 59 / .1)
}
.site-footer>.container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.site-footer .brand img {
  height:32px
}
.site-footer p {
  font-size:14px;
  color:var(--muted);
  text-align:right
}
@keyframes float-a {
  0%,100% {
    transform:translate(0,0)
  }
  33% {
    transform:translate(4px,-7px)
  }
  66% {
    transform:translate(-5px,4px)
  }
}
@keyframes float-b {
  0%,100% {
    transform:translate(0,0)
  }
  40% {
    transform:translate(-8px,6px)
  }
  80% {
    transform:translate(5px,-5px)
  }
}
@keyframes pulse-opacity {
  0%,100% {
    opacity:1
  }
  50% {
    opacity:.35
  }
}
.animate-float-a {
  animation:float-a 9s ease-in-out infinite
}
.animate-float-b {
  animation:float-b 12s ease-in-out infinite
}
.animate-pulse-orange {
  animation:pulse-opacity 3s ease-in-out infinite
}
@media(max-width:1199px) {
  .hero-actions {
    flex-wrap:wrap
  }
  .solution {
    padding:36px
  }
  .navigation-links {
    gap:22px
  }
  .button-small {
    margin-left:0
  }
}
@media(max-width:1023px) {
  h1 {
    font-size:60px
  }
  .contact h2 {
    font-size:48px
  }
}
@media(max-width:767px) {
  .navigation {
    flex-wrap:wrap
  }
  .menu-toggle {
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:44px;
    height:44px;
    padding:10px;
    border:0;
    background:transparent;
    gap:5px
  }
  .js .menu-toggle {
    display:flex
  }
  .menu-toggle span {
    display:block;
    width:24px;
    height:1px;
    background:var(--graphite);
    transition:transform .2s,opacity .2s
  }
  .menu-open .menu-toggle span:first-child {
    transform:translateY(6px) rotate(45deg)
  }
  .menu-open .menu-toggle span:nth-child(2) {
    opacity:0
  }
  .menu-open .menu-toggle span:last-child {
    transform:translateY(-6px) rotate(-45deg)
  }
  .navigation-links {
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:20px;
    padding:24px 0 32px;
    max-height:calc(100svh - 64px);
    overflow:auto
  }
  .js .navigation-links {
    display:none
  }
  .js .menu-open .navigation-links {
    display:flex
  }
  .navigation-links>a:not(.button) {
    font-size:16px;
    min-height:24px
  }
  .navigation-links .button {
    margin-top:8px
  }
  .site-header:has(.navigation-links) {
    background:rgb(255 255 255 / .96)
  }
  html:not(.js) .site-header {
    position:relative
  }
}
@media(max-width:959px) {
  .hero-grid {
    gap:24px
  }
  h1 {
    font-size:56px
  }
  .hero-art {
    height:380px
  }
  .solution {
    padding:32px
  }
  .capability {
    padding:28px
  }
  .split {
    gap:40px
  }
  h2 {
    font-size:40px
  }
  .mosaic>div {
    padding:10px;
    font-size:12px
  }
  .step {
    padding:24px
  }
  .steps {
    margin-top:56px
  }
}
@media(max-width:767px) {
  .section {
    padding:80px 0
  }
  h1 {
    font-size:48px;
    letter-spacing:-.04em
  }
  h2 {
    font-size:36px
  }
  .hero-grid {
    display:block;
    padding-top:112px;
    padding-bottom:112px
  }
  .hero-art {
    display:none
  }
  .hero-description {
    font-size:18px
  }
  .hero-eyebrow {
    font-size:16.5px
  }
  .hero-actions {
    flex-direction:column
  }
  .hero-actions .button {
    width:100%
  }
  .hero {
    min-height:100svh
  }
  .scroll-cue {
    bottom:24px
  }
  .desktop-break {
    display:none
  }
  .section-intro {
    margin-bottom:48px
  }
  .section-intro .lead {
    font-size:18px
  }
  .solutions-grid {
    grid-template-columns:1fr
  }
  .solution {
    padding:40px
  }
  .capabilities-intro {
    display:block;
    margin-bottom:48px
  }
  .capabilities-intro h2 {
    margin-bottom:32px
  }
  .capabilities-intro>div {
    max-width:none;
    text-align:left
  }
  .capabilities-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .capability {
    padding:32px;
    min-height:132px;
    font-size:16px
  }
  .steps {
    grid-template-columns:minmax(0,1fr);
    gap:0;
    margin-top:48px
  }
  .step,.step:first-child {
    padding:32px 0;
    border-left:0;
    border-top:1px solid rgb(255 255 255 / .15)
  }
  .quote {
    font-size:30px;
    margin-bottom:48px
  }
  .split {
    grid-template-columns:minmax(0,1fr);
    gap:48px
  }
  .smaller-title {
    font-size:30px
  }
  .difference-art {
    height:288px
  }
  .mosaic>div {
    font-size:14px;
    padding:14px
  }
  .mosaic {
    max-width:520px;
    width:100%;
    margin:auto
  }
  .convergence-art {
    max-width:520px
  }
  .contact {
    padding:96px 0
  }
  .contact h2 {
    font-size:36px
  }
  .contact-description {
    font-size:18px
  }
  .site-footer>.container {
    flex-direction:column
  }
  .site-footer p {
    text-align:center;
    font-size:13px
  }
  .site-footer .brand img {
    height:32px
  }
}
@media(min-width:640px) and (max-width:767px) {
  .hero-actions {
    flex-direction:row
  }
  .hero-actions .button {
    width:auto
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
.split>* {
  min-width:0
}
.mosaic>div {
  min-width:0;
  overflow-wrap:anywhere
}
.capability {
  min-width:0;
  overflow-wrap:anywhere
}
@media(max-width:400px) {
  .capability {
    padding:28px 16px;
    font-size:14px
  }
}

/* BZW-PD-CONTACT-001: scoped contact controls preserve the surrounding baseline. */
.contact-form { max-width:760px; margin:48px auto 0; text-align:left; }
.contact-form p { font-size:15px; line-height:1.6; color:#eee; }
.contact-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:24px 0; }
.contact-field { min-width:0; }
.contact-wide { grid-column:1/-1; }
.contact-field label { display:block; margin-bottom:8px; font-size:16px; color:#fff; }
.contact-field input,.contact-field textarea { width:100%; min-height:48px; padding:12px 14px; border:2px solid #aaa; border-radius:4px; background:#fff; color:#252525; font:inherit; font-size:16px; }
.contact-field textarea { resize:vertical; }
.contact-form :focus-visible { outline:3px solid #fff; outline-offset:4px; }
.contact-field [aria-invalid=true] { border-color:#ffbb88; }
.contact-form .field-error { margin:8px 0 0; color:#ffcfad; }
.contact-status { padding:20px; border:2px solid #ffbb88; border-radius:4px; margin:24px 0; scroll-margin-top:110px; }
.contact-status p { margin:0; }
.contact-status a { color:#fff; text-decoration:underline; overflow-wrap:anywhere; }
.contact-status ul { margin:12px 0 0; padding-left:24px; }
.contact-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.contact-form .button { color:#252525; margin-top:12px; }
@media(max-width:767px) { .contact-fields { grid-template-columns:minmax(0,1fr); gap:20px; } .contact-form .button { width:100%; } }
