@font-face {
      font-family: "Commissioner";
      src: url("assets/fonts/commissioner-variable.ttf") format("truetype");
      font-weight: 100 900;
      font-display: swap;
    }

    :root {
      --ink: #0f121a;
      --silver: #e8eced;
      --lime: #d1ff05;
      --lime-hover: #dcff3d;
      --radius-chip: 8px;
      --radius-control: 12px;
      --radius-surface: 16px;
    }

    * { box-sizing: border-box; }

    html, body { width: 100%; min-height: 100%; margin: 0; }

    body {
      background: var(--ink);
      color: var(--silver);
      font-family: Commissioner, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    .hero {
      position: relative;
      isolation: isolate;
      min-height: 810px;
      overflow: hidden;
      background-color: var(--ink);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    body.variant-expanded-gtm .hero { background-image: url("assets/homepage-refresh/hero-workboard-combined.webp"); }

    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(15, 18, 26, .99) 0%, rgba(15, 18, 26, .94) 30%, rgba(15, 18, 26, .72) 47%, rgba(15, 18, 26, .2) 68%, rgba(15, 18, 26, .06) 100%),
        linear-gradient(180deg, rgba(15, 18, 26, .44) 0%, transparent 24%, transparent 76%, rgba(15, 18, 26, .28) 100%);
    }

    .site-nav {
      position: relative;
      z-index: 3;
      width: min(1280px, calc(100% - 96px));
      height: 92px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(232, 236, 237, .08);
    }

    .wordmark {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      color: #fff;
      text-decoration: none;
    }

    .wordmark img {
      display: block;
      width: 228px;
      height: auto;
    }

    .nav-links { display: flex; align-items: center; gap: 34px; }

    .nav-links a {
      color: rgba(232, 236, 237, .82);
      font-size: 13px;
      text-decoration: none;
    }

    .nav-links .button-small {
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      background: var(--lime);
      color: var(--ink);
      font-size: 12px;
      font-weight: 690;
    }

    .hero-inner {
      position: relative;
      z-index: 3;
      width: min(1280px, calc(100% - 96px));
      margin: 0 auto;
      padding-top: 74px;
    }

    .hero-copy { width: min(790px, 61vw); }

    h1 {
      margin: 0 0 26px;
      color: #fff;
      font-size: clamp(72px, 6.25vw, 96px);
      font-weight: 510;
      letter-spacing: -.048em;
      line-height: .94;
    }

    .hero-copy > p {
      width: min(610px, 44vw);
      margin: 0 0 27px;
      color: var(--silver);
      font-size: 19px;
      line-height: 1.52;
    }

    .hero-actions { display: flex; align-items: center; gap: 34px; }

    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 22px;
      border-radius: 999px;
      background: var(--lime);
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }

    .button span { position: relative; z-index: 1; white-space: nowrap; }

    .text-link {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid rgba(209, 255, 5, .72);
      color: var(--silver);
      font-size: 14px;
      text-decoration: none;
    }

    .text-link span { color: var(--lime); font-size: 20px; }

    .logo-board {
      display: none;
      position: absolute;
      z-index: 2;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    body.variant-logo-workboard .logo-board--original,
    body.variant-expanded-gtm .logo-board--expanded { display: block; }

    .logo-mark {
      position: absolute;
      display: block;
      height: auto;
      opacity: .52;
      mix-blend-mode: multiply;
      filter: grayscale(1) brightness(.18) contrast(1.3);
      transform: translate(-50%, -50%);
      transform-origin: center;
    }

    .logo-mark.on-dark {
      opacity: .25;
      mix-blend-mode: screen;
      filter: grayscale(1) brightness(0) invert(.72) contrast(.8);
    }

    .logo-board--original .logo-mark.marketo {
      left: 57.25%;
      top: 22.1%;
      width: 104px;
      transform: translate(-50%, -50%) rotate(.7deg);
    }

    .logo-board--original .logo-mark.hubspot {
      left: 73.1%;
      top: 19%;
      width: 58px;
      transform: translate(-50%, -50%) rotate(1.8deg);
    }

    .logo-board--original .logo-mark.slack {
      left: 90.55%;
      top: 31.9%;
      width: 58px;
      transform: translate(-50%, -50%) rotate(3.2deg);
    }

    .logo-board--original .logo-mark.mailchimp {
      left: 57.95%;
      top: 52.8%;
      width: 66px;
      transform: translate(-50%, -50%) rotate(-.5deg);
    }

    .logo-board--original .logo-mark.chili-piper {
      left: 75.4%;
      top: 47.7%;
      width: 64px;
      transform: translate(-50%, -50%) rotate(.8deg);
    }

    .logo-board--original .logo-mark.intercom {
      left: 91.4%;
      top: 60.7%;
      width: 58px;
      transform: translate(-50%, -50%) rotate(2.8deg);
    }

    .logo-board--original .logo-mark.zapier {
      left: 63.2%;
      top: 80.35%;
      width: 78px;
      transform: translate(-50%, -50%) rotate(-.4deg);
    }

    .logo-board--original .logo-mark.salesforce {
      left: 81.35%;
      top: 80.35%;
      width: 82px;
      transform: translate(-50%, -50%) rotate(1.1deg);
    }

    .logo-board--expanded .logo-mark.hubspot {
      left: 49.65%;
      top: 28.15%;
      width: 40px;
      opacity: .42;
      transform: translate(-50%, -50%) rotate(.8deg);
    }

    .logo-board--expanded .logo-mark.zoominfo {
      left: 65.2%;
      top: 17.65%;
      width: 126px;
      transform: translate(-50%, -50%) rotate(.3deg);
    }

    .logo-board--expanded .logo-mark.slack {
      left: 82.2%;
      top: 13.7%;
      width: 48px;
      transform: translate(-50%, -50%) rotate(1.6deg);
    }

    .logo-board--expanded .logo-mark.gong {
      left: 91.9%;
      top: 35.1%;
      width: 108px;
      transform: translate(-50%, -50%) rotate(1.1deg);
    }

    .logo-board--expanded .logo-mark.intercom {
      left: 49.7%;
      top: 55.25%;
      width: 52px;
      opacity: .2;
      transform: translate(-50%, -50%) rotate(-.5deg);
    }

    .logo-board--expanded .logo-mark.outreach {
      left: 63.45%;
      top: 40%;
      width: 62px;
      transform: translate(-50%, -50%) rotate(.4deg);
    }

    .logo-board--expanded .logo-mark.salesforce {
      left: 79.7%;
      top: 35.5%;
      width: 72px;
      transform: translate(-50%, -50%) rotate(-.3deg);
    }

    .logo-board--expanded .logo-mark.leandata {
      left: 74.9%;
      top: 58.75%;
      width: 90px;
      transform: translate(-50%, -50%) rotate(.4deg);
    }

    .logo-board--expanded .logo-mark.chili-piper {
      left: 89.35%;
      top: 62.6%;
      width: 54px;
      transform: translate(-50%, -50%) rotate(.5deg);
    }

    .logo-board--expanded .logo-mark.sixsense {
      left: 49.8%;
      top: 82%;
      width: 100px;
      transform: translate(-50%, -50%) rotate(-.6deg);
    }

    .logo-board--expanded .logo-mark.marketo {
      left: 63.6%;
      top: 74.4%;
      width: 66px;
      transform: translate(-50%, -50%) rotate(.4deg);
    }

    .logo-board--expanded .logo-mark.zapier {
      left: 75.95%;
      top: 83.4%;
      width: 90px;
      transform: translate(-50%, -50%) rotate(.3deg);
    }

    .logo-board--expanded .logo-mark.segment {
      left: 88.9%;
      top: 83.95%;
      width: 102px;
      transform: translate(-50%, -50%) rotate(.2deg);
    }

[hidden] { display: none !important; }
button { font: inherit; }
.engagements { background: var(--silver); color: var(--ink); padding: 52px 0 24px; }
.engagements-inner { width: min(1280px, calc(100% - 128px)); margin: auto; }
.engagements-intro h2 { margin: 0 0 10px; font-size: 48px; font-weight: 530; letter-spacing: -.04em; line-height: 1.06; }
.engagements-intro p { margin: 0; font-size: 17px; line-height: 1.5; }
.engagement-tabs { position: relative; display: grid; grid-template-columns: 1fr 1.24fr 1fr; margin-top: 40px; }
.engagement-tab { position: relative; min-width: 0; min-height: 126px; border: 1px solid #83888c; background: transparent; color: var(--ink); cursor: pointer; padding: 25px 14px; text-align: center; }
.engagement-tab + .engagement-tab { border-left: 0; }
.engagement-tab:first-child { border-radius: var(--radius-surface) 0 0 var(--radius-surface); }
.engagement-tab:last-child { border-radius: 0 var(--radius-surface) var(--radius-surface) 0; }
.engagement-tab[aria-selected="true"] { background: var(--ink); color: var(--silver); border-top: 3px solid var(--lime); padding-top: 23px; }
.tab-title { display: block; font-size: 24px; font-weight: 520; letter-spacing: -.035em; }
.tab-promise { display: block; font-size: 16px; margin-top: 8px; }
.popular-tag { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--lime); color: var(--ink); padding: 7px 18px; border-radius: var(--radius-chip); font-size: 12px; font-weight: 720; text-transform: uppercase; white-space: nowrap; }
.panel-field { position: relative; margin-top: 9px; background: var(--ink); color: var(--silver); border-radius: var(--radius-surface); }
.panel-field::before { position: absolute; top: -9px; left: var(--active-center); width: 3px; height: 52px; transform: translateX(-50%); background: var(--lime); content: ""; transition: left 220ms ease; }
.engagement-panel { padding: 38px 64px 26px; }
.engagement-panel h3 { font-size: 50px; font-weight: 530; line-height: 1.05; letter-spacing: -.04em; margin: 0 0 12px; }
.panel-description { margin: 0; font-size: 16px; line-height: 1.5; }
.build-route { list-style: none; display: grid; grid-template-columns: repeat(var(--stages), minmax(0,1fr)); padding: 0; margin: 18px 30px 12px; }
.build-route li { position: relative; display: flex; align-items: center; flex-direction: column; gap: 10px; }
.route-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1.5px solid var(--lime); border-radius: 50%; background: var(--ink); }
.route-icon img { width: 34px; height: 34px; }
.route-label { font-size: 16px; font-weight: 520; }
.build-route li:not(:last-child)::after { content: ""; position: absolute; height: 1px; background: var(--lime); top: 33px; left: calc(50% + 42px); width: calc(100% - 84px); }
.build-route li:not(:last-child)::before { content: ""; position: absolute; width: 18px; height: 18px; background: url("assets/village-workflow-icons/arrow-right-brass.svg") center / contain no-repeat; top: 24.5px; left: calc(150% - 57px); }
.path-facts { display: grid; grid-template-columns: 1fr 1fr 1.2fr; margin: 0 0 10px; }
.path-facts > div { padding: 5px 24px 12px 0; }
.path-facts > div + div { border-left: 1px solid #737a85; padding-left: 40px; }
.path-facts dt { color: #aab0ba; text-transform: uppercase; font-size: 13px; letter-spacing: .055em; margin-bottom: 6px; }
.path-facts dd { margin: 0; font-size: 18px; line-height: 1.4; }
.panel-actions { display: flex; align-items: center; gap: 42px; }
.path-cta { min-height: 54px; min-width: 318px; display: inline-flex; justify-content: space-between; align-items: center; gap: 36px; padding: 10px 28px; border-radius: var(--radius-control); background: var(--lime); color: var(--ink); font-size: 21px; font-weight: 600; text-decoration: none; }
.path-cta img { width: 28px; height: 28px; }
.scope-toggle { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; padding: 8px 0; border: 0; background: transparent; color: var(--silver); font-size: 17px; cursor: pointer; }
.scope-toggle img { width: 21px; height: 21px; filter: grayscale(1) brightness(3); transition: transform 160ms ease; }
.scope-toggle[aria-expanded="true"] img { transform: rotate(45deg); }
.scope-content { border-top: 1px solid #5d6572; margin-top: 26px; padding-top: 22px; }
.scope-content h4 { font-size: 18px; margin: 0 0 12px; }
.scope-content ul { columns: 2; padding-left: 20px; margin: 0; }
.scope-content li { padding: 0 20px 10px 2px; font-size: 16px; line-height: 1.5; break-inside: avoid; }
a:focus-visible, button:focus-visible, .engagement-panel:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.engagement-tab:focus-visible { outline-color: var(--ink); outline-offset: 5px; z-index: 1; }
.path-cta:focus-visible { outline-color: var(--silver); }
@media (hover: hover) {
  .engagement-tab:not([aria-selected="true"]):hover { background: #dbe0e2; }
  .path-cta:hover, .button:hover { background: var(--lime-hover); }
  .scope-toggle:hover { color: var(--lime); }
}
@media (max-width: 1000px) {
  .site-nav, .hero-inner, .engagements-inner { width: calc(100% - 44px); }
  .nav-links { gap: 18px; }
  .tab-title { font-size: 20px; }
  .engagement-panel { padding: 34px; }
  .path-facts > div + div { padding-left: 24px; }
}
@media (max-width: 760px) {
  .site-nav { height: 78px; }
  .nav-links a:not(.button-small) { display: none; }
  .nav-links .button-small { display: inline-flex; align-items: center; }
  .hero { min-height: 690px; }
  .hero-inner { padding-top: 55px; }
  .hero-copy, .hero-copy > p { width: 100%; }
  h1 { font-size: clamp(44px,9vw,68px); }
  .hero-copy > p { font-size: 17px; }
  .engagements-intro h2 { font-size: 38px; }
  .engagement-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 46px; }
  .engagement-tab { padding: 20px 8px; min-height: 120px; }
  .engagement-tab[aria-selected="true"] { padding-top: 18px; }
  .tab-title { font-size: 17px; }
  .tab-promise { font-size: 13px; line-height: 1.35; }
  .popular-tag { font-size: 10px; padding: 7px 9px; }
  .engagement-panel h3 { font-size: 38px; }
  .build-route { margin-inline: 0; }
  .route-icon { width: 54px; height: 54px; }
  .route-icon img { width: 28px; height: 28px; }
  .route-label { font-size: 12px; }
  .build-route li:not(:last-child)::after { top: 27px; left: calc(50% + 31px); width: calc(100% - 62px); }
  .build-route li:not(:last-child)::before { top: 18.5px; left: calc(150% - 46px); }
  .path-facts dd { font-size: 16px; }
  .panel-actions { gap: 15px; flex-wrap: wrap; }
  .path-cta { min-width: 0; font-size: 18px; }
}
@media (max-width: 520px) {
  .site-nav, .hero-inner, .engagements-inner { width: calc(100% - 36px); }
  .wordmark img { width: 42px; }
  .nav-links .button-small { padding: 0 12px; font-size: 10px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .engagements { padding-top: 42px; }
  .engagement-panel { padding: 32px 18px 22px; }
  .tab-title { font-size: 14px; }
  .tab-promise { font-size: 12px; }
  .popular-tag { font-size: 9px; padding-inline: 7px; }
  .engagement-panel h3 { font-size: 34px; }
  .path-facts { grid-template-columns: 1fr; }
  .path-facts > div, .path-facts > div + div { border: 0; border-bottom: 1px solid #414956; padding: 10px 0; display: grid; grid-template-columns: 65px 1fr; }
  .path-facts dt { margin-top: 3px; }
  .path-cta { width: 100%; }
  .scope-content ul { columns: 1; }
  .route-icon { width: 46px; height: 46px; }
  .route-icon img { width: 25px; height: 25px; }
  .build-route li:not(:last-child)::after { top: 23px; left: calc(50% + 27px); width: calc(100% - 54px); }
  .build-route li:not(:last-child)::before { top: 14.5px; left: calc(150% - 42px); }
  .route-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; } }
/* Approved homepage assembly, September 2026. */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { line-height: 1.5; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
a { color: inherit; }
button { cursor: pointer; }
.button { border: 0; }
button:disabled { opacity: .65; cursor: wait; }
.section-inner { width: min(1280px, calc(100% - 128px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10000; left: 16px; top: -80px; padding: 12px 18px; border-radius: var(--radius-chip); background: var(--lime); color: var(--ink); }
.skip-link:focus { top: 12px; }
.site-nav .button-small { display: inline-flex; align-items: center; }
.engagements { padding-bottom: 44px; }
.tab-title, .route-label { text-transform: uppercase; }
.hero { min-height: 810px; }
.hero-inner { padding-top: 78px; }
.hero-copy { width: min(750px, 61vw); }
.hero h1 { font-size: clamp(64px,6.25vw,90px); line-height: 1.01; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 26px; }
.workflow-section { padding: 80px 0 68px; }
.workflow-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: center; }
.workflow-copy .eyebrow { color: var(--lime); }
.workflow-copy h2 { margin: 0 0 28px; font-size: clamp(44px,5vw,72px); font-weight: 530; letter-spacing: -.045em; line-height: 1.05; }
.workflow-copy > p:last-child { font-size: 20px; line-height: 1.55; margin: 0; }
.lead-card { background: #f4f5f6; color: var(--ink); border-radius: var(--radius-surface); padding: 26px 28px; max-width: 510px; }
.lead-card header { display: flex; gap: 18px; align-items: center; border-bottom: 1px solid #d6d9df; padding-bottom: 20px; font-size: 16px; }
.notification-icon, .booking-check { display: grid; place-items: center; background: var(--lime); border-radius: 50%; width: 40px; height: 40px; flex-shrink: 0; }
.notification-icon img { width: 24px; filter: brightness(0); }
.lead-person { display: flex; align-items: center; gap: 22px; padding: 24px 0; border-bottom: 1px solid #d6d9df; }
.lead-initials { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: #e6e7eb; font-size: 16px; }
.lead-person h3 { font-size: 20px; margin: 0 0 5px; font-weight: 550; }
.lead-person p { margin: 0 0 4px; font-size: 15px; }
.lead-person small { color: #525760; font-size: 13px; }
.lead-details { margin: 22px 0; }
.lead-details > div { display: grid; grid-template-columns: 23px 120px 1fr; gap: 12px; align-items: start; margin: 18px 0; font-size: 13px; }
.lead-details img { width: 23px; filter: brightness(0); }
.lead-details dt { font-weight: 600; }
.lead-details dd { margin: 0; }
.lead-record { display: flex; align-items: center; gap: 10px; font-size: 14px; border-top: 1px solid #d6d9df; padding-top: 18px; margin: 0; }
.lead-record img { width: 19px; filter: brightness(0); }
.workflow-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 44px 0 22px; }
.workflow-caption p { color: var(--lime); margin: 0; font-size: 17px; }
.workflow-caption small { color: #b5bac4; font-size: 13px; }
.workflow-stages { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 28px; list-style: none; margin: 0 0 34px; padding: 0; }
.workflow-stages li { position: relative; }
.stage-number { display: grid; place-items: center; border: 1px solid var(--lime); border-radius: 50%; width: 30px; height: 30px; font-size: 16px; color: var(--lime); margin-bottom: 20px; }
.workflow-stages li:not(:last-child)::after { content: ''; position: absolute; height: 1px; background: var(--lime); top: 15px; left: 42px; right: -14px; }
.stage-icon { width: 44px; height: 44px; object-fit: contain; margin-bottom: 14px; }
.workflow-stages h3 { margin: 0 0 8px; font-size: 18px; font-weight: 550; }
.workflow-stages p { margin: 0 0 10px; font-size: 14px; color: #c5c9d1; line-height: 1.65; }
.workflow-link { font-size: 18px; }
.workflow-link img { width: 24px; }
.about-section { background: var(--silver); color: var(--ink); padding: 48px 0; }
.about-inner { display: grid; grid-template-columns: 44% 1fr; gap: 7%; align-items: center; }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 960/1030; object-fit: cover; object-position: center top; align-self: center; }
.about-copy h2 { font-size: clamp(44px,5vw,72px); font-weight: 530; letter-spacing: -.045em; line-height: 1.03; margin: 0 0 30px; }
.about-copy p { font-size: 17px; line-height: 1.65; margin: 0 0 24px; max-width: 480px; }
.about-copy .eyebrow { font-size: 12px; }
.about-copy .about-lead { font-size: clamp(20px,2vw,27px); line-height: 1.45; letter-spacing: -.025em; }
.about-copy hr { width: 54px; border: 0; height: 3px; background: #879f00; margin: 28px 0; }
.about-copy p:last-child { font-size: 16px; margin-bottom: 0; }
.contact-section { padding: 72px 0 44px; }
.contact-heading { text-align: center; margin-bottom: 44px; }
.contact-heading h2 { font-size: clamp(36px,4.3vw,60px); font-weight: 550; line-height: 1.12; letter-spacing: -.04em; margin: 0 0 20px; }
.contact-heading p { font-size: 20px; color: #c5c9d1; margin: 0; }
#systems-intake-form { color-scheme: light; position: relative; background: var(--silver); color: var(--ink); max-width: 970px; margin-inline: auto; padding: 40px; border-radius: var(--radius-surface); }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field-wide { grid-column: 1/-1; }
.field-label { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 500; }
.field-label span { color: #526100; }
.field-group input, .field-group textarea { width: 100%; display: block; border: 1px solid #c5c9d1; border-radius: var(--radius-control); background: #fff; color: var(--ink); padding: 14px 16px; font-size: 16px; min-height: 56px; }
.field-group textarea { resize: vertical; min-height: 150px; }
.field-group input::placeholder, .field-group textarea::placeholder { color: #686e78; opacity: 1; }
.field-group :is(input,textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field-group [aria-invalid=true] { border-color: #a91d2c; }
.field-error { margin: 6px 0 0; color: #a91d2c; font-size: 14px; }
.submit-button { width: 100%; border-radius: var(--radius-control); min-height: 60px; font-size: 19px; font-weight: 550; gap: 24px; margin-top: 28px; }
.submit-button img { width: 28px; filter: brightness(0); }
.submit-button:focus-visible { outline-color: var(--ink); }
.form-note { color: #595f69; font-size: 15px; text-align: center; margin: 16px 0 0; }
.form-status:empty { display: none; }
.form-status { margin: 18px 0 0; padding: 12px; border-left: 3px solid currentColor; border-radius: 0 var(--radius-control) var(--radius-control) 0; font-size: 16px; }
.form-status.error { color: #a91d2c; }
.form-status.success { color: #254f2d; }
.form-fallback { font-size: 14px; }
.form-fallback a { display: inline-flex; min-height: 44px; align-items: center; }
.honeypot-field { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.newsletter-success-header { width: min(1280px, calc(100% - 96px)); margin: 0 auto; padding: 28px 0; }
.newsletter-success-brand { display: inline-flex; align-items: center; min-height: 44px; }
.newsletter-success-brand img { display: block; width: 228px; height: auto; }
@media (max-width: 520px) {
  .newsletter-success-header { width: calc(100% - 36px); }
  .newsletter-success-brand img { width: 42px; }
}
.site-footer { display: flex; justify-content: space-between; padding: 28px 0 38px; border-top: 1px solid #424650; font-size: 15px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer a:last-child { color: #b5bac4; }
#booking-dialog { color-scheme: light; background: var(--silver); color: var(--ink); border: 0; border-radius: var(--radius-surface); padding: 44px 32px 22px; width: min(1280px,calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 40px); overflow-y: auto; }
#booking-dialog::backdrop { background: rgb(7 9 15 / .88); }
body:has(#booking-dialog[open]) { overflow: hidden; }
.dialog-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 0; }
.dialog-close img { width: 26px; filter: brightness(0); }
.booking-heading { text-align: center; margin-bottom: 28px; }
.booking-check { width: 56px; height: 56px; margin: 0 auto 20px; }
.booking-check img { width: 32px; filter: brightness(0); }
.booking-heading h2 { font-size: clamp(28px,3.5vw,46px); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; margin: 12px 0 20px; }
.booking-heading p { font-size: 17px; margin: 0; }
#booking-confirmation { font-weight: 550; font-size: 19px; }
#booking-calendar { min-height: 430px; }
#booking-calendar iframe { width: 100%; border: 0; }
.booking-loading, .booking-fallback { text-align: center; font-size: 15px; }
.booking-fallback a { display: inline-flex; align-items: center; min-height: 44px; }
.booking-skip { display: block; background: transparent; border: 0; color: #505967; padding: 12px 20px; min-height: 44px; margin: 14px auto 0; text-decoration: underline; text-underline-offset: 4px; font-size: 17px; }
#booking-dialog :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media(max-width:1000px) {
 .section-inner { width: calc(100% - 44px); }
 .workflow-overview { gap: 5%; }
 .lead-card { padding: 20px; }
 .lead-details > div { grid-template-columns: 20px 1fr; gap: 8px 12px; }
 .lead-details dd { grid-column: 2; }
 .workflow-stages { gap: 18px; }
 .about-inner { gap: 5%; }
 .hero { min-height: 720px; }
 .hero h1 { font-size: 68px; }
}
@media(max-width:760px) {
 .hero { min-height: 740px; background-position: 64% center; }
 .hero-inner { padding-top: 55px; }
 .hero-copy { width: 100%; }
 .hero h1 { font-size: clamp(44px,9vw,68px); max-width: 680px; }
 .hero-copy > p { width: min(480px,100%); }
 .logo-board { display: none !important; }
 .workflow-section { padding: 52px 0; }
 .workflow-overview { grid-template-columns: 1fr; gap: 32px; }
 .workflow-copy h2 { font-size: 52px; }
 .lead-card { max-width: none; }
 .lead-details > div { grid-template-columns: 23px 110px 1fr; }
 .lead-details dd { grid-column: auto; }
 .workflow-caption { align-items: flex-start; }
 .workflow-caption p { max-width: 220px; }
 .workflow-caption small { text-align: right; }
 .workflow-stages { grid-template-columns: 1fr; gap: 0; }
 .workflow-stages li { display: grid; grid-template-columns: 32px 40px 1fr; gap: 4px 16px; padding-bottom: 24px; }
 .stage-number { grid-row: 1/4; margin: 0; z-index: 1; background: var(--ink); }
 .stage-icon { grid-row: 1/4; width: 36px; margin: 0; }
 .workflow-stages h3, .workflow-stages p { grid-column: 3; margin: 0 0 4px; }
 .workflow-stages li:not(:last-child)::after { top: 30px; bottom: 0; width: 1px; height: auto; left: 15px; }
 .about-inner { grid-template-columns: 1fr; }
 .about-copy { grid-row: 1; }
 .portrait { width: 80%; max-width: 430px; justify-self: center; margin-top: 30px; }
 .about-copy p { max-width: none; }
 .about-copy h2 { font-size: 48px; }
 .contact-section { padding: 52px 0 32px; }
 .contact-heading { text-align: left; margin-bottom: 30px; }
 .contact-heading p { font-size: 17px; }
 #systems-intake-form { padding: 24px; }
 .contact-fields { grid-template-columns: 1fr; gap: 22px; }
 .booking-heading { padding-top: 22px; }
 #booking-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 24px 12px 16px; }
 #booking-calendar { min-height: 520px; }
 .booking-heading p { font-size: 15px; }
}
@media(max-width:520px) {
 .section-inner { width: calc(100% - 36px); }
 .hero { min-height: 700px; }
 .hero h1 { font-size: clamp(42px,10.7vw,56px); }
 .hero-copy > p { font-size: 17px; }
 .workflow-copy h2 { font-size: 44px; }
 .workflow-copy > p:last-child { font-size: 18px; }
 .lead-details > div { grid-template-columns: 20px 1fr; }
 .lead-details dd { grid-column: 2; }
 .contact-heading h2 { font-size: 37px; }
 #systems-intake-form { padding: 24px 18px; }
 .field-label { font-size: 16px; }
 .about-inner { row-gap: 0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media(min-width:1001px) {
 .hero { min-height: 56.25vw; }
 .site-nav, .hero-inner { width: min(1280px,88.75%); }
 .site-nav { height: 6.4vw; }
 .hero-inner { padding-top: 5.6vw; }
 .hero-copy { width: 52vw; max-width: 750px; }
}
@media(min-width:1001px) { .hero h1 { line-height: .94; } .hero-copy > p { font-size: clamp(17px,1.32vw,19px); } }
.site-nav .nav-links > a { min-height: 44px; display: inline-flex; align-items: center; }
@media(max-width:760px) { .site-nav .nav-links > a:not(.button-small) { display: none; } }
.booking-skip { position: sticky; bottom: 0; background: var(--silver); z-index: 2; border-radius: 3px; }
@media(max-width:760px) { .booking-skip { width: 100%; border-top: 1px solid #c5c9d1; border-radius: 0; } }
/* Match the selected workflow mock's readable display and annotation scale. */
@media(min-width:761px) { .workflow-copy h2 { font-size: clamp(44px,5.6vw,80px); } }
.workflow-stages h3 { font-size: 20px; }
.workflow-stages p { font-size: 15px; }
.lead-details > div { font-size: 14px; }
.lead-card header { font-size: 18px; }

/* The illustrative lead card is a landscape desktop detail. */
@media (max-width: 760px), (orientation: portrait) {
 .lead-card { display: none; }
 .workflow-overview { grid-template-columns: 1fr; }
}
.path-cta img { filter: brightness(0); }

/* Leave space beneath the stronger engagement connector at every breakpoint. */
.engagement-panel { padding-top: 56px; }

/* Selected engagement remains optional and editable without another required field. */
.engagement-context { margin-bottom: 24px; border-bottom: 1px solid #b7bec2; padding-bottom: 12px; }
.engagement-context summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-size: 16px; line-height: 1.5; }
.engagement-context strong { font-weight: 600; }
.engagement-change { margin-left: 16px; text-decoration: underline; text-underline-offset: 3px; }
.engagement-context label { display: block; margin: 10px 0 8px; }
.engagement-context select { width: 100%; min-height: 48px; padding: 10px 12px; background: #fff; color: var(--ink); border: 1px solid #879098; border-radius: var(--radius-control); font: inherit; }
.engagement-context :is(summary,select):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width:760px) {
 .hero::before { background: linear-gradient(180deg, rgba(15,18,26,.38) 0%, rgba(15,18,26,.84) 20%, rgba(15,18,26,.9) 62%, rgba(15,18,26,.42) 100%); }
}