/* =============================================================================
   chenmaggie.com — combined stylesheet
   Merged in cascade order from the four sources this site used to load:
     1. normalize.css          — cross-browser element reset
     2. webflow.css            — Webflow framework base (.w-* classes, grid, nav)
     3. maggiechen.webflow.css — site-specific Webflow-exported styles
     4. site.css               — hand-written overrides / post-Webflow additions
   Order is preserved exactly, so the cascade is identical to the old 4-file load.
   All url() paths are relative to this /css/ directory (fonts, images).
   ============================================================================= */


/* =============================================================================
   [1/4] normalize.css
   ============================================================================= */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type="search"] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}


/* =============================================================================
   [2/4] webflow.css  — Webflow framework base
   ============================================================================= */
@font-face {
  font-family: "webflow-icons";
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}
[class^="w-icon-"],
[class*=" w-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "webflow-icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}






* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}


.w-inline-block {
  max-width: 100%;
  display: inline-block;
}
.w-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.w-button {
  -webkit-appearance: button;
}
html[data-w-dynpage] [data-w-cloak] {
  color: transparent !important;
}







h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin-bottom: 10px;
}
h1 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4 {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5 {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6 {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul,
ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-embed:before,
.w-embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-embed:after {
  clear: both;
}
.w-video {
  width: 100%;
  position: relative;
  padding: 0;
}
.w-video iframe,
.w-video object,
.w-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button,
[type="button"],
[type="reset"] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.w-form {
  margin: 0 0 15px;
}
.w-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.w-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.w-input{
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.w-input::placeholder{
  color: #999;
}
.w-input:focus{
  border-color: #3898EC;
  outline: 0;
}
.w-input[disabled],
.w-input[readonly],
fieldset[disabled] .w-input{
  cursor: not-allowed;
}
.w-input[disabled]:not(.w-input-disabled),
.w-input[readonly],
fieldset[disabled]:not(.w-input-disabled) .w-input{
  background-color: #eeeeee;
}
textarea.w-input{
  height: auto;
}




.w-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.w-container:before,
.w-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-container:after {
  clear: both;
}


















@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  }
@media screen and (max-width: 767px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  }
@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  }


.w-richtext:before,
.w-richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-richtext:after {
  clear: both;
}
.w-richtext[contenteditable="true"]:before,
.w-richtext[contenteditable="true"]:after {
  white-space: initial;
}
.w-richtext ol,
.w-richtext ul {
  overflow: hidden;
}
.w-nav {
  position: relative;
  background: #dddddd;
  z-index: 1000;
}
.w-nav:before,
.w-nav:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-nav:after {
  clear: both;
}
.w-nav-brand {
  position: relative;
  float: left;
  text-decoration: none;
  color: #333333;
}

@media screen and (max-width: 767px) {
  .w-nav-brand {
    padding-left: 10px;
  }}


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}







/* =============================================================================
   [3/4] maggiechen.webflow.css  — site-specific Webflow export
   ============================================================================= */
@font-face {
  font-family: Menlo;
  src: url("../fonts/Menlo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --frost: #f7f9fd;
  --frost-20: rgba(247, 249, 253, 0.2);
  --slate-700: #08172e;
  --slate-700-40: rgba(8, 23, 46, 0.4);
  --slate-700-50: rgba(8, 23, 46, 0.5);
  --slate-700-20: rgba(8, 23, 46, 0.2);
  --slate-700-10: rgba(8, 23, 46, 0.1);
  --focus-blue: #2962ff;
  --text-muted: #909090;
  --sunshine-60: rgba(255, 223, 66, 0.6);
  --white-80: rgba(255, 255, 255, 0.8);
  --space-2: 2rem;
  --space-1: 1rem;
  --space-1-5: 1.5rem;
  --slate-100: #aabad3;
  --cobalt-300: #2366de;
  --black: var(--text);
  --text: #131313e6;
  --cobalt-400: #2157af;
  --v4-pale\<deleted\|variable-c315d484\>: #fafafa;
  --blueprint: #074ee8;
  --grenwich: #0eb200;
  --electric: #7622ff;
  --elle: #dd31a3;
  --yellow: #ffed4f;
  --60: #13131399;
  --slate-50: #e8ecf3;
  --cobalt-50: #e4edfc;
  --smoke: #e9e9e9;
  --space-5: 5rem;
  --slate-400: #374e75;
  --slate-300: #7289af;
  --cobalt-100: #8fb4f0;
  --space-3: 3rem;
  --white: white;
  --space-10: 10rem;
  --sunshine: #ffdf42;
  --space-0-5: .5rem;
  --sunshine-a50: #ffdf4299;
  --space-0: 0px;
  --space-15: 15rem;

  /* Horizontal page gutter — the header, the pinned logo and the content
     containers all key off this so they share one left edge. Kept in sync
     with .container-wide's padding at each breakpoint. */
  --page-pad: 60px;
  /* Pinned logo: box size and how far it hangs left of the content edge. */
  --logo-size: 48px;
  --logo-overhang: 24px;
  --logo-top: 20px;
  /* How much the logo shrinks once the page is scrolled. */
  --logo-scale-out: .7;
  /* Extra left indent on the content containers, so the part of the logo that
     sits inside the gutter does not cover the content it pins next to. */
  --content-indent: 40px;
}

@media screen and (max-width: 991px) {
  :root {
    --page-pad: 48px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --page-pad: 24px;
    --logo-size: 32px;
    --logo-overhang: 16px;
    --logo-top: 14px;
    --content-indent: 24px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --logo-size: 24px;
    --logo-overhang: 12px;
    --logo-top: 12px;
    --content-indent: 20px;
  }
}



.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }}

body {
  background-color: var(--frost);
  color: var(--slate-700);
  font-family: DM Sans, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 28px;
}

h1 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  font-family: DM Sans, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 120%;
}

h2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  font-family: DM Sans, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 120%;
}

h3 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  font-family: DM Sans, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 150%;
}

h4 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}

h5 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 200%;
}

h6 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 200%;
}

p {
  margin-bottom: var(--space-1-5);
  color: var(--slate-700);
  line-height: 220%;
}


ul {
  padding-left: var(--space-2);
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 220%;
}

ol {
  color: var(--slate-700);
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
  line-height: 220%;
}

img {
  max-width: 100%;
  /* Flex items get an automatic min-width equal to their content size, and
     for replaced elements like <img> that's the intrinsic width — which
     overrides max-width:100% and lets images blow out a row-flex container
     (e.g. .w-layout-hflex) on narrow viewports instead of shrinking. */
  min-width: 0;
}

label {
  color: var(--text);
  margin-bottom: 5px;
  font-family: Work Sans, sans-serif;
  font-weight: 400;
  display: block;
}

blockquote {
  margin-bottom: var(--space-1);
  border-style: none none none solid;
  border-width: 8px;
  border-color: var(--cobalt-300);
  color: var(--cobalt-400);
  padding: 10px 20px;
  font-family: DM Mono, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 150%;
}

.nav-spacer {
  flex: 1;
  justify-content: center;
  align-self: center;
  align-items: center;
  height: auto;
  display: flex;
}

.brand {
  color: var(--slate-700);
  letter-spacing: -.5px;
  border-bottom-style: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 33px;
  display: flex;
}

.project-title {
  margin-top: 4px;
  margin-bottom: 4px;
  line-height: 26px;
  text-decoration: none;
}

.nav-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 0px;
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.footer {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px 60px 40px;
  display: flex;
}

.mono {
  font-family: DM Mono, sans-serif;
  font-weight: 300;
  line-height: 150%;
}

.section-80 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
}

.section-80.hero {
  justify-content: center;
  align-items: center;
  min-height: 55vh;
  display: flex;
}

.section-80.home-hero {
  min-height: 40vh;
  padding-bottom: 40px;
}

.hidden {
  display: none;
}

.section-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Extra breathing room at the foot of the home and about pages. */
#speaking,
#path ~ .section-40.case-study-cta {
  padding-bottom: 128px;
}

.section-40.home-hero {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 60px;
  display: flex;
}

.section-40.case-study-cta {
  padding-top: 0;
}

.section-40.case-study-summary {
  z-index: 4;
  padding-top: 40px;
}

