:root {
    --blue: #1f3f57;
    --slate: #2e4a66;
    --ink: #34312d;
    --gold: #c08a2b;
    --deepgold: #946715;
    --paper: #f6f3ee;
    --pale: #e9eef2;
    --line: #d6dfe5
  }

  * {
    box-sizing: border-box
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px
  }

  body {
    margin: 0;
    font-family: Roboto,Arial,sans-serif;
    color: var(--blue);
    background: white;
    line-height: 1.6
  }

  a {
    color: inherit;
    text-decoration: none
  }

  button {
    font: inherit;
    cursor: pointer
  }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 5px
  }

  h1,
  h2,
  h3,
  p {
    margin: 0
  }

  h1,
  h2,
  h3 {
    font-weight: 500;
    line-height: 1.12
  }

  h1 {
    font-size: clamp(46px,5.4vw,78px);
    letter-spacing: -2.5px;
    max-width: 760px
  }

  h2 {
    font-size: clamp(32px,3.5vw,49px);
    letter-spacing: -1.2px
  }

  h3 {
    font-size: 24px
  }

  p {
    color: #52616c
  }

  section {
    padding: 96px 0;
    scroll-margin-top: 20px
  }

  .wrap {
    width: min(1200px,calc(100% - 80px));
    margin: auto
  }

  .eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 22px
  }

  .eyebrow:before {
    content: '';
    display: inline-block;
    width: 23px;
    height: 3px;
    background: var(--gold);
    vertical-align: middle;
    margin-right: 12px
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: var(--gold);
    color: #fff;
    padding: 14px 23px;
    border-radius: 8px;
    font-weight: 500;
    border: 1px solid var(--gold);
    transition: background .2s
  }

  .btn:hover {
    background: var(--deepgold)
  }

  .textlink {
    display: inline-flex;
    gap: 20px;
    color: var(--deepgold);
    font-weight: 500;
    border-bottom: 1px solid #c08a2b66;
    padding-bottom: 5px
  }

  .textlink:hover {
    border-color: var(--deepgold)
  }

  .actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 30px
  }

  .intro {
    font-size: 19px;
    max-width: 570px;
    margin-top: 22px
  }

  .heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    margin-bottom: 45px
  }

  .heading-row p {
    max-width: 390px
  }

  header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--line)
  }

  .nav {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
  }

  .logo {
    display: block;
    width: 285px;
    height: auto
  }

  .navlinks {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 14px;
    font-weight: 500
  }

  .navlinks a:hover {
    color: var(--deepgold)
  }

  .navlinks .btn {
    color: white;
    gap: 10px;
    padding: 11px 17px
  }

  .menu {
    display: none;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 12px
  }

  .hero {
    background: var(--blue);
    color: white;
    padding: 83px 0 0;
    overflow: hidden
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 55px;
    align-items: center;
    padding-bottom: 66px
  }

  .hero p {
    color: #dbe3e9
  }

  .hero .textlink {
    color: white;
    border-color: #8093a1
  }

  .hero .intro {
    max-width: 560px;
    font-size: 20px
  }

  .hero-foot {
    border-top: 1px solid #ffffff29;
    padding: 23px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 14px;
    color: #dce5ec
  }

  .hero-foot b {
    color: white;
    font-weight: 500
  }

  .system {
    padding: 26px 0 26px 30px;
    border-left: 1px solid #ffffff26
  }

  .system-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #b5c8d5;
    margin-bottom: 28px
  }

  .system-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 20px 0
  }

  .system-row span {
    color: #c5d4de;
    width: 90px;
    font-size: 14px
  }

  .track {
    flex: 1;
    border: 1px solid #7c94a5;
    border-radius: 8px;
    padding: 18px 23px;
    font-size: 19px;
    position: relative;
    background: #ffffff07
  }

  .system-row:nth-child(3) .track {
    margin-left: 22px
  }

  .system-row:nth-child(4) .track {
    margin-left: 44px
  }

  .system-end {
    font-size: 18px;
    padding: 22px 0 0 108px;
    color: #e5edf1
  }

  .system-end:before {
    content: '';
    display: block;
    background: var(--gold);
    width: 38px;
    height: 4px;
    margin-bottom: 16px
  }

  .recognition {
    padding: 60px 0;
    background: var(--pale)
  }

  .recognition-grid {
    display: grid;
    grid-template-columns: .9fr 1.5fr;
    gap: 80px;
    align-items: start
  }

  .recognition h2 {
    font-size: 34px
  }

  .pain-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 35px
  }

  .pain-list li {
    border-top: 1px solid #bacbd6;
    padding-top: 15px;
    color: var(--blue);
    font-size: 17px
  }

  .pain-list small {
    display: block;
    color: #52616c;
    font-size: 14px;
    margin-top: 4px
  }

  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: start
  }

  .role p {
    margin-bottom: 22px;
    font-size: 18px
  }

  .role .statement {
    font-size: 27px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--blue)
  }

  .role ul {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px
  }

  .role li {
    border-left: 3px solid var(--gold);
    padding-left: 12px;
    font-size: 14px
  }

  .services {
    background: #f5f7f9
  }

  .services-list {
    border-top: 1px solid var(--line)
  }

  .service {
    display: grid;
    grid-template-columns: 65px 1fr 1.15fr 30px;
    gap: 20px;
    align-items: center;
    padding: 27px 0;
    border-bottom: 1px solid var(--line)
  }

  .service .number {
    font-size: 13px;
    color: var(--deepgold)
  }

  .service h3 {
    font-size: 25px
  }

  .service p {
    font-size: 16px
  }

  .service .arrow {
    font-size: 27px;
    color: var(--deepgold)
  }

  .service:hover h3 {
    color: var(--deepgold)
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px
  }

  .step {
    border-top: 2px solid var(--line);
    padding-top: 25px
  }

  .step span {
    display: block;
    font-size: 38px;
    color: var(--gold);
    margin-bottom: 25px
  }

  .step h3 {
    font-size: 22px;
    min-height: 50px
  }

  .step p {
    margin-top: 18px;
    font-size: 16px
  }

  .case {
    padding: 0;
    background: var(--blue);
    color: white
  }

  .case-grid {
    display: grid;
    grid-template-columns: .9fr 1.2fr;
    gap: 90px;
    align-items: center;
    padding: 80px 0
  }

  .case p {
    color: #d9e3e9
  }

  .case .textlink {
    color: #fff;
    border-color: #9d8150
  }

  .case-panel {
    background: #ffffff08;
    border: 1px solid #ffffff30;
    border-radius: 8px;
    padding: 40px
  }

  .case-name {
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.15
  }

  .case-industry {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: #bacdda
  }

  .metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    border-top: 1px solid #ffffff30;
    margin-top: 40px;
    padding-top: 28px
  }

  .metric strong {
    display: block;
    font-weight: 500;
    font-size: 42px;
    color: #fff
  }

  .metric span {
    display: block;
    color: #d1dde5;
    font-size: 14px
  }

  .case details {
    margin-top: 28px;
    color: #d9e3e9
  }

  .case summary {
    cursor: pointer;
    color: #fff;
    font-weight: 500
  }

  .case details p {
    margin-top: 15px;
    font-size: 15px
  }

  .people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 40px
  }

  .person {
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 8px
  }

  .person-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 23px
  }

  .initial {
    width: 57px;
    height: 57px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pale);
    font-size: 22px
  }

  .person small {
    color: var(--deepgold)
  }

  .person p {
    font-size: 17px
  }

  .knowledge {
    background: var(--pale)
  }

  .articles {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px
  }

  .article {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    min-height: 290px
  }

  .article .tag {
    color: var(--deepgold);
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase
  }

  .article h3 {
    font-size: 25px
  }

  .article p {
    font-size: 15px;
    margin: 17px 0 26px
  }

  .article .textlink {
    align-self: start;
    margin-top: auto
  }

  .insight {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 95px;
    align-items: center
  }

  .insight-card {
    border-left: 4px solid var(--gold);
    padding: 5px 0 5px 35px
  }

  .insight-card small {
    font-size: 13px;
    color: #52616c
  }

  .insight-card h3 {
    font-size: 34px;
    margin: 20px 0
  }

  .insight-card p {
    margin-bottom: 25px
  }

  .contact {
    background: var(--blue);
    color: #fff
  }

  .contact p {
    color: #d7e1e8
  }

  .contact .split {
    align-items: center
  }

  .contact h2 {
    font-size: 50px
  }

  .contact .contact-right {
    border-left: 1px solid #ffffff30;
    padding-left: 45px
  }

  .contact .textlink {
    color: #fff
  }

  footer {
    padding: 45px 0 25px;
    background: #f5f7f9;
    font-size: 14px
  }

  .footer-top {
    display: flex;
    justify-content: space-between;
    gap: 40px
  }

  .footer-brand {
    max-width: 330px
  }

  .footer-brand img {
    width: 275px;
    max-width: 100%;
    margin-bottom: 16px
  }

  .footer-links {
    display: flex;
    gap: 50px
  }

  .footer-links div {
    display: grid;
    gap: 7px;
    align-content: start
  }

  .footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
    color: #687780;
    font-size: 12px
  }

  .proposal {
    padding: 18px 0;
    background: #fff;
    font-size: 13px;
    color: #52616c
  }

  .proposal summary {
    cursor: pointer
  }

  .proposal p {
    margin-top: 15px;
    max-width: 900px
  }

  .proposal ul {
    padding-left: 20px
  }

  .proposal a {
    text-decoration: underline
  }

  dialog {
    width: min(600px,calc(100% - 40px));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 38px;
    color: var(--blue)
  }

  dialog::backdrop {
    background: #122c40aa
  }

  dialog h2 {
    font-size: 30px;
    margin: 12px 0 20px
  }

  dialog p {
    margin-bottom: 25px
  }

  .dialog-close {
    float: right;
    background: none;
    border: 0;
    font-size: 24px;
    color: var(--blue)
  }

  @media(min-width:1450px) {
    .hero-grid {
      gap: 100px
    }
  }

  @media(max-width:1100px) {
    .navlinks {
      gap: 13px
    }

    .logo {
      width: 235px
    }

    .navlinks {
      font-size: 12px
    }

    .wrap {
      width: calc(100% - 50px)
    }

    .split,
    .insight,
    .case-grid {
      gap: 45px
    }

    .hero-grid {
      gap: 25px
    }

    .system {
      padding-left: 15px
    }

    .system-row {
      gap: 10px
    }

    .system-row span {
      width: 65px
    }

    .track {
      padding: 15px
    }

    .system-end {
      padding-left: 75px
    }

    .recognition-grid {
      gap: 40px
    }
  }

  @media(max-width:800px) {
    .wrap {
      width: calc(100% - 36px)
    }

    section {
      padding: 60px 0
    }

    .nav {
      height: 85px
    }

    .logo {
      width: 245px;
      max-width: 70vw
    }

    .menu {
      display: block
    }

    .navlinks {
      display: none;
      position: absolute;
      top: 85px;
      left: 0;
      right: 0;
      background: #fff;
      padding: 24px;
      flex-direction: column;
      align-items: stretch;
      font-size: 16px;
      border-bottom: 1px solid var(--line)
    }

    .navlinks.open {
      display: flex
    }

    .hero {
      padding-top: 55px
    }

    h1 {
      letter-spacing: -1.7px
    }

    .hero-grid,
    .split,
    .recognition-grid,
    .case-grid,
    .insight {
      grid-template-columns: 1fr;
      gap: 35px
    }

    .system {
      display: none
    }

    .hero-grid {
      padding-bottom: 45px
    }

    .hero-foot {
      flex-direction: column;
      gap: 6px;
      font-size: 13px
    }

    .heading-row {
      display: block
    }

    .heading-row p,
    .heading-row .textlink {
      margin-top: 22px
    }

    .pain-list {
      gap: 25px
    }

    .services .service {
      grid-template-columns: 30px 1fr 20px;
      gap: 12px
    }

    .service p {
      grid-column: 2;
      grid-row: 2
    }

    .service .arrow {
      grid-column: 3;
      grid-row: 1
    }

    .service h3 {
      font-size: 22px
    }

    .steps {
      grid-template-columns: 1fr 1fr;
      gap: 35px 22px
    }

    .step h3 {
      min-height: 0
    }

    .step span {
      margin-bottom: 15px
    }

    .case-grid {
      padding: 55px 0
    }

    .case-panel {
      padding: 28px
    }

    .people,
    .articles {
      grid-template-columns: 1fr
    }

    .article {
      min-height: 250px
    }

    .insight-card {
      padding-left: 24px
    }

    .contact h2 {
      font-size: 40px
    }

    .contact .contact-right {
      border: 0;
      padding: 0
    }

    .footer-top,
    .footer-bottom {
      flex-direction: column;
      gap: 20px
    }

    .footer-links {
      gap: 40px
    }

    .footer-bottom {
      margin-top: 25px
    }

    .intro {
      font-size: 18px
    }
  }

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

  /* A typographic editorial rhythm: margin notes, quiet rules, one expressive serif. */
  .eyebrow {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    display: flex;
    align-items: baseline;
    gap: 13px;
    margin-bottom: 24px
  }

  .eyebrow:before {
    display: none
  }

  .eyebrow .folio {
    font: 12px/1.4 Roboto,Arial,sans-serif;
    color: var(--deepgold);
    display: inline-block;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    min-width: 24px
  }

  .hero .eyebrow {
    font-size: 14px;
    color: #d4dfe6
  }

  .hero .eyebrow .folio {
    color: #e1b460
  }

  h1 em,
  h2 em {
    font-family: Roboto,Arial,sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -1.5px
  }

  h2 {
    line-height: 1.15
  }

  .footer-brand img {
    height: auto;
    display: block
  }

  .hero {
    --align: 0;
    --drift: 0px
  }

  .system {
    border: 0;
    padding: 25px 0 25px 20px;
    transform: translateY(var(--drift));
    will-change: transform
  }

  .system-label {
    font-family: Roboto,Arial,sans-serif;
    font-style: normal;
    font-size: 22px;
    letter-spacing: 0;
    text-transform: none;
    color: #dce7ed;
    transform: rotate(-3deg);
    margin-bottom: 42px
  }

  .system-row {
    position: relative;
    display: block;
    margin: 0 0 26px;
    padding-left: 0;
    transform: translateX(calc(var(--offset) * (1 - var(--align))));
    transition: transform .12s linear
  }

  .system-row:nth-child(2) {
    --offset: -28px
  }

  .system-row:nth-child(3) {
    --offset: 13px
  }

  .system-row:nth-child(4) {
    --offset: 50px
  }

  .system-row>span {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9db3c3;
    display: block;
    width: auto;
    margin-bottom: 5px
  }

  .track {
    margin-left: 0!important;
    border: 0;
    border-bottom: 1px solid #a7bac966;
    border-radius: 0;
    padding: 0 0 14px;
    background: none;
    font-size: clamp(25px,2.8vw,39px);
    font-weight: 400;
    white-space: nowrap
  }

  .track:after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
    opacity: calc(.35 + .65 * var(--align))
  }

  .system-end {
    padding: 15px 0 0;
    font: 500 25px Roboto,Arial,sans-serif;
    color: #e8edf0
  }

  .system-end:before {
    display: none
  }

  .system-note {
    font-size: 11px;
    letter-spacing: 1px;
    color: #94adbf;
    margin-top: 22px
  }

  .role-visual {
    margin-top: 35px;
    position: relative
  }

  .role-visual img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 8px
  }

  .role-visual figcaption {
    font-size: 12px;
    color: #6a7882;
    margin-top: 8px
  }

  .people {
    gap: 40px
  }

  .person {
    padding: 0;
    border: 0;
    border-radius: 0;
    display: grid;
    grid-template-columns: 185px 1fr;
    gap: 25px;
    align-items: start
  }

  .person-portrait {
    width: 185px;
    height: 238px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--slate)
  }

  .person-top {
    margin: 10px 0 20px;
    display: block
  }

  .person-top h3 {
    font-size: 25px;
    margin-bottom: 7px
  }

  .person p {
    font-size: 16px
  }

  .person small {
    font-size: 13px
  }

  .person .initial {
    display: none
  }

  .case-panel {
    position: relative;
    overflow: hidden
  }

  .case-panel:before {
    content: 'W';
    position: absolute;
    font: 500 280px Roboto,Arial,sans-serif;
    right: -20px;
    top: -20px;
    line-height: 1;
    color: #ffffff05;
    pointer-events: none
  }

  .case-industry {
    position: relative
  }

  .article:nth-child(2) {
    background: var(--blue);
    color: #fff
  }

  .article:nth-child(2) p {
    color: #d8e3eb
  }

  .article:nth-child(2) .tag,
  .article:nth-child(2) .textlink {
    color: #e1b460
  }

  @media(max-width:1100px) {
    .person {
      grid-template-columns: 140px 1fr;
      gap: 20px
    }

    .person-portrait {
      width: 140px;
      height: 190px
    }

    .system {
      padding-left: 10px
    }

    .track {
      font-size: 30px
    }
  }

  @media(max-width:800px) {
    .hero h1 {
      font-size: clamp(44px,8vw,66px)
    }

    .hero h1 em {
      letter-spacing: -2px
    }

    .role-visual img {
      height: 220px
    }

    .person {
      grid-template-columns: 140px 1fr
    }

    .person-portrait {
      height: 190px
    }

    .system {
      display: block;
      padding: 15px 20px 0;
      margin: 0 10px 0 20px;
      max-width: 450px;
      transform: none
    }

    .system-label {
      font-size: 19px;
      margin-bottom: 25px
    }

    .system-row {
      margin-bottom: 20px
    }

    .track {
      font-size: 28px
    }

    .system-note {
      display: none
    }

    .hero-grid {
      gap: 35px
    }

    .hero .eyebrow {
      font-size: 13px
    }

    .system-end {
      font-size: 22px;
      padding-top: 0
    }

    .eyebrow {
      font-size: 15px
    }

    .hero-foot {
      margin-top: 10px
    }
  }

  @media(max-width:420px) {
    .system-row:nth-child(2) {
      --offset: -10px
    }

    .system-row:nth-child(3) {
      --offset: 0px
    }

    .system-row:nth-child(4) {
      --offset: 10px
    }

    .person {
      grid-template-columns: 110px 1fr;
      gap: 17px
    }

    .person-portrait {
      width: 110px;
      height: 160px
    }

    .person-top h3 {
      font-size: 23px
    }

    .person p {
      font-size: 15px
    }

    .system {
      margin-left: 10px;
      margin-right: 20px
    }

    .track {
      font-size: 25px
    }
  }

  @media(prefers-reduced-motion:reduce) {
    .system,
    .system-row {
      transform: none;
      transition: none
    }

    .track:after {
      opacity: 1
    }
  }

  .eyebrow .folio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 31px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #1f3f57;
    color: #e4b965;
    font: 500 12px Roboto,Arial,sans-serif
  }

  .hero .eyebrow .folio,
  .case .eyebrow .folio,
  .contact .eyebrow .folio {
    background: #122f44;
    color: #e4b965
  }

  .system {
    transform: none;
    padding: 26px 0 26px 30px;
    border-left: 1px solid #ffffff26
  }

  .system-label {
    font: 400 22px Roboto,Arial,sans-serif;
    transform: none;
    margin-bottom: 28px
  }

  .system-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 20px 0;
    transform: none;
    transition: none
  }

  .system-row>span {
    width: 65px;
    flex: 0 0 65px;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    margin: 0
  }

  .track {
    flex: 1;
    border: 1px solid #7c94a5;
    border-radius: 8px;
    padding: 18px 20px;
    background: #ffffff07;
    font-size: 20px;
    white-space: normal
  }

  .track:after {
    display: none
  }

  .system-end {
    padding: 22px 0 0 83px;
    font: 400 24px Roboto,Arial,sans-serif
  }

  .system-note {
    display: none
  }

  .footer-brand img {
    height: auto
  }

  @media(max-width:800px) {
    .system {
      padding: 25px 0 0;
      margin: 0;
      border-left: 0;
      border-top: 1px solid #ffffff26;
      max-width: 100%
    }

    .system-row {
      gap: 12px
    }

    .track {
      font-size: 18px;
      padding: 15px
    }

    .system-end {
      padding-left: 77px
    }
  }

  .navlinks {
    list-style: none;
    padding: 0;
    margin: 0
  }

  .navlinks li {
    list-style: none
  }

  /* Final typography and bronze accents. */
  body,
  h1,
  h2,
  h3,
  p,
  a,
  button,
  input,
  textarea,
  select,
  summary,
  .system-label,
  .system-end,
  .case-panel:before {
    font-family: Roboto,Arial,sans-serif;
    font-style: normal
  }

  h1,
  h2,
  h3 {
    font-weight: 400
  }

  h1 strong,
  h2 strong {
    font-family: Roboto,Arial,sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: inherit
  }

  .eyebrow {
    color: #946735;
    font-weight: 500
  }

  .hero .eyebrow,
  .case .eyebrow,
  .contact .eyebrow {
    color: #dfb578
  }

  .eyebrow .folio {
    color: #dfb578;
    background: #1f3f57;
    border-radius: 5px
  }

  .system-label {
    color: #dfb578;
    font-size: 22px;
    font-weight: 500
  }

  .system-row>span {
    color: #dfb578
  }

  .track {
    border-color: #8c7356;
    border-left: 3px solid #b18853;
    background: #ffffff05;
    font-weight: 500
  }

  .system-end {
    color: #dfb578;
    font-size: 22px;
    font-weight: 500
  }

  .articles {
    align-items: stretch
  }

  .article {
    padding: 0;
    overflow: hidden;
    min-height: 0;
    border: 1px solid #d6dfe5
  }

  .article:nth-child(2) {
    background: #fff;
    color: #1f3f57
  }

  .article:nth-child(2) p {
    color: #52616c
  }

  .article:nth-child(2) .tag,
  .article:nth-child(2) .textlink {
    color: #946735
  }

  .article-image {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block
  }

  .article-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 27px
  }

  .article-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 22px
  }

  .article .tag {
    margin: 0;
    letter-spacing: 0;
    color: #946735;
    text-transform: none
  }

  .article time {
    color: #657680
  }

  .article h3 {
    font-size: 24px;
    font-weight: 500
  }

  .article p {
    margin: 17px 0 25px
  }

  .article .textlink {
    margin-top: auto
  }

  .knowledge .heading-row {
    align-items: end
  }

  .faq-section {
    background: #f5f7f9
  }

  .faq-list {
    border-top: 1px solid #d6dfe5
  }

  .faq-item {
    padding: 20px 0;
    border-bottom: 1px solid #d6dfe5
  }

  .faq-item summary {
    cursor: pointer;
    font-size: 18px;
    font-weight: 500
  }

  .faq-item p {
    margin-top: 15px
  }

  .wp-form {
    padding: 30px;
    min-height: 230px;
    background: white;
    border: 1px solid #d6dfe5;
    border-radius: 8px;
    color: #1f3f57;
    margin-top: 30px
  }

  .footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 35px
  }

  .footer-menu li {
    list-style: none
  }

  .footer-menu a:hover {
    text-decoration: underline
  }

  .footer-bottom a {
    text-decoration: underline;
    text-underline-offset: 3px
  }

  .footer-address {
    font-style: normal;
    margin-top: 20px;
    color: #52616c;
    font-size: 14px
  }

  .navlinks .is-active {
    color: #946735;
    text-decoration: underline;
    text-underline-offset: 6px
  }

  @media(max-width:1100px) {
    .navlinks {
      gap: 12px;
      font-size: 12px
    }

    .logo {
      width: 220px
    }
  }

  @media(max-width:800px) {
    #navigation {
      width: 100%
    }

    .navlinks {
      font-size: 16px
    }

    .article-image {
      height: 220px
    }
  }

  /* Strooper vervolgpagina's. Voeg dit samen met de gedeelde homepage-stijlen. */
  .sd-content {
    --bronze: #946735;
    --bronze-light: #dfb578;
    font-family: Roboto,Arial,sans-serif;
    color: #1f3f57
  }

  .sd-content *,
  .sd-content *::before,
  .sd-content *::after {
    box-sizing: border-box
  }

  .sd-content h1,
  .sd-content h2,
  .sd-content h3,
  .sd-content p,
  .sd-content figure {
    margin: 0
  }

  .sd-content h1,
  .sd-content h2,
  .sd-content h3 {
    font-family: Roboto,Arial,sans-serif;
    font-style: normal;
    line-height: 1.17;
    font-weight: 400;
    letter-spacing: -.6px
  }

  .sd-content h1 {
    font-size: clamp(39px,4.8vw,66px);
    letter-spacing: -1.8px;
    max-width: 900px
  }

  .sd-content h2 {
    font-size: clamp(29px,3vw,43px)
  }

  .sd-content h3 {
    font-size: 23px;
    letter-spacing: -.3px;
    font-weight: 500
  }

  .sd-content strong {
    font-weight: 700
  }

  .sd-content p {
    color: #52616c
  }

  .sd-content p+p {
    margin-top: 17px
  }

  .sd-content a:focus-visible,
  .sd-content button:focus-visible,
  .sd-content summary:focus-visible {
    outline: 3px solid #c08a2b;
    outline-offset: 5px
  }

  .sd-content .wrap {
    width: min(1200px,calc(100% - 64px));
    margin-inline: auto
  }

  .sd-section {
    padding: 78px 0
  }

  .sd-pale {
    background: #f5f7f9
  }

  .sd-blue {
    background: #1f3f57;
    color: #fff
  }

  .sd-blue p {
    color: #d5e2ea
  }

  .sd-blue .textlink {
    color: #dfb578
  }

  .sd-hero {
    padding: 35px 0 65px;
    background: #e9eef2
  }

  .sd-hero .sd-lead {
    max-width: 730px
  }

  .sd-hero .sd-grid {
    align-items: center
  }

  .sd-hero.sd-blue {
    background: #1f3f57
  }

  .sd-hero .sd-hero-image {
    width: 100%;
    height: 310px;
    object-fit: cover;
    border-radius: 8px
  }

  .sd-breadcrumb {
    margin-bottom: 40px;
    font-size: 13px;
    color: #657680
  }

  .sd-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
  }

  .sd-breadcrumb li {
    display: flex;
    gap: 8px
  }

  .sd-breadcrumb li+li:before {
    content: '/';
    color: #a5b4bf
  }

  .sd-breadcrumb a {
    text-decoration: underline;
    text-underline-offset: 3px
  }

  .sd-blue .sd-breadcrumb {
    color: #c6d8e5
  }

  .sd-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #946735;
    font-size: 14px;
    font-weight: 500
  }

  .sd-label .sd-folio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 31px;
    padding: 0 7px;
    background: #1f3f57;
    color: #dfb578;
    border-radius: 5px;
    font-size: 12px
  }

  .sd-blue .sd-label {
    color: #dfb578
  }

  .sd-blue .sd-folio {
    background: #122f44
  }

  .sd-lead {
    font-size: 19px;
    margin-top: 23px!important;
    max-width: 740px
  }

  .sd-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 35px
  }

  .sd-heading p {
    max-width: 420px
  }

  .sd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: start
  }

  .sd-three {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px
  }

  .sd-stack {
    display: grid;
    gap: 22px
  }

  .sd-card {
    padding: 28px;
    border: 1px solid #d6dfe5;
    background: #fff;
    border-radius: 8px
  }

  .sd-card p {
    margin-top: 15px
  }

  .sd-card .textlink {
    margin-top: 24px
  }

  .sd-card-number {
    display: block;
    color: #946735;
    font-size: 15px;
    margin-bottom: 18px
  }

  .sd-card.sd-dark {
    background: #1f3f57;
    color: #fff;
    border-color: #1f3f57
  }

  .sd-dark p {
    color: #d5e2ea
  }

  .sd-dark .textlink {
    color: #dfb578
  }

  .sd-points {
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
    display: grid;
    gap: 13px
  }

  .sd-point {
    position: relative;
    padding-left: 20px;
    color: #52616c
  }

  .sd-point:before {
    content: '';
    position: absolute;
    left: 0;
    top: .7em;
    width: 6px;
    height: 6px;
    background: #b18853;
    border-radius: 2px
  }

  .sd-blue .sd-point {
    color: #d5e2ea
  }

  .sd-process-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0
  }

  .sd-phase {
    display: grid;
    grid-template-columns: 80px .85fr 1.4fr;
    gap: 30px;
    padding: 42px 0;
    border-top: 1px solid #d6dfe5;
    scroll-margin-top: 110px
  }

  .sd-phase:last-child {
    border-bottom: 1px solid #d6dfe5
  }

  .sd-phase-number {
    font-size: 42px;
    color: #946735;
    line-height: 1
  }

  .sd-phase h3 {
    font-size: 27px
  }

  .sd-phase small {
    display: block;
    color: #946735;
    margin-top: 12px
  }

  .sd-phase p+p {
    margin-top: 14px
  }

  .sd-deliverable {
    border-left: 3px solid #b18853;
    padding-left: 16px;
    color: #1f3f57!important;
    font-size: 15px;
    margin-top: 20px!important
  }

  .sd-service-detail {
    display: grid;
    grid-template-columns: .9fr 1.15fr;
    gap: 70px;
    padding: 40px 0;
    border-top: 1px solid #d6dfe5;
    scroll-margin-top: 110px
  }

  .sd-service-detail:last-child {
    border-bottom: 1px solid #d6dfe5
  }

  .sd-service-detail h3 {
    font-size: 27px
  }

  .sd-service-detail .sd-points {
    margin-top: 18px
  }

  .sd-jumplinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px
  }

  .sd-jumplinks a {
    font-size: 14px;
    background: #fff;
    padding: 8px 13px;
    border-radius: 5px;
    border: 1px solid #c8d4dc;
    color: #1f3f57
  }

  .sd-jumplinks a:hover,
  .sd-jumplinks a[aria-current='page'] {
    background: #1f3f57;
    color: #dfb578;
    border-color: #1f3f57
  }

  .sd-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px
  }

  .sd-portrait {
    display: block;
    width: 100%;
    height: 390px;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 8px;
    background: #2e4a66
  }

  .sd-image-note {
    font-size: 12px;
    color: #657680;
    margin-top: 9px
  }

  .sd-person {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 27px
  }

  .sd-person img {
    height: 225px;
    width: 170px;
    object-fit: cover;
    border-radius: 8px
  }

  .sd-person p {
    margin-top: 16px
  }

  .sd-person small {
    color: #946735;
    display: block;
    margin-top: 8px
  }

  .sd-person .textlink {
    margin-top: 20px
  }

  .sd-results {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px
  }

  .sd-result {
    padding: 28px;
    border: 1px solid #ffffff35;
    border-radius: 8px
  }

  .sd-result strong {
    display: block;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.1;
    color: #fff
  }

  .sd-result span {
    display: block;
    margin-top: 16px;
    color: #d5e2ea
  }

  .sd-result-note {
    font-size: 13px;
    color: #b6cbd9!important;
    margin-top: 22px!important
  }

  .sd-case-feature {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    padding: 42px;
    border: 1px solid #d6dfe5;
    border-radius: 8px
  }

  .sd-case-mark {
    background: #1f3f57;
    color: #fff;
    padding: 38px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px
  }

  .sd-case-mark h2 {
    font-size: 49px
  }

  .sd-case-mark p {
    color: #c6d8e5;
    margin-top: 20px
  }

  .sd-case-feature .textlink {
    margin-top: 28px
  }

  .sd-editorial {
    max-width: 790px;
    margin-inline: auto
  }

  .sd-editorial p {
    font-size: 17px;
    line-height: 1.8
  }

  .sd-editorial h2 {
    font-size: 31px;
    margin: 42px 0 18px
  }

  .sd-editorial h3 {
    margin: 30px 0 14px
  }

  .sd-editorial ul,
  .sd-editorial ol {
    color: #52616c;
    padding-left: 25px;
    margin: 20px 0
  }

  .sd-editorial li+li {
    margin-top: 10px
  }

  .sd-editorial a:not(.btn):not(.textlink) {
    color: #946735;
    text-decoration: underline;
    text-underline-offset: 3px
  }

  .sd-editorial figure {
    margin: 30px 0
  }

  .sd-editorial .sd-note {
    padding: 24px 28px;
    background: #e9eef2;
    border-left: 3px solid #b18853;
    border-radius: 0 8px 8px 0;
    margin: 28px 0;
    color: #1f3f57
  }

  .sd-editorial .sd-note p {
    color: #1f3f57
  }

  .sd-article-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #657680;
    margin-top: 24px
  }

  .sd-author {
    display: flex;
    gap: 22px;
    align-items: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #d6dfe5
  }

  .sd-author img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 50%
  }

  .sd-author p {
    font-size: 14px;
    margin-top: 6px
  }

  .sd-author a {
    font-weight: 500
  }

  .sd-posts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px
  }

  .sd-post {
    display: flex;
    flex-direction: column;
    border: 1px solid #d6dfe5;
    background: #fff;
    border-radius: 8px;
    overflow: hidden
  }

  .sd-post-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover
  }

  .sd-post-body {
    padding: 25px;
    display: flex;
    flex: 1;
    flex-direction: column
  }

  .sd-post-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 12px
  }

  .sd-post-category {
    color: #946735;
    font-weight: 500
  }

  .sd-post time {
    color: #657680
  }

  .sd-post h3 {
    font-size: 24px
  }

  .sd-post p {
    font-size: 15px;
    margin: 16px 0 25px
  }

  .sd-post .textlink {
    margin-top: auto;
    align-self: start
  }

  .sd-post h3 a:hover {
    color: #946735
  }

  .sd-faqs {
    border-top: 1px solid #d6dfe5
  }

  .sd-faq {
    border-bottom: 1px solid #d6dfe5;
    padding: 22px 0
  }

  .sd-faq summary {
    cursor: pointer;
    font-weight: 500;
    color: #1f3f57;
    font-size: 18px
  }

  .sd-faq p {
    margin-top: 15px
  }

  .sd-cta {
    padding: 55px 0;
    background: #1f3f57;
    color: #fff
  }

  .sd-cta .sd-grid {
    align-items: center
  }

  .sd-cta p {
    color: #d5e2ea;
    margin-top: 17px
  }

  .sd-cta .actions {
    margin-top: 0;
    justify-content: flex-end
  }

  .sd-cta h2 {
    font-size: 34px
  }

  .sd-cta .textlink {
    color: #dfb578
  }

  .sd-form {
    min-height: 310px;
    border: 1px solid #d6dfe5;
    border-radius: 8px;
    background: #fff;
    padding: 30px
  }

  .sd-contact-list {
    margin-top: 28px;
    display: grid;
    gap: 18px
  }

  .sd-contact-list a {
    color: #946735;
    font-size: 20px;
    overflow-wrap: anywhere
  }

  .sd-contact-list small {
    display: block;
    color: #657680;
    font-size: 13px
  }

  .sd-contact-address {
    font-style: normal;
    font-size: 17px;
    color: #52616c;
    margin-top: 25px
  }

  .sd-compact {
    padding: 70px 0
  }

  .sd-thanks {
    max-width: 750px
  }

  .sd-thanks h1 {
    max-width: 750px
  }

  .sd-thanks .actions {
    margin-top: 30px
  }

  .sd-table-wrap {
    overflow-x: auto;
    margin: 28px 0
  }

  .sd-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px
  }

  .sd-table th,
  .sd-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #d6dfe5;
    vertical-align: top
  }

  .sd-table th {
    background: #e9eef2;
    font-weight: 500
  }

  .sd-table caption {
    text-align: left;
    font-weight: 500;
    padding-bottom: 12px
  }

  @media(max-width:1100px) {
    .sd-content .wrap {
      width: calc(100% - 50px)
    }

    .sd-grid,
    .sd-service-detail {
      gap: 40px
    }

    .sd-person {
      grid-template-columns: 130px 1fr;
      gap: 20px
    }

    .sd-person img {
      width: 130px;
      height: 185px
    }

    .sd-case-feature {
      gap: 35px;
      padding: 30px
    }

    .sd-phase {
      grid-template-columns: 55px .8fr 1.2fr;
      gap: 22px
    }
  }

  @media(max-width:800px) {
    .sd-content .wrap {
      width: calc(100% - 36px)
    }

    .sd-section {
      padding: 55px 0
    }

    .sd-hero {
      padding: 24px 0 45px
    }

    .sd-breadcrumb {
      margin-bottom: 28px
    }

    .sd-grid,
    .sd-three,
    .sd-posts,
    .sd-case-feature,
    .sd-service-detail {
      grid-template-columns: 1fr;
      gap: 30px
    }

    .sd-hero .sd-hero-image {
      height: 230px
    }

    .sd-heading {
      display: block
    }

    .sd-heading p,
    .sd-heading .textlink {
      margin-top: 20px
    }

    .sd-phase {
      grid-template-columns: 45px 1fr;
      gap: 15px
    }

    .sd-phase>div:last-child {
      grid-column: 2
    }

    .sd-phase-number {
      font-size: 34px
    }

    .sd-results {
      grid-template-columns: 1fr;
      gap: 16px
    }

    .sd-result {
      padding: 25px
    }

    .sd-result strong {
      font-size: 40px
    }

    .sd-case-mark {
      min-height: 240px;
      padding: 28px
    }

    .sd-case-mark h2 {
      font-size: 40px
    }

    .sd-portrait {
      height: 350px;
      max-width: 400px
    }

    .sd-post-image {
      height: 220px
    }

    .sd-cta .actions {
      justify-content: flex-start;
      margin-top: 8px
    }

    .sd-cta h2 {
      font-size: 31px
    }

    .sd-editorial p {
      font-size: 16px
    }

    .sd-editorial h2 {
      font-size: 28px
    }

    .sd-form {
      min-height: 250px
    }

    .sd-person {
      grid-template-columns: 130px 1fr
    }

    .sd-table {
      min-width: 560px
    }
  }

  @media(max-width:420px) {
    .sd-person {
      grid-template-columns: 105px 1fr;
      gap: 18px
    }

    .sd-person img {
      width: 105px;
      height: 155px
    }

    .sd-person h3 {
      font-size: 21px
    }

    .sd-person p {
      font-size: 15px
    }

    .sd-content h1 {
      letter-spacing: -1px
    }

    .sd-case-feature {
      padding: 23px
    }

    .sd-card {
      padding: 24px
    }

    .sd-phase {
      grid-template-columns: 33px 1fr
    }

    .sd-phase h3 {
      font-size: 24px
    }
  }

  /* Strooper Digitaal — Gravity Forms */
  .gform_wrapper {
    --gf-color-primary: #1f3f57;
    --gf-color-primary-contrast: #fff;
    --gf-color-in-ctrl-primary: #1f3f57;
    --gf-color-in-ctrl-primary-contrast: #fff;
    --gf-color-in-ctrl: #fff;
    --gf-color-in-ctrl-contrast: #1f3f57;
    --gf-color-in-ctrl-border: #bac8d2;
    --gf-color-in-ctrl-border-focus: #946735;
    --gf-color-danger: #a12f32;
    --gf-font-family-base: Roboto, Arial, sans-serif;
    --gf-radius: 6px;
    color: #1f3f57;
    font-family: Roboto, Arial, sans-serif;
  }

  .gform_wrapper :is(input, textarea, select, button, label, legend) {
    font-family: Roboto, Arial, sans-serif !important;
    font-style: normal;
  }

  .gform_wrapper .gform_fields {
    row-gap: 24px;
    column-gap: 20px;
  }

  .gform_wrapper :is(.gfield_label, .gform-field-label--type-inline) {
    color: #1f3f57;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
  }

  .gform_wrapper :is(.gfield_required, .gfield_required_text) {
    color: #946735;
    font-size: 12px;
  }

  .gform_wrapper .ginput_container :is(
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="url"], input[type="number"], select, textarea
    ) {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 14px !important;
    border: 1px solid #bac8d2 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #1f3f57 !important;
    font-size: 16px !important;
    line-height: 1.5;
    box-shadow: none !important;
  }

  .gform_wrapper .ginput_container select {
    padding-right: 40px !important;
  }

  .gform_wrapper .ginput_container textarea {
    min-height: 150px;
    resize: vertical;
  }

  .gform_wrapper ::placeholder {
    color: #657680;
    opacity: 1;
  }

  .gform_wrapper .ginput_container :is(input, select, textarea):focus {
    border-color: #946735 !important;
    outline: 2px solid #946735 !important;
    outline-offset: 3px;
  }

  .gform_wrapper :is(
    .gfield_description,
    .ginput_counter,
    .gform-field-label--type-sub
    ) {
    color: #52616c;
    font-size: 13px;
    line-height: 1.6;
  }

  .gform_wrapper :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: #1f3f57;
  }

  .gform_wrapper :is(.gform_footer, .gform-footer) {
    margin-top: 28px;
    padding-top: 0;
  }

  .gform_wrapper :is(.gform_footer, .gform-footer) .gform_button {
    min-height: 50px;
    padding: 13px 24px !important;
    border: 1px solid #1f3f57 !important;
    border-radius: 6px !important;
    background: #1f3f57 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.5;
    text-transform: none;
    box-shadow: none !important;
    cursor: pointer;
  }

  .gform_wrapper :is(.gform_footer, .gform-footer) .gform_button:hover {
    background: #2e4a66 !important;
    border-color: #2e4a66 !important;
  }

  .gform_wrapper .gform_button:focus-visible,
  .gform_wrapper a:focus-visible {
    outline: 3px solid #946735 !important;
    outline-offset: 4px;
  }

  .gform_wrapper .gform_button:disabled {
    opacity: .6;
    cursor: wait;
  }

  .gform_wrapper a {
    color: #946735;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Foutmeldingen blijven duidelijk zichtbaar */
  .gform_wrapper :is(.gform_validation_errors, .validation_error) {
    border: 1px solid #a12f32 !important;
    border-radius: 6px;
    background: #fff5f4 !important;
    color: #86282b !important;
    box-shadow: none !important;
  }

  .gform_wrapper :is(
    .gform_validation_errors h2,
    .gfield_validation_message,
    .validation_message
    ) {
    color: #86282b !important;
    font-size: 14px;
    line-height: 1.6;
  }

  .gform_wrapper .gfield_error .ginput_container :is(
    input:not([type="hidden"]), select, textarea
    ) {
    border-color: #a12f32 !important;
  }

  /* Bevestiging na verzending */
  .gform_confirmation_wrapper {
    padding: 24px;
    border: 1px solid #d6dfe5;
    border-left: 4px solid #946735;
    border-radius: 6px;
    background: #e9eef2;
    color: #1f3f57;
    font: 400 16px/1.7 Roboto, Arial, sans-serif;
  }

  .gform_confirmation_wrapper p {
    color: inherit;
  }

  @media (max-width: 640px) {
    .sd-form {
      padding: 22px;
    }

    .gform_wrapper :is(.gform_footer, .gform-footer) .gform_button {
      width: 100%;
    }
  }

  /* Strooper — subtiele micro-animaties */
  @media (prefers-reduced-motion: no-preference)
    and (hover: hover) and (pointer: fine) {
    :is(.btn, .blog-button, .gform_wrapper .gform_button) {
      transition: transform 160ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
    }

    :is(.btn, .blog-button, .gform_wrapper .gform_button)
      :is(span) {
      transition: transform 180ms ease;
    }

    :is(.btn, .blog-button, .gform_wrapper .gform_button)
      :is(span) {
      display: inline-block;
    }

    :is(.btn, .blog-button, .gform_wrapper .gform_button):hover:not(:disabled):not([aria-disabled="true"]) {
      transform: translateY(-1px);
    }

    :is(.btn, .blog-button, .gform_wrapper .gform_button):active {
      transform: translateY(0);
    }

    :is(.textlink, .blog-link, .service) {
      transition: border-color 180ms ease, color 180ms ease;
    }

    :is(.btn, .textlink, .blog-button, .blog-link)
      > span[aria-hidden="true"],
      .service .arrow {
      display: inline-block;
      transition: transform 180ms ease;
    }

    :is(.btn, .textlink, .blog-button, .blog-link):hover
      > span[aria-hidden="true"],
      .service:hover .arrow {
      transform: translateX(3px);
    }

    :is(.article, .sd-post, .blog-layout .blog-card) {
      transition: transform 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease;
    }

    :is(.article, .sd-post, .blog-layout .blog-card):hover {
      transform: translateY(-2px);
      border-color: #b18853;
      box-shadow: 0 6px 16px rgb(31 63 87 / 7%);
    }
  }

  /* Kaartselectie bij toetsenbordgebruik */
  :is(.article, .sd-post, .blog-layout .blog-card):focus-within {
    border-color: #946735;
  }

  /* Bewegingsvoorkeur respecteren */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto !important;
    }

    :is(.btn, .textlink, .blog-button, .blog-link, .service,
      .article, .sd-post, .blog-layout .blog-card,
      .gform_wrapper .gform_button),
      :is(.btn, .textlink, .blog-button, .blog-link)
      > span[aria-hidden="true"],
      .service .arrow {
      transition: none !important;
      animation: none !important;
    }
  }