:root {
      --red: #C4222F;
      --red-dark: #A31B26;
      --ink: #26292F;
      --navy: #2E3648;
      --slate: #5B6472;
      --mist: #F7F7F8;
      --line: #E5E7EA;
      --gray-stripe: #B9BEC7;
      --amber: #B7791F;
      --amber-bg: #FFF7E8;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Inter', -apple-system, sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.7;
      font-size: 16px
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Poppins', 'Century Gothic', sans-serif;
      color: var(--ink);
      line-height: 1.28
    }

    img {
      max-width: 100%;
      display: block
    }

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

    .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 28px
    }

    /* signature: red-over-gray stripes, from the card & letterhead */
    .stripes {
      height: 9px;
      background: linear-gradient(to bottom, var(--red) 0 5px, #fff 5px 6px, var(--gray-stripe) 6px 9px)
    }

    /* letterhead-style section header */
    .lh {
      margin-bottom: 34px
    }

    .lh .label {
      font-family: 'Poppins', sans-serif;
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--red)
    }

    .lh .rule {
      height: 2px;
      background: var(--red);
      margin-top: 10px
    }

    .lh.dark .label {
      color: #F2A6AC
    }

    .lh.dark .rule {
      background: #F2A6AC
    }

    .ph {
      display: inline-block;
      background: var(--amber-bg);
      color: var(--amber);
      border: 1px dashed var(--amber);
      font-family: 'Poppins', sans-serif;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 4px;
      margin-bottom: 10px
    }

    /* ---------- top bar ---------- */
    .topbar {
      background: var(--navy);
      color: #D8DCE4;
      font-size: 13.5px
    }

    .topbar .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 38px;
      flex-wrap: wrap;
      gap: 4px
    }

    .topbar a:hover {
      color: #fff
    }

    .topbar .contacts {
      display: flex;
      gap: 20px;
      flex-wrap: wrap
    }

    .topbar .dot {
      opacity: .4
    }

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

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0
    }

    .logo img {
      height: 60px;
      width: auto
    }

    nav ul {
      display: flex;
      gap: 30px;
      list-style: none;
      align-items: center
    }

    nav a {
      font-family: 'Poppins', sans-serif;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--ink);
      letter-spacing: .02em
    }

    nav a:hover {
      color: var(--red)
    }

    .btn {
      display: inline-block;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 15px;
      padding: 13px 30px;
      border-radius: 4px;
      transition: all .18s ease;
      letter-spacing: .02em
    }

    .btn-red {
      background: var(--red);
      color: #fff
    }

    .btn-red:hover {
      background: var(--red-dark);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(196, 34, 47, .25);
      color: #fff;
    }

    .btn-outline {
      border: 1.5px solid var(--ink);
      color: var(--ink)
    }

    .btn-outline:hover {
      border-color: var(--red);
      color: var(--red)
    }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      overflow: hidden;
      background: #fff
    }

    .hero .wrap {
      padding-top: 72px;
      padding-bottom: 64px
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 60px;
      align-items: center
    }

    .hero-art {
      margin: 0
    }

    .hero-art svg {
      width: 100%;
      height: auto
    }

    .cp-line {
      stroke-dasharray: 900;
      stroke-dashoffset: 900;
      animation: cpdraw 2.9s ease-out .3s forwards
    }

    @keyframes cpdraw {
      to {
        stroke-dashoffset: 0
      }
    }

    .cp-node {
      opacity: 0;
      animation: cppop .45s ease forwards
    }

    @keyframes cppop {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .cp-end {
      transform-origin: 520px 214px;
      animation: cppop .45s ease forwards, cppulse 2.6s ease-in-out 3.4s infinite
    }

    @keyframes cppulse {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.35)
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cp-line {
        animation: none;
        stroke-dashoffset: 0
      }

      .cp-node,
      .cp-end {
        animation: none;
        opacity: 1
      }
    }

    .hero .bird {
      position: absolute;
      top: 48px;
      right: 36px;
      width: 64px;
      opacity: .9
    }

    .kicker {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--slate);
      margin-bottom: 20px
    }

    .kicker .sep {
      color: var(--red);
      padding: 0 7px
    }

    .hero h1 {
      font-size: 42px;
      font-weight: 700;
      margin-bottom: 16px
    }

    .hero h1 .r {
      color: var(--red)
    }

    .tagline {
      font-family: 'Poppins', sans-serif;
      font-style: italic;
      font-weight: 500;
      color: var(--red);
      font-size: 19px;
      margin-bottom: 22px
    }

    .hero p.lede {
      font-size: 17.5px;
      color: var(--slate);
      max-width: 540px;
      margin-bottom: 36px
    }

    .cta-row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap
    }

    /* ---------- marquee names ---------- */
    .marquee {
      background: var(--navy);
      color: #fff;
      padding: 38px 0
    }

    .marquee .lbl {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #9AA3B5;
      margin-bottom: 18px
    }

    .marquee .names {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 0;
      font-family: 'Poppins', sans-serif;
      font-size: 16.5px;
      font-weight: 500;
      color: #fff
    }

    .marquee .names span {
      white-space: nowrap
    }

    .marquee .names .d {
      color: var(--red);
      padding: 0 16px;
      font-weight: 700
    }

    .marquee .note {
      text-align: center;
      font-size: 12.5px;
      color: #8F98AB;
      margin-top: 16px
    }

    /* ---------- sections ---------- */
    section {
      padding: 84px 0
    }

    .two-col {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 64px;
      align-items: start
    }

    .about p {
      color: var(--slate);
      margin-bottom: 16px;
      font-size: 16px
    }

    .about p b {
      color: var(--ink)
    }

    .think li {
      list-style: none;
      display: flex;
      gap: 18px;
      padding: 15px 0;
      border-bottom: 1px solid var(--line)
    }

    .think li:first-child {
      padding-top: 4px
    }

    .think .n {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      color: var(--red);
      font-size: 15px;
      min-width: 30px
    }

    .think .t {
      font-weight: 500;
      color: var(--ink);
      font-size: 15.5px
    }

    .pull {
      margin-top: 26px;
      font-family: 'Poppins', sans-serif;
      font-size: 19px;
      font-weight: 500;
      color: var(--ink);
      border-left: 3px solid var(--red);
      padding-left: 20px
    }

    .pull em {
      color: var(--red);
      font-style: italic
    }

    .mission {
      background: var(--mist);
      border-radius: 8px;
      padding: 26px 28px;
      margin-top: 30px
    }

    .m-words {
      font-family: 'Poppins', sans-serif;
      font-size: 23px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 8px
    }

    .m-words span {
      color: var(--red)
    }

    .mission p {
      color: var(--slate);
      font-size: 14.5px;
      margin: 0
    }

    .mission em {
      color: var(--red);
      font-style: italic;
      font-weight: 500
    }

    /* ---------- problems (navy band) ---------- */
    .problems {
      background: var(--navy);
      color: #C9CFDB
    }

    .problems .two-col {
      grid-template-columns: .9fr 1.1fr
    }

    .problems h2 {
      color: #fff;
      font-size: 27px;
      margin-bottom: 16px
    }

    .problems .intro p {
      color: #AEB6C6;
      font-size: 15.5px;
      margin-bottom: 14px
    }

    .prob-list {
      list-style: none
    }

    .prob-list li {
      display: flex;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      font-size: 14.5px;
      color: #DDE1E8
    }

    .prob-list li::before {
      content: "◆";
      color: var(--red);
      font-size: 11px;
      padding-top: 4px
    }

    /* ---------- how we work ---------- */
    .steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      position: relative;
      margin-top: 8px
    }

    .steps::before {
      content: "";
      position: absolute;
      top: 21px;
      left: 6%;
      right: 6%;
      height: 2px;
      background: var(--line)
    }

    .step {
      position: relative;
      text-align: center;
      padding: 0 6px
    }

    .step .num {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--red);
      color: var(--red);
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      position: relative;
      z-index: 1
    }

    .step h3 {
      font-size: 14.5px;
      font-weight: 600;
      margin-bottom: 7px
    }

    .step p {
      font-size: 13px;
      color: var(--slate)
    }

    /* ---------- skyline ---------- */
    .skyline {
      display: block;
      width: 100%;
      height: auto;
      margin: 6px 0 44px
    }

    /* ---------- landmark photo gallery ---------- */
    .gallery {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin: 34px 0 14px
    }

    .g-item {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      height: 260px
    }

    .g-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .35s ease
    }

    .g-item:hover img {
      transform: scale(1.05)
    }

    .g-item figcaption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 34px 14px 12px;
      background: linear-gradient(transparent, rgba(28, 32, 42, .85));
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: 12.5px;
      font-weight: 500;
      line-height: 1.35
    }

    .g-credit {
      font-size: 11.5px;
      color: #98A0AC;
      margin-bottom: 36px
    }

    /* ---------- services ---------- */
    .services {
      background: var(--mist)
    }

    .svc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 56px
    }

    .svc {
      display: flex;
      gap: 22px;
      padding: 28px 0;
      border-bottom: 1px solid var(--line)
    }

    .svc .n {
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--red);
      min-width: 34px;
      padding-top: 3px
    }

    .svc h3 {
      font-size: 17.5px;
      font-weight: 600;
      margin-bottom: 7px
    }

    .svc p {
      font-size: 14.5px;
      color: var(--slate)
    }

    /* ---------- experience ---------- */
    .tier {
      margin-bottom: 56px
    }

    .tier-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px
    }

    .tier h3 {
      font-size: 21px;
      font-weight: 600
    }

    .tier h3 .r {
      color: var(--red)
    }

    .tier .sub {
      font-size: 14px;
      color: var(--slate);
      font-style: italic;
      margin-bottom: 24px
    }

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

    .proj {
      background: #fff;
      border: 1px solid var(--line);
      border-top: 3px solid var(--gray-stripe);
      border-radius: 6px;
      padding: 24px 24px 22px;
      transition: all .2s ease
    }

    .proj:hover {
      border-top-color: var(--red);
      box-shadow: 0 14px 34px rgba(38, 41, 47, .10);
      transform: translateY(-3px)
    }

    .proj .sector {
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 8px
    }

    .proj h4 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px
    }

    .proj p {
      font-size: 13.8px;
      color: var(--slate)
    }

    .career-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 34px 44px
    }

    .career-cols h4 {
      font-family: 'Poppins', sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--red)
    }

    .career-cols ul {
      list-style: none
    }

    .career-cols li {
      font-size: 14.5px;
      color: var(--ink);
      padding: 7px 0;
      border-bottom: 1px solid var(--line)
    }

    .career-cols li span {
      display: block;
      font-size: 12.5px;
      color: var(--slate)
    }

    .tier .more {
      display: inline-block;
      margin-top: 26px;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--red)
    }

    /* ---------- leadership ---------- */
    .lead {
      background: var(--mist)
    }

    .lead .wrap {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 60px;
      align-items: center
    }

    .headshot {
  position: relative;
  width: 100%;
  height: 425px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(20, 30, 45, 0.08);
}