.section-40.reduce-padding {
  padding-bottom: 0;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  width: 100%;
  max-width: 960px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.page-subtitle {
  color: var(--slate-400);
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 180%;
}

.page-subtitle.cobalt {
  color: var(--cobalt-300);
}

.page-subtitle.muted {
  color: var(--slate-400);
}

.page-title {
  color: var(--slate-700);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 100%;
}

body {
  margin-top: 96px;
  background-color: var(--frost);
}

.body-large {
  flex: 1;
  font-size: 17px;
  line-height: 220%;
}

.body-large.flex-shrink {
  flex: 0 auto;
}

.body {
  flex: 1;
  line-height: 220%;
}

.body.muted {
  color: var(--slate-300);
}

.caption {
  color: var(--slate-400);
  font-size: 14px;
  font-weight: 300;
  line-height: 140%;
}

.caption.no-margin {
  margin-bottom: 0;
}

.caption.muted {
  color: var(--slate-300);
}

.caption.centre-align {
  text-align: center;
}

.caption.cobalt.margin-top, .caption.margin-top {
  margin-top: var(--space-1);
}

.caption.margin-top:where(.w-variant-c75a42c5-00ef-149c-a30b-28c5190b80fd) {
  display: none;
}

.primary-button {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid var(--cobalt-300);
  height: 40px;
  color: var(--cobalt-300);
  background-color: transparent;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-family: DM Mono, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 100%;
  transition: background-color .3s ease-in-out;
  display: flex;
}

.primary-button.icon {
  padding-left: 12px;
  padding-right: 12px;
}

.secondary-button {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  height: 40px;
  color: var(--cobalt-300);
  background-color: transparent;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 100%;
  display: flex;
}

.secondary-button.icon {
  border-bottom-style: none;
  padding-left: 16px;
  padding-right: 16px;
}

.button-bar {
  grid-column-gap: var(--space-1);
  grid-row-gap: var(--space-1);
  flex-flow: wrap;
  display: flex;
}

.button-bar.mt-2 {
  margin-top: var(--space-2);
}

.container-wide {
  grid-column-gap: 48px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  display: grid;
}

.container-wide.footer {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-top: 1px solid var(--cobalt-50);
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 0;
  display: flex;
}

.hero {
  justify-content: center;
  align-items: center;
  display: flex;
}

.hero.home {
  z-index: 2;
  position: relative;
}

.hero-text {
  max-width: 640px;
  margin-top: 80px;
  margin-left: -92px;
}

.hero-text.home {
  max-width: none;
  margin-top: 0;
  margin-left: 0;
  margin-right: auto;
}

/* Match the case-study body-copy measure so paragraph text flows at the
   same width across pages instead of the old 640px hero cap. */
.hero-text.home .page-subtitle {
  max-width: 62ch;
}

/* Matches the page content container (1000px incl. padding) so the brand and
   nav line up with the body copy below them. */
.v5-header-wrap {
  flex: 1;
  justify-content: space-between;
  max-width: 1000px;
  padding: 24px var(--page-pad);
  /* Same indent as the content below, so the brand lines up with it and
     clears the pinned logo. */
  padding-left: calc(var(--page-pad) + var(--content-indent));
  display: flex;
}

.image-glass-frame {
  border: 1px solid var(--slate-50);
  border-radius: 8px;
  justify-content: center;
  align-items: flex-start;
  box-shadow: 4px 4px 8px #d9dfeccc;
}

.section-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* The header bar sits at the top of the page and scrolls away with it; only
   the logo stays pinned (see "Pinned logo" further down). Transparent, so the
   page background reads straight through it. */
.v5-header {
  z-index: 10;
  background: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.image-4 {
  color: var(--cobalt-300);
}

.title-kicker {
  color: var(--slate-300);
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.title-kicker.cobalt {
  color: var(--cobalt-300);
}

.ms-input {
  border: 1px solid var(--cobalt-300);
  background-color: var(--white);
  min-height: 40px;
  margin-bottom: 20px;
  padding: 6px 12px;
  font-family: DM Mono, sans-serif;
  font-weight: 300;
  transition: box-shadow .2s, border-color .2s;
  position: relative;
  box-shadow: 0 5px 10px -5px #0000001a;
}

.ms-input:hover {
  z-index: 2;
  box-shadow: none;
  border-color: var(--focus-blue);
}

.ms-input::placeholder {
  color: var(--text-muted);
}

.ms-input.button-right {
  border-right-style: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ms-button-flex {
  grid-column-gap: 8px;
  align-items: center;
  display: flex;
}

.ms-100 {
  width: 100%;
}

.modal-overlay {
  z-index: 99;
  background-color: var(--slate-700-50);
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.modal-overlay.open {
  display: flex;
  position: fixed;
}

.modal {
  background-color: var(--frost);
  width: 100%;
  max-width: 400px;
  margin: auto;
  position: relative;
  box-shadow: 0 2px 5px #0003;
}

.modal-content {
  margin-bottom: 0;
  padding-bottom: 16px;
  padding-left: 32px;
  padding-right: 32px;
}

.modal-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 16px 16px 8px 32px;
  display: flex;
}

.copy-email-wrap {
  margin-top: 16px;
  padding: 0;
  display: flex;
  position: relative;
}

.tertiary-button {
  height: 48px;
  color: var(--cobalt-300);
  background-color: transparent;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  font-family: DM Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  transition: background-color .3s ease-in-out;
  display: flex;
}

.tertiary-button:hover {
  color: var(--cobalt-300);
}

.tertiary-button.icon {
  border-bottom-style: none;
  padding-left: 12px;
  padding-right: 12px;
}

.contact-modal-header {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.modal-heading {
  margin-top: 1rem;
}

.work-ledger {
  align-items: stretch;
}

.ledger-heading-row {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-bottom: 2px solid var(--slate-100);
  color: var(--slate-300);
  padding-top: 8px;
  display: flex;
  font-family: DM Mono, serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.heading-kicker {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
}

.meta-heading {
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
  font-size: 13px;
  line-height: 200%;
}

.heading-kicker.muted {
  color: var(--slate-300);
}

.heading-kicker.cobalt {
  color: var(--cobalt-300);
}

.heading-kicker.mb-0-5 {
  margin-bottom: var(--space-0-5);
}

.ledger-row {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-bottom: 1px solid var(--slate-50);
  color: var(--slate-700);
  justify-content: center;
  align-items: stretch;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 24px;
  transition: padding .3s ease-in-out;
  display: flex;
}

.ledger-row.last {
  border-bottom-style: none;
}

.ledger-row.hidden {
  display: none;
}

.ledger-cell {
  flex: 1;
  align-self: center;
  align-items: stretch;
}

.ledger-cell.role {
  flex: none;
  width: 110px;
}

.ledger-cell.project-title {
  flex-flow: column;
  flex: 0 0 300px;
}

.ledger-cell.project-summary {
  flex: 1;
}

.work-ledger-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 130%;
}

/* Type comes from .heading-kicker.muted; this only handles cell alignment. */
.ledger-role {
  align-self: center;
  white-space: nowrap;
}

.ledger-role-label-mobile {
  display: none;
}

.speaking-list {
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100px;
}

.talks-row {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-bottom: 1px solid var(--slate-50);
  color: var(--slate-700);
  padding-top: 12px;
  padding-bottom: 12px;
  transition: padding .4s;
  display: flex;
}

.talks-row:hover {
  padding-right: 16px;
}

.talks-row.disabled {
  transition: none;
}

.talks-row.disabled:hover {
  color: var(--black);
  padding-right: 0;
}

.talks-row.disabled.hidden {
  display: none;
}

.talks-row.last {
  border-bottom-style: none;
}

.content-info {
  flex-flow: column;
  flex: 1;
  align-self: center;
}

.content-title {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 8px;
  font-size: 18px;
  font-weight: 600;
}

.cobalt {
  color: var(--cobalt-400);
}

/* Type comes from .meta-heading; this only handles color, alignment & spacing. */
.row-cta {
  color: var(--cobalt-300);
  text-align: right;
  flex: 0 auto;
  align-self: center;
  margin-left: 24px;
}

.row-cta.disabled {
  color: var(--slate-700);
}

.row-cta.desktop-hidden {
  display: none;
}

.with-kicker {
  margin-top: 0;
}

.results-list {
  color: var(--slate-400);
  align-items: stretch;
}

.result-arrow-row {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-bottom: 1px solid var(--slate-50);
  letter-spacing: -.4px;
  justify-content: flex-start;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 18px;
}

.result-arrow-row.last {
  border-bottom-style: none;
}

.case-study-meta-stack {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  color: var(--slate-400);
  padding-top: 24px;
  font-size: 14px;
}

.captioned-graphic {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.caption-wrap {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.quote-wrap {
  justify-content: flex-end;
  align-self: center;
  align-items: stretch;
  max-width: 600px;
}

.muted {
  color: var(--slate-300);
}

.footer-spacer {
  flex: 1;
}

.case-study-cta-card {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  border: 1px solid var(--slate-50);
  background-color: var(--white);
  border-radius: 16px;
  padding: 48px;
  box-shadow: 4px 4px 12px #d9dfec40;
}

.no-margin {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}

.body-small {
  flex: 1;
  font-size: 14px;
  line-height: 200%;
}

.body-small.muted {
  color: var(--slate-300);
}

.content-wrap {
  max-width: 640px;
}

.content-wrap-wide {
  width: 100%;
  max-width: 700px;
  margin-right: auto;
}

.container-wide-flex {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
}

.container-wide-flex.footer {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-top: 1px solid var(--cobalt-50);
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 0;
  display: flex;
}

.about-cta {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: stretch;
  padding-top: 80px;
}

.talk-title {
  padding-top: 100px;
  padding-bottom: 20px;
}

.talk-title.home-hero {
  justify-content: flex-start;
  align-items: flex-end;
  height: 60vh;
  padding-bottom: 60px;
  display: flex;
}

.talk-meta {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: row;
  font-size: 14px;
}

.graphic-wrap-for-two {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

/* graphic-wrap-stacked: for a text+image pair where the container is never
   wide enough to fit both at a comfortable size (text column alone maxes
   at 700px), so the image always goes inline below the text instead of
   squeezing into a shrinking side column. Capped to its natural width and
   centered rather than stretched edge-to-edge. */
.graphic-wrap-stacked {
  flex-flow: column;
  align-items: center;
}

.graphic-inline-natural {
  width: 100%;
  max-width: 700px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.flex-image {
  flex: 1;
}

.graphic-bkg-cobalt {
  background-color: var(--cobalt-50);
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: relative;
}

.graphic-frame-cobalt {
  background-color: var(--cobalt-50);
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 64px;
  display: flex;
}

.graphic-frame-cobalt img {
  width: auto;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px #1c274926);
}

.graphic-card {
  border: 1px solid var(--slate-50);
  border-radius: 16px;
  box-shadow: 4px 4px 8px #d9dfec40;
}

.gap-24px {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.align-center {
  justify-content: flex-start;
  align-items: center;
}

.cs-cover {
  width: 100%;
  max-width: 1280px;
  margin-top: 96px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
}

.cs-cover-words {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: 0 0 50%;
  align-items: stretch;
  padding: 40px;
}

/* The cover art is centred vertically in its gradient panel. Each variant
   below sets its own horizontal alignment and side padding, but none of them
   should reintroduce a top-only padding — that offset is what made the four
   covers sit at four different heights. */
.cs-cover-graphic {
  background-image: url("../images/Hero-Bkg.png");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 0 0 50%;
  justify-content: flex-start;
  align-items: center;
  padding-left: 48px;
  display: flex;
  overflow: hidden;
}

.cs-cover-graphic.actions {
  background-image: url("../images/Actions-Bkg.png");
  justify-content: center;
  padding-left: 0;
  padding-right: 51px;
}

.cs-cover-graphic.notifications {
  background-image: url("../images/Notifications-Bkg.png");
  justify-content: center;
  padding-left: 0;
  padding-right: 105px;
}

.cs-cover-graphic.testing {
  background-image: url("../images/orange-brush.png");
  justify-content: flex-start;
  padding-left: 40px;
  padding-right: 40px;
}

.results-number {
  width: 110px;
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
  flex: none;
}

.cs-meta-value {
  flex: 1;
  font-size: 14px;
  line-height: 200%;
}

.cs-meta-value.muted {
  color: var(--slate-300);
}

.cs-brow-tag {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  margin-bottom: 12px;
}

.home-hero {
  /* Margin (not padding) so it collapses with the body's top margin exactly
     like .cs-hero-intro does — keeps the H1/eyebrow at the same distance
     from the top of the page on every page. */
  margin-top: 184px;
  padding-bottom: 48px;
  position: relative;
}

.content-wrap-wide-across {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: row;
  width: 100%;
  margin-right: auto;
  display: flex;
}

.content-wrap-wide-grid {
  grid-column-gap: 32px;
  grid-row-gap: 0px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-right: auto;
  display: grid;
}

.notifications-prototype-frame {
  background-color: var(--cobalt-50);
  padding: 48px 48px 48px 100px;
  position: relative;
}

.notifications-prototype-feedback {
  position: absolute;
  bottom: 19%;
  left: 2%;
}

@media screen and (min-width: 1280px) {
  .footer {
    padding-left: 60px;
    padding-right: 60px;
  }

  .container-wide {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-left: 60px;
    padding-right: 60px;
    display: grid;
  }

  .ledger-cell.project-title {
    flex-basis: 300px;
  }

  .content-wrap-wide {
    max-width: 800px;
  }

  .container-wide-flex {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-left: 60px;
    padding-right: 60px;
  }

  .cs-cover-graphic.notifications {
    padding-right: 133px;
  }

  .content-wrap-wide-across, .content-wrap-wide-grid {
    max-width: 800px;
  }}

@media screen and (max-width: 991px) {

  .footer {
    padding-left: 48px;
    padding-right: 48px;
  }

  .section-80.hero {
    padding-top: 20px;
  }

  .section-40.case-study-cta {
    padding-top: 0;
  }

  .container-wide {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 48px;
    padding-right: 48px;
  }

  .ledger-cell.project-title {
    flex-basis: 1;
  }

  .case-study-meta-item {
    flex: 40%;
  }

  .case-study-meta-stack {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
  }

  .container-wide-flex {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 48px;
    padding-right: 48px;
  }

  .talk-meta {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
  }

  .cs-cover {
    flex-flow: column;
    padding-left: 48px;
    padding-right: 48px;
  }

  .cs-cover-graphic {
    flex-basis: 68vh;
    justify-content: center;
    align-items: flex-start;
    padding-top: 40px;
    padding-left: 0;
  }

  .cs-cover-graphic.actions {
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .cs-cover-graphic.notifications {
    padding-top: 0;
    padding-right: 0;
  }

  .cs-cover-graphic.testing {
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    padding-left: 230px;
    padding-right: 230px;
    display: flex;
  }

  .notifications-prototype-frame {
    padding: 32px 32px 32px 64px;
  }

  .notifications-prototype-feedback {
    bottom: 77%;
  }

  .testing-video {
    padding-bottom: 0;
  }}

@media screen and (max-width: 767px) {
  h4 {
    font-size: 16px;
    line-height: 22px;
  }

  .footer {
    flex-flow: column;
    padding-left: 24px;
    padding-right: 24px;
  }

  .section-80 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .page-subtitle {
    font-size: 14px;
  }

  .page-title {
    font-size: 40px;
  }

  .secondary-button.xs-hidden {
    display: none;
  }

  .cs-cover {
    padding-left: 24px;
    padding-right: 24px;
  }

  .container-wide {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero {
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .hero.home {
    flex-flow: row;
  }

  .hero-text {
    margin-top: 120px;
    margin-left: -92px;
  }

  .v5-header-wrap {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .ledger-heading-row {
    display: none;
  }

  .ledger-row {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .ledger-cell {
    align-self: flex-start;
  }

  .ledger-cell.role {
    width: 100%;
  }

  .ledger-cell.project-title {
    flex-basis: auto;
    justify-content: flex-start;
    align-self: flex-start;
    align-items: stretch;
  }

  .ledger-role {
    align-self: flex-start;
  }

  .ledger-role-label-mobile {
    margin-right: 2px;
    display: block;
  }

  .talks-row {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
  }

  .content-info {
    align-self: flex-start;
  }

  .row-cta {
    align-self: flex-start;
    margin-left: 0;
  }

  .row-cta.mobile-hidden {
    display: none;
  }

  .case-study-meta-stack {
    flex-flow: wrap;
  }

  .footer-spacer.xs-hidden {
    display: none;
  }

  .case-study-cta-card {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 24px;
  }

  .talk-title-wrapper {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column-reverse;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .container-wide-flex {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-columns: 1fr;
    padding-left: 24px;
    padding-right: 24px;
  }

  .about-cta {
    flex-flow: row;
    padding-top: 0;
  }

  .talk-meta {
    flex-flow: wrap;
  }

  .cs-cover-graphic {
    flex-basis: 400px;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 24px;
    padding-left: 60px;
  }

  .cs-cover-graphic.testing {
    padding-left: 80px;
    padding-right: 80px;
  }

  .content-wrap-wide-grid {
    grid-template-columns: 1fr;
  }

  /* .content-wrap-wide-across is the flex counterpart to .content-wrap-wide-grid
     above — it needs the same stacking treatment on narrow viewports, but was
     missing it, leaving two text columns squeezed side by side on mobile. */
  .content-wrap-wide-across {
    flex-flow: column;
  }

  /* .graphic-wrap-for-two pairs text+image, image+image, or image+quote
     side by side — on mobile it stayed row and squashed both children,
     so stack it into a single column like content-wrap-wide-across. */
  .graphic-wrap-for-two {
    flex-flow: column;
  }

  .graphic-frame-cobalt {
    padding: 32px 24px;
  }

  .notifications-prototype-frame {
    padding: 0;
  }

  .notifications-prototype-feedback {
    bottom: 82%;
  }}

@media screen and (max-width: 479px) {
  body {
    font-family: Hanken Grotesk, sans-serif;
  }

  .brand {
    font-size: 20px;
    line-height: 30px;
  }

  .page-title {
    font-size: 36px;
  }

  .page-title.home {
    margin-bottom: 32px;
    font-weight: 800;
  }

  .primary-button {
    margin-right: 16px;
  }

  .hero {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .hero.home {
    flex-flow: wrap;
  }

  .hero-text {
    margin-top: 24px;
    margin-left: 0;
  }

  .hero-text.home {
    width: 100%;
    margin-left: 0;
  }

  .heading-kicker.muted {
    display: none;
  }

  .talks-row {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .content-info, .row-cta {
    align-self: flex-start;
  }

  .case-study-meta-item {
    flex-basis: auto;
  }

  .case-study-cta-card {
    flex-flow: column;
  }

  .cs-cover-graphic {
    padding-left: 24px;
  }

  .cs-cover-graphic.actions {
    padding-left: 31px;
  }

  .cs-cover-graphic.testing {
    padding-left: 0;
    padding-right: 0;
  }

  .cs-meta-value {
    margin-bottom: .5rem;
  }

  .notifications-prototype-frame {
    background-color: transparent;
  }

  .notifications-prototype-feedback {
    bottom: -24%;
  }

  .video {
    margin-bottom: 38px;
  }}

#w-node-_11bb124e-5429-daef-0522-199d812ad134-a04f67ac, #w-node-c570c07b-f1a9-067d-aa38-1ddd0b7452e9-af7d8eb2, #w-node-f4d68c06-738c-6ea5-6dc9-49bbc6f2bb54-af7d8eb2 {
  grid-area: 1 / 1 / 2 / 7;
}

#w-node-_36c9594b-bab0-74fb-2b32-186a75f45262-af7d8eb2 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-_988b4811-8088-d716-03a5-587fe917dadb-af7d8eb2 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_5f76aa7e-8af2-6984-6efb-8f6558e5845c-af7d8eb2 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-_2fcd0e60-8448-c646-e0ff-ea5b6b3ce4e1-af7d8eb2 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-_8b4f6fdd-de7f-2758-eeb1-c2b86fa85b09-af7d8eb2 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_85e5db27-c3f9-ef7a-c371-a5c5bdfbe921-af7d8eb2 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-fa35bb1a-2a78-b7b6-9ccf-df0fda8aff28-af7d8eb2 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-_7fc9b906-efbb-6008-2ea8-1d772588be15-af7d8eb2 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_075dfca7-7bfd-9a9c-d2d7-abbdb714cca0-af7d8eb2 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-aaab48b4-2866-c786-d74f-283b276ea617-af7d8eb2 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_07a131a1-a496-eac2-d666-46a4905efc69-af7d8eb2 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_5c7c67cb-688c-2e8e-7c62-de494d786432-af7d8eb2 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_7a9ff8ad-800c-e533-7e39-2b121a625ae5-af7d8eb2 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_2ae2aac8-0bd2-8712-a231-afd5b5bab328-af7d8eb2 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-f867e7c7-63b0-ecfe-f6c4-ecf887ec37d4-af7d8eb2 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_2a7d1eca-7013-1307-59af-121230db819c-af7d8eb2 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-f867e7c7-63b0-ecfe-f6c4-ecf887ec37eb-af7d8eb2 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-af7d8eb2, #w-node-_05e61a4b-78aa-61a2-8f2a-e062f159a476-af7d8eb2, #w-node-_1576c565-acff-60ae-388f-825e09569682-af7d8eb2 {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_1576c565-acff-60ae-388f-825e0956968e-af7d8eb2 {
  grid-area: 2 / 1 / 3 / 7;
}

#w-node-ddb94f2f-5cf2-441d-3278-f9b09a9c3ac0-af7d8eb2 {
  grid-area: 1 / 1 / 2 / 7;
}

#w-node-_903317eb-0781-0d2a-9191-bb14e945976a-af7d8eb2 {
  grid-area: span 1 / span 6 / span 1 / span 6;
  align-self: center;
}

#w-node-b5d6bdc1-0551-8457-9bb5-d3a08d14c6ff-357ba076 {
  grid-area: 1 / 1 / 2 / 7;
}

#w-node-e5ac79ca-10bb-56e6-fe78-956d697bed5c-357ba076, #w-node-_758b8742-63bd-a9dd-4d05-eaff253460ad-357ba076, #w-node-_533197ce-62c9-5c4e-7b32-0cd4c37a84a1-357ba076 {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_6deeda50-f47e-e9bb-b8c8-6653e7a3f117-357ba076, #w-node-b5d6bdc1-0551-8457-9bb5-d3a08d14c6ff-35839c03 {
  grid-area: 1 / 1 / 2 / 7;
}

#w-node-e5ac79ca-10bb-56e6-fe78-956d697bed5c-35839c03 {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_73c0ba23-795b-c523-1619-1ffc0dfc572d-35839c03 {
  grid-area: 1 / 1 / 2 / 4;
}

#w-node-_73c0ba23-795b-c523-1619-1ffc0dfc572f-35839c03 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-c9e3b810-13ee-8604-4a5b-6709cdb5c8b7-35839c03 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-c9e3b810-13ee-8604-4a5b-6709cdb5c8b9-35839c03 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_5ab3b116-4011-031a-f609-5d2c505b8f62-35839c03 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_5ab3b116-4011-031a-f609-5d2c505b8f64-35839c03 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_29d01b44-98f8-1990-3c6b-7874d6c27520-35839c03 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_29d01b44-98f8-1990-3c6b-7874d6c27522-35839c03 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_67065473-afeb-d73b-a095-955e3f328bd5-35839c03 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_67065473-afeb-d73b-a095-955e3f328bd7-35839c03 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_758b8742-63bd-a9dd-4d05-eaff253460ad-35839c03 {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_4d391403-abe1-d01b-9e30-df7dbfbd82d8-35839c03 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-f73a8fb8-e7b3-f935-5967-8380f6382a6c-35839c03 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6deeda50-f47e-e9bb-b8c8-6653e7a3f117-35839c03, #w-node-c570c07b-f1a9-067d-aa38-1ddd0b7452e9-a3329212 {
  grid-area: 1 / 1 / 2 / 7;
}

#w-node-f4d68c06-738c-6ea5-6dc9-49bbc6f2bb54-a3329212, #w-node-_5c5b1d2f-f4bf-b7e6-a440-38ef9ef68701-a3329212 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-a3329212 {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_3ee4f227-242e-9ef2-7ede-4ad45f5891b9-a3329212 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: center;
}

#w-node-_05e61a4b-78aa-61a2-8f2a-e062f159a476-a3329212 {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-bab2244e-3bb6-93fa-e4f9-d9ea9067bed1-a3329212 {
  grid-area: 2 / 1 / 3 / 7;
}

#w-node-ddb94f2f-5cf2-441d-3278-f9b09a9c3ac0-a3329212 {
  grid-area: 1 / 1 / 2 / 7;
}

#w-node-_903317eb-0781-0d2a-9191-bb14e945976a-a3329212 {
  grid-area: span 1 / span 6 / span 1 / span 6;
  align-self: center;
}

#w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-6b036edd {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_3f9ba605-64ce-eabb-5622-af2e9397b7a3-6b036edd {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_52e723c5-2037-285f-30fe-a48ed0033b95-6b036edd {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-e55b6864-0342-f084-f14f-decb411af5fd-411af5fd {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-_24d1ba68-d383-31bf-c5ed-0fe8ff34bbb4-ff34bb8b, #w-node-_24d1ba68-d383-31bf-c5ed-0fe8ff34bbb8-ff34bb8b, #w-node-_24d1ba68-d383-31bf-c5ed-0fe8ff34bbbc-ff34bb8b, #w-node-_24d1ba68-d383-31bf-c5ed-0fe8ff34bbc2-ff34bb8b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-5f46dbe6 {
  grid-area: 1 / 1 / 2 / 5;
}

#w-node-_3f9ba605-64ce-eabb-5622-af2e9397b7a3-5f46dbe6 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_52e723c5-2037-285f-30fe-a48ed0033b95-5f46dbe6 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-5f46dbe6 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-c123e366-48f4-2d42-3259-c7ae915a1a76-5f46dbe6 {
  grid-area: span 1 / span 6 / span 1 / span 6;
  justify-self: center;
}

#w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-5f46dbe6 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_5e7454b6-6849-8ed6-c3de-a66f16fdc8f4-5f46dbe6 {
  grid-area: span 1 / span 6 / span 1 / span 6;
  justify-self: center;
}

#w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-5f46dbe6 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_691e9cd3-9d75-0431-9bb8-9dd6704333df-704333b0, #w-node-_691e9cd3-9d75-0431-9bb8-9dd6704333e3-704333b0, #w-node-_691e9cd3-9d75-0431-9bb8-9dd6704333e9-704333b0, #w-node-_691e9cd3-9d75-0431-9bb8-9dd6704333ed-704333b0 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-3eb906cb {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-c123e366-48f4-2d42-3259-c7ae915a1a76-3eb906cb {
  grid-area: span 1 / span 6 / span 1 / span 6;
  justify-self: center;
}

#w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-3eb906cb {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_5e7454b6-6849-8ed6-c3de-a66f16fdc8f4-3eb906cb {
  grid-area: span 1 / span 6 / span 1 / span 6;
  justify-self: center;
}

#w-node-_9a09074b-9f13-d07a-94de-bed78fb15fc6-8fb15faa, #w-node-_9a09074b-9f13-d07a-94de-bed78fb15fca-8fb15faa, #w-node-_9a09074b-9f13-d07a-94de-bed78fb15fce-8fb15faa, #w-node-_9a09074b-9f13-d07a-94de-bed78fb15fd2-8fb15faa {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-60abf8a7, #w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-60abf8a7, #w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-60abf8a7 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_0f0e87fb-a345-926f-bbe4-20b8d3ecb1e7-91bfa8fd {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-91bfa8fd {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-a784d271, #w-node-_10c9c716-bf94-0f79-86e1-c79766df0c01-a784d271, #w-node-_6c8f129a-657d-b8af-69ca-e075a394d09b-a784d271, #w-node-_02cc8668-117b-07c4-74fb-63744609cd54-a784d271, #w-node-_94b8c573-be75-2e3b-22a3-c60b044081db-a784d271, #w-node-_9d4fd7a3-bed6-f199-85a4-01ffa816008a-a784d271, #w-node-_210751e8-9213-4b7c-2e4e-f44773b7a291-a784d271, #w-node-_5dd630cc-40fd-2b40-7a33-5491bccaaec0-a784d271, #w-node-d930a251-3df4-91bd-0cab-42a1265ad404-a784d271, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-a784d271, #w-node-f814bf1f-e4f0-4b72-6af6-a3b1e41302cf-a784d271, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-ac30c0d8, #w-node-_10c9c716-bf94-0f79-86e1-c79766df0c01-ac30c0d8, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-ac30c0d8, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-a498bd30, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-a498bd30 {
  grid-area: 1 / 1 / 2 / 5;
}

