@font-face {
  font-family:DM Sans;
  src:url(dm-sans-400.ttf) format("truetype");
  font-display:swap
}
@font-face {
  font-family:DM Sans;
  src:url(dm-sans-700.ttf) format("truetype");
  font-weight:700;
  font-display:swap
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:25px
}
body {
  margin:0;
  background:#f9faf8;
  color:#192d29;
  font:1rem/1.65 "DM Sans",sans-serif
}
a {
  color:inherit;
  text-underline-offset:.25em
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #0966b0;
  outline-offset:5px
}
button,input,select {
  font:inherit
}
.skip {
  position:absolute;
  top:-100px;
  background:white;
  padding:15px;
  z-index:10
}
.skip:focus {
  top:0
}
.portfolio-header,footer {
  max-width:1400px;
  margin:auto;
  padding:25px 5%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  font-size:.8rem
}
.portfolio-header>a {
  text-decoration:none;
  font-weight:700
}
.portfolio-header span {
  font-weight:400;
  color:#566a60
}
.portfolio-header nav {
  display:flex;
  gap:25px
}
main {
  overflow:clip
}
.section,.case-note {
  max-width:1400px;
  margin:auto;
  padding:75px 5%
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  margin-bottom:30px
}
.eyebrow {
  font-size:.68rem;
  letter-spacing:.14em;
  font-weight:700;
  color:#526b60
}
h1 {
  font-size:clamp(2.6rem,5.7vw,5.3rem);
  line-height:1.08;
  letter-spacing:-.055em;
  margin:20px 0
}
h2 {
  font-size:clamp(1.8rem,3.5vw,3.2rem);
  line-height:1.15;
  letter-spacing:-.04em;
  margin:15px 0 25px
}
h3 {
  font-size:1.3rem;
  line-height:1.3;
  letter-spacing:-.025em
}
.section-heading>p,.case-note p,.process p {
  color:#52665d
}
.client-nav {
  max-width:1400px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 5%;
  background:#fff
}
.client-brand {
  font-size:1.5rem;
  text-decoration:none;
  font-weight:700;
  letter-spacing:-.06em;
  color:#12264f
}
.client-brand span {
  color:#2475c9
}
.client-nav nav {
  display:flex;
  gap:25px;
  align-items:center;
  font-size:.8rem
}
.button,.form-actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#173661;
  color:#fff;
  padding:14px 22px;
  border-radius:6px;
  text-decoration:none;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s
}
.button:hover,.form-actions button:hover {
  background:#255996
}
.db-hero {
  background:linear-gradient(120deg,#04142f,#124b7d);
  color:white;
  padding:75px 5% 0;
  text-align:center
}
.db-hero>.eyebrow {
  color:#a4d2ff
}
.db-hero>p:not(.eyebrow) {
  max-width:660px;
  margin:25px auto;
  color:#c2d3e8;
  font-size:1.15rem
}
.db-hero h1 {
  max-width:900px;
  margin:20px auto
}
.actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  margin:35px 0 60px
}
.db-hero .button {
  background:#fff;
  color:#12264f
}
.secondary {
  font-size:.85rem
}
.db-pillars {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:1100px;
  margin:auto;
  border-top:1px solid #527494
}
.db-pillars p {
  padding:25px 15px;
  font-size:.75rem;
  color:#c2d3e8
}
.db-pillars b {
  display:block;
  font-size:1.35rem;
  color:white;
  margin-bottom:5px
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.cards article {
  background:white;
  border:1px solid #dce3e1;
  border-radius:12px;
  padding:30px
}
.cards span {
  font-size:.65rem;
  letter-spacing:.08em;
  color:#52665d
}
.cards p {
  color:#52665d;
  font-size:.9rem
}
.process {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  border-top:1px solid #dce3e1
}
.steps {
  list-style:none;
  padding:0;
  margin:0
}
.steps li {
  display:flex;
  gap:25px;
  border-bottom:1px solid #dce3e1;
  padding:15px 0
}
.steps b {
  font-size:.7rem;
  padding-top:10px;
  color:#326bb2
}
.steps h3 {
  margin:0
}
.steps p {
  font-size:.85rem
}
.closing {
  background:#eaf0f7;
  padding:65px 5%;
  text-align:center
}
.case-note {
  border-top:1px solid #dce3e1
}
.case-note h2 {
  font-size:1.6rem
}
.case-note p {
  max-width:950px;
  font-size:.9rem
}
.bbwa-intro,.crm-hero {
  max-width:1400px;
  padding:70px 5%;
  margin:auto
}
.bbwa-intro {
  background:#ede9dd
}
.bbwa-intro>p:last-child,.crm-hero>p:last-child {
  max-width:760px;
  font-size:1.15rem;
  color:#52665d
}
.bbwa .eyebrow {
  color:#72602b
}
.qualification {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px
}
.privacy-note {
  font-size:.8rem;
  color:#52665d;
  max-width:340px
}
.step-list {
  padding-left:20px;
  font-size:.8rem;
  color:#52665d
}
.step-list li {
  padding:5px
}
form[data-qualification] {
  background:white;
  border:1px solid #dddcca;
  padding:35px;
  border-radius:14px;
  align-self:start
}
.qualification fieldset {
  border:0;
  padding:0;
  margin:20px 0
}
.qualification legend {
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:20px
}
.qualification label {
  font-size:.9rem
}
.choice {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #d6d6cb;
  border-radius:7px;
  padding:16px;
  margin-bottom:12px;
  cursor:pointer
}
.choice:has(input:checked) {
  border-color:#8b762e;
  background:#f8f3e3
}
.choice input {
  width:18px;
  height:18px;
  accent-color:#7a6628
}
select {
  width:100%;
  padding:13px;
  border:1px solid #a9ada3;
  border-radius:6px;
  background:white;
  margin-top:8px
}
.qualification fieldset>p {
  font-size:.8rem;
  color:#52665d
}
.form-actions {
  display:flex;
  gap:12px;
  margin-top:25px
}
.form-actions button {
  background:#746128
}
.form-actions [data-back] {
  background:#f0ede3;
  color:#3f412d
}
.form-error {
  color:#a52222;
  font-size:.85rem;
  min-height:1.5em
}
[data-form-status] {
  font-size:.75rem;
  color:#72602b
}
dl {
  margin:0
}
dt {
  font-size:.75rem;
  color:#52665d
}
dd {
  margin:0 0 18px;
  font-weight:700
}
.crm-hero {
  background:#eaf0ed
}
.crm-hero h1 {
  max-width:1050px
}
.results {
  max-width:1260px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#dce3e1;
  border:1px solid #dce3e1;
  border-radius:10px;
  overflow:hidden
}
.results article {
  background:white;
  padding:30px
}
.results h2 {
  font-size:1rem;
  margin:12px 0
}
.results article>p:last-child {
  font-size:.8rem;
  color:#52665d
}
.metric {
  font-size:3rem;
  font-weight:700;
  letter-spacing:-.06em;
  margin:0;
  color:#1f614b
}
.workflow-cards {
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}
.workflow-cards li {
  padding:25px;
  border:1px solid #dce3e1;
  border-radius:10px;
  background:#fff
}
.workflow-cards span {
  font-size:.7rem;
  color:#486f5c
}
.workflow-cards p {
  font-size:.85rem;
  color:#52665d
}
footer {
  border-top:1px solid #dce3e1;
  color:#52665d
}
[hidden] {
  display:none!important
}
@media(max-width:700px) {
  .portfolio-header {
    align-items:flex-start
  }
  .portfolio-header span {
    display:block
  }
  .portfolio-header nav {
    flex-direction:column;
    gap:10px
  }
  .client-nav {
    flex-wrap:wrap
  }
  .client-nav nav {
    gap:15px;
    flex-wrap:wrap
  }
  .section,.case-note,.bbwa-intro,.crm-hero {
    padding:45px 5%
  }
  .section-heading,.cards,.process,.qualification,.results,.workflow-cards {
    grid-template-columns:1fr;
    gap:20px
  }
  .db-hero {
    padding-top:45px
  }
  .db-pillars {
    grid-template-columns:1fr
  }
  .db-pillars p {
    margin:0;
    padding:15px;
    border-bottom:1px solid #527494
  }
  .actions {
    flex-wrap:wrap
  }
  .qualification form {
    padding:25px
  }
  .results {
    margin:0 5%
  }
  .workflow-cards {
    grid-template-columns:1fr 1fr
  }
  .results article {
    padding:25px
  }
  .process {
    gap:15px
  }
  footer {
    align-items:flex-start;
    flex-direction:column
  }
}
@media(max-width:400px) {
  .workflow-cards {
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* Retain original project imagery alongside the implementation preview. */
.db-website { max-width:1100px; margin:64px auto 0; padding:0 5%; }
.db-website img { display:block; width:100%; height:auto; border:1px solid #dce3e1; border-radius:12px; box-shadow:0 24px 60px -36px #04142f80; }
.db-website figcaption { margin-top:14px; color:#52665d; font-size:.8rem; }