.headshot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9px;
  background: linear-gradient(
    to bottom,
    var(--red) 0 5px,
    #fff 5px 6px,
    var(--gray-stripe) 6px 9px
  );
}

.headshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* ===== Responsive ===== */

@media (max-width: 767px) {
  .headshot {
    height: 380px;
  }
}

@media (max-width: 575px) {
  .headshot {
    height: 360px;
  }
}

    .lead h2 {
      font-size: 32px;
      margin-bottom: 4px
    }

    .lead .role {
      font-family: 'Poppins', sans-serif;
      font-style: italic;
      color: var(--red);
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 22px
    }

    .lead p {
      color: var(--slate);
      margin-bottom: 15px;
      font-size: 15.5px
    }

    .lead .facts {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin: 22px 0 28px
    }

    .fact {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 8px 16px;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink)
    }

    .fact b {
      color: var(--red)
    }

    /* ---------- insights ---------- */
    .ins-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .ins {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      transition: all .2s ease
    }

    .ins:hover {
      box-shadow: 0 14px 34px rgba(38, 41, 47, .10);
      transform: translateY(-3px)
    }

    .ins .tag {
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 10px
    }

    .ins h3 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 10px
    }

    .ins p {
      font-size: 14px;
      color: var(--slate);
      flex: 1
    }

    .ins .read {
      margin-top: 16px;
      font-family: 'Poppins', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--red)
    }

    /* ---------- clients ---------- */
    .cli-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .cli {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 22px 24px
    }

    .cli h4 {
      font-size: 15.5px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 5px
    }

    .exp-img {
      width: 100%;
      max-height: 300px;
      object-fit: cover;
      border-radius: 8px;
      margin: 0 0 44px;
      border: 1px solid var(--line)
    }

    .cli p {
      font-size: 13.8px;
      color: var(--slate)
    }

    /* ---------- cta ---------- */
    .cta-band {
      background: #fff;
      text-align: center;
      padding: 80px 0;
      border-top: 1px solid var(--line)
    }

    .cta-band h2 {
      color: var(--ink);
      font-size: 29px;
      max-width: 780px;
      margin: 0 auto 16px
    }

    .cta-band h2 .r {
      color: var(--red)
    }

    .cta-band p {
      color: var(--slate);
      max-width: 560px;
      margin: 0 auto 32px;
      font-size: 16px
    }

    /* ---------- footer ---------- */
    footer {
      background: var(--navy);
      color: #AEB6C6;
      font-size: 14.5px
    }

    .foot {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
      gap: 48px;
      padding: 60px 0 46px
    }

    .foot img {
      height: 50px;
      width: auto;
      margin-bottom: 16px
    }

    .foot h4 {
      color: #fff;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 16px
    }

    .foot ul {
      list-style: none
    }

    .foot li {
      margin-bottom: 9px
    }

    .foot a:hover {
      color: #fff
    }

    .foot .nap strong {
      color: #fff;
      font-weight: 600
    }

    .legal {
      border-top: 1px solid rgba(255, 255, 255, .12);
      padding: 18px 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13px
    }

    @media(max-width:960px) {

      .hero-grid,
      .two-col,
      .problems .two-col,
      .lead .wrap {
        grid-template-columns: 1fr
      }

      .steps {
        grid-template-columns: 1fr 1fr
      }

      .steps::before {
        display: none
      }

      .svc-grid {
        grid-template-columns: 1fr
      }

      .proj-grid,
      .career-cols,
      .cli-grid {
        grid-template-columns: 1fr 1fr
      }

      .gallery {
        grid-template-columns: 1fr 1fr;
      }

      .g-item {
        height: 200px
      }

      .hero h1 {
        font-size: 33px
      }

      nav ul {
        display: none
      }

      .hero .bird {
        display: none
      }
    }

    @media(max-width:620px) {

      .proj-grid,
      .career-cols,
      .cli-grid,
      .foot {
        grid-template-columns: 1fr
      }
    }