@media screen and (min-width: 1280px) {
  #w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-af7d8eb2, #w-node-_05e61a4b-78aa-61a2-8f2a-e062f159a476-af7d8eb2, #w-node-_1576c565-acff-60ae-388f-825e09569682-af7d8eb2, #w-node-e5ac79ca-10bb-56e6-fe78-956d697bed5c-357ba076, #w-node-_758b8742-63bd-a9dd-4d05-eaff253460ad-357ba076, #w-node-_533197ce-62c9-5c4e-7b32-0cd4c37a84a1-357ba076, #w-node-e5ac79ca-10bb-56e6-fe78-956d697bed5c-35839c03, #w-node-_758b8742-63bd-a9dd-4d05-eaff253460ad-35839c03, #w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-a3329212, #w-node-_05e61a4b-78aa-61a2-8f2a-e062f159a476-a3329212, #w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-6b036edd, #w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-5f46dbe6, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-a784d271, #w-node-_10c9c716-bf94-0f79-86e1-c79766df0c01-a784d271, #w-node-_6c8f129a-657d-b8af-69ca-e075a394d09b-a784d271, #w-node-_02cc8668-117b-07c4-74fb-63744609cd54-a784d271, #w-node-_94b8c573-be75-2e3b-22a3-c60b044081db-a784d271, #w-node-_9d4fd7a3-bed6-f199-85a4-01ffa816008a-a784d271, #w-node-_210751e8-9213-4b7c-2e4e-f44773b7a291-a784d271, #w-node-_5dd630cc-40fd-2b40-7a33-5491bccaaec0-a784d271, #w-node-d930a251-3df4-91bd-0cab-42a1265ad404-a784d271, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-a784d271, #w-node-f814bf1f-e4f0-4b72-6af6-a3b1e41302cf-a784d271, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-ac30c0d8, #w-node-_10c9c716-bf94-0f79-86e1-c79766df0c01-ac30c0d8, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-ac30c0d8, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-a498bd30, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-a498bd30 {
    grid-area: 1 / 1 / 2 / 5;
  }}

