/* Relay — whiteboard surfaces, original Relay brand colors, quieter framing. */
:root {
  --board-paper:#fff; --board-paper-2:#fff; --note-white:#fff;
  --board-dot:#e3e5eb; --board-line:#eef0f4;
  --ink:#202126; --marker-ink:#25262b;
  --chalk-board:#222329; --chalk-board-2:#191a20; --chalk-ink:#fff;
  --chalk-line:#42434b; --chalk-yellow:#f0c43f; --chalk-green:#5fd389;
  --note-yellow:#f0c43f; --note-yellow-2:#fcf3ce;
  --note-coral:#e54a4a; --note-coral-2:#fdecec;
  --note-mint:#1bb755; --note-mint-2:#e9f9ef;
  --note-sky:#3b8dff; --note-sky-2:#eaf2ff;
  --note-lav:#bc55dd; --note-lav-2:#f8ecfc;
  --marker-terra:#e54a4a; --marker-moss:#1bb755;
  --marker-sky:#3b8dff; --marker-plum:#bc55dd; --marker-gold:#f0c43f;
  --shadow-sketch:3px 3px 0 var(--marker-ink);
  --shadow-note-sm:2px 3px 0 #25262b15;
  --container:1280px; --gutter:clamp(24px,4.5vw,64px);
}
html { scroll-padding-top:100px; }
body { background:#fff; }
*, *::before, *::after { box-sizing:border-box; }
a, button, [role="button"] { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline:3px solid var(--blue-500); outline-offset:5px; }
.site-header { background:rgba(255,255,255,.96)!important; border-bottom:1px solid #e7e8ec!important; }
.site-header nav { padding:18px var(--gutter)!important; gap:22px!important; }
.site-header nav > a:first-child img { height:36px!important; }
.site-header nav > a:first-child span { font-size:28px!important; }
.nav-links { gap:4px!important; }
.nav-links a { font-size:14px!important; padding:8px 11px!important; border-radius:5px!important; }
.nav-links a[aria-current="page"], .md-panel a[aria-current="page"] { background:transparent!important; box-shadow:none!important; color:var(--ink)!important; }
.nav-label { position:relative; isolation:isolate; display:inline-block; }
a[aria-current="page"] > .nav-label::before { content:''; position:absolute; z-index:-1; inset:12% -5px 2%; background:var(--note-yellow); transform:rotate(-1.5deg); clip-path:polygon(1% 8%,98% 0,100% 87%,2% 100%,0 38%); }
.nav-cta { background:var(--note-yellow)!important; color:var(--ink)!important; font-size:15px!important; padding:11px 22px!important; border-width:2px!important; }
.site-header nav .mb-menu { display:none; }
.hm-root h2 { font-size:clamp(30px,3.5vw,46px)!important; line-height:1.1!important; }
.hm-root section { scroll-margin-top:88px; }
.home-hero { background:#fff!important; color:var(--ink)!important; border-bottom:0!important; }
.home-hero > div { grid-template-columns:1.06fr 1fr!important; gap:60px!important; padding-top:76px!important; padding-bottom:86px!important; }
.home-hero h1 { color:var(--ink)!important; font-size:clamp(44px,5.25vw,68px)!important; line-height:1.04!important; letter-spacing:-.045em!important; margin-bottom:28px!important; }
.home-hero h1 mark { color:var(--ink)!important; box-shadow:inset 0 -.13em 0 var(--green-500)!important; }
.home-hero p { color:var(--gray-600)!important; font-size:19px!important; font-weight:700; line-height:1.6!important; }
.home-hero p mark { color:var(--ink)!important; }
.home-hero a { font-size:16px!important; }
.home-hero a[href="#chooser"] { color:var(--ink)!important; border-bottom:2px solid var(--blue-500); padding-block:6px; }
.home-hero a[href="/lets-talk"] { padding:14px 25px!important; }
#vaLoop { border:2px solid var(--marker-ink)!important; box-shadow:6px 7px 0 #25262b!important; padding:28px 24px 24px!important; background-image:radial-gradient(#dfe2e8 .8px, transparent .8px)!important; background-size:18px 18px!important; }
#vaLoop > div:first-child { min-height:42px; }
#vaLoop > div:first-child > div { font-family:var(--font-hand)!important; text-transform:none!important; font-size:19px!important; font-weight:400!important; letter-spacing:0!important; background:#fff; }
#vaLoop circle { animation:none!important; }
#vaLoop .flow-node-0 { stroke:var(--red-500); }
#vaLoop .flow-node-1 { stroke:var(--purple-500); }
#vaLoop .flow-node-2 { stroke:var(--blue-500); }
#vaLoop .flow-node-3 { stroke:var(--gold-500); }
#vaLoop .flow-node-4 { stroke:var(--green-500); }
.home-clients { padding:28px 0!important; border-block:1px solid #e7e8ec!important; }
.hm-strip-item img { filter:brightness(0); opacity:.46!important; max-width:190px; max-height:46px; }
.hm-strip-item.hm-chip { background:none; padding:0; }
.greystone-wordmark { color:#73747a; font-family:var(--font-sans); font-size:18px; font-weight:650; letter-spacing:.06em; white-space:nowrap; }
.hm-strip-group { gap:60px; padding-right:60px; }
.hm-strip-item { height:54px; }
.home-chooser { background:#f7f8fa!important; border-top:0!important; border-bottom:1px solid #e7e8ec!important; padding-block:72px!important; }
.home-chooser h2 { margin-inline:auto!important; }
.home-chooser h2 mark { box-shadow:inset 0 -.12em 0 var(--purple-500)!important; }
.home-chooser h2 + div { margin-top:22px!important; gap:0!important; }
.home-chooser h2 + div > span { font-family:var(--font-hand)!important; font-size:25px!important; font-weight:400!important; color:var(--purple-700)!important; }
.home-chooser h2 + div > svg { height:42px!important; color:var(--purple-500)!important; }
#tileGrid { margin-top:22px!important; gap:20px!important; }
.pk-card { border-width:2px; box-shadow:3px 3px 0 var(--marker-ink); text-align:left; }
.pk-card > div:not(.pk-bar) { padding:24px!important; }
.pk-bar { height:7px; border-bottom:0; background:var(--card-accent)!important; }
#tile0 { --card-accent:var(--purple-500); }
#tile1 { --card-accent:var(--red-500); }
#tile2 { --card-accent:var(--blue-500); }
#tile3 { --card-accent:var(--green-500); }
.pk-label { font-size:25px; white-space:normal; }
.pk-quote { font-size:15px; line-height:1.6; }
.pk-foot { font-size:12px; letter-spacing:.035em; padding-top:24px; }
.pk-card.is-picked { border-color:var(--card-accent); box-shadow:4px 5px 0 var(--card-accent); }
.answer-open .pk-card:not(.is-picked) { filter:none; transform:none; border-color:#b5b7c0; }
.pk-more { margin-top:28px; }
.pk-more a { font-size:16px!important; }
.hm-root:not(.answer-open) #answer { display:none; }
.hm-root.answer-open #answer { display:block; animation:answer-in .3s ease both; }
#answer { border-bottom:1px solid #e7e8ec!important; padding:44px 0 60px!important; }
#answer:focus { outline:none; }
@keyframes answer-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.ans-preview { border:0!important; padding:0!important; }
.ans-note { display:none!important; }
.ans-attribution { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:10px; }
.ans-quote-logo { display:block; width:180px; max-width:100%; height:auto; max-height:44px; object-fit:contain; object-position:left; }
.ans-reveal { opacity:1!important; filter:none!important; }
.ans-proof { filter:none!important; }
.home-process { padding:80px 0!important; }
.home-process h2 { margin-bottom:42px!important; }
.pk-steps { gap:28px; }
.process-step { position:relative; padding:26px!important; border:1.5px solid #c6c9d2!important; box-shadow:3px 4px 0 #e8eaf0!important; }
.process-step > div:first-child { margin-bottom:4px!important; }
.process-step > div:first-child > span { width:36px!important; height:36px!important; font-size:18px!important; background:#fff!important; border-width:2px!important; }
.process-step-1 > div:first-child > span { border-color:var(--blue-500)!important; }
.process-step-2 > div:first-child > span { border-color:var(--purple-500)!important; }
.process-step-3 > div:first-child > span { border-color:var(--green-500)!important; }
.process-step > p:first-of-type { font-size:28px!important; white-space:normal!important; }
.process-step > p:last-child { font-size:16px!important; line-height:1.6!important; }
.step-art { width:100%; height:170px; display:block; margin:0 0 22px; overflow:visible; }
.step-art g { transform-box:fill-box; transform-origin:center; }
.step-art .bubble-two { animation:conversation 5s ease-in-out infinite; }
.step-art .note-one { animation:organize-one 6s ease-in-out infinite; }
.step-art .note-two { animation:organize-two 6s ease-in-out infinite; }
.step-art .build-block { animation:assemble 5s ease-in-out infinite both; }
.step-art .block-two { animation-delay:.25s; }
.step-art .block-three { animation-delay:.5s; }
@keyframes conversation { 0%,100% { transform:translateY(0); } 45% { transform:translateY(-7px) rotate(-2deg); } }
@keyframes organize-one { 0%,100% { transform:rotate(-5deg) translateX(-4px); } 45%,70% { transform:rotate(4deg) translateX(4px); } }
@keyframes organize-two { 0%,100% { transform:rotate(4deg); } 45%,70% { transform:rotate(-5deg) translateY(-4px); } }
@keyframes assemble { 0%,10% { transform:translateY(6px); opacity:.45; } 30%,85% { transform:none; opacity:1; } 100% { transform:translateY(6px); opacity:.45; } }
.home-process > div > div:last-child a { font-size:16px!important; }
.home-quote { background:#f7f8fa!important; border-block:1px solid #e7e8ec!important; padding-block:72px!important; }
.home-quote > div > div { margin-inline:auto; border-left:4px solid var(--purple-500); padding-left:34px; }
.home-quote blockquote { color:var(--ink)!important; font-size:clamp(25px,3vw,38px)!important; font-weight:600!important; line-height:1.25!important; }
.home-quote > div > div > div:first-child { color:var(--purple-500)!important; opacity:1!important; font-size:86px!important; }
.home-quote > div > div > div:last-child span { color:var(--gray-600)!important; font-size:16px!important; }
.home-quote > div > div > div:last-child span:first-child { background:var(--purple-500)!important; }
.home-team { padding-block:86px!important; }
.team-layout { grid-template-columns:1fr 1fr!important; gap:64px!important; }
.team-layout p { font-size:17px!important; }
.team-layout a { color:var(--ink)!important; border-bottom:2px solid var(--blue-500); padding-bottom:4px; font-size:16px!important; }
.team-layout > div:first-child > div:first-child { font-family:var(--font-hand)!important; border:0!important; box-shadow:none!important; background:transparent!important; color:var(--purple-700)!important; font-size:23px!important; text-transform:none!important; padding:0!important; }
.team-portraits { gap:16px!important; }
.team-portraits > div { border-width:1.5px!important; border-color:#a9acb6!important; padding:8px!important; box-shadow:3px 4px 0 #e8eaf0!important; }
.team-photo { width:100%; aspect-ratio:1; object-fit:cover; object-position:center top; display:block; border-radius:6px; background:#f2f3f6; }
.home-cta { border-top:1px solid #e7e8ec!important; background:#f7f8fa; }
.home-cta > div { position:relative; border:2px solid var(--marker-ink)!important; padding-top:58px!important; overflow:hidden; box-shadow:6px 7px 0 var(--marker-ink)!important; }
.home-cta > div::before { content:""; position:absolute; top:0; left:0; right:0; height:7px; background:linear-gradient(90deg,#e54a4a 0 20%,#bc55dd 20% 40%,#1bb755 40% 60%,#3b8dff 60% 80%,#f0c43f 80%); }
.home-cta p { font-size:17px!important; }
.home-cta a { font-size:16px!important; }
footer { border-top:0!important; }
.lts-modal, .lts-formcard, .lts-book { background:#fff!important; }
.lts-submit, .lts-cal, .md-cta { background:var(--note-yellow)!important; color:var(--ink)!important; }
@media (min-width:1100px) { #tileGrid { grid-template-columns:repeat(4,minmax(0,1fr))!important; } .pk-card > div:not(.pk-bar) { padding:20px!important; } .pk-label { font-size:24px; } }
@media (max-width:1000px) and (min-width:768px) { .home-hero > div { gap:32px!important; } .site-header nav { gap:16px!important; padding-inline:24px!important; } .nav-links a { padding:8px!important; font-size:13px!important; } .nav-cta { padding:10px 14px!important; } .pk-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .process-step { padding:18px!important; } .process-step p:first-of-type { font-size:24px!important; } .step-art { height:130px; } }
@media (max-width:767px) {
  :root { --container:100%; --gutter:24px; }
  html { scroll-padding-top:85px; }
  .relay-board { padding-bottom:calc(96px + env(safe-area-inset-bottom))!important; }
  .site-header nav { padding:14px 24px!important; justify-content:space-between; }
  .site-header nav > a:first-child img { height:31px!important; }
  .site-header nav > a:first-child span { font-size:26px!important; }
  .site-header nav .mb-menu { display:flex; flex:0 0 auto; min-height:44px; padding:9px 12px; box-shadow:none; border:1.5px solid #ced0d8; border-radius:8px; font-size:14px; gap:8px; }
  .mobile-bar { left:0!important; right:0!important; bottom:0!important; padding:12px 24px calc(16px + env(safe-area-inset-bottom))!important; background:#fff!important; backdrop-filter:none!important; border:0!important; border-top:1px solid #e7e8ec!important; box-shadow:0 -4px 16px #25262b08; }
  .mb-cta { min-height:52px!important; font-size:16px!important; background:var(--note-yellow)!important; color:var(--ink)!important; border-width:2px!important; pointer-events:auto; box-shadow:3px 4px 0 var(--marker-ink)!important; }
  .md-panel { top:16px!important; right:16px!important; left:16px!important; bottom:auto!important; max-height:calc(100dvh - 32px); overflow:auto; border:2px solid var(--marker-ink)!important; border-radius:12px!important; transform:translateY(-115%)!important; padding:20px!important; box-shadow:4px 5px 0 var(--marker-ink)!important; }
  .mobile-drawer.open .md-panel { transform:translateY(0)!important; }
  .md-panel a { font-size:18px!important; }
  .home-hero > div { grid-template-columns:minmax(0,1fr)!important; gap:42px!important; padding-top:44px!important; padding-bottom:52px!important; }
  .home-hero h1 { font-size:clamp(37px,10.5vw,56px)!important; line-height:1.07!important; margin-bottom:22px!important; }
  .home-hero p { font-size:17px!important; margin-bottom:26px!important; }
  .home-hero p mark { white-space:normal!important; }
  .home-hero a { font-size:15px!important; }
  #vaLoop { padding:22px 18px 18px!important; box-shadow:4px 5px 0 var(--marker-ink)!important; }
  #vaLoop > div:first-child > div { font-size:17px!important; }
  .home-clients { padding-block:20px!important; }
  .hm-strip-group { gap:36px; padding-right:36px; }
  .hm-strip-item img { max-width:150px; max-height:36px; }
  .greystone-wordmark { font-size:15px; }
  .home-chooser { padding-block:48px!important; }
  .hm-root h2 { font-size:32px!important; line-height:1.12!important; }
  #tileGrid { grid-template-columns:1fr!important; gap:16px!important; }
  .pk-card > div:not(.pk-bar) { padding:22px!important; }
  .pk-label { font-size:26px; }
  .pk-quote { font-size:16px; }
  .pk-foot { padding-top:16px; }
  #answer { padding-block:30px 44px!important; }
  .ans-reveal { flex-direction:column; }
  .ans-proof { grid-template-columns:minmax(0,1fr); }
  .ans-close { min-height:44px; }
  .home-process { padding-block:52px!important; }
  .home-process h2 { margin-bottom:30px!important; }
  .pk-steps { grid-template-columns:1fr!important; gap:24px; }
  .process-step { padding:24px!important; }
  .step-art { height:165px; }
  .home-quote { padding-block:52px!important; }
  .home-quote > div > div { padding-left:22px; }
  .home-quote blockquote { font-size:27px!important; }
  .home-team { padding-block:56px!important; }
  .team-layout { grid-template-columns:minmax(0,1fr)!important; gap:36px!important; }
  .team-portraits { gap:12px!important; }
  .team-portraits > div { padding:6px!important; }
  .team-portraits > div > div { font-size:13px!important; }
  .home-cta { padding-block:48px 60px!important; }
  .home-cta > div { padding:38px 22px!important; }
  .home-cta h2 { font-size:30px!important; }
  .home-cta p { font-size:16px!important; }
  .footer-grid { padding-top:44px!important; }
  .lts-inner { padding:28px 24px!important; }
  .lts-head h2 { font-size:30px!important; }
}
@media (max-width:360px) { :root { --gutter:22px; } .team-portraits { grid-template-columns:repeat(2,minmax(0,1fr))!important; } .home-hero > div > div:first-child > div { gap:18px!important; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; }
  .step-art *, .hm-strip-track, #answer { animation:none!important; }
  #vaLoop [style*="animation"] { animation:none!important; opacity:1!important; }
  #vaLoop svg > path, #vaLoop > div:first-child > div:first-child { display:none; }
  #vaLoop svg > g[style*="--dx"] { transform:translate(var(--dx),var(--dy)); }
  #vaLoop path { stroke-dashoffset:0!important; }
}

.home-chooser h2 + div > svg path { stroke:var(--purple-500)!important; }

/* Show the intact mark from the existing full artwork; the published mark PNG
   is cropped on its right edge. This viewport excludes the stacked wordmark. */
.site-header .brand-mark {
  position:relative; display:block; flex:none; overflow:hidden;
  height:36px; width:54.0354px;
}
.site-header nav > a:first-child .brand-mark img {
  position:absolute; max-width:none; width:134.031414%!important; height:auto!important;
  left:-16.950262%; top:-20.43222%;
}
@media (max-width:767px) {
  .site-header .brand-mark { height:31px; width:46.53045px; }
}

/* Headings use their full content column instead of balanced, shortened lines. */
.relay-board h1 {
  width:100%;
  max-width:none!important;
  text-wrap:wrap!important;
}
.page-heading-wrap { width:100%; max-width:none; }

/* Subtle monochrome logos, with stronger contrast on outcome cards only. */
:root { --client-logo-gray:#8a8a8a; --client-logo-tone:.54; }
.ros-logo { --client-logo-gray:#4d4d4d; --client-logo-tone:.3; }
img[src^="/assets/logos/"]:not([src*="/tech/"]) {
  filter:brightness(0) invert(var(--client-logo-tone))!important;
  opacity:1!important;
}
.greystone-wordmark { color:var(--client-logo-gray); }

/* Pale lavender keeps the testimonial's handwriting and attribution legible. */
.oa-quotes-grid > [data-oa-quote][style*="--note-lav"] {
  background:#f0e2f8!important;
}

/* Homepage: a bolder opening using the deeper brand-green shade and a white headline. */
.home-hero {
  background:var(--green-600)!important;
  color:#fff!important;
}
.home-hero h1,
.home-hero h1 mark {
  color:#fff!important;
}
.home-hero h1 mark {
  box-shadow:inset 0 -.13em 0 var(--gold-500)!important;
}
.home-hero p,
.home-hero p mark {
  color:#122218!important;
}
.home-hero a[href="#chooser"] {
  color:#fff!important;
  border-bottom-color:var(--gold-500)!important;
}

.client-wordmark { color:var(--client-logo-gray);font-family:var(--font-sans);font-size:18px;font-weight:650;letter-spacing:.045em;text-align:center; }
.hm-strip-item .client-wordmark { white-space:nowrap; }
@media(max-width:767px){.hm-strip-item .client-wordmark{font-size:15px;}}

.client-logo { max-width:100%; }

/* What We Do: quiet section bands and a sketched overview of the four steps. */
.section-muted { background:#f7f8fa!important; border-block:1px solid #e7e8ec!important; }
.wwd-container { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.wwd-overview .wwd-flow { padding-top:12px; }
.wwd-overview .step-art { height:125px; margin:8px auto 18px; max-width:230px; }
.step-art .learn-lens { animation:learn-inspect 6s ease-in-out infinite; }
@keyframes learn-inspect { 0%,100% { transform:translate(0,0); } 45%,65% { transform:translate(-7px,4px); } }
@media (max-width:767px) {
  .wwd-process-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:36px 16px!important; }
  .wwd-flow > svg { display:none; }
  .wwd-overview .step-art { height:100px; margin-bottom:12px; }
  .wwd-overview .wwd-node > div:last-child { font-size:20px!important; }
}
@media (prefers-reduced-motion:reduce) {
  .wwd-overview svg { animation:none!important; }
}