@media screen and (max-width: 991px) {
  #w-node-f4d68c06-738c-6ea5-6dc9-49bbc6f2bb54-af7d8eb2 {
    grid-area: 1 / 1 / 2 / 3;
  }

  #w-node-_988b4811-8088-d716-03a5-587fe917dadb-af7d8eb2 {
    grid-column: span 3 / span 3;
  }

  #w-node-_5f76aa7e-8af2-6984-6efb-8f6558e5845c-af7d8eb2 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-_2fcd0e60-8448-c646-e0ff-ea5b6b3ce4e1-af7d8eb2, #w-node-_8b4f6fdd-de7f-2758-eeb1-c2b86fa85b09-af7d8eb2 {
    grid-column: span 3 / span 3;
  }

  #w-node-_85e5db27-c3f9-ef7a-c371-a5c5bdfbe921-af7d8eb2 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-fa35bb1a-2a78-b7b6-9ccf-df0fda8aff28-af7d8eb2, #w-node-_7fc9b906-efbb-6008-2ea8-1d772588be15-af7d8eb2 {
    grid-column: span 3 / span 3;
  }

  #w-node-_075dfca7-7bfd-9a9c-d2d7-abbdb714cca0-af7d8eb2 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-_07a131a1-a496-eac2-d666-46a4905efc69-af7d8eb2, #w-node-_7a9ff8ad-800c-e533-7e39-2b121a625ae5-af7d8eb2 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-f867e7c7-63b0-ecfe-f6c4-ecf887ec37d4-af7d8eb2, #w-node-f867e7c7-63b0-ecfe-f6c4-ecf887ec37eb-af7d8eb2 {
    grid-area: span 1 / span 6 / span 1 / span 6;
  }

  #w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-af7d8eb2, #w-node-_05e61a4b-78aa-61a2-8f2a-e062f159a476-af7d8eb2, #w-node-_1576c565-acff-60ae-388f-825e09569682-af7d8eb2, #w-node-_1576c565-acff-60ae-388f-825e0956968e-af7d8eb2 {
    grid-column-end: 4;
  }

  #w-node-ddb94f2f-5cf2-441d-3278-f9b09a9c3ac0-af7d8eb2 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-_903317eb-0781-0d2a-9191-bb14e945976a-af7d8eb2 {
    grid-column: span 3 / span 3;
  }

  #w-node-e5ac79ca-10bb-56e6-fe78-956d697bed5c-357ba076, #w-node-_758b8742-63bd-a9dd-4d05-eaff253460ad-357ba076, #w-node-_533197ce-62c9-5c4e-7b32-0cd4c37a84a1-357ba076 {
    grid-column-end: 4;
  }

  #w-node-_6deeda50-f47e-e9bb-b8c8-6653e7a3f117-357ba076 {
    grid-area: 1 / 1 / 2 / 4;
  }

  #w-node-e5ac79ca-10bb-56e6-fe78-956d697bed5c-35839c03 {
    grid-column-end: 4;
  }

  #w-node-_73c0ba23-795b-c523-1619-1ffc0dfc572f-35839c03, #w-node-c9e3b810-13ee-8604-4a5b-6709cdb5c8b9-35839c03 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_5ab3b116-4011-031a-f609-5d2c505b8f62-35839c03 {
    grid-column: span 3 / span 3;
  }

  #w-node-_5ab3b116-4011-031a-f609-5d2c505b8f64-35839c03 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_29d01b44-98f8-1990-3c6b-7874d6c27520-35839c03 {
    grid-column: span 3 / span 3;
  }

  #w-node-_29d01b44-98f8-1990-3c6b-7874d6c27522-35839c03 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_67065473-afeb-d73b-a095-955e3f328bd5-35839c03 {
    grid-column: span 3 / span 3;
  }

  #w-node-_67065473-afeb-d73b-a095-955e3f328bd7-35839c03 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_758b8742-63bd-a9dd-4d05-eaff253460ad-35839c03 {
    grid-column-end: 4;
  }

  #w-node-_4d391403-abe1-d01b-9e30-df7dbfbd82d8-35839c03 {
    grid-area: span 1 / span 6 / span 1 / span 6;
  }

  #w-node-_6deeda50-f47e-e9bb-b8c8-6653e7a3f117-35839c03 {
    grid-area: 1 / 1 / 2 / 4;
  }

  #w-node-f4d68c06-738c-6ea5-6dc9-49bbc6f2bb54-a3329212, #w-node-_5c5b1d2f-f4bf-b7e6-a440-38ef9ef68701-a3329212 {
    grid-column: span 3 / span 3;
  }

  #w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-a3329212 {
    grid-area: 1 / 1 / 2 / 3;
  }

  #w-node-_3ee4f227-242e-9ef2-7ede-4ad45f5891b9-a3329212 {
    grid-column: span 1 / span 1;
    justify-self: center;
  }

  #w-node-_05e61a4b-78aa-61a2-8f2a-e062f159a476-a3329212, #w-node-bab2244e-3bb6-93fa-e4f9-d9ea9067bed1-a3329212 {
    grid-column-end: 4;
  }

  #w-node-ddb94f2f-5cf2-441d-3278-f9b09a9c3ac0-a3329212 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-_903317eb-0781-0d2a-9191-bb14e945976a-a3329212 {
    grid-column: span 3 / span 3;
  }

  #w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-6b036edd {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-_3f9ba605-64ce-eabb-5622-af2e9397b7a3-6b036edd, #w-node-_52e723c5-2037-285f-30fe-a48ed0033b95-6b036edd, #w-node-e55b6864-0342-f084-f14f-decb411af5fd-411af5fd {
    grid-column: span 3 / span 3;
  }

  #w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-5f46dbe6 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-_3f9ba605-64ce-eabb-5622-af2e9397b7a3-5f46dbe6, #w-node-_52e723c5-2037-285f-30fe-a48ed0033b95-5f46dbe6, #w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-5f46dbe6, #w-node-c123e366-48f4-2d42-3259-c7ae915a1a76-5f46dbe6, #w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-5f46dbe6, #w-node-_5e7454b6-6849-8ed6-c3de-a66f16fdc8f4-5f46dbe6, #w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-5f46dbe6, #w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-3eb906cb, #w-node-c123e366-48f4-2d42-3259-c7ae915a1a76-3eb906cb, #w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-3eb906cb, #w-node-_5e7454b6-6849-8ed6-c3de-a66f16fdc8f4-3eb906cb, #w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-60abf8a7, #w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-60abf8a7, #w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-60abf8a7, #w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-91bfa8fd {
    grid-column: span 3 / span 3;
  }

  #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-a784d271, #w-node-_10c9c716-bf94-0f79-86e1-c79766df0c01-a784d271, #w-node-_6c8f129a-657d-b8af-69ca-e075a394d09b-a784d271, #w-node-_02cc8668-117b-07c4-74fb-63744609cd54-a784d271, #w-node-_94b8c573-be75-2e3b-22a3-c60b044081db-a784d271, #w-node-_9d4fd7a3-bed6-f199-85a4-01ffa816008a-a784d271, #w-node-_210751e8-9213-4b7c-2e4e-f44773b7a291-a784d271, #w-node-_5dd630cc-40fd-2b40-7a33-5491bccaaec0-a784d271, #w-node-d930a251-3df4-91bd-0cab-42a1265ad404-a784d271, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-a784d271, #w-node-f814bf1f-e4f0-4b72-6af6-a3b1e41302cf-a784d271, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-ac30c0d8, #w-node-_10c9c716-bf94-0f79-86e1-c79766df0c01-ac30c0d8, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-ac30c0d8, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-a498bd30, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-a498bd30 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }}

@media screen and (max-width: 767px) {
  #w-node-_11bb124e-5429-daef-0522-199d812ad134-a04f67ac, #w-node-c570c07b-f1a9-067d-aa38-1ddd0b7452e9-af7d8eb2 {
    grid-column-end: 4;
  }

  #w-node-f4d68c06-738c-6ea5-6dc9-49bbc6f2bb54-af7d8eb2 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_36c9594b-bab0-74fb-2b32-186a75f45262-af7d8eb2, #w-node-_2fcd0e60-8448-c646-e0ff-ea5b6b3ce4e1-af7d8eb2, #w-node-fa35bb1a-2a78-b7b6-9ccf-df0fda8aff28-af7d8eb2, #w-node-aaab48b4-2866-c786-d74f-283b276ea617-af7d8eb2, #w-node-_5c7c67cb-688c-2e8e-7c62-de494d786432-af7d8eb2, #w-node-_2ae2aac8-0bd2-8712-a231-afd5b5bab328-af7d8eb2, #w-node-_2a7d1eca-7013-1307-59af-121230db819c-af7d8eb2 {
    grid-column: span 1 / span 1;
  }

  #w-node-_1576c565-acff-60ae-388f-825e0956968e-af7d8eb2, #w-node-b5d6bdc1-0551-8457-9bb5-d3a08d14c6ff-357ba076, #w-node-b5d6bdc1-0551-8457-9bb5-d3a08d14c6ff-35839c03 {
    grid-column-end: 4;
  }

  #w-node-_4d391403-abe1-d01b-9e30-df7dbfbd82d8-35839c03 {
    grid-column: span 3 / span 3;
  }

  #w-node-c570c07b-f1a9-067d-aa38-1ddd0b7452e9-a3329212 {
    grid-column-end: 4;
  }

  #w-node-f4d68c06-738c-6ea5-6dc9-49bbc6f2bb54-a3329212, #w-node-_5c5b1d2f-f4bf-b7e6-a440-38ef9ef68701-a3329212 {
    grid-column: span 1 / span 1;
  }

  #w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-a3329212 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_3ee4f227-242e-9ef2-7ede-4ad45f5891b9-a3329212 {
    justify-self: start;
  }

  #w-node-bab2244e-3bb6-93fa-e4f9-d9ea9067bed1-a3329212 {
    grid-column-end: 4;
  }

  #w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-6b036edd {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-_3f9ba605-64ce-eabb-5622-af2e9397b7a3-6b036edd, #w-node-_52e723c5-2037-285f-30fe-a48ed0033b95-6b036edd {
    grid-column: span 3 / span 3;
  }

  #w-node-e55b6864-0342-f084-f14f-decb411af5fd-411af5fd, #w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-3eb906cb, #w-node-c123e366-48f4-2d42-3259-c7ae915a1a76-3eb906cb, #w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-3eb906cb, #w-node-_5e7454b6-6849-8ed6-c3de-a66f16fdc8f4-3eb906cb, #w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-60abf8a7, #w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-60abf8a7, #w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-60abf8a7 {
    grid-column: span 1 / span 1;
  }

  #w-node-_0f0e87fb-a345-926f-bbe4-20b8d3ecb1e7-91bfa8fd {
    grid-column: span 3 / span 3;
  }}

@media screen and (max-width: 479px) {
  #w-node-_11bb124e-5429-daef-0522-199d812ad134-a04f67ac, #w-node-c570c07b-f1a9-067d-aa38-1ddd0b7452e9-af7d8eb2 {
    grid-column-end: 3;
  }

  #w-node-aaab48b4-2866-c786-d74f-283b276ea617-af7d8eb2, #w-node-_5c7c67cb-688c-2e8e-7c62-de494d786432-af7d8eb2 {
    grid-column: span 1 / span 1;
  }

  #w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-af7d8eb2, #w-node-_05e61a4b-78aa-61a2-8f2a-e062f159a476-af7d8eb2 {
    grid-column-end: 3;
  }

  #w-node-_1576c565-acff-60ae-388f-825e09569682-af7d8eb2, #w-node-_1576c565-acff-60ae-388f-825e0956968e-af7d8eb2 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-b5d6bdc1-0551-8457-9bb5-d3a08d14c6ff-357ba076, #w-node-e5ac79ca-10bb-56e6-fe78-956d697bed5c-357ba076, #w-node-_758b8742-63bd-a9dd-4d05-eaff253460ad-357ba076, #w-node-_533197ce-62c9-5c4e-7b32-0cd4c37a84a1-357ba076, #w-node-b5d6bdc1-0551-8457-9bb5-d3a08d14c6ff-35839c03, #w-node-e5ac79ca-10bb-56e6-fe78-956d697bed5c-35839c03 {
    grid-column-end: 3;
  }

  #w-node-_758b8742-63bd-a9dd-4d05-eaff253460ad-35839c03 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-c570c07b-f1a9-067d-aa38-1ddd0b7452e9-a3329212 {
    grid-column-end: 3;
  }

  #w-node-f4d68c06-738c-6ea5-6dc9-49bbc6f2bb54-a3329212 {
    grid-column: span 1 / span 1;
  }

  #w-node-_8eae7dbc-50aa-8b93-2b35-9abeae5dd622-a3329212 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_3ee4f227-242e-9ef2-7ede-4ad45f5891b9-a3329212 {
    grid-column: span 1 / span 1;
  }

  #w-node-_05e61a4b-78aa-61a2-8f2a-e062f159a476-a3329212, #w-node-bab2244e-3bb6-93fa-e4f9-d9ea9067bed1-a3329212 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-6b036edd, #w-node-_3f9ba605-64ce-eabb-5622-af2e9397b7a3-6b036edd, #w-node-_52e723c5-2037-285f-30fe-a48ed0033b95-6b036edd, #w-node-e55b6864-0342-f084-f14f-decb411af5fd-411af5fd, #w-node-e415a1c4-0229-8e23-27bd-9e76e03c1af9-5f46dbe6, #w-node-_3f9ba605-64ce-eabb-5622-af2e9397b7a3-5f46dbe6, #w-node-_52e723c5-2037-285f-30fe-a48ed0033b95-5f46dbe6, #w-node-_0fb88e7a-d890-1d11-99e7-e191390adc49-5f46dbe6, #w-node-c123e366-48f4-2d42-3259-c7ae915a1a76-5f46dbe6, #w-node-_5cbcc9aa-eb2b-04f2-5a7c-5bb54dd180e3-5f46dbe6, #w-node-_5e7454b6-6849-8ed6-c3de-a66f16fdc8f4-5f46dbe6, #w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-5f46dbe6, #w-node-_0f0e87fb-a345-926f-bbe4-20b8d3ecb1e7-91bfa8fd, #w-node-f638524e-8812-cb4d-a5b4-c74e8fc0e094-91bfa8fd, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-a784d271, #w-node-_10c9c716-bf94-0f79-86e1-c79766df0c01-a784d271, #w-node-_6c8f129a-657d-b8af-69ca-e075a394d09b-a784d271, #w-node-_02cc8668-117b-07c4-74fb-63744609cd54-a784d271, #w-node-_94b8c573-be75-2e3b-22a3-c60b044081db-a784d271, #w-node-_9d4fd7a3-bed6-f199-85a4-01ffa816008a-a784d271, #w-node-_210751e8-9213-4b7c-2e4e-f44773b7a291-a784d271, #w-node-_5dd630cc-40fd-2b40-7a33-5491bccaaec0-a784d271, #w-node-d930a251-3df4-91bd-0cab-42a1265ad404-a784d271, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-a784d271, #w-node-f814bf1f-e4f0-4b72-6af6-a3b1e41302cf-a784d271, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-ac30c0d8, #w-node-_10c9c716-bf94-0f79-86e1-c79766df0c01-ac30c0d8, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-ac30c0d8, #w-node-a4d2b8b2-acff-c386-7870-9aabb2fdc1e7-a498bd30, #w-node-e4cc5632-63ba-45cc-2a00-1f24cdd69f00-a498bd30 {
    grid-column: span 1 / span 1;
  }}

@font-face {
  font-family: "Menlo";
  src: url("../fonts/Menlo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   [4/4] site.css  — hand-written overrides
   ============================================================================= */
/* Hand-written replacements for the Webflow interaction engine.
   Each block notes the Webflow interaction it supersedes so the two can be
   compared while js/webflow.js is still loaded. */

/* Highlight links effect */
a { /* Resets & positions link for the highlight-underline pseudo-elements */
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: var(--cobalt-300);
  background-color: transparent;
  border-bottom: none;
}
a:after { /* Adds base underline to in-body links */
  position: absolute;
  top:0;
  left: 0;
  content: "";
  height: 100%;
  width: 100%;
  z-index: -2; /* Ensures that :before border appears on top */
  border-bottom: 1px solid var(--cobalt-50);
}
a.brand:after, a.primary-button:after {
  border-bottom: none;
}
a:before { /* Styling highlight effect */
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 0;
  z-index: -1;
  background-color: var(--cobalt-50);
  border-bottom: 1px solid var(--cobalt-300);
  transition: width ease-in-out 300ms;
}
a:hover:before { /* Applies highlight effect on hover */
  width: 100%;
}
a.primary-button:before { /* Apply highlight effect to buttons */
  background-color: var(--cobalt-50);
}
/* Remove highlight effect from non-text clickable link blocks */
a.brand:before, a.talks-row:before, a.ledger-row:before, a.secondary-button:before {
  background-color: transparent;
}
/* Logo link: no underline animation */
a.header-logo-link:before, a.header-logo-link:after {
  display: none;
}
/* Project brand text: underline-only animation on hover */
a.project-brand:before {
  background-color: transparent;
  border-bottom: 1px solid var(--cobalt-300);
}
a.project-brand:after {
  display: none;
}
/* Slow transition for ledger & talks rows*/
a.ledger-row:before, a.talks-row:before {
  transition: width ease-in-out 800ms;
}

.highlight:before {
  background-color: var(--sunshine-60);
  border-radius: 6px;
}
.w-container:before, .w-container:after {
  z-index: -1; /* Prevents this grid pseudo-element from interfering with rest of layout */
}

/* Ledger row hover — nudges just the arrow via transform so the fixed-width
   role/project-title columns don't reflow the impact text. A padding change
   on the row itself (mirroring talks-row) grows the flex content box a few
   px and shifts where that text wraps, which read as a layout bug. */
.ledger-row .row-cta {
  transition: transform .3s ease-in-out;
}

.ledger-row:hover .row-cta,
.ledger-row:focus-visible .row-cta {
  transform: translateX(-8px);
}

/* These rows already have their own hover feedback (arrow nudge / padding
   nudge); don't also let the global a:hover cobalt tint bleed into their
   text. */
.ledger-row:hover,
.talks-row:hover {
  color: var(--slate-700);
}

/* ---------------------------------------------------------------------------
   Actions case-study hero (2026 redesign).

   Three bands: a capped intro (kicker + title + description), a full-bleed
   gradient stage holding the composite product shot, and a summary band that
   pairs the outcome stats with the project details in two columns. Desktop
   (>=992px) here; the <=991px rules at the bottom collapse each to one column.
   --------------------------------------------------------------------------- */

.cs-hero-intro {
  width: 100%;
  max-width: 1000px;
  margin: 128px auto 0;
  padding: 0 60px;
}

.cs-hero-intro .page-subtitle {
  max-width: 62ch;
}

.section-intro {
  max-width: 62ch;
}

/* Full-bleed gradient band — breaks out of any capped ancestor. Each project
   keeps its own gradient via the variant class. */
.cs-hero-stage {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-top: 48px;
  padding: 32px 0;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.cs-hero-stage.actions { background-image: url("../images/Actions-Bkg.png"); }
/* Cropped composite sits flush with the bottom of the gradient, centred across it. */
.cs-hero-stage.actions { padding-bottom: 0; }
.cs-hero-stage.free-trial { background-image: url("../images/Hero-Bkg.png"); }
/* Cropped mock sits flush with the bottom of the gradient, centred across it. */
.cs-hero-stage.free-trial { padding-bottom: 0; }
.cs-hero-stage.notifications { background-image: url("../images/Notifications-Bkg.png"); }

.cs-hero-stage-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 60px;
}

/* Product shot scaled to 80% and centred in the gradient band. Composites
   (browser + chat) have their frame and shadow baked into the PNG; bare
   screenshots get a rounded frame and soft shadow from CSS instead. */
.cs-hero-composite{
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}

/* Summary band — outcomes on the left, project details on the right. */
.cs-summary {
  background-color: var(--cobalt-50);
}

.cs-summary-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 60px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Impact kicker + outcome stats, given the wider column. */
.cs-summary-outcomes .heading-kicker {
  margin-bottom: 20px;
}

.cs-summary-results {
  margin-top: 0;
}

/* Give each stat more vertical room, with a visible divider between rows. */
.cs-summary-results .result-arrow-row {
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom-color: var(--slate-100);
}

/* Project details as a single vertical stack. */
.cs-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 28px;
}

.cs-meta-item .cs-meta-value {
  margin-top: 4px;
}

@media screen and (max-width: 991px) {
  .cs-hero-intro { margin-top: 64px; padding: 0 48px; }
  .cs-hero-stage { padding-top: 48px; }
  .cs-hero-stage-inner { padding: 0 48px; }
  .cs-summary-inner { grid-template-columns: 1fr; gap: 40px; padding: 40px 48px; }}

@media screen and (max-width: 767px) {
  .cs-hero-intro { padding: 0 24px; }
  /* Mobile: shrink the gradient frame and let the product shot fill it — the
     80% composite in a deeply-padded band left the screen small and the
     gradient dominant. Trim top padding and side gutters, grow shot to 100%. */
  .cs-hero-stage { padding-top: 24px; }
  .cs-hero-stage-inner { padding: 0 16px; }
  .cs-hero-composite { width: 100%; }
  .cs-summary-inner { padding: 40px 24px; }
  .cs-meta-grid { grid-template-columns: 1fr; }}

/* ---------------------------------------------------------------------------
   Narrower page column (2026). All content — prose and imagery alike — caps at
   1000px for a tighter, consistent measure; content-wrap-wide (and its
   variants) centre inside that column instead of hugging its left edge.
   Graphics stay within the column rather than bleeding out. Hero stages still
   bleed full-viewport via .cs-hero-stage and are unaffected by this cap.
   --------------------------------------------------------------------------- */
.container-wide,
.container-wide-flex {
  max-width: 1000px;
}

.content-wrap-wide,
.content-wrap-wide-across,
.content-wrap-wide-grid {
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Extra-wide visuals (2026). Default treatment for a graphic that should read
   as wider than the prose it sits beside: 115% of the text measure, centred on
   the column, never wider than the container's content box. Add .extra-wide to
   a .captioned-graphic (or any block-level visual wrapper) that's a direct
   child of .container-wide-flex.

   --prose-measure tracks .content-wrap-wide's max-width, so the two stay in
   step if the measure changes. The graphic deliberately overhangs the
   container's side padding — align-self keeps it centred on the text column —
   so it's also clamped to the viewport to avoid horizontal scroll, and drops
   back to full width on phones where there's no room to overhang.

   On extra-wide displays (≥1600px) the graphic steps up to a flat 1200px —
   detailed diagrams get the room the screen has, while the prose measure stays
   put. Override --extra-wide-width on a section to tune this per graphic.
   --------------------------------------------------------------------------- */
:root {
  --prose-measure: 700px;
  --extra-wide-width: calc(var(--prose-measure) * 1.15);
}

/* No auto margins here: once the graphic is wider than the column it sits in,
   auto margins resolve to 0 and leave it flush against the left edge, spilling
   only to the right. align-self does centre an overflowing flex item.

   The trailing margin cancels the container's asymmetric padding (which is
   indented on the left to clear the pinned logo), so the graphic centres on the
   page rather than on the text column. The logo may overlap it — that's fine,
   and it's why the whole measure sits square on the page's centre line. */
.extra-wide {
  width: min(var(--extra-wide-width), calc(100vw - 2 * var(--page-pad)));
  max-width: none;
  align-self: center;
  margin-right: var(--content-indent);
}

@media screen and (min-width: 1280px) {
  :root {
    --prose-measure: 800px;
  }
}

@media screen and (min-width: 1600px) {
  :root {
    --extra-wide-width: 1200px;
  }
}

/* Full-width override: for a graphic that should fill the container's
   content box entirely, rather than the 115%-of-prose measure above.
   Pair with .extra-wide (e.g. class="extra-wide full-width") so it still
   gets the mobile full-bleed treatment below 768px. */
.full-width {
  width: 100%;
  max-width: none;
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .extra-wide {
    width: 100%;
    margin-right: 0;
  }
}

/* The hero stage and summary bands keep their full-bleed backgrounds, but the
   content inside them tracks the extra-wide measure instead of the 1000px page
   column — so the product shot, the impact stats and the extra-wide graphics
   further down the page all line up on the same edges. Padding is added back on
   top of the measure so the *content box* (not the border box) is what matches,
   and it's symmetric here so the content centres on the page like .extra-wide
   does, logo overlap and all. */
.cs-hero-stage-inner,
.cs-summary-inner {
  max-width: calc(var(--extra-wide-width) + 2 * (var(--page-pad) + var(--content-indent)));
  padding-right: calc(var(--page-pad) + var(--content-indent));
}

/* ---------------------------------------------------------------------------
   Stacked visuals (2026). A pull quote and the photo it belongs to, stacked as
   full-width blocks instead of sitting side by side. The leading margin sets
   this group apart from whatever graphic precedes it, so two visual areas in
   one section don't read as a single run.
   --------------------------------------------------------------------------- */
.visual-stack {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Freed from the two-up, the quote spans the column and sits centred in it:
   the block stretches, its contents shrink to their text and centre as a group,
   so the quote reads as a pull quote in the middle of the content area rather
   than hugging the left edge. Text stays left-aligned against the cobalt rule.
   align-self is overridden or the centring it inherits collapses the box. */
.quote-wrap.stacked {
  display: flex;
  flex-flow: column;
  align-items: center;
  align-self: stretch;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ---------------------------------------------------------------------------
   Overlapping pair (2026). Two shots of the same surface shown together, the
   second nudged right and down so they overlap by a sliver — enough to read as
   one artefact with depth rather than two tiles in a row.

   Everything is sized off the stage width so the geometry survives any width:
   each shot is --overlap-shot wide, the second one drops by --overlap-drop, and
   the stage is exactly tall enough to hold both.
   --------------------------------------------------------------------------- */
.overlap-pair {
  --overlap-shot: 54%;    /* shot width; two of these overlap by 8% of the stage */
  --overlap-drop: 6%;     /* second shot's top offset — a share of stage HEIGHT */
  display: flex;
  flex-flow: column;
  gap: 12px;
  margin: 40px 0 0;
}

/* Stage height has to be declared, since both shots are out of flow. A shot is
   .54w ÷ the 1470:974 export aspect = .3578w tall, and the drop eats 6% of the
   stage, so stage = .3578 ÷ .94 = .3806 of the width. Keep the two in step: a
   drop that outruns this leaves the second shot hanging past the caption. */
.overlap-stage {
  position: relative;
  aspect-ratio: 1 / .3806;
}

.overlap-shot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--overlap-shot);
  height: auto;
  border: 1px solid var(--slate-50);
  border-radius: 8px;
  box-shadow: 4px 4px 16px #1c274926;
}

/* The second shot laps over the first, so it takes the higher stacking order. */
.overlap-shot.is-offset {
  top: var(--overlap-drop);
  left: auto;
  right: 0;
  z-index: 1;
}

/* On a phone, 54% of the column is too small to read anything in a screenshot.
   Widen the shots and lean into the overlap instead — .78 ÷ 1.509 ÷ .86 = .601. */
@media screen and (max-width: 767px) {
  .overlap-pair {
    --overlap-shot: 78%;
    --overlap-drop: 14%;
  }

  .overlap-stage {
    aspect-ratio: 1 / .601;
  }
}

/* ---------------------------------------------------------------------------
   Before/after comparison (2026). Two shots of the same surface stacked in one
   frame; the "before" is clipped to --compare-pos, so dragging the range input
   wipes between them. Both shots keep their own aspect via object-fit, and the
   frame carries the cobalt canvas the exports are cut from, so the seam reads
   as one continuous image no matter where the handle sits.

   The range input is the control — invisible, but the whole frame is its hit
   area, which gives drag, click-to-jump, touch and arrow keys for free.
   --------------------------------------------------------------------------- */
.compare {
  --compare-pos: 50%;
  display: flex;
  flex-flow: column;
  gap: 12px;
  margin: 0;
}

.compare-frame {
  position: relative;
  aspect-ratio: 1314 / 1002;
  background-color: var(--cobalt-50);
  overflow: hidden;
  touch-action: pan-y;
}

.compare-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compare-shot.is-before {
  clip-path: inset(0 calc(100% - var(--compare-pos)) 0 0);
}

.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pos);
  width: 3px;
  margin-left: -1.5px;
  background-color: var(--white);
  box-shadow: 0 0 6px #1c274933;
}

/* Grip: a translucent round knob centred on the divider, frosted over whatever
   sits behind it, with a left/right chevron pair as the affordance. */
.compare-divider:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid #ffffffe6;
  border-radius: 50%;
  background-color: #ffffff40;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath fill='%231c2749' d='M10 0 0 6l10 6z'/%3E%3Cpath fill='%231c2749' d='M14 0l10 6-10 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px 10px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px #1c274940, 0 0 0 1px #ffffff1a;
}

.compare-label {
  position: absolute;
  top: 16px;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: #ffffffd9;
  color: var(--slate-400);
  font-family: DM Mono, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.compare-label.before { left: 16px; }
.compare-label.after { right: 16px; }

/* The input covers the frame and stays invisible; its thumb is the full height
   of the frame so a grab anywhere on the divider tracks the pointer. */
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
}

.compare-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100vh;
  background: none;
  cursor: ew-resize;
}

.compare-range::-moz-range-thumb {
  width: 44px;
  height: 100vh;
  border: none;
  background: none;
  cursor: ew-resize;
}

.compare-range:focus-visible {
  outline: 2px solid var(--cobalt-300);
  outline-offset: 2px;
}

@media screen and (max-width: 767px) {
  .compare-divider:after {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    background-size: 17px 8.5px;
  }
  .compare-label { top: 8px; font-size: 11px; }
  .compare-label.before { left: 8px; }
  .compare-label.after { right: 8px; }
}

/* ---------------------------------------------------------------------------
   Project/case-study header (2026). Project and case-study pages swap the
   logo + brand for an index link, drop the project name into the center
   spacer, and replace "Let's Talk" with a label for which version of the
   case study is on screen.
   --------------------------------------------------------------------------- */










/* Unlock CTA (2026) — sits next to the dot indicator on public-overview
   pages that have a gated full case study, using the standard primary
   button rather than a bespoke control. */
.header-unlock-cta {
  gap: 6px;
  flex: none;
  white-space: nowrap;
}

.header-unlock-cta svg {
  width: 14px;
  height: 14px;
  flex: none;
}

@media screen and (max-width: 700px) {
  /* Not enough room for index link + project name + dot label (+ button,
     where present). The plain "Full Case Study" label on full-case-study
     pages is actually longer than "Overview" and was overflowing off the
     right edge of the viewport, so this applies to every nav-wrap variant. */
  

  .header-unlock-cta {
    padding: 8px 10px;
  }}

/* Below ~375px even the button-only layout overflows (logo + brand + project
   name + button all fighting for ~300px of usable width). Tighten spacing
   and let the project name truncate harder rather than clip off-screen. */
@media screen and (max-width: 374px) {
  .project-brand {
    font-size: 14px;
  }

  

  .header-unlock-cta {
    padding: 8px 8px;
    gap: 4px;
  }

  .header-unlock-cta svg {
    width: 12px;
    height: 12px;
  }
}

/* The pinned logo sits over the top-left corner, so #work/#about/#speaking
   get a little headroom when jumped to from the nav links. */
#work,
#about,
#speaking {
  scroll-margin-top: 96px;
}

@media screen and (max-width: 767px) {
  #work,
  #about,
  #speaking {
    scroll-margin-top: 72px;
  }}

/* ---------------------------------------------------------------------------
   Pinned logo (2026). The header bar itself scrolls away with the page; the
   logo alone stays fixed in the top-left corner, hanging past the content
   gutter so it reads as a page marker rather than part of the nav row. It is
   taken out of the header's flex flow, which lets the brand text sit flush
   with the content edge below it.
   --------------------------------------------------------------------------- */
.header-logo-link {
  z-index: 11;
  position: fixed;
  top: var(--logo-top);
  /* The content edge (gutter, or the centred container's left edge once the
     viewport is wider than the container), pulled left by the overhang. */
  left: calc(max(var(--page-pad), 50% - 500px + var(--page-pad)) - var(--logo-overhang));
  line-height: 0;
}

.header-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  margin-right: 0;
}

/* The logo shrinks once the page scrolls (js/site.js toggles .is-scrolled on
   <html>), so it reads as a corner marker rather than a full-size lockup. */
.header-logo {
  transition: width .25s ease, height .25s ease;
}

.is-scrolled .header-logo {
  width: calc(var(--logo-size) * var(--logo-scale-out));
  height: calc(var(--logo-size) * var(--logo-scale-out));
}

@media (prefers-reduced-motion: reduce) {
  .header-logo {
    transition: none;
  }
}

/* projects/testing.html's cover used a wider 1280px rail than the rest of the
   site, which put its left column under the pinned logo. Brought onto the
   shared 1000px rail so it clears the logo like every other page. */
.cs-cover {
  max-width: 1000px;
}

/* Content sits indented past the pinned logo. The containers keep their
   centred box; only the left padding grows, which is what pulls the content
   clear of the logo at every width. The footer container is excluded — it has
   its own zero-padding layout and never sits under the logo. */
.container-wide:not(.footer),
.container-wide-flex,
.cs-hero-intro,
.cs-hero-stage-inner,
.cs-summary-inner,
.cs-cover {
  padding-left: calc(var(--page-pad) + var(--content-indent));
}

/* ---------------------------------------------------------------------------
   Floating CTA (2026). The header bar scrolls away with the page, taking the
   primary CTA ("Let's Talk" on the site pages, "View Process" on the public
   project overviews) with it. Once the page moves, the same anchor re-forms as
   a round icon button pinned to the bottom-right corner, so the primary action
   is always one click away. Driven by .is-scrolled on <html> — the same class
   js/site.js already toggles for the pinned logo — so there is no extra JS.
   --------------------------------------------------------------------------- */
.floating-cta-icon {
  flex: none;
  /* In the header the label carries the meaning; only the unlock CTA shows an
     icon alongside it (see .header-unlock-cta svg above). */
  display: none;
}

.header-unlock-cta .floating-cta-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.is-scrolled .floating-cta {
  z-index: 12;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  /* The card treatment used by .case-study-cta-card and .work-ledger — white
     on a soft grey border — so the floating control reads as part of the same
     surface family as the cards it floats over. Opaque either way: it floats
     over arbitrary page content, where the transparent header treatment would
     not hold up. */
  border-color: var(--slate-50);
  background-color: var(--white);
  color: var(--cobalt-300);
  box-shadow: 0 6px 20px #d9dfec99;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .2s ease, opacity .2s ease;
  animation: floating-cta-in .25s ease;
}

.is-scrolled .floating-cta .floating-cta-icon,
.is-scrolled .header-unlock-cta .floating-cta-icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* The unlock illustration is a filled lockup rather than a line icon, so it
   carries the button at a slightly larger size. */
.is-scrolled .floating-cta img.floating-cta-icon {
  width: 32px;
  height: 32px;
}

/* Handed off to the "View full process" card once that card is on screen
   (js/site.js toggles .is-cta-in-view). */
.is-cta-in-view.is-scrolled .floating-cta {
  opacity: 0;
  pointer-events: none;
  transform: scale(.85);
}

/* The header label doubles as the button's tooltip: same words, lifted out of
   the flow into a card to the left of the button. Hover-capable pointers
   only — on touch there is no hover to reveal it, and the aria-label already
   carries the name for assistive tech. */
.is-scrolled .floating-cta .floating-cta-label {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .is-scrolled .floating-cta .floating-cta-label {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    transform: translateY(-50%);
    border: 1px solid var(--slate-50);
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 4px 4px 12px #d9dfec40;
    padding: 7px 10px;
    color: var(--cobalt-300);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-family: DM Mono, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 100%;
    transition: opacity .2s ease;
    display: block;
  }

  .is-scrolled .floating-cta:hover .floating-cta-label,
  .is-scrolled .floating-cta:focus-visible .floating-cta-label {
    opacity: 1;
  }
}

/* The site-wide link highlight sweeps a pale fill across the button on hover.
   On a round, card-filled button it reads as a bug, so it is switched off in
   the floating state — the tooltip is the whole hover affordance. */
.is-scrolled a.floating-cta:before,
.is-scrolled a.floating-cta:after {
  display: none;
}

@keyframes floating-cta-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

@media screen and (max-width: 767px) {
  .is-scrolled .floating-cta {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }}

@media (prefers-reduced-motion: reduce) {
  .is-scrolled .floating-cta {
    animation: none;
  }

  .is-scrolled .floating-cta:hover,
  .solution-carousel-nav:hover:not([disabled]) {
    transform: none;
  }

  .is-scrolled .floating-cta .floating-cta-label {
    transition: none;
  }}

/* ---------------------------------------------------------------------------
   Composite case-study graphics (2026). These collages used to ship with a
   cobalt canvas baked into the export, which read as a blue slab sitting in the
   column. The canvas is now repainted to --frost in the images themselves
   (tools/deblue.py), so the artwork floats on the page — and to keep it from
   reading as smaller after losing its frame, it runs 110% of the text measure
   and overhangs the column evenly on both sides.
   --------------------------------------------------------------------------- */
.graphic-composite {
  align-self: center;
  width: 770px;  /* 110% of the 700px text measure */
  max-width: calc(100vw - 32px);
}

@media screen and (min-width: 1280px) {
  .graphic-composite {
    width: 880px;  /* 110% of the 800px text measure */
  }
}

@media screen and (max-width: 991px) {
  .graphic-composite {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Solution carousel (2026). The "Selected screens" set on a project overview
   reads as a sequence, not a stack. The whole component is one cobalt panel —
   the frame that used to wrap each shot individually — with the screenshots
   riding on it transparently and arrow buttons pinned inside the left and
   right edges. Scrolling is native (snap points, touch, keyboard); the buttons
   just call scrollBy, so the row still works with JS off.
   --------------------------------------------------------------------------- */
.solution-carousel {
  background-color: var(--cobalt-50);
  align-items: center;
  align-self: center;
  gap: 8px;
  padding: 40px 16px;
  display: flex;
  position: relative;
}

.solution-carousel-track {
  flex: 1;
  grid-column-gap: 24px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.solution-carousel-track::-webkit-scrollbar {
  display: none;
}

.solution-carousel-item {
  scroll-snap-align: center;
  flex: 0 0 100%;
  flex-flow: column;
  justify-content: center;
  gap: 16px;
  display: flex;
}

.solution-carousel-item img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Round, low-contrast on the cobalt panel until hovered. flex: 0 0 auto keeps
   them from being squeezed by the track. */
.solution-carousel-nav {
  color: var(--cobalt-300);
  cursor: pointer;
  /* Same card treatment as the floating CTA (see .is-scrolled .floating-cta):
     white on a soft grey border with a diffuse shadow, so every round icon
     button on the site reads as one control. */
  background-color: var(--white);
  border: 1px solid var(--slate-50);
  box-shadow: 0 6px 20px #d9dfec99;
  border-radius: 50%;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
  display: flex;
}

/* Shared hover for the round icon buttons: lift 2px and lighten the shadow.
   The fill stays white — a tinted fill read as a state change rather than a
   lift. */
.solution-carousel-nav:hover:not([disabled]),
.is-scrolled .floating-cta:hover {
  background-color: var(--white);
  border-color: var(--cobalt-100);
  box-shadow: 0 8px 24px #d9dfec66;
  transform: translateY(-2px);
}

.solution-carousel-nav:focus-visible {
  outline: 2px solid var(--cobalt-300);
  outline-offset: 2px;
}

.solution-carousel-nav[disabled] {
  cursor: default;
  opacity: .35;
}

@media (prefers-reduced-motion: reduce) {
  .solution-carousel-track {
    scroll-behavior: auto;
  }
}

@media screen and (max-width: 767px) {
  .solution-carousel {
    gap: 4px;
    padding: 24px 8px;
  }

  .solution-carousel-nav {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
}