/* =====================================================================
   BASE LAYER 1 — normalize.css v3.0.3 (MIT) | github.com/necolas/normalize.css
   Folded in from css/normalize.css (was a separate <link>).
   ===================================================================== */
/*! 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: var(--color-ink);
}
/**
 * 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;
}

/* =====================================================================
   BASE LAYER 2 — Webflow base reset + kept .w-* component styles
   Folded in from css/webflow.css (was a separate <link>). Dead/unused
   .w-* rules (slider, dropdown, tab, lightbox, commerce, icons, mod-touch,
   data-w-cloak, nav-button, spin keyframes, etc.) were dropped. Cascade
   order is preserved: normalize -> webflow-base -> custom (below).
   ===================================================================== */
* {
  -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: var(--color-text);
}
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;
}
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;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.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;
}
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-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: var(--color-text);
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.w-input::placeholder{
  color: var(--color-neutral-400);
}
.w-input:focus{
  border-color: #3898EC;
  outline: 0;
}
.w-input[disabled],
.w-input[readonly],
fieldset[disabled] .w-input{
  cursor: not-allowed;
}
.w-input[readonly]{
  background-color: #eeeeee;
}
textarea.w-input{
  height: auto;
}
.w-container:before,
@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }
}
@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }
}
.w-background-video {
  position: relative;
  overflow: hidden;
  height: 500px;
  color: white;
}
.w-background-video > video {
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  right: -100%;
  bottom: -100%;
  top: -100%;
  left: -100%;
  object-fit: cover;
  z-index: -100;
}
.w-background-video > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.w-background-video--control {
  position: absolute;
  bottom: 1em;
  right: 1em;
  background-color: transparent;
  padding: 0;
}
.w-background-video--control > [hidden] {
  display: none !important;
}
.w-richtext:before,
.w-richtext[contenteditable="true"]:before,
.w-richtext ol,
.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: var(--color-text);
}
[data-nav-menu-open] {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #C8C8C8;
  text-align: center;
  overflow: visible;
  min-width: 200px;
}
.w-nav[data-animation='over-left'] [data-nav-menu-open] {
  right: auto;
  z-index: 1;
  top: 0;
}
.w-nav[data-animation='over-right'] [data-nav-menu-open] {
  left: auto;
  z-index: 1;
  top: 0;
}
.w-nav[data-collapse='all'] .w-nav-menu {
  display: none;
}
/**
 * NOTE: These rules are overridden in site-designer.less to use container queries instead of media queries
 * when the navbar is inside a Frame on the Open Canvas.
 */
@media screen and (max-width: 991px) {
  .w-nav[data-collapse='medium'] .w-nav-menu {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .w-nav[data-collapse='small'] .w-nav-menu {
    display: none;
  }
  .w-nav-brand {
    padding-left: 10px;
  }
}
@media screen and (max-width: 479px) {
  .w-nav[data-collapse='tiny'] .w-nav-menu {
    display: none;
  }
}

/* =====================================================================
   CUSTOM LAYER — site stylesheet (design tokens + all custom rules)
   ===================================================================== */
/* =====================================================================
   DESIGN TOKENS — single source of truth (hoisted from 51 duplicate blocks)
   These values are constant across every selector & breakpoint.
   Responsive tokens (per breakpoint) remain in their element rules below.
   ===================================================================== */
:root {
  /* ---- fluid type scale (single source, clamp 320->1440) ---- */
  --text-h1: clamp(2.125rem, 1.30rem + 4.10vw, 3.5rem);
  --text-h2: clamp(1.625rem, 1.375rem + 1.25vw, 2.5rem);   /* 26 -> 40, cap lands at 1440 (was ~865: static through the tablet band) */
  --text-h3: clamp(1.375rem, 1.196rem + 0.893vw, 2rem);   /* 22 -> 32, cap at 1440 */
  --text-h4: clamp(1.25rem, 1.11rem + 0.70vw, 1.5rem);
  --text-h5: clamp(1.125rem, 1.05rem + 0.40vw, 1.25rem);
  --text-h6: clamp(1rem, 0.95rem + 0.30vw, 1.125rem);
  --text-body: 1rem;
  --text-lg: clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
  --text-sm: clamp(0.875rem, 0.86rem + 0.07vw, 0.9375rem);
  --text-caption: 0.875rem;
  --text-subhead: clamp(1rem, 0.95rem + 0.30vw, 1.125rem);

  --color-white: #ffffff;
  --color-ink: #000000;
  --color-bg: #f5f5f5;
  --color-surface: #f6f7f9;
  --color-text: #323744;
  --color-title: #1f2021;
  --color-icon: #101418;
  --color-button: #181818;
  --color-outline: #ececec;
  --color-accent: #2a94f8;
  --color-accent-strong: #1366c4;
  --color-neutral-200: #ebebef;
  --color-neutral-300: #cacbd4;
  --color-neutral-400: #84889a;
  --color-neutral-500: #606476;
  --color-neutral-600: #3e404c;
  --color-neutral-700: #24262d;
  --color-neutral-800: #111418;
  --color-neutral-900: #030407;
  --color-olive: #494c3f;
  --color-case-sharge: #c5d0db;
  --color-case-sharge-dark: #5d738a;
  --color-case-sharge-impact: #6b8299;
  --color-case-prio: #e2d4c1;
  --color-case-cereus: #e3f0e6;
  --color-case-cereus-dark: #101a14;

  /* ---- chapter surfaces: the page canvas stays neutral; color lives on the chapter cards ---- */
  --surface-page: var(--color-bg);
  --color-case-cereus-bright: #46c865;
  --color-case-cereus-light: #61f284;
  --color-case-neutral: #e6e6e6;
  --color-border-blue: #e5ebf1;

  /* ---- fonts & layout ---- */
  --font-body: "DM Sans", sans-serif;
  --font-headings: "DM Sans", sans-serif;
  --container-max: 1200px;

  /* ---- spacing / radius base tokens (hoisted from duplicate blocks) ---- */
  /* Base values; per-breakpoint overrides live in the @media rules below. */
  --space-section: 96px;
  --text-subhead-lg: 18px;
  --space-container: 12px;
  --space-card: 24px;
  --radius-card: 20px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-round: 50%;
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* signature reveal/hover ease */
  --radius-pill: 99px;

  /* ---- spacing scale (4px base; token name = the px value, so no label-vs-px ambiguity).
       Kept complete for authoring; 4/24/32/64 currently have no call-sites. ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* ---- width tiers: content column vs. one-tier-wider feature band (HMW / Vimeo / hero) ---- */
  --w-content: 960px;
  --w-content-lg: 1280px;
  --w-feature: min(1280px, 94vw);
  --w-feature-lg: min(1440px, 94vw);

  /* ---- dark-surface overlays & text shadows (sharge HMW band, dark footer) ---- */
  --overlay-dark-25: rgba(8, 11, 16, .25);
  --overlay-dark-35: rgba(8, 11, 16, .35);
  --overlay-dark-45: rgba(8, 11, 16, .45);
  --color-white-96: rgba(255, 255, 255, .96);
  /* liquid-glass material family (nav pill, contact CTA, resume modal share it; the
     fx-cursor keeps a bespoke lens recipe and borrows only the frost base) */
  --glass-frost-rgb: 15, 18, 22;
  --glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .22));
  --glass-specular: radial-gradient(120% 95% at 50% -35%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 62%);
  --glass-rim-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 1px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(255, 255, 255, .08), inset -1px 0 0 rgba(255, 255, 255, .08);
  --glass-blur: 14px;
  --glass-saturate: 1.6;
  --color-case-loop-tint: #c7cc8f66;
  --text-nav-label: var(--text-micro);
  /* 6-tier homepage ladder (2026-07-21): h2 40 / h3(legacy fluid token, ==2rem >=992) /
     lead 18 / body 16 / sm ~15 / micro 12. NOTE: --text-h3 is DEFINED ONCE above (fluid);
     a second fixed 2rem copy here once shadowed it and froze case-page h3 sizes. */
  --text-lead: 1.125rem;
  --text-micro: 12px;
  --shadow-text-dark-lg: 0 2px 14px rgba(0,0,0,.6), 0 4px 34px rgba(0,0,0,.5), 0 10px 64px rgba(0,0,0,.4);
  --shadow-text-dark-md: 0 2px 12px rgba(0,0,0,.58), 0 4px 26px rgba(0,0,0,.46);
}

/* =====================================================================
   SELF-HOSTED WEB FONT — DM Sans (Latin subset, variable)
   Replaces the render-blocking Google/Webflow font loader.
   Files vendored from fontsource (dm-sans:vf). ../fonts/ path mirrors
   this stylesheet's other relative asset refs (served from /css/).
   ===================================================================== */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid var(--color-accent-strong);
}

@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(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
}

h1 {
  height: auto;
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h1);
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 20px;
  font-weight: 500;
  line-height: 140%;
}

h2 {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h2);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 200;
  line-height: 40px;
}

h3 {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h3);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  line-height: 30px;
}

h4 {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h4);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 24px;
}

h5 {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h5);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 20px;
}

h6 {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h6);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 18px;
}

p {
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: 10px;
  font-size: var(--text-body);
}

a {
  font-family: var(--font-body);
  color: var(--color-icon);
  background-color: #0b0c2800;
  text-decoration: none;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

li {
  color: var(--color-title);
}

img {
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  display: inline-block;
}

label {
  font-family: var(--font-body);
  color: var(--color-white);
  font-size: var(--text-caption);
  margin-bottom: 5px;
  font-weight: 400;
  display: block;
}

em {
  color: var(--color-title);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
}

blockquote {
  font-family: var(--font-body);
  color: var(--color-white);
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: var(--color-white);
  border-left: 5px solid var(--color-outline);
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  font-style: italic;
  line-height: 22px;
  text-decoration: none;
}

.paragraph-large {
  width: auto;
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--text-lg);
  text-align: left;
  align-self: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  line-height: 24px;
  text-decoration: none;
}

.paragraph-large.align-center {
  width: 100%;
  max-width: 400px;
  color: var(--color-text);
  font-size: var(--text-lg);
  text-align: center;
  -webkit-text-stroke-color: var(--color-neutral-300);
  justify-content: center;
  align-self: auto;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 300;
  line-height: 27px;
  display: flex;
}

.paragraph-large.align-left {
  width: 70%;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 300;
}

.navbar {
  z-index: 10;
  -webkit-text-fill-color: inherit;
  background-color: #fff0;
  background-clip: border-box;
  position: fixed;
  inset: 0% 0% auto;
}

.navbar-container {
  z-index: 5;
  background-color: #fff0;
  border: 1px var(--color-ink);
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 12px;
}

.utility-page-wrapper {
  border: 0px none var(--color-neutral-700);
  outline-offset: 0px;
  background-color: #02041d00;
  outline: 0 #333;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  padding-top: 220px;
  padding-bottom: 220px;
  display: flex;
}

.utility-page-content {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.paragraph-regular {
  width: auto;
  height: auto;
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--text-body);
  text-align: left;
  -webkit-text-stroke-color: var(--color-text);
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  font-weight: 300;
  line-height: 24px;
  display: block;
}

.paragraph-regular.align-left {
  width: 100%;
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: 300;
}

.utility-page-form {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  display: flex;
}

.works-gallery-section {
  padding: var(--space-section);
  opacity: 1;
  border: 0 solid #22213300;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  display: block;
  position: relative;
  overflow: visible;
}


.style-guide-wrapper {
  grid-column-gap: 10px;
  background-color: #fff0;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding: 0;
  text-decoration: none;
  display: flex;
}

.typhography-block {
  grid-row-gap: 20px;
  flex-flow: wrap;
  justify-content: space-between;
  align-self: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.typhography-block.two {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.style-guide-block {
  grid-row-gap: 20px;
  border: 1px solid var(--color-outline);
  background-color: var(--color-white);
  border-radius: 20px;
  flex-flow: column;
  order: 0;
  justify-content: space-between;
  align-self: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 10px;
  padding: 20px;
  text-decoration: none;
  display: flex;
}

.style-guide-small-title {
  font-family: var(--font-body);
  color: var(--color-title);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 20px;
}

.rich-text {
  width: 100%;
  font-family: var(--font-body);
  color: var(--color-white);
  font-size: var(--text-caption);
  text-align: left;
  font-weight: 300;
}

.rich-text h1 {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h1);
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
}

.rich-text h2 {
  color: var(--color-title);
  font-size: var(--text-h2);
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
  overflow: visible;
}

.rich-text h3 {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
}

.rich-text h4 {
  font-family: var(--font-headings);
  font-size: var(--text-h4);
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
}

.rich-text h5 {
  font-family: var(--font-headings);
  font-size: var(--text-h5);
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
}

.rich-text h6 {
  font-size: var(--text-h6);
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
}

.rich-text p {
  color: var(--color-text);
  font-size: var(--text-caption);
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.rich-text blockquote {
  color: var(--color-text);
  text-align: left;
}

.rich-text a {
  color: var(--color-title);
  -webkit-text-stroke-color: var(--color-white);
  font-style: italic;
  text-decoration: none;
}

.sub-heading-large {
  font-family: var(--font-headings);
  color: var(--color-title);
  text-align: left;
  margin-bottom: 0;
  font-weight: 500;   /* size: var(--text-sm) via the EOF unification */
  line-height: 24px;
}

.sub-heading-large.align-left {
  width: 100%;
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: 16px;
  font-weight: 400;
}

.sub-heading-regular {
  width: auto;
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-subhead);
  text-align: left;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 24px;
  display: block;
}

.sub-heading-small {
  width: auto;
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: 14px;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 22px;
}

.paragraph-small {
  width: auto;
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: left;
  align-self: center;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 24px;
  display: block;
}

.paragraph-small.align-left {
  width: 100%;
  color: var(--color-neutral-500);
  margin-bottom: auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
  display: block;
}

.paragraph-small.footer {
  color: var(--color-title);
  font-weight: 300;
}

.paragraph-small.white {
  color: var(--color-white);
}

.styleguide-subheading {
  background-color: var(--color-white);
  font-family: var(--font-body);
  color: var(--color-title);
  border-radius: 10px;
  padding: 10px;
  font-weight: 300;
  display: block;
}

.works-column {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.works-column.align-left {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: flex-start;
}

.heading-style-h1 {
  width: auto;
  font-size: var(--text-h1);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
}

.heading-style-h1.align-center {
  text-align: center;
  width: 70%;
  max-width: none;
  font-weight: 500;
  line-height: 62px;
}

.heading-style-h1.align-left {
  font-weight: 500;
}

.heading-style-h2 {
  text-align: left;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.heading-style-h2.align-center {
  text-align: center;
  text-align: center;
  text-align: center;
  width: 50%;
  max-width: 600px;
  font-weight: 500;
}

.heading-style-h3 {
  color: var(--color-title);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  line-height: 34px;
}

.heading-style-h4 {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h4);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
}

.heading-style-h5 {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-h5);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
}

.heading-style-h6 {
  color: var(--color-title);
  font-size: var(--text-h6);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
}

.container-medium {
  width: 100%;
  max-width: var(--container-max);
  grid-row-gap: 50px;
  cursor: auto;
  background-color: #fff0;
  flex-direction: column;
  justify-content: center;
  align-self: auto;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: visible;
}

.container-medium.hero {
  grid-row-gap: 50px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.line {
  grid-row-gap: 100px;
  background-color: var(--color-outline);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: 1px;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  display: flex;
}

.padding-global {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-container);
  text-align: center;
  object-fit: fill;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: visible;
}

.text-field {
  background-color: var(--color-surface);
  outline-color: var(--color-outline);
  outline-offset: 0px;
  height: 40px;
  font-family: var(--font-body);
  color: var(--color-neutral-300);
  text-align: left;
  -webkit-text-stroke-color: #fff0;
  border: 0 #0000;
  border-radius: 10px;
  outline-width: 1px;
  outline-style: solid;
  flex: 0 auto;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  font-weight: 400;
}

.text-field::placeholder {
  color: var(--color-neutral-200);
}

.typhography-block-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
}

.typhography-details {
  font-family: var(--font-headings);
  color: var(--color-text);
  font-size: var(--text-caption);
  text-align: center;
  flex-flow: wrap;
  flex: 0 auto;
  justify-content: space-between;
  align-items: center;
  font-weight: 300;
  display: block;
}

.typhography-details.black {
  color: var(--color-neutral-900);
  font-weight: 300;
}

.typhography-details.white {
  color: var(--color-white);
}

.block-title-wrapper {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  text-align: left;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
}

.block-title {
  font-weight: 300;
}

.grid-color {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 100%;
}

.color-block {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: var(--color-icon);
  border-radius: 20px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 140px;
  padding: 20px;
  display: flex;
}

.color-block.black {
  background-color: var(--color-title);
  border: 1px var(--color-ink);
}

.color-block.outline {
  background-color: var(--color-text);
}

.color-block.white {
  background-color: var(--color-white);
}

.text-field {
  border: 1px none var(--color-surface);
  background-color: var(--color-white);
  outline-color: var(--color-outline);
  outline-offset: 0px;
  color: var(--color-title);
  outline-width: 1px;
  outline-style: none;
  font-weight: 300;
}

.text-field:focus-visible, .text-field[data-wf-focus-visible], .text-field::placeholder, .text-field:lang(en) {
  color: var(--color-title);
}

.hero-section {
  z-index: 3;
  width: 100%;
  max-width: none;
  height: auto;
  padding: var(--space-section);
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.hero-section.one {
  z-index: 0;
  height: auto;
  max-height: none;
  display: block;
  position: absolute;
  inset: 0% 0% auto;
  overflow: visible;
}

.button {
  grid-column-gap: 10px;
  border: 2px none var(--color-white);
  background-color: var(--color-button);
  width: 100px;
  height: auto;
  font-family: var(--font-headings);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 20px;
  font-weight: 400;
  text-decoration: none;
  display: flex;
}

.button:hover {
  background-color: var(--color-button);
  opacity: .8;
}

.button.is-current {
  background-image: none;
  background-repeat: repeat;
  background-size: auto;
  box-shadow: inset 0 2px 16px 1px #ffffff14;
}

.button.secondary {
  border-style: none;
  border-color: var(--color-neutral-200);
  background-color: var(--color-white);
  color: var(--color-title);
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 300;
}

.button.secondary:hover {
  border-style: none;
  border-color: var(--color-neutral-300);
  background-color: var(--color-white);
  color: var(--color-title);
}

.button.two {
  background-color: var(--color-neutral-900);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  margin-left: 0;
  font-weight: 300;
}

.container-regular {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 600px;
  min-height: 30px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.icon {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 24px;
  max-width: none;
  height: 24px;
  display: flex;
  position: relative;
}

.password-container {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: 0;
  display: flex;
}

.badge {
  grid-column-gap: 8px;
  border: 1px solid var(--color-outline);
  background-color: var(--color-white);
  outline-color: var(--color-surface);
  outline-offset: 0px;
  -webkit-text-fill-color: inherit;
  mix-blend-mode: normal;
  background-clip: border-box;
  border-radius: 26px;
  outline-width: 3px;
  outline-style: none;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 2px 4px 3px #b2bec41a;
}

.badge.project {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 14px;
}

.tittle-badge {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: center;
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}





.card-text-col {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.content {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.content.contact {
  grid-row-gap: 5px;
  flex-flow: column;
  height: auto;
}

.content.project {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr .32fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px 6px;
  display: grid;
}

.content.contact {
  grid-row-gap: 5px;
  height: auto;
}

.card {
  grid-row-gap: 20px;
  border: 1px solid var(--color-outline);
  background-color: var(--color-surface);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 34px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.card.content {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--color-white);
  border-style: none;
  border-radius: 24px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.card.project {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--color-white);
  border-style: none;
  border-radius: 34px;
  padding: 10px;
  position: relative;
}

.card.contact {
  background-color: var(--color-white);
  border-style: none;
  width: 100%;
  max-width: 500px;
}

.card.testimonials {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-style: none none solid;
  border-right-width: 0;
  border-bottom-color: var(--color-neutral-300);
  background-color: var(--color-white);
  border-radius: 0;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr .25fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 0 0 20px;
  display: flex;
}

.grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border: 2px none var(--color-white);
  background-color: #fcfdff00;
  border-radius: 0;
  flex-wrap: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  text-decoration: none;
  display: grid;
}

.grid.project {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-columns: 1fr;
  max-width: none;
}

.grid.hero {
  grid-template-columns: .75fr 1fr;
  place-items: start stretch;
  max-width: 810px;
}

.grid.contact {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  min-width: auto;
  max-width: none;
  display: grid;
}

.badge {
  background-color: var(--color-white);
  box-shadow: none;
  border-style: none;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 0;
}

.badge.two {
  background-color: var(--color-surface);
  border-style: none;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
}

.badge.popup {
  z-index: 2;
  background-color: var(--color-surface);
  border-width: 3px;
  position: absolute;
  inset: auto 2% 2% auto;
}

.badge.popup.project {
  grid-column-gap: 8px;
  padding-left: 20px;
  padding-right: 16px;
  bottom: 0%;
}

.badge.popup.project.home {
  grid-column-gap: 8px;
  background-color: var(--color-neutral-700);
  box-shadow: none;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 14px;
  position: static;
}

.badge.popup.project.home._2 {
  background-color: var(--color-white);
  color: var(--color-neutral-500);
}

.badge.popup.home {
  background-color: var(--color-white);
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
  padding-right: 14px;
  position: static;
}

.navbar-bar {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--color-white);
  border: 3px var(--color-white);
  border-radius: var(--radius-pill);
  justify-content: space-between;
  align-items: center;
  width: auto;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
  display: flex;
  box-shadow: 0 6px 50px -6px #cacaca12;
}


.logo {
  object-fit: cover;
  border-radius: 8px;
  width: 50px;
  max-width: none;
  height: 50px;
  transform: rotate(5deg);
}

.tumbnail-wrapper {
  opacity: 1;
  cursor: auto;
  mix-blend-mode: normal;
  pointer-events: none;
  border-radius: 24px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.logo {
  width: 24px;
  height: auto;
  color: var(--color-title);
  border-radius: 0;
  margin-left: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 17px;
  transform: none;
}

.logo:hover {
  width: 24px;
}

.wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-image: linear-gradient(356deg, var(--color-bg), var(--color-white));
  border-radius: 60px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: auto;
  max-width: 850px;
  padding: 24px;
  display: flex;
}

.wrapper.content {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-image: linear-gradient(177deg, var(--color-white), var(--color-surface) 16%, var(--color-surface) 50%, var(--color-white));
}

.wrapper.footer {
  background-image: none;
  max-width: 810px;
  padding: 0;
}

.hero {
  color: var(--color-white);
}

.background {
  z-index: -1;
  position: absolute;
  inset: 0% 0% auto;
}

.title-badge {
  color: var(--color-icon);
  font-size: var(--text-sm);
  text-align: right;
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
}

.title-badge.white {
  color: var(--color-white);
}

.title-badge.white._2 {
  color: var(--color-icon);
}

.devinder {
  background-color: #f1f1f1;
  border-radius: var(--radius-pill);
  width: 100%;
  height: 1px;
}

.devinder.two {
  width: 1px;
  height: 40px;
}

.tumbnail-projects {
  object-fit: cover;
  background-color: #c2c7cc;
  border-radius: 0;
  height: auto;
}

.tumbnail-projects.pin {
  object-fit: cover;
  pointer-events: none;
}

.tumbnail-projects.sharge, .tumbnail-projects.vw {
  background-color: var(--color-case-neutral);
}

.tumbnail-projects.bw {
  background-color: #ebede6;
}

.column {
  flex-flow: column;
  display: flex;
}

.element-effect {
  z-index: 1;
  object-fit: cover;
  width: 188px;
  height: auto;
  padding-left: 0;
  padding-right: 0;
  position: absolute;
  inset: auto 0% -1px auto;
}

.element-effect._2 {
  width: 192px;
}

.cta {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  border: 3px none var(--color-white);
  background-color: var(--color-white);
  border-radius: 30px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 50px;
  display: flex;
}

.card-thumb-wrap {
  width: 100%;
  position: relative;
}

.thumbnail-frame {
  aspect-ratio: 3 / 2;
  pointer-events: none;
  background-color: #0000;
}

.space {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}

.body {
  background-color: var(--color-bg);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: block;
}

.case-meta-block {
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.case-title {
  font-family: var(--font-headings);
  color: var(--color-ink);
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 46px;
}

.video-embed {
  aspect-ratio: 16 / 9;
  pointer-events: none;
  border-radius: 0;
  width: auto;
  height: 100%;
  margin: auto;
  padding: 0;
}

.video-embed._2 {
  aspect-ratio: auto;
}

.section-label {
  /* Layout (flex + hairline ::after divider) lives in the global .section-label rule
     further down; this base only carries color & type. Old left-bar props removed. */
  color: var(--color-neutral-500);
  margin-top: auto;
  margin-bottom: auto;
  font-weight: 500;
  line-height: 120%;
}

.section-label.white {
  /* Dark-bg variant: color only — layout comes from the global .section-label rule. */
  color: var(--color-neutral-200);
}

.meta-label {
  color: var(--color-text);
  font-weight: 600;
}

.subsection-heading {
  color: var(--color-ink);
  margin-bottom: 0;
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 140%;
}

.subsection-heading._2 {
  width: auto;
  font-family: var(--font-headings);
  color: var(--color-accent-strong);
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  font-size: 42px;
  line-height: 130%;
}

.subsection-heading.white {
  color: var(--color-white);
}

.body-text {
  color: var(--color-neutral-500);
  background-color: #0000;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 160%;
}

.body-text.white {
  color: #fffc;
  width: 100%;
  font-weight: 300;
  line-height: 160%;
}

.body-text.details {
  color: var(--color-neutral-500);
  font-weight: 300;
}

.body-text.cite {
  color: var(--color-neutral-500);
  font-weight: 400;
  font-style: italic;
}

/* quotes that still use <em> (other case pages): follow the cite color, not the global em title color */
.body-text.cite em {
  color: inherit;
  font-weight: inherit;
}

.body-text.problem {
  padding-left: 0;
  padding-right: 0;
}

.case-meta-item {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.hero-badge {
  width: 46px;
  height: 46px;
}

.case-hero-cover {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-top-left-radius: var(--space-card);
  border-top-right-radius: var(--space-card);
  border-bottom-left-radius: var(--space-card);
  border-bottom-right-radius: var(--space-card);
  background-color: var(--color-neutral-300);
  text-overflow: clip;
  aspect-ratio: 2;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 1008px;
  height: 504px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.case-meta-list {
  margin-right: auto;
  padding-left: 0;
}

.case-subtitle {
  color: var(--color-neutral-500);
  margin-bottom: 0;
  font-size: 16px;
  line-height: 140%;
}

.case-hero-titles {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.case-hero {
  background-color: var(--color-neutral-300);
}

.case-hero.sharge {
  background-color: var(--color-case-sharge);
}

.case-hero.pin {
  background-color: var(--color-neutral-300);
}

.case-hero.iqs {
  flex-flow: column;
  display: flex;
}

.case-hero.vw {
  background-color: #dae1e8;
}

.case-hero.bw {
  background-color: #d4d4cd;
}

.case-hero.popup {
  background-color: var(--color-neutral-300);
}

.space-2._100 {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}

.space-2._20 {
  width: 20px;
  height: 20px;
  margin-left: auto;
  margin-right: auto;
}

.space-2._60 {
  width: 60px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
}

.space-2._10 {
  width: 10px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;
}

.space-2._40 {
  width: 40px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
}

.space-2._120 {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

.space-2._30 {
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
}

.case-meta-layout {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.case-meta-sidebar {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.center-block {
  margin-left: auto;
  margin-right: auto;
}

.stat-figure {
  color: var(--color-ink);
  margin-bottom: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 140%;
}

.challenge-section {
  background-color: #0000;
  position: relative;
}

.subsection-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.card-emoji {
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 100%;
  display: flex;
}

.emoji-card {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #0000;
  border-radius: 0;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  display: flex;
}

.emoji-card.card {
  background-color: var(--color-white);
  border-style: none;
  border-radius: 20px;
  flex-flow: row;
  padding: 16px 20px;
}

.emoji-card.card._2 {
  background-color: var(--color-neutral-500);
  flex-flow: column;
}

.emoji-card.card.white {
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  flex-flow: column;
  padding: 10px;
}

.emoji-card.card.dark {
  background-color: var(--color-neutral-500);
  flex-flow: column;
  padding-top: 20px;
  padding-bottom: 20px;
}

.stat-image {
  width: 50%;
}

.stat-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.stat-grid._3 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}

.hmw-title {
  color: var(--color-accent-strong);
  width: 90%;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: auto;
  font-size: 40px;
  font-weight: 600;
  line-height: 140%;
}

.opportunity-grid {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.hmw-block {
  z-index: 2;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 3.5fr;
  grid-auto-columns: 1fr;
  display: block;
  position: static;
}

.hmw-block._2 {
  grid-template-columns: .25fr 3.5fr;
}

.card-label {
  color: var(--color-ink);
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 160%;
}

.card-label.white {
  color: var(--color-white);
}

.case-section-block {
  z-index: 2;
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  position: relative;
}

.lead-in {
  color: var(--color-ink);
  font-weight: 700;
}

.emoji-square {
  aspect-ratio: 1;
}

.emoji-card-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.space-3._60 {
  width: 60px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
}

.space-3._30 {
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
}

.space-3._10 {
  width: 10px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;
}

.space-3._20 {
  width: 40px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
}

.space-3._160 {
  width: 160px;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
}

.space-3._6 {
  width: 6px;
  height: 6px;
  margin-left: auto;
  margin-right: auto;
}

.space-3._16 {
  width: 16px;
  height: 16px;
  margin-left: auto;
  margin-right: auto;
}

.space-3._120 {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

.space-3._200 {
  width: 200px;
  height: 200px;
  margin-left: 0;
  margin-right: 0;
}

.space-3._100 {
  width: 100px;
  height: 100px;
  margin-left: 0;
  margin-right: 0;
}

.space-3._80 {
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}

.compare-figure {
  opacity: .9;
  width: 100%;
}

.process-image-grid {
  grid-column-gap: 40px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.process-image-grid.left {
  grid-column-gap: 40px;
  grid-row-gap: 10px;
}

.feature-column {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  display: flex;
}

.impact-collage-img {
  border-radius: var(--radius-card);
  margin-top: auto;
  margin-bottom: auto;
}

.process-compare-grid {
  grid-column-gap: 200px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1.1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.process-image-grid-3 {
  grid-column-gap: 40px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.process-image-grid-3.left {
  grid-column-gap: 40px;
  grid-row-gap: 10px;
}

.subsection-grid-2 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.step-emoji {
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 100%;
  display: flex;
}

.step-emoji.num {
  color: var(--color-accent-strong);
  width: 22px;
  height: 22px;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
}

.impact-collage-img-2 {
  border-radius: var(--radius-card);
  min-width: 100%;
}

.phone-bg-video-3 {
  z-index: 2;
  width: 100%;
  height: 100%;
}

.phone-bg-video-3.new {
  z-index: 2;
}

.feature-grid {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.process-image-grid-4 {
  grid-column-gap: 40px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.process-image-grid-4.left {
  grid-column-gap: 40px;
  grid-row-gap: 10px;
}

.icon-text-row {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.icon-text-row.impact {
  flex-flow: column;
}

.icon-text-row.title {
  justify-content: flex-start;
  align-items: center;
}

.compare-figure {
  opacity: .9;
  width: 100%;
}

.phone-bg-video-2 {
  width: 100%;
  height: 100%;
}

.phone-bg-video-2.new {
  z-index: 2;
}

.compare-figure {
  opacity: .9;
  width: 100%;
}

.painpoint-row {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 3.5fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.case-section-block-2 {
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

/* HMW band: match the 960/1280 content column (was a fixed min(1280px,94vw) that ignored the 1600 breakpoint) */
.hmw-wrap {
  width: var(--w-feature);
  margin-left: auto;
  margin-right: auto;
  container-type: inline-size;
}

.case-section {
  background-color: var(--color-case-sharge);
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.flow-step-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.flow-step-grid img {
  padding: 8px;
  background: var(--color-white);
}

.compare-text-grid {
  grid-column-gap: 200px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1.1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.process-image-grid-2 {
  grid-column-gap: 40px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.process-image-grid-2.left {
  grid-column-gap: 40px;
  grid-row-gap: 10px;
}

.journey-figure {
  width: 98%;
  margin-left: auto;
  display: block;
}

.compare-figure-final {
  margin-top: -10px;
}

.flow-step-caption {
  color: var(--color-neutral-500);
  text-align: center;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 120%;
}

.phone-mockup-frame {
  border: 0 solid var(--color-ink);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 23vw;
  height: 44.5vw;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.phone-mockup-frame.new {
  width: min(360px, 100%);
  height: auto;
  aspect-ratio: 280 / 542;
}

.feature-title {
  color: var(--color-ink);
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 160%;
}

.feature-title.white {
  color: var(--color-white);
}

.case-section-block-3 {
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.compare-figure {
  opacity: .9;
  width: 100%;
}

.award-logo-grid-2 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-left: 20px;
  padding-right: 20px;
  display: grid;
}

.flow-badge-icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;
}

.impact-image-column {
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  flex-flow: column;
  height: 100%;
  display: flex;
}

.impact-image-column img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}

.flow-avatar {
  width: 90%;
  height: 90%;
  margin-left: auto;
  margin-right: auto;
}

.flow-avatar._2 {
  width: auto;
  height: 100%;
}

.impact-stat-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  display: flex;
}

.impact-gallery-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: #0000;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1.75fr;
  grid-auto-columns: 1fr;
  width: 1008px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  display: grid;
}

.compare-figure {
  opacity: .9;
  width: 100%;
}

.impact-collage-img-3 {
  border-radius: var(--radius-card);
}

.subsection-body {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block;
}

.emoji-card-grid-2 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.context-figure {
  width: 90%;
}

.challenge-section-2 {
  background-color: #0000;
}

.solution-section-x {
  background-color: var(--color-neutral-600);
  flex-flow: column;
  display: flex;
}

.solution-section-x.popup {
  background-color: var(--color-ink);
}

.case-section-block-4 {
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.opportunity-figure, .opportunity-figure, .opportunity-figure {
  border-radius: 10px;
}

.solution-figure {
  border-radius: 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.impact-card-stack {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.impact-figure {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px 20px;
  display: block;
}

.about-row {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 1fr;
  width: 1080px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.about-portrait {
  border-radius: 12px;
  width: 100%;
}

.about-content {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--color-white);
  border-radius: 32px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  padding: 20px 40px;
  display: flex;
}

.about-details {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.5fr;
  grid-auto-columns: 1fr;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  display: grid;
}

.contact-icon {
  width: 24px;
  margin-top: 0;
  margin-left: auto;
}

.contact-item {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1.75fr .25fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.contact-item-row {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
  margin-right: auto;
  display: flex;
}

.contact-item-row-2 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  margin-right: auto;
  display: flex;
}

.contact-item-row-3 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  margin-right: auto;
  display: flex;
}

.about-card-title {
  font-family: var(--font-headings);
  color: var(--color-title);
  margin-bottom: 0;
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 140%;
}

.case-cover {
  background-color: var(--color-neutral-300);
  object-fit: cover;
}

.case-cover.iqs {
  background-color: var(--color-neutral-600);
  width: 110%;
  max-width: 110%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  inset: auto;
}

.legacy-compare-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.legacy-card {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-radius: var(--radius-card);
  background-color: #0000;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  padding: 0;
  display: grid;
}

.context-bg-video {
  z-index: 1;
  border: 1px solid var(--color-outline);
  width: 100%;
  height: 180px;
}

.insight-card-text {
  color: var(--color-neutral-500);
  width: auto;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 160%;
}

.insight-card-text.onwhite {
  color: var(--color-neutral-500);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
}

.context-figure-2 {
  width: auto;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.emoji-card-grid-3 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.div-block-194, .divider-block {
  width: 80%;
}

.solution-section {
  background-color: var(--color-neutral-600);
  flex-flow: column;
  display: flex;
}

.solution-section.bw {
  background-color: var(--color-olive);
}

.solution-section.vw {
  background-color: #3b4f6b;
}

/* subpixel seam guard: fractional layout heights can leave a 1px body-white line
   between the solution band and its neighbor at some zoom levels — paint 1px of
   the band color past both edges (no layout impact) */
.solution-section.bw { box-shadow: 0 1px 0 var(--color-olive), 0 -1px 0 var(--color-olive); }
.solution-section.vw { box-shadow: 0 1px 0 #3b4f6b, 0 -1px 0 #3b4f6b; }

.scroll-container {
  overflow-wrap: normal;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.scroll-content {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: center;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.carousel-slide {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: auto;
  display: flex;
}

.gallery-thumb {
  width: auto;
  display: block;
}

.carousel-caption {
  color: var(--color-white);
  text-align: center;
  width: auto;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
}

.section-heading {
  color: var(--color-ink);
  margin-bottom: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 140%;
}

.section-heading.white {
  color: var(--color-white);
}

.divider-block-2 {
  width: 80%;
}

.wide-bg-video {
  z-index: 1;
  aspect-ratio: 2.2;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.process-figure-3 {
  width: 100%;
}

.emoji-card-grid-4 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.process-figure-callout {
  background-color: var(--color-neutral-500);
  opacity: .7;
  border-radius: 15px;
  width: 100%;
  padding: 10px 20px;
}

.example-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.example-valid-block, .example-invalid-block {
  padding-left: 20px;
}

.menu-draft-figure {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.process-figure-5 {
  width: 20%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.carousel-caption-2 {
  color: var(--color-white);
  text-align: center;
  width: auto;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
}

.option-compare-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.option-column-2 {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.option-column {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.process-figure-4 {
  margin-top: auto;
  margin-bottom: auto;
}

.process-figure-6 {
  width: 100%;
}

.process-figure-7 {
  border-radius: 5px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.impact-card-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.tool-logo-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.process-figure-bordered {
  border: 1px solid var(--color-border-blue);
  border-radius: 10px;
  width: 100%;
}

.carousel-block {
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.carousel-caption-3 {
  color: var(--color-white);
  text-align: center;
  width: auto;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
}

.italic-text {
  font-family: var(--font-body);
  color: var(--color-neutral-500);
  font-weight: 700;
}

.screenshot-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.store-screenshot, .store-screenshot, .store-screenshot, .store-screenshot {
  border: 1px solid var(--color-border-blue);
  border-radius: 6px;
}

.carousel-block-2 {
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.carousel-caption-4 {
  color: var(--color-white);
  text-align: center;
  width: auto;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
}

.process-figure {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 220px;
}

.process-figure-2 {
  padding-bottom: 0;
  padding-right: 100px;
}

.solution-figure-2, .solution-figure-3 {
  padding-left: 145px;
}

.detail-image-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  display: grid;
}

.image-128 {
  width: auto;
}

.impact-card-grid-2 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));   /* 3-up only when each card gets breathing room */
  grid-auto-columns: 1fr;
  display: grid;
}

.project-card-body {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  width: min(1080px, calc(100% - 64px));   /* keep side gutters through the 992-1279 band */
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.project-media-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  height: auto;
  display: grid;
}

.home-card-cover {
  object-fit: cover;
  background-color: var(--color-neutral-500);
  border-radius: 0;
  width: 100%;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.home-card-thumb {
  background-color: var(--color-neutral-500);
  border-radius: 0;
  height: auto;
}

.project-media {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .54fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  display: grid;
}

.heading {
  color: var(--color-neutral-500);
  font-size: var(--text-h2);
  margin-left: 0;
  margin-right: 0;
  font-weight: 400;
  line-height: 120%;
}

.heading.dark {
  color: var(--color-neutral-200);
}

.heading-accent {
  color: var(--color-ink);
  font-weight: 600;
}

.heading-accent.light {
  color: var(--color-white);
}

.project-card-desc {
  width: auto;
  color: var(--color-text);
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 160%;
}

.project-card-desc.light {
  color: var(--color-neutral-200);
  font-weight: 300;
}

.award-logo-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  opacity: .7;
  filter: grayscale();
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 320px;
  margin-left: 0;
  margin-right: auto;
  display: grid;
}

.sharge-video {
  border-top-left-radius: var(--space-card);
  border-top-right-radius: var(--space-card);
  border-bottom-left-radius: var(--space-card);
  border-bottom-right-radius: var(--space-card);
  aspect-ratio: 4 / 3;
  background-color: var(--color-outline);
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.award-badge {
  border-radius: 4px;
  overflow: visible;
  box-shadow: 0 0 3px #0003;
}

.home-card-thumb-2, .home-card-thumb-3 {
  background-color: #0000;
  border-radius: 0;
}

.project-media-feature {
  border-radius: var(--radius-card);
  width: auto;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.award-badge-2 {
  filter: saturate(200%);
  border-radius: 4px;
  box-shadow: 0 0 3px #0003;
}

.award-badge-3, .award-badge-4 {
  border-radius: 4px;
  box-shadow: 0 0 3px #0003;
}

.home-hero-section {
  width: 100%;   /* 100vw includes the classic scrollbar and leaks a white gutter */
  height: 100vh;
  position: static;
}

.project-card-text {
  width: 64%;
  margin-left: 30px;
}

.more-works-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.sharge-feature {
  border-radius: var(--radius-card);
  object-fit: cover;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.sharge-media {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: minmax(0, .54fr) minmax(0, 1fr);
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  display: grid;
}

.work-card-wide, .work-card {
  border-top-left-radius: var(--space-card);
  border-top-right-radius: var(--space-card);
  border-bottom-left-radius: var(--space-card);
  border-bottom-right-radius: var(--space-card);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

.work-card._2 {
  aspect-ratio: 1;
  background-color: #0000;
}

.home-card-thumb-4 {
  object-fit: cover;
  background-color: var(--color-case-neutral);
  border-radius: 0;
  width: auto;
  height: 100%;
  position: static;
  inset: 0%;
}

.project-thumb-caption {
  color: var(--color-white);
  text-shadow: 0 1px 3px #0006;
  background-image: linear-gradient(#0000, #00000080 75%);
  margin: auto 0 -120px;
  padding: 30px 36px 15px;
  font-family: var(--font-body);
  font-size: 36px;
  font-weight: 500;
  line-height: 140%;
  position: absolute;
  inset: auto 0% 0;
}

.project-thumb-caption.small {
  margin-left: 0;
  margin-right: 0;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
  font-weight: 500;
}

.project-thumb-caption.middle {
  background-image: linear-gradient(#0000, #00000080 75%);
  padding: 30px 20px 15px;
  font-size: 24px;
}

.project-thumb-caption.large {
  font-weight: 500;
}

.project-tile-iqs {
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
}

.project-tile-css-bridge {
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
}

.homepic {
  height: 100%;
}

.homepic._3-2 {
  border-radius: var(--radius-card);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.homepic.sharge {
  position: relative;
}

.homepic.vw {
  background-color: #E0EAF3;
}

.homepic.bw {
  background-color: #DCE5CA;
}

.homepic.lp {
  background-color: #EEF2C2;
  display: flex;
}

.case-hero-header {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.hmw-accent {
  color: var(--color-text);
}

.video {
  border-top-left-radius: var(--space-card);
  border-top-right-radius: var(--space-card);
  border-bottom-left-radius: var(--space-card);
  border-bottom-right-radius: var(--space-card);
  aspect-ratio: 16 / 9;
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.video-embed-full {
  aspect-ratio: 16 / 9;
  border-radius: 1vw;
  width: 100%;
  height: 100%;
}

.impact-feature {
  padding: var(--space-card);
  background-color: var(--color-case-sharge-impact);
  border-radius: 40px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.impact-feature.pin {
  background-color: var(--color-neutral-700);
  flex-flow: column;
  display: flex;
}

.section-banner {
  border-radius: var(--radius-card);
}

.impact-cover {
  aspect-ratio: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 1008px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.impact-cover-image-2 {
  border-radius: var(--radius-card);
}

.carousel-block-3, .carousel-block-4 {
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
}

.comparison-slider-embed {
  background-color: var(--color-neutral-500);
  width: 100%;
  height: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.comparison-slider-embed.works {
  width: 452px;
  height: auto;
}

.compare-label-after {
  z-index: 2;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.4vw;
  font-weight: 300;
  line-height: 100%;
  position: absolute;
  top: 1vw;
  left: auto;
  right: 1vw;
}

.compare-label-after.after {
  margin-bottom: 0;
  font-size: 1vw;
  left: 1vw;
  right: auto;
}

.compare-label-after.after._2 {
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 400;
  top: 14px;
  left: 20px;
}

.compare-label-before {
  z-index: 2;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.4vw;
  font-weight: 300;
  line-height: 100%;
  position: absolute;
  top: 1vw;
  left: auto;
  right: 1vw;
}

.compare-label-before.before {
  color: var(--color-neutral-600);
  margin-bottom: 0;
  font-size: 1vw;
}

/* case-page compare frames: the labels are absolute to the image frame — it must be the positioning context */
.impact-cover .homepic._3-2 { position: relative; }
.compare-label-before.before._2 {
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 400;
  top: 14px;
  right: 20px;
}



.nav-links {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  display: flex;
}

.body-2 {
  background-color: var(--color-bg);
}

.case-section-2, .case-section-3 {
  background-color: #0000;
}

.footer-section-4 {
  background-color: var(--color-neutral-600);
}

.footer-section-4.popup {
  background-color: var(--color-ink);
}

.footer-section-5 {
  background-color: #3b4f6b;
  width: auto;
}

.footer-section-6, .footer-section {
  background-color: var(--color-neutral-600);
}

.footer-section-2 {
  background-color: var(--color-olive);
}

.footer-section-3 {
  background-color: var(--color-case-sharge);
}

.about-principle-text {
  color: var(--color-ink);
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
}

.about-principle {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
  display: flex;
}

.dizzy-telegram {
  width: 36px;
  height: 36px;
}

.about-card-header {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.about-principle-icon {
  width: 24px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.principle-emoji {
  font-size: var(--text-lead);
}

.works {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 60px;
  display: flex;
}

.about-section {
  background-color: var(--color-white);
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.works-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  display: grid;
}







.sharge-video-link {
  max-width: 100%;
  height: 100%;
}

.case-cover-2 {
  background-color: var(--color-neutral-600);
}

.case-cover-2.popup {
  background-color: var(--color-title);
}

.persona-quote-row {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: .25fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.context-callout-figure {
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 20px;
}

.competitor-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.competitor-card {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.5fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.competitor-card-caption {
  margin-top: auto;
  margin-right: 20px;
}

.lead-in-2 {
  color: var(--color-white);
  font-weight: 700;
  line-height: 200%;
}

.lead-in-2.onwhite {
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 600;
}

.label-strong {
  font-weight: 600;
}

.insight-card {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: .25fr 2.75fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.lead-in-3 {
  color: var(--color-white);
  font-weight: 700;
  line-height: 200%;
}

.lead-in-3.onwhite {
  color: var(--color-ink);
  font-weight: 600;
}

.insight-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.label-strong, .label-strong, .label-strong {
  font-weight: 600;
}

.insight-thumb {
  opacity: 1;
  width: 20%;
}

.flow-figure, .flow-figure {
  width: 100%;
}

.feature-video-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.phone-bg-video-4 {
  z-index: 1;
  width: 240px;
  height: 482px;
  margin-left: auto;
  margin-right: auto;
}

.phone-bg-video-5, .phone-bg-video {
  z-index: 1;
  width: 240px;
  height: 482px;
  margin-left: auto;
  margin-right: auto;
}

.chart-bg-video {
  border-radius: 10px;
  width: 613.336px;
  height: 400px;
}

.hero-block {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 1080px;
  height: 100%;
  margin: auto;
  display: flex;
}

.hero-copy-column-2 {
  flex-flow: column;
  margin-right: auto;
  display: flex;
}

.hero-cta-row {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  margin-top: 50px;
  margin-right: auto;
  display: flex;
}

.status-pill {
  color: var(--color-neutral-400);
  margin-bottom: 0;
  margin-right: auto;
  padding-left: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}

.status-pill._2 {
  color: var(--color-ink);
  margin-top: 0;
  margin-right: 0;
  font-weight: 700;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: #3ecf8e;
  vertical-align: middle;
}

.hero-inner {
  flex-flow: column;
  height: auto;
  margin-right: auto;
  padding-bottom: 24px;
  display: flex;
  position: static;
}

.main-card {
  background-color: transparent;
  width: 100%;
}

.main-card.cereus {
  background-color: var(--color-case-cereus-bright);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.main-card.sharge {
  background-color: var(--color-case-sharge);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.main-card.jd-power {
  background-color: var(--color-neutral-600);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.main-card.other {
  background-color: #f5f5f5;   /* Accelerating Creation chapter theme — the dynamic backdrop reads this */
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.home-card-cover-2 {
  width: auto;
  height: auto;
  margin: 12% auto;
  display: block;
}

.more-works-link {
  margin-left: auto;
  margin-right: auto;
}

.work-card-link, .work-card-link {
  background-color: #0000;
}

.status-badge {
  background-color: var(--color-white);
  border-radius: 20px;
  width: auto;
  height: auto;
  margin-top: 16px;
  margin-right: 16px;
  padding: 4px 10px;
  position: absolute;
  inset: 0% 0% auto auto;
}

.about-extra {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  margin-top: 0;
  display: flex;
}

.about-extra__k {
  color: var(--color-neutral-500);
  margin-bottom: 10px;
  font-size: .8rem;
}

.about-extra__v {
  font-family: var(--font-headings);
  margin-bottom: 0;
  font-size: .97rem;
  font-weight: 500;
  line-height: 1.5;
}

.about-extra-item {
  margin-bottom: 10px;
}

.home-project-section {
  background-color: var(--surface-page);
  width: 100%;
}

.home-project-section-2 {
  background-color: var(--surface-page);
  width: 100%;
}

.home-project-section-3 {
  background-color: var(--surface-page);
  width: 100%;
}

.about-block {
  background-color: var(--color-bg);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.about-portrait-2 {
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.about-portrait-frame {
  aspect-ratio: auto;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 1280px) {
  .hero-section.one {
    background-color: #0000;
  }

  .container-regular {
    width: 100%;
  }

  .case-meta-block {
    position: relative;
  }

  .video-embed {
    box-sizing: border-box;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    margin: auto;
    display: block;
    position: absolute;
    inset: auto;
  }

  .section-label {
    background-color: #0000;
    margin-right: auto;
    padding: 0 0 0 6px;
    line-height: 120%;
    display: inline-block;
  }

  .subsection-heading {
    padding-right: 20px;
    font-weight: 500;
  }

  .subsection-heading._2 {
    color: var(--color-accent-strong);
    padding-right: 0;
    font-size: 38px;
    font-weight: 600;
  }

  .subsection-heading.white {
    font-weight: 600;
  }

  .case-hero-cover {
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    width: 1080px;
    height: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .case-hero-cover._2 {
    aspect-ratio: 16 / 9;
    width: auto;
    margin-top: 2vw;
    position: relative;
  }

  .case-meta-list {
    padding-left: 0;
  }

  .case-hero.sharge {
    flex-flow: column;
    width: 100%;
    display: flex;
  }

  .space-2._120 {
    width: 120px;
    height: 120px;
  }

  .space-2._30 {
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
  }

  .case-meta-layout {
    grid-template-columns: .5fr 1fr;
  }

  .card-emoji {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }

  .emoji-card.card, .emoji-card.card._2 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .emoji-card.card.white {
    background-color: var(--color-white);
  }

  .card-label {
    margin-bottom: 6px;
  }

  .space-3._100 {
    margin-left: auto;
    margin-right: auto;
  }

  .space-3._6 {
    width: 6px;
    height: 6px;
    margin-left: auto;
    margin-right: auto;
  }

  .space-3._16 {
    width: 16px;
    height: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .impact-collage-img {
    border-radius: 24px;
  }

  .step-emoji, .step-emoji.num {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }

  .impact-collage-img-2, .impact-collage-img-3 {
    border-radius: 24px;
  }

  .about-content {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .legacy-compare-grid {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .legacy-card {
    background-color: #0000;
    padding: 0;
  }

  .solution-section {
    background-color: var(--color-neutral-600);
  }

  .carousel-caption {
    font-size: 14px;
    font-weight: 400;
  }

  .section-heading {
    color: var(--color-white);
    margin-bottom: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 140%;
  }

  .divider-block-2 {
    width: 80%;
  }

  .wide-bg-video {
    aspect-ratio: 2.2;
    width: 100%;
    height: auto;
  }

  .process-figure-3 {
    width: 100%;
  }

  .heading-accent-blue, .heading-accent-blue {
    color: var(--color-accent-strong);
  }

  .emoji-card-grid-4 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .process-figure-callout {
    background-color: #0000;
    width: 100%;
  }

  .example-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .inline-status {
    color: var(--color-white);
    font-size: 16px;
  }

  .example-valid-block {
    margin-right: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .example-invalid-block {
    padding-left: 20px;
    padding-right: 20px;
  }

  .process-figure-5 {
    width: 20%;
  }

  .carousel-caption-2 {
    font-size: 14px;
    font-weight: 400;
  }

  .option-compare-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .option-column-2 {
    border-radius: var(--radius-card);
    background-color: var(--color-neutral-500);
    padding: 20px;
  }

  .option-column {
    background-color: var(--color-neutral-500);
    border-radius: 20px;
    padding: 20px;
  }

  .process-figure-6 {
    background-color: #0000;
    border-radius: 0;
    width: 100%;
    padding: 0;
  }

  .process-figure-8 {
    background-color: #0000;
    border-radius: 0;
    padding: 0;
  }

  .process-figure-7 {
    width: 68%;
  }

  .impact-card-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .project-card-body {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    width: 1080px;
    display: grid;
  }

  .project-media-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .home-card-cover, .home-card-thumb {
    border-radius: var(--radius-card);
  }

  .project-media {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-columns: 1fr .54fr;
    width: auto;
  }

  .heading {
    font-size: var(--text-h2);
    line-height: 120%;
  }

  .project-card-desc {
    color: var(--color-neutral-500);
    margin-left: 0;
    margin-right: 0;
    font-size: 16px;
    font-weight: 400;
  }

  .project-card-desc.light {
    color: var(--color-neutral-200);
    font-size: 16px;
    font-weight: 300;
  }

  .award-logo-grid {
    grid-auto-columns: 1fr;
  }

  .sharge-video {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
    aspect-ratio: 4 / 3;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    display: flex;
    position: relative;
  }

  .home-card-thumb-2, .home-card-thumb-3 {
    object-fit: cover;
    background-color: #0000;
    width: auto;
    height: 100%;
    margin: auto;
  }

  .project-media-feature {
    box-shadow: none;
  }

  .project-card-subtitle {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .project-card-text {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .sharge-media-column {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    display: flex;
  }

  .work-card-wide {
    object-fit: cover;
    aspect-ratio: 1;
  }

  .work-card {
    aspect-ratio: 1;
  }

  .work-card._2 {
    box-shadow: none;
    aspect-ratio: 1;
  }

  .hero-accent {
    letter-spacing: .08px;
  }

  .hero-word {
    letter-spacing: .08vw;
  }

  .hero-fade-overlay {
    background-image: linear-gradient(#f5f5f500, var(--color-bg) 100%, var(--color-bg));
  }

  .hero-copy-column.home-top.re._2 {
    opacity: 0;
  }

  .project-thumb-caption {
    margin-bottom: -120px;
  }

  .project-thumb-caption.middle {
    font-size: 20px;
  }

  .project-tile-iqs, .project-tile-css-bridge {
    box-shadow: none;
  }

  .homepic {
    display: flex;
  }

  .homepic.vw {
    background-color: #E0EAF3;
  }

  .homepic.bw {
    background-color: #DCE5CA;
  }

  .homepic.lp {
    background-color: #EEF2C2;
  }

  .impact-cover-image {
    width: 1080px;
  }

  .case-hero-header {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    width: var(--w-content);
    margin-left: auto;
    margin-right: auto;
  }

  .video {
    width: var(--w-content);
  }

  .works {
    width: 100%;
  }



  .sharge-video-link {
    height: auto;
  }

  .main-card.other {
    background-color: #f5f5f5;   /* keep in sync with the base rule */
    flex-flow: column;
    display: flex;
  }

  .home-card-cover-2 {
    width: auto;
    height: auto;
    margin: 12% auto;
  }

  .more-works-link {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: var(--color-button);
    opacity: .83;
  }

  .button.secondary:hover {
    border-style: solid;
    border-color: var(--color-neutral-200);
    background-color: #ffffff12;
  }

  .button.two:hover {
    background-color: var(--color-icon);
    box-shadow: none;
  }


}

@media screen and (max-width: 991px) {
  body {
    --space-section: 64px;
    --text-subhead-lg: 18px;
    --space-container: 0px;
    --space-card: 24px;
    --radius-card: 20px;
  }

  img {
    border-radius: 15px;
  }

  .paragraph-large.align-center {
    --space-section: 64px;
    --text-subhead-lg: 18px;
    --space-container: 0px;
    --space-card: 24px;
    --radius-card: 20px;
    width: 80%;
  }

  .paragraph-large.align-left {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .navbar {
    inset: 0% 0% auto;
  }

  .paragraph-regular {
    width: 100%;
    font-size: var(--text-body);
    text-align: left;
  }

  .works-gallery-section {
    padding: 64px var(--space-section);
  }

  .button-holder {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    padding: 10px;
  }

  .rich-text h3 {
    font-size: var(--text-h4);
    --space-section: 64px;
    --text-subhead-lg: 18px;
    --space-container: 0px;
    --space-card: 24px;
    --radius-card: 20px;
  }

  .rich-text h5, .rich-text h6 {
    font-size: var(--text-h5);
    --space-section: 64px;
    --text-subhead-lg: 18px;
    --space-container: 0px;
    --space-card: 24px;
    --radius-card: 20px;
  }

  .rich-text p, .rich-text blockquote {
    --space-section: 64px;
    --text-subhead-lg: 18px;
    --space-container: 0px;
    --space-card: 24px;
    --radius-card: 20px;
  }

  .sub-heading-regular {
    --space-section: 64px;
    --text-subhead-lg: 18px;
    --space-container: 0px;
    --space-card: 24px;
    --radius-card: 20px;
    justify-content: flex-start;
    align-items: center;
  }

  .works-column {
    font-size: var(--text-h2);
    text-align: center;
    align-self: center;
  }

  .works-column.align-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .heading-style-h1 {
    width: auto;
    font-size: var(--text-h1);
  }

  .heading-style-h1.align-center {
    line-height: 50px;
  }

  .heading-style-h2 {
    width: auto;
  }

  .heading-style-h2.align-center {
    width: 90%;
  }

  .heading-style-h3 {
    width: 100%;
  }

  .container-medium {
    grid-row-gap: 30px;
    --space-section: 64px;
    --text-subhead-lg: 18px;
    --space-container: 0px;
    --space-card: 24px;
    --radius-card: 20px;
  }

  .container-medium.hero {
    margin-top: 60px;
  }

  .padding-global {
    --space-section: 64px;
    --text-subhead-lg: 18px;
    --space-container: 0px;
    --space-card: 24px;
    --radius-card: 20px;
  }

  .grid-color {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
  }

  .hero-section {
    padding: 50px 64px;
    margin-top: 0;
  }

  .button {
    font-size: 14px;
  }

  .container-regular {
    width: 100%;
    max-width: 500px;
  }

  .card.project {
    padding-bottom: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .card.contact {
    width: 100%;
  }

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

  .grid.project {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
  }

  .grid.hero {
    grid-template-columns: .5fr;
    place-items: start center;
    display: flex;
  }

  .grid.contact {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .buttom-footer {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: row;
  }



  .wrapper.footer {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .cta {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .case-meta-block._2 {
    width: 800px;
  }

  .hero-badge {
    border-radius: 0;
  }

  .case-hero-cover {
    width: 860px;
    height: auto;
  }

  .space-2._40 {
    width: 20px;
    height: 20px;
  }

  .subsection-grid {
    grid-template-columns: 1fr;
    width: 800px;
  }

  .case-section-block {
    width: 800px;
  }

  .space-3._20 {
    width: 40px;
    height: 40px;
  }

  .space-3._200 {
    width: 100px;
    height: 100px;
  }

  .feature-column {
    width: auto;
  }

  .case-section-block-2, .case-section-block-3 {
    width: 800px;
  }

  .impact-image-column {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .impact-gallery-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    width: 840px;
  }

  .subsection-body {
    width: 100%;
  }

  .case-section-block-4 {
    width: 800px;
  }

  .impact-figure {
    margin-right: auto;
  }

  .about-row {
    grid-template-columns: 1fr;
    width: 600px;
  }

  .about-portrait-frame {
    aspect-ratio: 1024 / 1536;
  }

  .about-card-title {
    font-size: 28px;
  }

  .case-cover {
    border-radius: 0;
  }

  .context-bg-video {
    width: 100%;
    height: 25vw;
  }

  .wide-bg-video {
    width: 100%;
    height: 41vw;
  }

  .process-figure-5, .process-figure-4, .process-figure-8 {
    border-radius: 0;
  }

  .carousel-block, .carousel-block-2 {
    max-width: 80vw;
  }

  .process-figure, .process-figure-2 {
    border-radius: 0;
  }

  .project-card-body {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: 600px;
  }

  .award-logo-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .home-card-thumb-4 {
    vertical-align: baseline;
    width: auto;
    display: inline-block;
  }

  .hero-subtext {
    font-size: 1.6vw;
  }

  .hero-headline {
    font-size: 7vw;
  }

  .hero-copy-column {
    width: 70vw;
  }

  .hero-copy-column.home-top {
    width: 100%;
  }

  .project-thumb-caption {
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .impact-cover-image {
    border-radius: 0;
  }

  .case-hero-header {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 4vw, 32px);
    padding-right: clamp(20px, 4vw, 32px);
    box-sizing: border-box;
  }

  .video {
    width: 860px;
  }

  .section-banner {
    border-radius: 10px;
  }

  .impact-cover {
    width: 860px;
  }

  .impact-cover-image-2 {
    width: 100%;
  }

  .carousel-block-4 {
    width: 800px;
  }

  .about-principle-text {
    font-size: 14px;
  }


  .image-225, .image-226, .image-227, .image-228, .image-229, .image-230 {
    border-radius: 0;
  }

  .competitor-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .hero-block {
    width: 830px;
  }

  .hero-title {
    font-size: 60px;
  }
}

@media screen and (max-width: 767px) {
  body {
    --space-section: 0px;
    --text-subhead-lg: 18px;
    --space-container: 14px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  img {
    border-radius: 15px;
  }

  blockquote {
    font-size: 14px;
  }

  .paragraph-large {
    font-size: var(--text-caption);
    justify-content: center;
    align-self: center;
    align-items: center;
    display: block;
  }

  .paragraph-large.align-center {
    --space-section: 0px;
    --text-subhead-lg: 18px;
    --space-container: 14px;
    --space-card: 12px;
    --radius-card: 12px;
    width: 80%;
  }

  .paragraph-large.align-left {
    text-align: left;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .navbar-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .paragraph-regular {
    width: 100%;
    font-size: var(--text-body);
    text-align: left;
    align-self: center;
  }

  .works-gallery-section {
    padding: 24px var(--space-section);
  }

  .footer {
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .style-guide-wrapper {
    flex-flow: column;
  }

  .rich-text h1 {
    line-height: 40px;
  }

  .rich-text h3 {
    font-size: var(--text-h3);
  }

  .rich-text h6 {
    font-size: var(--text-h6);
  }

  .rich-text p {
    font-size: var(--text-caption);
  }

  .sub-heading-regular {
    --space-section: 0px;
    --text-subhead-lg: 18px;
    --space-container: 14px;
    --space-card: 12px;
    --radius-card: 12px;
    font-size: 17px;
  }

  .paragraph-small.footer {
    pointer-events: auto;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }

  .works-column {
    font-size: var(--text-h2);
  }

  .works-column.align-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .heading-style-h1 {
    font-size: var(--text-h1);
  }

  .heading-style-h1.align-center {
    line-height: 34px;
  }

  .heading-style-h1.align-left {
    line-height: 32px;
  }

  .heading-style-h2 {
    width: auto;
  }

  .heading-style-h2.align-center {
    width: 90%;
    line-height: 30px;
  }

  .container-medium {
    grid-row-gap: 20px;
    --space-section: 0px;
    --text-subhead-lg: 18px;
    --space-container: 14px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .padding-global {
    --space-section: 0px;
    --text-subhead-lg: 18px;
    --space-container: 14px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .hero-section {
    padding-right: 0px;
    padding-left: 0px;
  }

  .button.two {
    margin-left: 0;
  }

  .container-regular {
    width: 100%;
  }




  
  .card.content {
    padding: 24px;
  }

  .card.testimonials {
    padding-bottom: 24px;
  }

  .grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
  }

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

  .menu-footer {
    justify-content: flex-end;
    align-items: center;
    width: auto;
  }

  .buttom-footer {
    flex-flow: row;
  }

  .navbar-bar {
    justify-content: space-between;
    align-items: center;
  }


  .cta {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .body {
    flex-flow: column;
    display: flex;
  }

  .case-meta-block._2 {
    width: 600px;
  }

  .case-hero-cover {
    width: 680px;
  }

  .subsection-grid {
    width: 600px;
  }

  .stat-grid._5 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .stat-grid._3 {
    grid-template-columns: 1fr 1fr;
  }

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

  .case-section-block {
    width: 600px;
  }

  .space-3._60 {
    width: 30px;
    height: 30px;
  }

  .space-3._100 {
    width: 40px;
    height: 40px;
  }

  .compare-figure {
    border-radius: 6px;
  }

  .process-compare-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .process-image-grid-3 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .process-compare-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

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

  .process-image-grid-4 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .compare-figure {
    border-radius: 6px;
  }

  .painpoint-row {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .case-section-block-2 {
    width: 600px;
  }

  .flow-step-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .compare-text-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .process-image-grid-2 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .compare-figure-final {
    border-radius: 6px;
  }

  .process-compare-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .phone-mockup-frame {
    width: 46vw;
    height: 89vw;
  }

  .case-section-block-3 {
    width: 600px;
  }

  .process-compare-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .compare-figure {
    border-radius: 6px;
  }

  .award-logo-grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 40px;
    padding-right: 40px;
  }

  .impact-image-column {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .impact-stat-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .impact-gallery-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    width: 640px;
  }

  .compare-figure {
    border-radius: 6px;
  }

  .emoji-card-grid-2 {
    grid-template-columns: 1fr;
  }

  .case-section-block-4 {
    width: 600px;
  }

  .impact-card-stack {
    grid-template-columns: 1fr;
  }

  .impact-figure {
    margin-right: auto;
  }

  .about-row {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: 480px;
  }

  .about-portrait {
    width: 100%;
  }

  .about-card-title {
    font-size: 16px;
  }

  .legacy-compare-grid {
    grid-template-columns: 1fr;
  }

  .context-bg-video {
    margin-top: auto;
    margin-bottom: auto;
  }

  .insight-card-text {
    font-size: 14px;
  }

  .emoji-card-grid-3 {
    grid-template-columns: 1fr;
  }

  .process-figure-6 {
    border-radius: 0;
  }

  .tool-logo-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .project-card-body {
    width: 480px;
  }

  .project-media-grid {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    height: auto;
  }

  .home-card-thumb {
    height: auto;
  }

  .project-media {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: 480px;
  }

  .more-works-grid {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    width: auto;
  }

  .sharge-media {
    width: 100%;
  }

  .hero-subtext {
    width: auto;
    font-size: 1.6vw;
  }

  .hero-headline {
    font-size: 7vw;
  }

  .hero-copy-column {
    width: 90vw;
  }

  .project-thumb-caption {
    margin-bottom: 0;
    padding: 6px 10px;
    font-size: 14px;
  }

  .project-thumb-caption.small {
    padding-bottom: 6px;
    font-size: 14px;
  }

  .project-thumb-caption.middle {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 14px;
  }

  .homepic._3-2 {
    aspect-ratio: 3 / 2;
  }

  .homepic.sharge {
    width: auto;
  }

  .impact-cover-image {
    border-radius: 0;
  }

  .case-hero-header {
    width: 100%;
    max-width: 600px;
  }

  .video {
    width: 680px;
  }

  .impact-feature {
    padding: 24px;
  }

  .impact-cover {
    width: 640px;
  }

  .impact-cover-image-2 {
    width: auto;
  }

  .carousel-block-4 {
    width: 600px;
  }

  .comparison-slider-embed {
    height: auto;
  }

  .about-principle-text {
    font-size: 12px;
  }

  .about-principle {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .dizzy-telegram {
    width: 20px;
    height: 20px;
  }

  .about-card-header {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .about-principle-icon {
    width: 24px;
  }

  .works {
    width: 100%;
  }

  .image-202, .image-203, .image-204, .compare-figure-final-2, .image-206, .image-207, .image-208 {
    border-radius: 6px;
  }

  .image-209, .image-210, .image-211, .image-212, .image-213, .flow-step-figure, .flow-step-figure, .flow-step-figure, .flow-step-figure, .flow-step-figure, .flow-step-figure, .flow-step-figure, .flow-step-figure, .flow-step-figure, .flow-step-figure, .flow-step-figure {
    border-radius: 0;
  }

  .competitor-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .hero-block {
    width: 480px;
  }

  .hero-title {
    font-size: 48px;
  }
}

@media screen and (max-width: 479px) {
  body, h1 {
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  img {
    border-radius: 15px;
  }

  blockquote {
    font-size: 12px;
  }

  .paragraph-large {
    width: 100%;
    font-size: var(--text-caption);
    text-align: left;
  }

  .paragraph-large.align-center {
    width: 100%;
    font-size: var(--text-lg);
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
    line-height: 20px;
  }

  .paragraph-large.align-left {
    text-align: left;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
  }

  .utility-page-wrapper {
    padding-top: 140px;
    padding-bottom: 100px;
  }

  .utility-page-content {
    left: 0;
    right: 0;
  }

  .paragraph-regular {
    width: 100%;
    font-size: var(--text-body);
    text-align: left;
    line-height: 16px;
  }

  .paragraph-regular.align-left {
    font-size: var(--text-body);
    line-height: 22px;
  }

  .works-gallery-section {
    padding: 20px var(--space-section);
  }

  .footer {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .style-guide-wrapper {
    flex-flow: column;
    padding: 0;
  }

  .button-block-grid {
    grid-template-columns: 1fr;
  }

  .rich-text h1 {
    line-height: 30px;
  }

  .rich-text p {
    font-size: var(--text-caption);
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .sub-heading-large {
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .sub-heading-regular {
    text-align: left;
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
    font-size: 16px;
  }

  .sub-heading-small {
    text-align: left;
  }

  .styleguide-subheading {
    padding: 8px;
  }

  .works-column.align-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .heading-style-h1 {
    font-size: var(--text-h1);
  }

  .heading-style-h1.align-center {
    width: 100%;
    line-height: 30px;
  }

  .heading-style-h2 {
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .heading-style-h2.align-center {
    width: 100%;
    line-height: 30px;
  }

  .heading-style-h3, .heading-style-h4, .heading-style-h5, .heading-style-h6 {
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .container-medium {
    padding-left: var(--space-container);
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .container-medium.hero {
    grid-row-gap: 24px;
    margin-top: 60px;
  }

  .padding-global {
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .typhography-block-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .block-title {
    --space-section: 0px;
    --text-subhead-lg: 16px;
    --space-container: 10px;
    --space-card: 12px;
    --radius-card: 12px;
  }

  .grid-color {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .hero-section {
    padding-top: 50px;
    padding-right: 0px;
    padding-left: 0px;
  }

  .button {
    width: auto;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }

  .button.two {
    margin-left: 0;
  }

  .container-regular {
    width: 100%;
  }



  .tittle-badge {
    width: auto;
  }

  .card.content {
    padding: 24px;
  }

  .card.contact {
    border-radius: 14px;
    padding: 12px;
  }

  .grid {
    grid-column-gap: 20px;
    grid-template-columns: 1fr;
    padding: 0;
  }

  .grid.project {
    grid-template-columns: 2fr;
  }

  .menu-footer {
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .buttom-footer {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    border-radius: 24px;
    flex-flow: wrap;
    justify-content: center;
    align-self: auto;
    align-items: center;
  }

  .navbar-bar {
    padding: 4px 8px;
  }


  .logo {
    width: 40px;
    height: 40px;
  }

  .logo {
    width: 24px;
    height: auto;
    font-size: 18px;
  }

  .wrapper {
    border-radius: 14px;
    padding: 12px;
  }

  .wrapper.content {
    border-radius: 40px;
    padding: 8px;
  }

  .wrapper.footer {
    padding: 0;
  }

  .title-badge {
    width: auto;
  }

  .card-two.contact {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: row;
  }

  .element-effect {
    width: 186px;
  }

  .cta {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 50px 12px;
  }


  .case-meta-block._2 {
    width: 360px;
  }

  .case-title {
    font-size: 24px;
    line-height: 30px;
  }

  .subsection-heading._2 {
    font-size: 30px;
  }

  .hero-badge {
    border-radius: 6px;
  }

  .case-hero-cover {
    width: 400px;
  }

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

  .case-meta-layout {
    grid-template-columns: 1fr;
  }

  .subsection-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hmw-title {
    font-size: 24px;
  }

  .case-section-block {
    width: 360px;
  }

  .space-3._60 {
    width: 40px;
    height: 40px;
  }

  .subsection-grid-2 {
    grid-template-columns: 1fr;
  }

  .case-section-block-2 {
    width: 340px;
  }

  .case-section-block-3 {
    width: 360px;
  }

  .award-logo-grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 40px;
    padding-right: 40px;
  }

  .impact-image-column {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .impact-gallery-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    width: 360px;
  }

  .subsection-body {
    width: 100%;
  }

  .emoji-card-grid-2 {
    grid-template-columns: 1fr;
  }

  .context-figure {
    width: 100%;
  }

  .case-section-block-4 {
    width: 320px;
  }

  .impact-figure {
    margin-right: auto;
  }

  .about-row {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: 360px;
  }

  .about-card-title {
    font-size: 16px;
  }

  .context-bg-video {
    height: 50vw;
  }

  .context-figure-2 {
    width: 80%;
    margin-top: auto;
    margin-bottom: auto;
  }

  .scroll-content {
    height: 60%;
  }

  .carousel-caption {
    font-size: 14px;
  }

  .gallery-thumb-2 {
    max-width: 100%;
  }

  .section-heading.white {
    font-size: 20px;
  }

  .process-figure-callout {
    width: 100%;
  }

  .process-figure-5 {
    width: 30%;
  }

  .carousel-caption-2 {
    font-size: 14px;
  }

  .option-compare-grid {
    grid-template-columns: 1.5fr;
  }

  .impact-card-grid {
    grid-template-columns: 1fr;
  }

  .carousel-caption-3 {
    font-size: 14px;
  }

  .carousel-caption-4 {
    font-size: 14px;
  }

  .process-figure {
    padding-bottom: 0;
  }

  .detail-image-grid, .impact-card-grid-2 {
    grid-template-columns: 1fr;
  }

  .project-card-body {
    width: 360px;
  }

  .project-media-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    height: auto;
  }

  .project-media {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: 360px;
  }

  .sharge-media-column {
    width: 360px;
  }

  .more-works-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    width: auto;
  }

  .sharge-feature {
    width: 125px;
  }

  .sharge-media {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    width: 100%;
  }

  .home-card-thumb-4 {
    margin-left: auto;
    margin-right: auto;
    inset: auto 0% 0%;
  }

  .hero-subtext {
    line-height: 280%;
  }

  .hero-headline {
    line-height: 200%;
  }

  .project-thumb-caption {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
  }

  .project-thumb-caption.small {
    padding-bottom: 6px;
    font-size: 12px;
  }

  .project-thumb-caption.middle {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
  }

  .homepic.sharge {
    justify-content: center;
    align-items: center;
    display: block;
  }

  .case-hero-header {
    width: 100%;
    max-width: 360px;
  }

  .video {
    width: 400px;
  }

  .impact-feature {
    border-radius: 20px;
    padding: 12px;
  }

  .impact-cover, .carousel-block-3, .carousel-block-4 {
    width: 360px;
  }

  .about-principle-text {
    font-size: 12px;
  }

  .about-principle {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .dizzy-telegram {
    width: 20px;
    height: 20px;
  }

  .about-card-header {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .about-principle-icon {
    width: 24px;
  }

  .principle-emoji {
    font-size: 14px;
  }



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

  .competitor-card {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1.75fr;
  }

  .insight-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .feature-video-grid {
    grid-template-columns: 1fr;
  }

  .hero-block {
    width: 360px;
  }

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

  .hero-subtitle {
    width: 360px;
    font-size: 12px;
  }

  .hero-copy-column-2 {
    width: 360px;
  }
}

#w-node-_026cb23d-bb96-053e-c7bc-697058efc562-004cf5d1 {
  align-self: center;
}

#w-node-be914918-d7fa-7255-4ea0-73eb1a6b123e-004cf5d1, #w-node-c05cdf6d-5ad0-f97c-b4fa-840f0760e2c8-004cf5d1, #w-node-e8031c3e-3bde-83ac-523e-5bd48a17181b-004cf5d1, #w-node-e0265b82-233d-7a7c-888e-90acf7f84fd2-004cf5d1, #w-node-f51fee5d-ade9-a4dc-ceca-fa6fc4e85a07-004cf5d1, #w-node-_2bb8e65c-6c85-0e2a-d0e5-5474092cb169-004cf5d1, #w-node-_49b595ff-6bf6-cbb8-7f36-f1439c975d69-004cf5d1, #w-node-a94be68e-18f0-cbd4-ba71-f5454e033bdf-004cf5d1, #w-node-da6e4059-3f71-e26f-2d22-bd50328151cb-004cf5d1, #w-node-_1569fb26-2d04-8edb-8154-f4404b45fd75-004cf5d1, #w-node-_04b45b64-47ee-c2e6-172d-9e595aa40ea3-004cf5d1, #w-node-_3a46ef67-b2ab-97c8-cbd4-5215caef4e93-004cf5d1, #w-node-_8ef4fe25-7f23-9cf2-3e82-d2753e07ffb6-004cf5d1 {
  place-self: center start;
}

#w-node-_4171b845-16e1-8ac8-e415-865558b4fd11-c2f7ab1d, #w-node-_4171b845-16e1-8ac8-e415-865558b4fd1d-c2f7ab1d {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

/* de-webflow: 4 sharge feature-column cells (place-self: auto center) -> semantic class */
.feature-column--center {
  place-self: auto center;
}

@media screen and (max-width: 767px) {
  #w-node-_04b45b64-47ee-c2e6-172d-9e595aa40ea0-004cf5d1 {
    place-self: auto;
  }
}

/* ===== hoisted from per-page inline <style> (deduped) ===== */
body { overflow-x: hidden; }
*:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 2px; }
/* ============== img-comparison-slider (原样保留) ============== */
.comparison-container { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; }
.w-embed { display: flex !important; justify-content: center !important; align-items: center !important; }
img-comparison-slider {
  margin: 0 auto !important; display: block !important;
  width: 100% !important; height: auto !important;
  max-width: none !important; max-height: none !important;
  min-width: 0 !important; min-height: 0 !important;
}
img-comparison-slider img {
  width: 100% !important; height: auto !important;
  max-width: none !important; max-height: none !important;
  min-width: 0 !important; min-height: 0 !important;
  object-fit: cover !important;
}
img-comparison-slider .divider { background-color: var(--color-accent) !important; width: 2px !important; }
img-comparison-slider .handle { background-color: var(--color-accent) !important; border: 3px solid var(--color-accent) !important; width: 44px !important; height: 44px !important; }
img-comparison-slider .default-handle { width: 64px !important; opacity: 1 !important; transition: all 1s !important; }
img-comparison-slider .handle svg { width: 18px !important; height: 14px !important; transform: scale(2.0) !important; }
[data-wf-bgvideo-fallback-img] {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-wf-bgvideo-fallback-img] {
      position: absolute;
      z-index: -100;
      display: inline-block;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

/* ============================================================
   RESPONSIVE LAYER
   Desktop (>=1200px) = original Webflow design, untouched.
   The build is fixed-width (1080px content / 1200px page); below
   1200px every container is made fluid + gutter'd to adapt to
   tablets and phones.
   ============================================================ */
@media screen and (max-width: 1199px) {
  html, body { overflow-x: hidden; }

  /* release the 1200px page-width lock + the fixed-width navbar */
  .navbar, .navbar-inner, .navbar-container { width: 100%; max-width: 100vw; min-width: 0; }
  /* keep the nav pill compact + centered (like desktop), not stretched full-width */
  .navbar-bar { width: auto; max-width: 100%; margin-left: auto; margin-right: auto; }

  /* fixed-px containers/blocks/grids -> fluid (max-width only caps, never enlarges) */
  .container, [class*="container"],
  [class*="-block"], [class*="-inner"], [class*="-section"], [class*="-cover"],
  [class*="-wrap"], [class*="-grid"], [class*="-row"], [class*="-media"],
  [class*="-card"], [class*="-column"], [class*="-feature"], [class*="-gallery"],
  [class*="-caption"], [class*="-thumb"], [class*="-frame"],
  .homepic {
    max-width: 100%;
    min-width: 0;
  }

  /* page gutter so content never touches the screen edges
     (full-bleed section backgrounds remain edge-to-edge) */
  .home-hero-section, .about-section,
  .container-regular, .container-medium, .container-large,
  .case-section-block, .case-meta-block {
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
  }
}

/* phones: collapse multi-column grids, scale hero, drop dead lottie */
@media screen and (max-width: 767px) {
  [class*="-grid"] { grid-template-columns: 1fr !important; }
  .award-logo-grid { grid-template-columns: repeat(3, 1fr) !important; width: 180px; }
  .project-card-text { width: 100%; margin-left: 0; }
  .tool-logo-grid, .screenshot-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* media never overflows its container */
img, video, svg, iframe { max-width: 100%; }

/* ---- type: unified weights + unitless line-heights ---- */
h1, h2, h3, h4, h5, h6, .heading, .case-title, .subsection-heading, .hmw-title { font-weight: 600; }
h1, .case-title { line-height: 1.1; }
h2, .heading { line-height: 1.15; }
h3, .subsection-heading { line-height: 1.2; }
h4, h5, h6 { line-height: 1.25; }
.heading-accent, strong, b { font-weight: 700; }
/* body text: one weight (400) at all sizes — removes the 300->400 breakpoint flip */
.paragraph, .body-text, .project-card-desc, [class^="paragraph-"], p, li { font-weight: 400; }

/* ============================================================
   SPACING SYSTEM — fluid section rhythm
   Replaces the ad-hoc per-breakpoint spacer steps with one
   smooth scale (airy, capped 128). Small gaps (<=_40) untouched.
   ============================================================ */
.space-3._200, .space-2._200 { height: clamp(72px, 12vw, 240px); }
.space-3._160, .space-2._160 { height: clamp(64px, 9.6vw, 212px); }
.space-3._120, .space-2._120 { height: clamp(56px, 7.2vw, 170px); }
.space-3._100, .space-2._100 { height: clamp(48px, 6vw, 150px); }
.space-3._80,  .space-2._80  { height: clamp(40px, 4.8vw, 124px); }
.space-3._60,  .space-2._60  { height: clamp(32px, 3.6vw, 92px); }

/* ============================================================
   CARD TITLES — adaptive to each card's OWN width (container query)
   Font-size AND padding (scrim band) scale with the card via cqi,
   so a narrow card gets a small title + tight scrim automatically
   at any viewport. z-index keeps the title above the thumbnail.
   ============================================================ */
.project-media-feature, .sharge-feature, .project-tile-iqs, .project-tile-css-bridge,
.work-card, .work-card-wide, .project-tile, .home-card-cover, .home-card-thumb {
  container-type: inline-size;
}
.project-thumb-caption,
.project-thumb-caption.small, .project-thumb-caption.middle, .project-thumb-caption.large {
  font-size: clamp(14px, 4.5cqi, 32px);
  line-height: 1.15;
  padding: clamp(20px, 8cqi, 40px) clamp(14px, 4.5cqi, 28px) clamp(10px, 3cqi, 16px);
  z-index: 2;
  background-image: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.34) 55%, rgba(0,0,0,0));
}

/* ============================================================
   TABLET (768-991) CARD ARRANGEMENTS
   At this width the desktop column counts get cramped, so reflow:
   feature card full-width with the two small cards side-by-side,
   and the 3 showcase cards stacked full-width.
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .project-media      { grid-template-columns: 1fr; }       /* PIN+ feature full-width, small cards below */
  .project-media-grid { grid-template-columns: 1fr 1fr; }   /* IQS + CSS Bridge side by side */
  .more-works-grid    { grid-template-columns: 1fr; }       /* 3 showcase cards full-width, stacked */
}

/* contact + education: stack to one column on small screens (2-col squeezes the
   education column to ~83px / one word per line in the narrow about card) */
@media screen and (max-width: 991px) {
  .about-details { grid-template-columns: 1fr; }
}

/* ============================================================
   CARD IMAGES — scale by aspect-ratio (were fixed 561px / 0px,
   causing weird near-square covers + collapsed thumbs at tablet)
   ============================================================ */
.home-card-cover {
  aspect-ratio: 4 / 3;   /* matches the cover's natural 748x561 -> no crop */
  width: 100%; height: auto; object-fit: cover;
}
.home-card-thumb, .home-card-thumb-2, .home-card-thumb-3 {
  aspect-ratio: 3 / 2;   /* matches the desktop thumb 373x249 */
  width: 100%; height: auto; object-fit: cover;
}

/* (retired 2026-07-21: About now inks itself in the About-goes-INK block below) */

/* ============================================================
   SPACING UTILITIES — replace empty Webflow spacer divs
   (<div class="space-3 _N"></div>) with real CSS spacing.
   Padding (never margin) so it cannot margin-collapse and is
   identical in flex / grid / block flow. Values mirror the
   existing .space-3._N scale EXACTLY (incl. the fluid clamp
   rhythm at L7152-7157 and the "small gaps untouched" px steps),
   so output is pixel-identical at every breakpoint.
   Convention: spacer BEFORE an element -> .pt-N on that element;
   trailing spacer (last child) -> .pb-N on the preceding element.
   NOTE: the -N suffix is the ORIGINAL spacer label (e.g. .space-3 _20),
   NOT the px value. Real heights are taken from the .space-* rules incl.
   the cascade winners: the global fluid clamp block (L7152-7157) overrides
   the earlier @media steps for _60/_80/_100/_120/_160/_200, so those are
   the SAME clamp at every breakpoint. Quirks mirrored exactly:
     _20  -> 40px  (.space-3._20 base is height:40px, not 20px)
     _40  -> 40px desktop, 20px at <=991  (.space-2._40 @media override)
   ============================================================ */
.pt-10  { padding-top: 10px; }
.pb-10  { padding-bottom: 10px; }
.pt-16  { padding-top: 16px; }
.pt-20  { padding-top: 40px; }   /* _20 label = 40px */
.pb-20  { padding-bottom: 40px; }
.pt-30  { padding-top: 30px; }
.pb-30  { padding-bottom: 30px; }
.pt-40  { padding-top: 40px; }   /* space-2 _40 */
.pb-40  { padding-bottom: 40px; }
.pt-60  { padding-top: clamp(32px, 3.6vw, 92px); }
.pb-60  { padding-bottom: clamp(32px, 3.6vw, 92px); }
.pt-80  { padding-top: clamp(40px, 4.8vw, 124px); }
.pb-80  { padding-bottom: clamp(40px, 4.8vw, 124px); }
.pt-100 { padding-top: clamp(48px, 6vw, 150px); }
.pb-100 { padding-bottom: clamp(48px, 6vw, 150px); }
.pt-120 { padding-top: clamp(56px, 7.2vw, 170px); }
.pb-120 { padding-bottom: clamp(56px, 7.2vw, 170px); }
.pt-160 { padding-top: clamp(64px, 9.6vw, 212px); }
.pb-160 { padding-bottom: clamp(64px, 9.6vw, 212px); }
.pb-200 { padding-bottom: clamp(72px, 12vw, 240px); }
/* MARGIN variants — for spacers whose neighbor has its OWN colored bg/border
   AND sits in a flex-column parent (margin is transparent, won't extend the
   colored box, and won't collapse inside a flex container). Same values. */
.mt-100 { margin-top: clamp(48px, 6vw, 150px); }
.mb-100 { margin-bottom: clamp(48px, 6vw, 150px); }
.mt-160 { margin-top: clamp(64px, 9.6vw, 212px); }
/* H-* — explicit-height transparent block, for spacers that sit between two
   inline-block siblings (e.g. a full-width banner <img> and the next
   section-label, where neither neighbor can carry padding without altering its
   own box — the banner is inline-block; the label has a decorative border-left),
   or between sections whose backgrounds must NOT be tinted by a neighbor's
   padding. Block + transparent + same DOM slot = pixel-identical to the old
   empty spacer. Same fluid value as the matching .space-3 label. */
.h-20  { height: 40px; }                    /* _20 label = 40px (matches .space-3._20) */
.h-60  { height: clamp(32px, 3.6vw, 92px); }
.h-100 { height: clamp(48px, 6vw, 150px); }
.h-120 { height: clamp(56px, 7.2vw, 170px); }
.h-160 { height: clamp(64px, 9.6vw, 212px); }
/* _40 collapses to 20px at <=991, matching .space-2._40's @media override */
@media screen and (max-width: 991px) {
  .pt-40 { padding-top: 20px; }
  .pb-40 { padding-bottom: 20px; }
}

/* ===== homepage signature hero (write-on -> breathing loop) ===== */
/* Inverted hero (2026-07-21): black stage — white signature, light copy. The signature lottie
   draws BLACK strokes (its white shapes are reveal mattes), so invert(1) turns the ink white
   without touching the animation. The dark primary CTA gets a hairline ring so it reads on black. */
.home-hero-section { background-color: var(--color-ink); }
/* GradientText (React Bits) ported onto the signature SVG: the lottie strokes are inverted to
   WHITE on the svg itself (not the container, so the overlay stays un-inverted), and an animated
   gradient layer multiplies over them — white strokes take the gradient, the pure-black stage
   multiplies back to black. Yoyo sweep like the component default. */
/* own ink bg so the multiply blend sees black even inside a transformed (stacking-context)
   ancestor. The 4px vertical padding makes the black bg EXTEND past the gradient overlay:
   strokes sit >=4px inside (fully tinted), and the overlay's edges land on solid black
   padding rows — no white slivers, no hairlines, nothing bleeds outside the box. */
.home-hero-section .hero-signature { position: relative; background: var(--color-ink); padding: 4px 0; }
.home-hero-section .hero-signature svg { filter: invert(1); }
.home-hero-section .hero-signature::after {
  /* inset 1px, paired with the container's 4px padding: full stroke coverage with the
     overlay's edges resting on solid black padding rows */
  content: ''; position: absolute; inset: 1px 0; z-index: 2; pointer-events: none;
  mix-blend-mode: multiply;
  background-image: linear-gradient(to right, var(--color-accent), var(--color-accent), var(--color-case-cereus-bright), var(--color-accent));
  background-size: 300% 100%; background-position: 0% 50%;
  animation: fx-sig-gradient 6s linear infinite;
}
@keyframes fx-sig-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) { .home-hero-section .hero-signature::after { animation: none; } }

/* Hero intro choreography (html.sig-intro / .sig-intro-nav set pre-paint on the homepage,
   removed by the lottie complete handler): during the intro only the signature shows,
   pushed down so it writes at the viewport center; on exit the bio then the CTAs cascade
   in while the signature rides up to its resting position; the nav pill joins the
   cascade early (its own base transition animates it in when .sig-intro-nav drops). */
.hero-inner { transition: transform .9s var(--ease-out); }
html.sig-intro .hero-inner { transform: translateY(var(--sig-shift, 16vh)); transition: none; }
.hero-bio { transition: opacity .35s ease, transform .45s var(--ease-out), visibility 0s; }
.hero-cta-row { transition: opacity .3s ease .25s, transform .4s var(--ease-out) .25s, visibility 0s .25s; }   /* one small beat after bio + nav land together */
html.sig-intro .hero-bio, html.sig-intro .hero-cta-row { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(18px); transition: none; }
html.sig-intro-nav .navbar { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.home-hero-section .hero-bio { color: var(--color-neutral-300); }
.home-hero-section .badge.popup.project.home { border: 1px solid rgba(255, 255, 255, .16); }
.home-hero-section .badge.popup.project.home._2 { border-color: transparent; }
.home-hero-section .hero-inner { align-items: center; text-align: center; margin-left: auto; margin-right: auto; max-width: 900px; /* matches .hero-bio's swell-slack frame (760 defeated it) */ position: relative; top: 5vh; /* rest the whole hero group slightly below true center */ }
.hero-signature { width: min(86vw, max(680px, 400px + 23vw)); margin: 0 auto; min-height: min(200px, 29vw); /* reserve proportionally to the fluid width — fixed 200px skews --sig-shift centering on phones. Wide screens: grows past 680 from ~1220 up (~800 at 1728) */ }
.hero-signature svg { display: block; width: 100%; height: auto; }
/* hero bio: uniform voice — one size/weight/color for all three sentences; readability
   carried by measure (~700px), loose leading, paragraph air and balanced centered wrapping. */
.hero-bio { max-width: 900px; margin: 68px auto 0; /* wide frame: pinned lines get swell slack */ }
.hero-bio p { margin: 0; color: var(--color-neutral-300); font-size: var(--text-lead); font-weight: 500; line-height: 1.8; letter-spacing: .01em; }
.hero-bio p + p { margin-top: 20px; }
.hero-cta-row { justify-content: center; margin: 72px auto 0; grid-column-gap: 32px; grid-row-gap: 32px; }
@media screen and (max-width: 767px) {
  .hero-bio { margin-top: 44px; }
  .hero-bio p br { display: none; }   /* desktop line pins don't fit narrow screens */
  .hero-bio p { font-size: 1rem; }
  .hero-cta-row { margin-top: 48px; }
}

/* ===== A. project-card hover: caption slides up + image lift (desktop pointer only; captions stay visible on touch) ===== */
@media (hover: hover) and (pointer: fine) {
  .project-thumb-caption { opacity: 0; transform: translateY(26px); transition: opacity .35s ease, transform .45s var(--ease-out); }
  .project-media:hover .project-thumb-caption,
  .sharge-media:hover .project-thumb-caption,
  .more-works-grid:hover .project-thumb-caption { opacity: 1; transform: translateY(0); }
  .homepic > img { transition: transform .5s var(--ease-out); }
  .project-media-feature:hover .homepic > img,
  .sharge-feature:hover .homepic > img,
  .project-tile-iqs:hover .homepic > img,
  .work-card:hover .homepic > img,
  .work-card-wide:hover .homepic > img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .project-thumb-caption { transition: none; }
  .homepic > img { transition: none; }
  .project-media-feature:hover .homepic > img,
  .sharge-feature:hover .homepic > img,
  .project-tile-iqs:hover .homepic > img,
  .work-card:hover .homepic > img,
  .work-card-wide:hover .homepic > img { transform: none; }
}

/* ===== B. awards / recognition strip (below hero) ===== */
/* the awards strip continues the black hero stage (one continuous block): ink bg,
   lightened label, and grayscale+invert flips the dark logo artwork to light.
   The 60px .works margin-top is folded into the strip's bottom padding so the spacing
   before the first project card stays identical but paints BLACK (no body-gray gap). */
.awards-strip { text-align: center; padding: clamp(36px, 5vw, 64px) 24px calc(clamp(36px, 5vw, 64px) + 60px); background-color: var(--color-ink); }
.works { margin-top: 0; }
.awards-strip-label { color: var(--color-neutral-400); font-size: var(--text-micro); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.awards-strip-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 60px); }
.awards-strip-row img { height: 32px; width: auto; filter: grayscale(1) invert(1); opacity: .6; transition: opacity .25s ease; }
.awards-strip-row img:hover { opacity: .92; }
@media screen and (max-width: 767px) { .awards-strip-row img { height: 23px; } .awards-strip-row { gap: 22px; } }

/* ===== C. about philosophy hook ===== */
.about-philosophy { color: var(--color-text); font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin: 0; }

/* ===== D. large-screen breakpoint (>1600): widen content site-wide so it doesn't cram in the center =====
   The base layout caps content at 1200px (homepage cards / container-medium) and 960px (the
   case-study + works content column), with feature covers fixed near 1008px. Above 1600px each
   grows with the canvas (1200->1440, 960->1280, covers->1344) so nothing strands in the center. */
@media screen and (min-width: 1600px) {
  /* drive the wide layout from the container token (covers .container-medium + footer .ft-inner) */
  :root { --container-max: 1440px; }
  /* homepage */
  .project-card-body { width: 1340px; }   /* cards sit a notch inside the 1440 container frame */
  .about-row { width: var(--container-max); }
  .project-card-desc { max-width: 760px; }
  /* the 960px content column on case-study + works pages */
  .case-section-block, .case-section-block-2, .case-section-block-3, .case-section-block-4,
  .carousel-block-3, .carousel-block-4,
  .case-meta-block, .case-hero-header, .works-grid { width: var(--w-content-lg); }
  /* feature covers were fixed at ~1008px and stranded centered — scale them with the canvas */
  .case-hero-cover, .impact-cover, .impact-gallery-grid { width: 1344px; max-width: 100%; height: auto; }
  .impact-cover-image, .impact-cover-image-2 { width: 100%; }
  /* vertical rhythm: handled by the unified fluid clamps in the base spacing ladder
     (slope 6vw per 100, wide-screen growth in the clamp max) — no per-breakpoint copies */
  .awards-strip { padding: 88px 24px calc(88px + 60px); /* keep the base rule's folded 60px .works gap */ }
}
/* caption sits at the card bottom (reset Webflow's -120px slide-hidden offset; reveal handled by the hover rules above) */
.project-thumb-caption { margin: 0; }

/* ===== E. About — unify the contact + education columns into one 3-level type scale =====
   (scoped to .about-details so the global .sub-heading-large/.body-text used on case pages are untouched) */
/* L1 · field label: Email / Phone / LinkedIn / Education */
.about-details .paragraph-small.align-left,
.about-details .about-extra__k {
  font-family: var(--font-body);
  color: var(--color-neutral-500);
  font-size: var(--text-sm);  /* small tier */
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  margin: 0 0 5px;
}
/* L2 · primary value: contact value · institution name */
.about-details .sub-heading-large,
.about-details .about-extra__v {
  font-family: var(--font-headings);
  color: var(--color-title);
  font-size: var(--text-sm);  /* small tier */
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
/* L3 · secondary detail: degree / program line */
.about-details .about-extra .body-text {
  color: var(--color-neutral-500);
  font-size: var(--text-sm);  /* small tier */
  font-weight: 400;
  line-height: 1.55;
  margin-top: 3px;
}
/* even, top-aligned rhythm in both columns — same gap between entries, header sits tight to its group */
.about-details .contact-item-row,
.about-details .contact-item-row-2,
.about-details .contact-item-row-3 { margin-bottom: 26px; }
.about-details .contact-item:last-child .contact-item-row,
.about-details .contact-item:last-child .contact-item-row-2,
.about-details .contact-item:last-child .contact-item-row-3 { margin-bottom: 0; }
/* Education gets an icon matching the contact rows: 24px glyph + 16px gap + body */
.about-details .about-extra { flex-direction: row; align-items: flex-start; gap: 16px; }
.about-details .about-extra .contact-icon { margin: 0; flex: none; }
.about-details .about-extra-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.about-details .about-extra__k { margin-bottom: 8px; }
.about-details .about-extra-item { margin-bottom: 26px; }
.about-details .about-extra-item:last-child { margin-bottom: 0; }

/* ============================================================
   F. Site footer — "Let's get in touch!" types out character by character,
   trailed by a cute bouncing-dots Lottie. Container-aligned, two color modes
   (one .white root class), no background of its own. lottie-web is lazy-loaded
   when the footer scrolls into view (so non-home pages don't all ship it).
   ============================================================ */
.site-footer { background: transparent; font-family: var(--font-body); display: block; }
.site-footer .ft-inner {
  width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto;
  padding-left: 0; padding-right: 0;
  padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(28px, 3vw, 44px);
  box-sizing: border-box;
}
/* small screens: a gutter so flush content doesn't touch the edges (the gutter already
   spaces the contact column, so drop its extra right margin there) */
@media screen and (max-width: 1199px) {
  .site-footer .ft-inner { padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }
  .site-footer .ft-nav { margin-right: 0; }
  .site-footer .ft-lead { margin-left: 0; }
}

.ft-rule { border: 0; border-top: 1px solid var(--color-neutral-300); margin: 0 0 clamp(32px, 4vw, 56px); }

.ft-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(28px, 4vw, 64px); }
.ft-lead { flex: 1 1 460px; min-width: 0; margin-left: 30px; }
.ft-copy { margin: 0 0 16px; font-size: var(--text-sm); color: var(--color-neutral-500); }

.ft-headrow { display: flex; align-items: flex-end; gap: 16px; }
.ft-headline { margin: 0; font-family: var(--font-headings); font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.625rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--color-title); white-space: nowrap; }
/* the ghost reserves the full headline width so the looping type/delete doesn't shift the envelope */
.ft-type { position: relative; display: inline-block; }
.ft-ghost { visibility: hidden; white-space: nowrap; }
.ft-live { position: absolute; left: 0; top: 0; white-space: nowrap; }
.ft-caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: currentColor; vertical-align: -.12em; animation: ft-blink 1s steps(1) infinite; }
@keyframes ft-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.ft-lottie { display: inline-block; width: 84px; height: 84px; margin: -34px -10px 0 0; flex: none; opacity: 0; transform: translateY(-4px) scale(.92); transition: opacity .45s ease, transform .45s ease; }
.site-footer.ft-done .ft-lottie { opacity: 1; transform: translateY(-10px); }

.ft-tagline { margin: clamp(16px, 2vw, 24px) 0 0; font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--color-text); }

.ft-nav { display: flex; flex-direction: column; gap: 18px; flex: none; margin-right: clamp(24px, 3vw, 56px); }
.ft-nav-head { margin: 0 0 4px; font-size: var(--text-sm); font-weight: 500; color: var(--color-neutral-500); }
.ft-link { font-size: var(--text-body); font-weight: 400; color: var(--color-title); text-decoration: none; width: fit-content; transition: opacity .2s ease; }
.ft-link:hover { opacity: .6; }

.site-footer a:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 4px; border-radius: 4px; }

/* ---- DARK mode: single root class, no painted bg ---- */
.site-footer.white .ft-rule { border-color: rgba(255, 255, 255, .16); }
.site-footer.white .ft-copy { color: var(--color-neutral-400); }
.site-footer.white .ft-headline { color: var(--color-white); }
.site-footer.white .ft-tagline { color: var(--color-neutral-300); }
.site-footer.white .ft-nav-head { color: var(--color-neutral-300); }
.site-footer.white .ft-link { color: var(--color-white); }
.site-footer.white a:focus-visible { outline-color: var(--color-white); }

@media screen and (max-width: 600px) {
  .ft-headline { font-size: clamp(1.5rem, 6vw, 2rem); white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-caret { animation: none; }
  .ft-link { transition: none; }
}

/* ============================================================
   G. Homepage project sections — one uniform, max-contrast text color per section.
   Gray body text read washed-out on the colored cards; each section's heading,
   accent word, and description now share a single color: blackest on the light /
   colored cards, white on the dark (Orchestrating) card. No two-tone split.
   ============================================================ */
.project-card-text .heading,
.project-card-text .project-card-desc { color: var(--color-ink); }
.project-card-text .heading-accent,
.project-card-text .heading .label-strong { color: inherit; }
/* the dark-background card (Orchestrating Complexity) -> white */
.project-card-text .heading.dark,
.project-card-text .heading.dark .heading-accent,
.project-card-text .project-card-desc.light { color: var(--color-white); }

/* visually-hidden (accessible page heading / labels not shown visually) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* IDEATION pain-point figures (extracted from repeated inline style) */
/* UTILITY .framed-sketch — white 8px frame + 12px radius for diagrams / wireframes / journey sketches.
   Pain-point + flow-step figures alias it; future case studies can apply .framed-sketch directly. */
.framed-sketch,
.painpoint-figure, .flow-step-figure {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  background: var(--color-white);
  box-sizing: border-box;
}

/* Sharge dark footer (#5d738a, lighter bg): lift muted secondary lines to pass AA */
.footer-section-3 .site-footer.white .ft-copy,
.footer-section-3 .site-footer.white .ft-tagline,
.footer-section-3 .site-footer.white .ft-nav-head {
  color: var(--color-white-96);
}

/* ============================================================
   Sharge case study — responsive adaptation (<=991 / <=767 / <=479)
   Desktop (>=1280) is the tuned reference and stays untouched.
   ============================================================ */
@media screen and (max-width: 991px) {
  /* Hero: clear the fixed ~90px navbar so the H1 isn't hidden under it */
  .case-hero .h-120 { height: 104px; }
  /* DESIGN ITERATION: the 200px column gap crushed the "before" frames on tablet */
  .process-compare-grid, .compare-text-grid { grid-column-gap: var(--space-40); }
  /* SOLUTION: give the phone mockups side gutters instead of edge-bleeding */
  .feature-grid { padding-left: clamp(16px, 4vw, 28px); padding-right: clamp(16px, 4vw, 28px); box-sizing: border-box; }
  /* IMPACT text block goes full-width on the dark band at tablet/phone — give it the collage's
     3vw side gutter so the label / headings / body don't hug the screen edge */
  .sharge-case .impact-dark-band .case-section-block-2 { padding-left: 3vw; padding-right: 3vw; box-sizing: border-box; }
}

@media screen and (max-width: 767px) {
  /* IMPACT collage: stack to one column and stop the flex:1/min-height:0 height-collapse */
  .impact-gallery-grid { grid-template-columns: 1fr; }
  .impact-image-column { height: auto; }
  .impact-image-column img { flex: none; min-height: 0; height: auto; }
  /* DESIGN ITERATION: stack before/after vertically (side-by-side too small to read) */
  .process-compare-grid, .compare-text-grid { grid-template-columns: 1fr; grid-row-gap: var(--space-16); }
  /* Awards: keep ONE row (6-up) on tablet/mobile — fewer columns just make the logos oversized; override the global 1fr, drop the 40px side padding and shrink the gap so they stay legible */
  .award-logo-grid-2 { grid-template-columns: repeat(6, 1fr) !important; grid-column-gap: clamp(6px, 1.6vw, 20px); grid-row-gap: 0; padding-left: 0; padding-right: 0; }
}


/* Fluid display type: smooth heading scaling between breakpoints.
   Endpoints match the current desktop (36/38px) & mobile (24/30px) values, so those
   are unchanged; only the stepped middle is smoothed (and the anomalous 42px tablet
   bump on subsection-heading is removed). Body/labels/subtitle stay fixed. */
.case-title { font-size: clamp(24px, 18.74px + 1.35vw, 36px); }
.subsection-heading._2 { font-size: clamp(30px, 26.5px + 0.9vw, 38px); } /* only the big CONTEXT statement is display-sized; regular .subsection-heading stays at --text-h4 (much smaller) */


/* ============================================================
   Sharge case study — component classes (extracted from inline styles)
   Values identical to the prior inline styles; render unchanged.
   ============================================================ */
.sharge-case .stat-image { width: 40%; }

/* CONTEXT opportunity cards: body sits below the icon+title row, flush to the card/image left
   edge (not indented under the icon). Small top gap replaces the in-column title-to-body gap. */
.opportunity-body { margin-top: var(--space-8); }

.sharge-case .emoji-card.persona-card { gap: var(--space-16); padding: 18px 24px 18px 16px; border: 1px solid var(--color-border-blue); }
.persona-avatar { width: 96px; height: 96px; flex: none; }
.persona-icon { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin-right: var(--space-8); display: inline-block; }

/* HMW band — shared frame for the three flagship cases (sharge / prio / cereus).
   Per-page rules below carry only the photo, its scrim strength, and the title accent. */
.sharge-case .hmw-block, .prio-case .hmw-block, .cereus-case .hmw-block { margin-top: 0; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: var(--radius-lg); padding: clamp(28px,5cqw,64px) clamp(24px,6.25cqw,80px); text-align: left; overflow: hidden; }
.sharge-case .hmw-title, .prio-case .hmw-title, .cereus-case .hmw-title { width: auto; margin: 0; font-size: clamp(2rem, 5.6cqw, 5rem); line-height: 1.26; text-shadow: var(--shadow-text-dark-lg); }
.sharge-case .hmw-accent, .prio-case .hmw-accent, .cereus-case .hmw-accent { color: var(--color-white); }
.sharge-case .hmw-block { background-image: linear-gradient(var(--overlay-dark-25), var(--overlay-dark-25)), url(../images/site/site-02.webp); background-attachment: fixed; }
.sharge-case .hmw-title { color: var(--color-accent); }
/* BlurText — line-by-line blur-in on enter (ported from React Bits, vanilla).
   Hidden state + animation live INSIDE no-preference, so reduced-motion (or no-JS)
   just renders the lines as static text — no specificity war with .is-in. */
.blur-in .blur-line { display: block; }
@keyframes hmw-blur-in {
  0%   { filter: blur(10px); opacity: 0;  transform: translateY(-50px); }
  50%  { filter: blur(5px);  opacity: .5; transform: translateY(5px); }
  100% { filter: blur(0);    opacity: 1;  transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .blur-in .blur-line { opacity: 0; filter: blur(10px); transform: translateY(-50px); will-change: transform, filter, opacity; }
  html.js .blur-in.is-in .blur-line { animation: hmw-blur-in .7s linear both; animation-delay: calc(var(--i, 0) * .15s); }
}
.hmw-avatars { display: flex; justify-content: flex-end; gap: clamp(28px,5cqw,64px); margin-top: clamp(28px,5.9cqw,76px); }
.hmw-avatar-fig { margin: 0; text-align: center; }
.hmw-avatar-img { width: clamp(72px,8.1cqw,104px); height: clamp(72px,8.1cqw,104px); border-radius: var(--radius-round); background: var(--color-white); display: block; box-shadow: 0 3px 14px rgba(16,20,30,.10); }
.hmw-avatar-cap { margin-top: var(--space-12); color: var(--color-white); font-weight: 600; font-size: 1rem; text-shadow: var(--shadow-text-dark-md); }

.painpoint-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
.items-center { align-items: center; }
.flow-lead-avatar { width: 96px; height: 96px; display: block; margin-top: var(--space-40); }
.flow-lead-avatar.host { margin-top: var(--space-80); }

.sharge-case .video { width: var(--w-feature); }

.impact-dark-band { width: 100%; background-color: var(--color-case-sharge-dark); }
.impact-collage-pad { width: 100%; padding: 3vw; box-sizing: border-box; }
.sharge-case .impact-gallery-grid { width: 100%; max-width: none; margin: 0; grid-column-gap: 1vw; }
.sharge-case .footer-section-3 { background-color: var(--color-case-sharge-dark); }
/* Works page: flat 3xN grid of ALL works (no page header — the nav carries context);
   top padding clears the fixed glass nav. Scoped to #projects (works.html) because
   404.html shares this class and must keep the light theme. */
#projects.works-gallery-section { padding-top: clamp(96px, 12vw, 150px); }
#projects.works-gallery-section > .space:first-child { height: 0; }
.works-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: min(1360px, calc(100% - 48px)); margin: 0 auto; }
.works-grid-3 .card { margin: 0; height: 100%; }
/* dark gallery, aligned with the homepage's black stage; cards simplified to the home
   language — image + one caption row, no decorative shapes or floating pills. */
#projects.works-gallery-section { background-color: var(--color-ink); padding-left: 0; padding-right: 0; }
.footer-section-light { background-color: var(--color-ink); }
.footer-section-works { background-color: var(--color-ink); }
.works-grid-3 .card.project { background-color: var(--color-neutral-800); border-radius: var(--radius-lg); padding: 10px; }
.works-grid-3 .card-thumb { border-radius: 16px; overflow: hidden; }
.works-grid-3 .card-thumb img { display: block; transition: transform .5s var(--ease-out); }
.works-grid-3 .card.project:hover .card-thumb img { transform: scale(1.03); }
.works-grid-3 .sub-heading-large { color: var(--color-neutral-200); }
/* project name: no pill — logo + wrappable text, LEFT-aligned in its column, icon top-aligned
   with the first text line; a fixed 28px gutter separates description and name columns */
.works-grid-3 .content.project { align-items: start; grid-template-columns: 1fr auto; grid-column-gap: 28px; }
.works-grid-3 .card-name { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; color: var(--color-neutral-200); font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; padding-top: 2px; max-width: 190px; }
.works-grid-3 .card-name-logo { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: none; margin-top: 1px; }
.works-grid-3 .card-name span { min-width: 0; }
/* uniform thumbnails: every card image crops to the same 4:3 window */
.works-grid-3 .tumbnail-projects { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Loop: the phone mock sits scaled-down and centered on the homepage Loop card's lime bg */
.works-grid-3 .tumbnail-projects.loop { object-fit: contain; background-color: var(--color-case-loop-tint); padding: 8% 0; box-sizing: border-box; }
@media screen and (max-width: 1100px) { .works-grid-3 { grid-template-columns: repeat(2, 1fr); } }

/* CONTEXT + IDEATION on pure white to pull them apart from SOLUTION's #f5f5f5 page gray */
.sharge-case .section-white { background-color: var(--color-white); }

/* Chapter stack — REUSABLE across case pages (ported from the homepage #selected-works).
   Direct-child <section>s pin at --stick-top (= min(0, vh - height), set per chapter by the
   shared JS in the footer partial), then the next chapter slides up and covers it; JS adds a
   depth-of-field blur to the covered chapter. Each chapter needs an OPAQUE background (set
   per-page below) so a rising chapter fully hides the one beneath. JS-gated. */
.chapter-stack { position: relative; overflow: clip; }
html.js .chapter-stack > section { position: sticky; top: var(--stick-top, 0px); will-change: filter; }
/* Covered chapters (every one but the last) get a bottom dwell zone: the incoming chapter
   covers bottom-first, so this empty space is eaten first and the last content stays readable
   before it's covered. JS-gated (no cover without JS = no need for the gap). */
html.js .chapter-stack > section:not(:last-child) { padding-bottom: clamp(180px, 32vh, 360px); }
/* Per-page opaque chapter backgrounds. Sharge: white IDEATION (via section-white) ->
   gray SOLUTION -> blue-gray DESIGN ITERATION. */
.sharge-case .chapter-stack > .case-section-3:not(.section-white) { background-color: var(--color-bg); }
.sharge-case .chapter-stack > .case-section { background-color: var(--color-case-sharge); }

/* Unified IMPACT style (from Sharge's new treatment): the impact band goes FULL-BLEED
   edge-to-edge with NO radius, and the cover image spans wide with a 3vw gutter (like
   .impact-collage-pad). The band then flows STRAIGHT into the footer — same neutral-700,
   no gap — mirroring Sharge (impact band == footer color). The IMPACT text keeps the
   page's normal content width so it lines up with the sections above. Applied per-work. */
/* keep each band's own mt-NNN top gap so the SOLUTION content above isn't jammed against it;
   only the BOTTOM margin is zeroed so the band meets the footer. */
.impact-feature.pin, .impact-feature.popup { border-radius: 0; width: 100%; max-width: none; padding: 0; margin-bottom: 0; }
.impact-feature.pin .impact-cover, .impact-feature.popup .impact-cover { width: 100%; max-width: none; aspect-ratio: auto; padding: 3vw; box-sizing: border-box; margin: 0; }
.footer-section-4, .footer-section-6, .footer-section { background-color: var(--color-neutral-700); }
/* POP-UP is pure-black themed: its SOLUTION and footer are both --color-ink, so the band goes
   ink too (was neutral-800) for full black continuity. Its footer keeps ink via .popup. */
.impact-feature.popup { background-color: var(--color-ink); }

/* Volume Walks / Blindsworth have no IMPACT band — their SOLUTION / 'The Store' IS the product
   showcase (a marquee carousel). Make that marquee FULL-BLEED (was pinned to content width ~926,
   leaving dark margins), mirroring the IMPACT's wide product display; the section label stays at
   content width. .chapter-stack's overflow:clip contains the 100vw so there's no page x-scroll. */
.solution-section.vw .scroll-container, .solution-section.bw .scroll-container { width: 100vw; margin-left: calc(50% - 50vw); }
/* GlareHover (ported from React Bits, vanilla): a soft diagonal shine sweeps each homepage
   project thumbnail BOTTOM-LEFT -> TOP-RIGHT on hover. Implemented as an OVERSIZED ::before that
   physically translates across the card: the gradient fills its whole box edge-to-edge (band in
   the middle, transparent ends), so no interior tile edge can ever get exposed. .homepic clips
   the oversized layer; the rounded outer wrappers clip the corners. Scoped to #selected-works so
   the css-bridge slider (also .homepic) is untouched. */
#selected-works .homepic { position: relative; overflow: hidden; }
#selected-works .homepic::before {
  content: ''; position: absolute; inset: -40%; z-index: 2; pointer-events: none;
  background: linear-gradient(45deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translate(-100%, 100%);   /* parked fully off the bottom-left */
  transition: transform 1.6s ease;
}
/* glare is PER-TILE: each thumbnail sits in its own <a> (Loop is a non-link .work-card) */
#selected-works a:hover .homepic::before,
#selected-works .work-card:hover .homepic::before { transform: translate(100%, -100%); }   /* exits top-right */
@media (prefers-reduced-motion: reduce) { #selected-works .homepic::before { transition: none; } }

/* a11y (WCAG 2.2.2): the auto-scroll marquee must stop for reduced-motion, and pause on hover. */
.scroll-container:hover .scroll-content, .scroll-container:focus-within .scroll-content { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .scroll-content { animation: none !important; } }

/* Pain-point grid: 4-up is too cramped below the desktop tier -> 2x2.
   !important beats the global [class*="-grid"]{1fr} that would otherwise force 1-up at <=767. */
@media screen and (max-width: 991px) {
  .painpoint-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Flow-step grids: same as pain-points — 4-up too cramped below desktop -> 2x2.
   !important beats the global [class*="-grid"]{1fr} forcing 1-up at <=767. */
@media screen and (max-width: 991px) {
  .flow-step-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* CONTEXT "EV demand outran charging access" stat cards: keep 3 per row on phones.
   The global [class*="-grid"]{1fr} would otherwise stack them into oversized full-width cards. */
@media screen and (max-width: 767px) {
  .stat-grid._3 { grid-template-columns: repeat(3, 1fr) !important; grid-column-gap: clamp(8px, 2vw, 20px); }
}

/* DESIGN ITERATION compares: keep each before/after group as a 2-up unit on narrow screens.
   The global [class*="-grid"]{1fr !important} would otherwise split every figure onto its own row
   (so the "before" half collapses to one giant image per row). */
@media screen and (max-width: 767px) {
  .process-image-grid, .process-image-grid-2, .process-image-grid-3, .process-image-grid-4 {
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: clamp(8px, 2.5vw, 40px);
  }
}


/* ============================================================
   DESIGN ITERATION compares — area-based layout so caption stays with its images.
   Desktop: caption row / image row (2 cols).  Narrow: before-cap -> before-imgs -> after-cap -> after-imgs.
   ============================================================ */
.compare-grid {
  display: grid;
  grid-template-columns: .75fr 1.1fr;
  grid-column-gap: 200px;
  grid-row-gap: var(--space-20);
  grid-template-areas: "bc ac" "bi ai";
}
.compare-grid > .cmp-bc { grid-area: bc; }
.compare-grid > .cmp-ac { grid-area: ac; }
.compare-grid > .cmp-bi { grid-area: bi; }
.compare-grid > .cmp-ai { grid-area: ai; }
@media screen and (max-width: 991px) {
  .compare-grid { grid-column-gap: var(--space-40); }
}
@media screen and (max-width: 767px) {
  .compare-grid {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    grid-template-areas: "bc" "bi" "ac" "ai";
  }
}

/* CONTEXT statement: AA-safe theme blue, left-flush (no left indent), capped at 80% on wide screens */
.subsection-heading._2 {
  color: var(--color-accent-strong);
  padding-left: 0;
  margin-left: 0;
  margin-right: auto;
}
@media screen and (min-width: 992px) {
  .subsection-heading._2 { max-width: 80%; }
}

/* Largest size: the HMW band and the Vimeo film break out to 1440 (wider than the 1280 content column) */
@media screen and (min-width: 1600px) {
  .hmw-wrap, .sharge-case .video { width: var(--w-feature-lg); }
}

/* Section labels: drop the left vertical bar; follow the label with a hairline horizontal divider.
   currentColor + low opacity adapts to light sections and the dark IMPACT (.white) label. */
.section-label {
  border-left: 0;
  padding-left: 0;
  transform: none;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-left: -16px;
  margin-right: -16px;
}
.section-label::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: currentColor;
  opacity: .13;
}

/* SOLUTION + DESIGN ITERATION section statements: same size as the CONTEXT one but dark (not the accent blue) */
.sharge-case .case-section-block-3 .subsection-heading._2 { color: var(--color-ink); }

/* Section-label wider-than-content extension is a desktop effect only;
   on tablet/mobile the content is near full-width, so keep the label flush to avoid overflow. */
@media screen and (max-width: 991px) {
  .section-label { margin-left: 0; margin-right: 0; }
}

/* Hero (Sharge): title up one level, looser title/subtitle spacing, badge scaled to match,
   and the header widened to the HMW/video tier (1280/1440, one tier wider than the content column). */
.case-hero .case-title { font-size: clamp(28px, 19.24px + 2.25vw, 48px); line-height: 1.12; margin-left: 0; }
.case-hero .case-hero-titles { gap: 14px; }
.case-hero .hero-badge { width: clamp(48px, 5vw, 64px); height: clamp(48px, 5vw, 64px); }
.case-hero .case-hero-header { width: var(--w-feature); max-width: none; }
@media screen and (min-width: 1600px) {
  .case-hero .case-hero-header { width: var(--w-feature-lg); }
}

/* Hero cover image matches the header / HMW-video width so it doesn't sit narrower (indented) under the title */
.case-hero .case-hero-cover { width: var(--w-feature); max-width: none; margin-left: auto; margin-right: auto; }
@media screen and (min-width: 1600px) {
  .case-hero .case-hero-cover { width: var(--w-feature-lg); }
}

/* Hero meta items (Sharge): more space between the label column and the value column */
.case-hero .case-meta-item { grid-column-gap: var(--space-48); }

/* Hero subtitle (Sharge): 16px was too small under the larger title — bump for legibility */
.case-hero .case-subtitle { font-size: 22px; }

/* Hero cover (Sharge): box height follows the image so its ratio always matches the 2:1 image,
   and the image always fills the full box width (no side gaps at the in-between widths). */
.case-hero .case-hero-cover { height: auto; overflow: hidden; }
.case-hero .case-hero-cover img { width: 100%; height: auto; display: block; } /* any cover image fills its box (impact-cover-image, case-cover, etc.) */

/* ============================================================
   Prio case study (work/prio.html) — scoped page styles.
   Palette echoes the prototype-derived client tokens
   (warm sand hero, clay dark, coral accent); everything else
   inherits the shared design system.
   ============================================================ */
.case-hero.prio { background-color: var(--color-case-prio); }

/* HMW band: dark-mode product shot behind the question (parallel to the sharge parking band) */
/* Prio HMW: no band — the question sits on the section itself and enters
   word-by-word (BlurText-style script at the end of the page) */
.prio-case .hmw-block { background-color: transparent; background-image: none; padding-left: 0; padding-right: 0; }
/* the aura fills its own full-width section; SOLUTION butts directly against its bottom edge */
.prio-case .challenge-section { background-image: url(../images/site/site-03.jpg); background-size: cover; background-position: center; }
/* SOLUTION entry: the full-height HMW band pins (sticky) and the sand section scrolls
   straight up to cover it — no seam dwell/shade (the shared .stack-seam was retired
   with the homepage cover effect). Positioned so it paints above the pinned band. */
.prio-case .stack-pair { position: relative; }
html.js .prio-case .stack-pair > .challenge-section { position: sticky; top: 0; }
.prio-case .stack-pair > .case-section-3 { position: relative; }
/* the question aligns with the content column above, not the wider feature tier */
.prio-case .hmw-wrap { width: var(--w-content); padding-top: clamp(56px, 7.2vw, 170px); padding-bottom: clamp(56px, 7.2vw, 170px); }
@media screen and (min-width: 1600px) {
  .prio-case .hmw-wrap { width: var(--w-content-lg); }
}
.prio-case .hmw-title { color: var(--case-accent-ink); text-shadow: none; }
.prio-case .hmw-accent { color: var(--color-title); }

/* Product screenshots (shared case-page utility): hairline frame + small radius on the light page bg */
.shot-figure { width: 100%; display: block; border-radius: var(--radius-sm); border: 1px solid var(--color-outline); box-sizing: border-box; }

/* Two-up screenshot pair (trace/defer, agent/records); "-grid" suffix inherits the global phone stacking */
.shot-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: start; }
/* duo variant: figures at 80% of the cell, centered over their captions;
   captions keep the full (equal) cell width */
.shot-duo-grid.duo-uneven { column-gap: clamp(36px, 4vw, 72px); align-items: stretch; grid-template-columns: 1.306fr 1fr; }   /* column ratio = the two videos' aspect ratios (1184x1632 vs 900x1620), so both render the same height */
.shot-duo-grid.duo-uneven > div { display: flex; flex-direction: column; }
.shot-duo-grid.duo-uneven .cite { margin-top: auto; }
.shot-duo-grid.duo-uneven .shot-figure { width: 100%; margin-left: auto; margin-right: auto; }


/* ============================================================
   Cereus case study (work/cereus.html) — scoped page styles.
   Palette echoes the Cereus brand (pale mint hero, green-black
   dark band, brand green accent); everything else inherits the
   shared design system.
   ============================================================ */
.case-hero.cereus { background-color: var(--color-case-cereus); }

/* HMW band: the glowing storefront-sign brand shot behind the question */
.cereus-case .hmw-block { background-image: linear-gradient(var(--overlay-dark-35), var(--overlay-dark-35)), url(../images/site/site-01.jpg); }
.cereus-case .hmw-title { color: var(--color-case-cereus-bright); }

/* ============================================================
   Per-page case palette: each case page declares ONE theme +
   derived tints as scoped vars; nothing from other projects
   may appear. Prio = sand #e6d2b4 / coral #fa885f family.
   ============================================================ */
.prio-case { --case-accent: #fa885f; --case-accent-ink: #ad441c; --case-tint: #f6f0e3; }
.prio-case .subsection-heading._2 { color: var(--case-accent-ink); }
/* Cereus was missing the per-case overrides prio/sharge have: green ink lead-ins
   (not the generic accent blue) and a light DESIGN-SYSTEM band (not the steel-blue
   .case-section default meant for sharge). */
.cereus-case { --case-accent-ink: #1a7346; }
.cereus-case .subsection-heading._2 { color: var(--case-accent-ink); }
.cereus-case .case-section { background-color: var(--color-bg); }
/* BlindsWorth PROBLEM/lead-in headings use the brand olive, not the generic accent blue */
.bw-case .subsection-heading._2 { color: var(--color-olive); }
.bw-case .hmw-title { color: var(--color-olive); }
/* IQS brand blue (J.D. Power steel-blue), one identity in two shades:
   #4a9fd4 on the dark solution band, #276c9b (darker, same hue) on light bands */
.iqs-case .solution-section .heading-accent-blue { color: #4a9fd4; }
.iqs-case .hmw-title { color: #276c9b; }
.iqs-case .subsection-heading._2 { color: #276c9b; }
/* dark solution/process bands: accent words and eyebrow labels must be light, not the
   light-background accent-strong / neutral-500 (which sink below 2:1 on the dark band) */
.solution-section .heading-accent-blue { color: var(--color-accent); }   /* bright accent stays legible on the dark band and keeps the emphasis */
.solution-section .section-label { color: var(--color-neutral-200); }
/* the SOLUTION statement stays ink (user); CONTEXT's keeps the coral accent */
.prio-case .case-section-3 .subsection-heading._2 { color: var(--color-title); }
/* Section rhythm: CONTEXT on the neutral canvas, SOLUTION on the theme tint
   (white story cards pop), TRADE-OFFS + METHOD on white (cards flip to the
   tint — the inverse of the SOLUTION scheme). Footer continues the last bg. */
.prio-case .case-section-2 { background-color: var(--surface-page); padding-bottom: clamp(48px, 7vw, 112px); }
.prio-case .case-section-3 { background-color: var(--case-tint); }
.prio-case .case-section { background-color: var(--color-white); }
.prio-case .footer-section-3 { background-color: var(--color-white); }
.prio-case .case-section .w-inline-block + .w-inline-block { margin-left: 20px; }
.prio-case .case-section .cta-row .w-inline-block + .w-inline-block { margin-left: 0; }   /* the flex gap spaces the CTA row (the sibling margin double-spaced desktop and indented the wrapped phone row) */
/* CTAs use the site button (badge popup project home: paddings, 8px gap, 24px
   arrow icon, hover). Ink label + arrow on light fills; demo-entry buttons wear
   the product's own brand gradient (from its design system), Browse stays quiet. */
/* Button hover (site button family): the fill never changes — the arrow swings
   from ↗ to → and a soft shadow lifts the pill; shadow tone follows the fill */
.badge.popup .icon { transition: transform .25s var(--ease-out); }
.badge.popup:hover, .badge.popup.project.home:hover { box-shadow: 0 6px 18px -6px rgba(31, 32, 33, .28); }
.badge.popup:hover .icon { transform: rotate(45deg); }
.prio-case .badge.popup.project.home { grid-column-gap: 6px; padding-left: 16px; padding-right: 12px; }
.prio-case .badge .icon { color: var(--color-icon); width: 20px; height: 20px; }
.prio-case .badge .icon svg { width: 20px; height: 20px; }
.prio-case .badge-hot { background-image: linear-gradient(135deg, #fca182 0%, #fa885f 45%, #ee6d3c 100%); }
.prio-case .badge.popup.project.home.badge-hot:hover { box-shadow: 0 6px 18px -6px rgba(238, 109, 60, .55); }
.prio-case .badge.popup.project.home.badge-soft { background-color: var(--case-tint); }
.prio-case .badge.popup.project.home.badge-soft:hover { box-shadow: 0 6px 18px -6px rgba(53, 26, 9, .22); }

/* light/dark theme comparison slider framed like a shot figure */
.theme-compare { border: 1px solid var(--color-outline); border-radius: var(--radius-sm); overflow: hidden; }
.theme-compare img-comparison-slider { display: block; width: 100%; }
.theme-compare img { display: block; width: 100%; }
.compare-handle { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background-color: var(--color-white); border-radius: var(--radius-pill); box-shadow: 0 2px 12px rgba(31, 32, 33, .22); color: var(--color-icon); }
.compare-handle svg { flex: none; width: 16px; min-width: 16px; height: 16px; display: block; }
.compare-handle svg path { stroke: var(--color-text); }

/* "coming soon" cursor tooltip for case studies not yet published */
.coming-soon { cursor: default; }
.cs-tip { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; padding: 7px 14px; border-radius: var(--radius-pill); background-color: var(--color-white); color: var(--color-title); font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; opacity: 0; transform: translateY(4px); box-shadow: 0 8px 22px -8px rgba(31, 32, 33, .45); }
.cs-tip.is-visible { opacity: 1; transform: translateY(0); transition: opacity .16s ease, transform .16s ease; }

/* the four products studied — quiet logo strip under the research paragraph */
.research-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 40px; padding-bottom: 40px; }
.research-logo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; background-color: var(--case-tint); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--color-text); }
.research-logo img { height: 18px; width: auto; display: block; }

/* the METHOD narrative reads as distinct steps — wider gaps between its blocks */
.method-flow .pt-10 { padding-top: 36px; }
.method-flow .pt-30 { padding-top: 48px; }
.method-flow .pt-20 { padding-top: clamp(56px, 12vw, 128px); padding-bottom: 40px; } /* the closing CTA row stands alone; tapers on phone (128px fixed read as a dead void at 390) */

/* Story cards: the design-story chapters, one level BELOW the section labels.
   White card on the page tint; inner emoji-cards drop to the tint so the
   hierarchy reads card > sub-card. */
.story-card { background-color: var(--color-white); border-radius: var(--radius-card); padding: clamp(28px, 3.2vw, 52px); --stick-top: clamp(48px, 8vh, 88px); --eyebrow-h: 20px; --eyebrow-gap: 16px; }
.story-card + .story-card { margin-top: 48px; }
/* head (eyebrow + title) left as ONE sticky unit, content right — 1fr/2fr from 992 up */
@media screen and (min-width: 992px) {
  .story-card {
    display: grid;
    grid-template-columns: 4fr 9fr;
    column-gap: clamp(32px, 3vw, 56px);
    align-items: start;
  }
  /* eyebrow + title pin AND release together (one sticky element — no overlap on exit) */
  .story-card-head { position: sticky; top: var(--stick-top); align-self: start; }
  /* body copy starts level with the title, not the eyebrow */
  .story-card-main { padding-top: calc(var(--eyebrow-h) + var(--eyebrow-gap)); }
}
@media screen and (max-width: 991px) {
  .story-card-main { margin-top: 28px; }
}
/* a uniform breathing gap between every block inside a card, on top of the pt-* rhythm */
.story-card-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.story-card-main > :first-child { padding-top: 0; }
.story-card-eyebrow { margin: 0 0 var(--eyebrow-gap); font-size: 13px; line-height: var(--eyebrow-h); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--case-accent-ink, var(--color-neutral-500)); }
.story-card-title { margin: 0; font-size: var(--text-h3); line-height: 1.2; }
/* Point rows: open editorial spec rows (hairline + coral tick + term + text) —
   replaces the boxed emoji-card pattern on this page */
.point-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: clamp(24px, 3vw, 44px); grid-row-gap: 32px; }
.point-grid-2 { grid-template-columns: 1fr 1fr; }
.point-row { position: relative; border-top: 1px solid var(--color-outline); padding-top: 16px; }
.point-row::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 2px; background-color: var(--case-accent, var(--color-accent)); }
.point-row .card-label { display: flex; align-items: center; font-size: 16px; }
/* numbered chip that pairs a legend row with its on-image marker */
.point-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border: 1.5px solid var(--case-accent-ink); border-radius: var(--radius-round); color: var(--case-accent-ink); font-size: 11px; font-weight: 600; }
/* leader-line annotations over the brief figure; positions are fractions of THIS
   image (2480×1080) — the chip sits in the cream margin, the line runs to the text */
.brief-fig { position: relative; }
.brief-mark { position: absolute; display: flex; align-items: center; transform: translateY(-50%); pointer-events: none; }
.brief-mark::before { content: ""; order: 1; flex: none; width: 6px; height: 6px; border-radius: var(--radius-round); background-color: var(--case-accent); }
.brief-mark i { order: 3; }
.brief-mark i { font-style: normal; flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--case-accent-ink); border-radius: var(--radius-round); background-color: var(--color-white); color: var(--case-accent-ink); font-size: 11px; font-weight: 600; }
.brief-mark::after { content: ""; order: 2; flex: 1; height: 2px; margin: 0 4px; background-image: radial-gradient(circle 1px at center, var(--case-accent) 100%, transparent 100%); background-size: 5px 2px; background-repeat: repeat-x; }
.brief-mark-1 { top: 38.9%; right: 5%; width: 17%; }
.brief-mark-2 { top: 48.2%; right: 5%; width: 21.3%; }
.brief-mark-3 { top: 57.7%; right: 5%; width: 15%; }
/* lane icons lifted from the product's /today headers; colors are the product's own lane hues */
.point-icon { flex: none; display: inline-flex; width: 16px; height: 16px; margin-right: 8px; }
.point-icon svg { width: 100%; height: 100%; }
.point-icon-focus { color: var(--case-accent-ink); }
.point-icon-clear { color: #35703f; } /* product lane green — deliberate literal */
.point-icon-judge { color: #875a0f; } /* product lane amber — deliberate literal */
.point-row .body-text { margin-top: 6px; color: var(--color-neutral-500); }

/* 01 · THE FRAME figure: product sidebar + layer legend + cockpit/engine/chassis pyramid */
.frame-fig { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 9fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.frame-fig-side { width: 100%; border: 1px solid var(--color-outline); border-radius: var(--radius-sm); }
/* legend: three text rows spread over the legend height beside ONE pyramid svg. The
   pyramid is a single triangle silhouette — every slanted edge sits on the same two
   apex-to-base lines — split by two narrow slits that carry the flow captions. */
.frame-fig-legend { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(8px, 1vw, 20px); align-items: stretch; }
.frame-fig-rows { display: grid; grid-template-rows: 1fr 1fr 1fr; }
.frame-fig-row { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 10px; border-bottom: 1px solid var(--color-outline); }
.frame-fig-row-top { border-bottom: 2px solid var(--case-accent); }
.frame-fig-row .card-label { font-size: 15px; }
.frame-fig-row .body-text { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--color-neutral-500); }
.frame-fig-pyr { width: 100%; max-width: 290px; height: auto; display: block; align-self: center; justify-self: end; }   /* cap: on ≥1600 layouts the legend column gets wide enough to balloon the pyramid */
.pyr-hot { fill: rgba(250, 136, 95, .14); stroke: var(--case-accent); stroke-width: 1.5; }
.pyr-cool { fill: var(--color-white); stroke: var(--color-outline); stroke-width: 1.5; }
.pyr-lab { font-size: 12px; font-weight: 600; letter-spacing: .1em; fill: var(--color-neutral-500); }
.pyr-lab-hot { fill: var(--case-accent-ink); }
.pyr-gap { font-size: 12px; letter-spacing: .04em; fill: var(--color-neutral-500); }
@media screen and (max-width: 991px) {
  .frame-fig { grid-template-columns: 1fr; justify-items: center; }
  .frame-fig-side { max-width: 220px; }
  .frame-fig-legend { grid-template-columns: 1fr; width: 100%; gap: 28px; }
  .frame-fig-rows { grid-template-rows: repeat(3, auto); row-gap: 22px; }
  .frame-fig-pyr { justify-self: center; max-width: 270px; }
}

/* 02 · THE HOME: task-card iteration story (V1 AI draft → V2 IA pass → V3 shipped),
   stacked rows, image and copy alternating sides. The card shots are transparent
   cut-outs with their own corners — no frame needed. */
.iter-grid { display: grid; grid-template-columns: 1fr; row-gap: clamp(14px, 1.6vw, 22px); }
.iter-step { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
.iter-step img { width: 100%; max-width: 340px; height: auto; display: block; justify-self: start; filter: drop-shadow(0 2px 5px rgba(50, 55, 68, .06)) drop-shadow(0 12px 26px rgba(50, 55, 68, .09)); }   /* restrained lift; drop-shadow follows the card's rounded silhouette */
.iter-copy .body-text { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--color-neutral-500); }
/* downward arrow under each step's copy (except the last) — the iteration flow V1 → V2 → V3 */
.iter-step:not(:last-child)::after { content: "\2193"; grid-column: 2; grid-row: 2; justify-self: start; margin-top: 12px; font-size: 20px; line-height: 1; color: var(--color-neutral-500); }
@media screen and (max-width: 767px) {
  .iter-step { grid-template-columns: 1fr; row-gap: 14px; }
  .iter-step img { max-width: 340px; }
  .iter-step:not(:last-child)::after { grid-column: 1; grid-row: auto; margin-top: 2px; }
}

/* Dark green-black footer band (white footer text via the work-light variant) */
.cereus-case .footer-section-3 { background-color: var(--color-case-cereus-dark); }

/* ============================================================
   H. Scroll reveal + bottom dock (homepage first; other pages
   opt in page-by-page). Progressive: everything is visible
   without JS (html.js gates the hidden state), and motion is
   disabled under prefers-reduced-motion.
   ============================================================ */
html.js .reveal { opacity: 0; transform: translateY(22px); }
html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--rv-d, 0ms); }
/* Card-grade move-in: work cards travel further and settle a touch slower than text */
html.js .reveal.rv-lift { transform: translateY(48px) scale(.965); }
html.js .reveal.rv-lift.is-in { transform: none; transition-duration: .7s, 1.15s; }
.rv-2 { --rv-d: 120ms; }
.rv-3 { --rv-d: 240ms; }
/* homepage chapter-stack cover RETIRED 2026-07-21 (user prefers sequential flow);
   the case pages' .chapter-stack effect is separate and unchanged */
#selected-works { position: relative; isolation: isolate; }
/* ONE theme backdrop for the whole works run (JS adds html.works-dynamic-bg and drives
   the color; cards then go transparent). Absolute inset:0 = for a solid color this is
   visually identical to a viewport-pinned layer, ends exactly with the section, and
   can't overstay (sticky + negative margin let it leak 100vh into About). */
.works-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background-color .75s ease; }
html.works-dynamic-bg #selected-works .main-card,
html.works-dynamic-bg #selected-works > section { background-color: transparent !important; }   /* the chapter wrappers carry their own #f5f5f5 */

/* Case-page reveal variants: fade-only (safe above sticky descendants — a
   transform would become their containing block) and row-staggered lists */
html.js .reveal.rv-fade { transform: none; }
/* rv-seq: a container whose direct children cascade in DOM order (rows read
   left-to-right, stacks top-to-bottom). Container itself is not hidden. */
html.js .rv-seq > * { opacity: 0; transform: translateY(18px); }
html.js .rv-seq.is-in > * { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .8s var(--ease-out); }
html.js .rv-seq.is-in > :nth-child(2) { transition-delay: 140ms; }
html.js .rv-seq.is-in > :nth-child(3) { transition-delay: 280ms; }
html.js .rv-seq.is-in > :nth-child(4) { transition-delay: 420ms; }
html.js .rv-seq.is-in > :nth-child(5) { transition-delay: 560ms; }
html.js .rv-seq.is-in > :nth-child(6) { transition-delay: 700ms; }
html.js .rv-seq.is-in > :nth-child(7) { transition-delay: 840ms; }
html.js .rv-seq.is-in > :nth-child(8) { transition-delay: 980ms; }
html.js .rv-seq.is-in > :nth-child(9) { transition-delay: 1120ms; }
html.js .rv-seq.is-in > :nth-child(10) { transition-delay: 1260ms; }
html.js .rv-seq.is-in > :nth-child(11) { transition-delay: 1400ms; }
html.js .rv-seq.is-in > :nth-child(12) { transition-delay: 1540ms; }
html.js .rv-seq.is-in > :nth-child(13) { transition-delay: 1680ms; }
html.js .rv-seq.is-in > :nth-child(14) { transition-delay: 1820ms; }
html.js .rv-rows .point-row { opacity: 0; transform: translateY(22px); }
html.js .rv-rows.is-in .point-row { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform 1s var(--ease-out); }
html.js .rv-rows.is-in .point-row:nth-child(2) { transition-delay: 120ms; }
html.js .rv-rows.is-in .point-row:nth-child(3) { transition-delay: 240ms; }
html.js .rv-rows.is-in .point-row:nth-child(4) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .rv-rows .point-row { opacity: 1; transform: none; transition: none; }
  html.js .rv-seq > * { opacity: 1; transform: none; transition: none; }
}

/* Homepage chapter: Prio (Directing Attention) — sand card, media link keeps the
   block display so the percentage-height chain cannot collapse (cereus lesson). */
/* Cereus chapter media: the transparent mascot PNG sits on a lighter green panel
   (one step lighter than the chapter green) - restored after being mistaken for a
   vestigial load-flash placeholder in the 2026-07 review. */
.image-235 { background-color: var(--color-case-cereus-light); }

.main-card.prio { background-color: var(--color-case-prio); }
.project-media.cereus, .project-media.prio { display: block; position: relative; }
.project-media.cereus > a, .project-media.prio > a { display: block; }
.image-prio { background-color: var(--color-case-prio); }

/* Project captions: the NAME leads — bold white name, softly dimmed descriptor.
   The caption inherits its card's bottom radii as a GEOMETRIC guarantee: Chromium can
   drop the container's rounded clip while the hover transitions composite (the VW bug),
   and a square caption gradient then pokes past the corners — self-rounding closes it. */
.project-thumb-caption { color: rgba(255, 255, 255, .82); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.project-thumb-caption .thumb-name { color: var(--color-white); font-weight: 700; }

/* JD chapter media, two-column layout only: the grid box stretches to the left card's
   height and the two rows split it EVENLY, so the middle gap equals the 16px column gap
   at every width; each tile's media COVERS its (taller-than-3:2) frame, centered. */
@media screen and (min-width: 992px) {
  .project-media-grid { grid-template-rows: 1fr 1fr; align-content: stretch; }
  /* the height chain must pass through the <a> grid items down to the tiles */
  .project-media-grid > a { display: block; height: 100%; }
  .project-tile-iqs, .project-tile-css-bridge { height: 100%; }
  .project-tile-iqs .homepic, .project-tile-css-bridge .homepic { height: 100%; aspect-ratio: auto; }
  .project-tile-iqs .homepic > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .project-tile-css-bridge img-comparison-slider { height: 100%; width: 100%; }
  .project-tile-css-bridge img-comparison-slider img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center; }
}

/* ============================================================
   Primary nav, control-bar style: ink pill, icon-over-label
   items, roomy spacing. Docked at the top of the viewport. Shared by every page via the partial.
   ============================================================ */
.navbar { transition: opacity .3s ease, visibility 0s 0s; }
/* always-on docked bar; the opacity/visibility transition serves the homepage sig-intro reveal */
.navbar-bar { border: 0; justify-content: center; grid-column-gap: 46px; grid-row-gap: 46px; padding: 10px 36px; }
/* liquid-glass pill — light-built material (cross-browser base): frosted body + curved
   specular highlight + rim lighting. Chromium swaps the frost for the TRUE displacement
   refraction via .nav-glass-svg (UA+probe gated in the nav partial). */
.navbar-bar, .nav-cta {
  position: relative;
  background: var(--glass-gloss), rgba(var(--glass-frost-rgb), .44);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-rim-shadow), 0 12px 34px rgba(0, 0, 0, .45);
}
.navbar-bar::before, .nav-cta::before {
  content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: 0;
  background: var(--glass-specular);
}
/* Contact CTA pill: sits to the right of the nav pill (nav container flexes into a row),
   same glass material, one-line icon + label */
.navbar .container-regular { display: flex; flex-flow: row; justify-content: center; align-items: stretch; gap: 14px; max-width: none; }
.navbar .navbar-bar { margin-left: 0; margin-right: 0; }   /* auto margins would swallow the flex gap */
/* stacked icon-over-label, mirroring the nav items; hover = gentle brighten, no motion */
.nav-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 0 26px; border-radius: var(--radius-pill); color: var(--color-white); text-decoration: none; }
.nav-cta .nav-cta-icon, .nav-cta .nav-cta-label { opacity: .6; transition: opacity .2s ease; }   /* dim the CONTENT like nav items do — the glass material never dims */
.nav-cta-label { font-size: var(--text-nav-label); line-height: 1; font-weight: 500; }
.nav-cta-icon { width: 24px; height: 24px; display: block; }
.nav-cta-icon svg { display: block; width: 100%; height: 100%; }
.nav-cta:hover .nav-cta-icon, .nav-cta:hover .nav-cta-label { opacity: 1; }
/* saturate 1.5 (vs --glass-saturate 1.6): the displacement pass already intensifies color.
   NOTE: the map is generated from the BAR's rect and stretches onto the narrower CTA —
   accepted; both pills read as one material. */
.nav-glass-svg .nav-cta { backdrop-filter: url(#nav-glass-filter-cta) saturate(1.5); -webkit-backdrop-filter: url(#nav-glass-filter-cta) saturate(1.5); }
@media screen and (max-width: 600px) { .nav-cta { padding: 0 14px; } .nav-cta-label { display: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar-bar, .nav-cta, .pdf-modal-panel, .fx-gate-panel { background-color: var(--color-icon); }
  .fx-gate-scrim { background-color: rgba(8, 11, 16, .92); }   /* no blur available — go near-opaque for the confidentiality */
}
.nav-glass-filtersvg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
/* Chromium: the light-built material stays, but the frost swaps to the TRUE GlassSurface
   displacement refraction (map loads now that the filter svg lives inside the pill). */
.nav-glass-svg .navbar-bar {
  backdrop-filter: url(#nav-glass-filter) saturate(1.5);
  -webkit-backdrop-filter: url(#nav-glass-filter) saturate(1.5);
}
.nav-links { display: contents; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--color-white); opacity: .6; transition: opacity .2s ease; }
.nav-item:hover, .nav-item.is-current { opacity: 1; }   /* state contrast carried by the .6 default alone */
.nav-item-icon { width: 24px; height: 24px; display: block; }
.nav-item-icon svg { display: block; width: 100%; height: 100%; }
.nav-item-label { font-size: var(--text-nav-label); line-height: 1; font-weight: 500; }
/* keyboard focus: the global accent outline is invisible on the translucent pill over light
   pages (~1.3-1.8:1) — use a white ring instead (same move as .site-footer.white links) */
.nav-item:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; border-radius: 8px; }
@media screen and (max-width: 479px) {
  .navbar-bar { grid-column-gap: 30px; padding: 8px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item, .navbar { transition: none; }
}

/* Resume PDF lightbox (shared via the nav partial) */
.pdf-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; animation: pdf-modal-in .18s ease-out; }
.pdf-modal[hidden] { display: none; }
.pdf-modal-scrim { position: absolute; inset: 0; background: rgba(var(--glass-frost-rgb), .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* liquid-glass modal frame — the nav pill's material language: dark frost + backdrop blur,
   top-center specular, rim lighting; the resume sheet floats inset within the glass slab */
.pdf-modal-panel {
  position: relative; width: min(860px, 94vw); height: min(88vh, 1120px);
  background: var(--glass-gloss), rgba(var(--glass-frost-rgb), .5);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));   /* was 16px; unified to the material token */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--radius-card);
  box-shadow: var(--glass-rim-shadow), 0 24px 80px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; overflow: hidden;
}
.pdf-modal-panel::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: 0; background: var(--glass-specular); }
.pdf-modal-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); position: relative; z-index: 1; }
.pdf-modal-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-white); }
.pdf-modal-actions { display: flex; gap: 6px; }
.pdf-modal-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-pill); border: 0; background: rgba(255, 255, 255, .08); color: var(--color-neutral-200); cursor: pointer; transition: background .2s ease; }
.pdf-modal-btn:hover { background: rgba(255, 255, 255, .18); }
.pdf-modal-btn svg { width: 17px; height: 17px; display: block; }
.pdf-modal-body { flex: 1; min-height: 0; background: transparent; overflow: auto; padding: 12px; position: relative; z-index: 1; }
.pdf-modal-body img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.pdf-modal-body iframe { width: 100%; height: 100%; border: 0; display: block; }
@keyframes pdf-modal-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pdf-modal { animation: none; } }

/* FluidGlass cursor: fixed glass ball, native cursor hidden while it's active */
html.fx-cursor-on, html.fx-cursor-on * { cursor: none !important; }
.fx-cursor {
  position: fixed; left: 0; top: 0; width: 88px; height: 88px; border-radius: 50%;
  pointer-events: none; z-index: 99999; opacity: 0; transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease;
  backdrop-filter: url(#fx-cursor-lens) blur(1px) saturate(1.35) brightness(1.06);
  -webkit-backdrop-filter: url(#fx-cursor-lens) blur(1px) saturate(1.35) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 4px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .2);
  /* nav-pill lighting: top-center specular + vertical gloss over the same dark frost */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 32%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .16)),
    radial-gradient(120% 95% at 50% -35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 62%);
  background-color: rgba(var(--glass-frost-rgb), .22);
}
/* big state: the refraction rim IS the edge — no drawn rings needed */
.fx-cursor.is-big { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 4px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .2); }
.fx-cursor-filtersvg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
@supports not (backdrop-filter: blur(1px)) { .fx-cursor { display: none; } html.fx-cursor-on, html.fx-cursor-on * { cursor: auto !important; } }
@media (forced-colors: active) { .fx-cursor { display: none; } html.fx-cursor-on, html.fx-cursor-on * { cursor: auto !important; } }

/* visible "Coming soon" marker on unpublished cards — reaches keyboard/touch/SR users
   (the cursor tooltip is hover-only); frost pill, top-right of the artwork */
.coming-soon .homepic, .coming-soon .card-thumb { position: relative; }
.cs-badge { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(var(--glass-frost-rgb), .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--color-white); font-size: var(--text-micro); font-weight: 600; letter-spacing: .02em; line-height: 1; pointer-events: none; }

/* ============================================================
   Responsive pass (2026-07-21 device audit): tablet + phone fixes.
   Appended late so same-specificity overrides win by source order.
   ============================================================ */
/* main must fill the viewport: base .body{align-items:center} + a surviving <=767
   .body{display:flex} (line ~5629) shrink-wrap <main>, shifting/clipping the homepage
   cards ~25px at 390 (verified) — the width guard fixes it regardless of the flex overrides */
main { width: 100%; }
/* nav row: the container gutter starved the row below ~426px and flex-crushed the CTA to 28px */
.navbar .container-regular { padding-left: 0; padding-right: 0; }
.nav-cta { flex: none; }
@media screen and (max-width: 600px) { .nav-cta { min-width: 48px; justify-content: center; } }
/* touch targets: footer links were 20px tall, nav items 43px (44px guideline) — pad the
   hit area, negative margin keeps the visual rhythm */
.ft-nav .ft-link { padding: 12px 0; margin: -12px 0; }
.nav-item { padding: 6px 12px; margin: -6px -12px; }   /* chip surface doubles as a bigger hit area */
/* works grid: a legacy phone rule collapsed thumbs to fixed 200px-high letterboxes */
.works-grid-3 .tumbnail-projects { height: auto; }
/* works grid tablet: description column had no floor (7-line ragged captions at 768) */
@media screen and (max-width: 991px) { .works-grid-3 .content.project { grid-template-columns: minmax(150px, 1fr) auto; grid-column-gap: 18px; } }
/* 404: CTA sat hard-left under centered text */
.works-gallery-section .works-column { align-items: center; }
/* case pages: content columns hit the screen edge — 800px fixed at tablet, 360/320 fixed on phone */
@media screen and (max-width: 991px) { .case-section-block-2, .case-section-block-3, .case-meta-block, .case-meta-block._2 { width: min(800px, calc(100% - 48px)); } }
@media screen and (max-width: 479px) {
  .case-section-block, .case-meta-block, .case-meta-block._2,
  .case-section-block-4 { width: min(360px, calc(100vw - 32px)); }
}
.prio-case .hmw-wrap { width: min(var(--w-content), calc(100% - 48px)); }
@media screen and (min-width: 1600px) { .prio-case .hmw-wrap { width: min(var(--w-content-lg), calc(100% - 48px)); } }   /* keep the wide-canvas upgrade */
/* case hero: the h1 sat under the fixed glass pill on phone/tablet (pt-120 collapses to ~56px) */
@media screen and (max-width: 991px) { .case-hero-header.pt-120 { padding-top: clamp(110px, 14vw, 130px); } }
/* case meta: below 991 the sidebar+intro columns can't coexist — STACK them (meta rows on
   top, intro below); full-width rows stop the value word-per-line wrapping entirely */
@media screen and (max-width: 991px) {
  .case-meta-layout { grid-template-columns: 1fr; }
  .case-meta-list { width: 100%; }
}
/* case meta sidebar: the 1fr/2fr label grid crushed "My Role:" to word-per-line at tablet */
@media screen and (max-width: 1199px) { .case-meta-item { grid-template-columns: auto 1fr; } }
/* css-bridge: desktop art-direction insets baked into the <img> starved phone renders */
@media screen and (max-width: 991px) {
  .process-figure, .process-figure-2 { padding-right: 0; }
  .solution-figure-2, .solution-figure-3 { padding-left: 0; }
}
/* volume-walks: the fixed 613px chart video forced a 613px layout track on a 390px phone */
.chart-bg-video { width: 100%; max-width: 614px; height: auto; aspect-ratio: 614 / 400; }
/* pop-up + vw/bw: un-guttered text blocks and section labels touched x=0 up to tablet */
@media screen and (max-width: 1199px) {
  .case-section-block-4, .carousel-block-3, .carousel-block-4 { padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); box-sizing: border-box; }
}
/* pop-up: 12px body copy unreadable on phone */
.insight-card-text.onwhite, .lead-in-2.onwhite { font-size: 14px; }
@media screen and (max-width: 767px) { .insight-card-text.onwhite, .lead-in-2.onwhite { font-size: 15px; } }
/* hero bio: the desktop line pins double-wrap in the 768-990 column (the <=767 hide stays too) */
@media screen and (max-width: 991px) { .hero-bio p br { display: none; } }

/* stacked meta (<=991): each row is its own grid, so an auto label column gives every row
   a different value-start x — fix the label column so all values align to one axis
   (148px clears the longest label, "Team Members:") */
@media screen and (max-width: 991px) {
  .case-meta-item { grid-template-columns: 148px 1fr; }
}
@media screen and (max-width: 479px) {
  /* .case-hero variant needed: .case-hero .case-meta-item sets a 48px gap at higher
     specificity — 132px label + 14px gap frees the value column enough for one-line values */
  .case-meta-item, .case-hero .case-meta-item { grid-template-columns: 132px 1fr; grid-column-gap: 14px; }
}

/* CTA rows (prio demo buttons): flex instead of inline-block line boxes — the badges
   overflowed their anchors' line box by ~22px and overlapped each other when the two
   buttons wrapped at phone widths; flex+gap stacks them cleanly at any width */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cta-row .w-inline-block { display: block; margin: 0; }   /* kill legacy sibling margins; the gap spaces the row */

/* homepage sharge card: the image + video columns can't share a phone width — stack them
   (image feature on top, 4:3 video below, full width each) */
@media screen and (max-width: 767px) {
  .sharge-media { grid-template-columns: minmax(0, 1fr); }
  /* release the 125px caps that were tuned for the old two-column squeeze
     (the 125 lives on .sharge-feature itself in the <=479 block) */
  .sharge-feature, .homepic.sharge, .home-card-thumb-4 { width: 100%; }
  .sharge-feature .project-thumb-caption, .project-thumb-caption.middle { width: auto; }
}

/* rounded-corner clipping can drop while a composited child animates (the hover img
   scale promotes a layer; Chromium quirk seen on the VW card) — isolation forces the
   radius clip to composite correctly on every captioned card */
.project-media-feature, .sharge-feature, .work-card, .work-card-wide,
.project-tile-iqs, .project-tile-css-bridge { isolation: isolate; transform: translateZ(0); /* pre-promote: rounded clip stays on the compositor during hover transitions */ }
/* devices that can't hover (phones/tablets) show the project names statically */
@media (hover: none) {
  .project-thumb-caption { opacity: 1; transform: none; margin: 0; }
}

/* hero CTAs: below ~420px the two badges can't sit side by side without their labels
   wrapping ("Selected / Works") — stack them and keep each label on one line */
@media screen and (max-width: 479px) {
  .hero-cta-row { flex-direction: column; align-items: center; grid-row-gap: 14px; }
  .hero-cta-row .title-badge { white-space: nowrap; }
}

/* soft password gate (see js/fx-gate.js): a glass POPUP over the current page —
   link clicks open it in place; direct visits to a data-gate page get the same popup
   over the scrim-blurred content. One unlock (localStorage) opens all gated pages. */
html.fx-locked { overflow: clip; }   /* clip also forbids focus/programmatic scrolling of the locked page */
html.fx-locked body > :not(.fx-gate) { visibility: hidden; }   /* pre-paint, until the popup mounts */
html.fx-locked.fx-gate-ready body > :not(.fx-gate) { visibility: visible; }   /* the scrim blur now covers it */
.fx-gate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fx-gate-scrim { position: absolute; inset: 0; background: rgba(var(--glass-frost-rgb), .5); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }
.fx-gate-panel { position: relative; width: min(440px, 92vw); padding: 54px 36px 48px; border-radius: var(--radius-card); text-align: center; background: var(--glass-gloss), rgba(var(--glass-frost-rgb), .38); backdrop-filter: blur(var(--glass-blur)) saturate(1.8); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--glass-rim-shadow), 0 24px 80px rgba(0, 0, 0, .5); }
.fx-gate-panel::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: 0; background: var(--glass-specular); }
.fx-gate-panel > :not(.fx-gate-filtersvg):not(.fx-gate-close) { position: relative; z-index: 1; }
.fx-gate-filtersvg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
/* Chromium (gated in fx-gate.js): frost swaps to the TRUE displacement refraction */
.fx-gate-panel.fx-glass { backdrop-filter: url(#fx-gate-lens) saturate(1.5); -webkit-backdrop-filter: url(#fx-gate-lens) saturate(1.5); }
.fx-gate { transition: opacity .3s ease; }
.fx-gate.is-open { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fx-gate { transition: none; } }
.fx-gate-title { color: var(--color-white); font-size: 1.5rem; font-weight: 600; margin: 0 0 22px; }
.fx-gate-hint { color: var(--color-neutral-300); font-size: 1rem; line-height: 1.7; margin: 0 0 36px; }
/* one pill: the arrow submit lives INSIDE the password field's right end */
.fx-gate-form { display: flex; align-items: center; gap: 6px; max-width: 280px; margin: 0 auto; height: 42px; padding: 4px 4px 4px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); }
.fx-gate-form:focus-within { outline: 2px solid var(--color-white); outline-offset: 2px; }
.fx-gate-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--color-white); font-size: .9375rem; font-family: var(--font-body); }
.fx-gate-input:focus, .fx-gate-input:focus-visible { outline: none; }
.fx-gate-input::placeholder { color: var(--color-neutral-400); }
.fx-gate-btn { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: var(--color-white); color: var(--color-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease; }
.fx-gate-btn:hover { opacity: .85; }
.fx-gate-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--color-neutral-200); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.fx-gate-close:hover { background: rgba(255, 255, 255, .18); }
.fx-gate-close svg { width: 15px; height: 15px; display: block; }
.fx-gate-err { color: #ff9b7a; font-size: .875rem; margin: 14px 0 0; }
.fx-gate-panel.is-shake { animation: fx-gate-shake .4s; }
@keyframes fx-gate-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .fx-gate-panel.is-shake { animation: none; } }

/* homepage card intros: larger + airier under the heading (2026-07-21); the scoped
   selector outranks both the 16px base and the >=1280 media copy, and .pt-16 */
.project-card-text .project-card-desc { font-size: var(--text-lead); line-height: 165%; padding-top: 26px; max-width: 66.666%; }
@media screen and (max-width: 767px) { .project-card-text .project-card-desc { max-width: 100%; } }
@media screen and (max-width: 479px) { .project-card-text .project-card-desc { font-size: 16px; padding-top: 20px; } }

/* card text block fills the body column (legacy 64% cap made the 2/3 intro compute
   against a narrowed box); the 2/3 desc rule above now means 2/3 of the real column */
.project-card-text { width: 100%; }

/* homepage card headings: ONE weight throughout — the accent span/strong no longer
   bumps to 700 (they already inherit color; now weight too) */
.project-card-text .heading-accent, .project-card-text .heading strong,
.project-card-text .heading .label-strong { font-weight: inherit; }

/* ScrollReveal on the cards (headings + intros + media): block tilts from 5deg */
.srv { transform-origin: 0% 50%; }
.srv-word { display: inline-block; will-change: opacity; }

/* ============================================================
   About goes INK (2026-07-21): the same black-stage / light-elements color
   relationship as the hero — bookending the page in black.
   ============================================================ */
.about-section { background-color: var(--color-ink); }
.about-section .about-row { padding-top: clamp(130px, 13vw, 280px); align-items: stretch; grid-template-columns: 4.7fr 6fr; grid-column-gap: clamp(32px, 3.5vw, 56px); width: min(1280px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
/* the whole About column (text row, resume, photo wall) shares one container — a step
   narrower than the works chapters above for a more relaxed read */   /* roomier entry; the intro column flows at its own height instead of stretching to the portrait */
/* looser rhythm inside the intro column */
.about-section .about-content .pt-10 { padding-top: 20px; }
.about-section .about-content .pt-16 { padding-top: 30px; }
.about-section .about-content .pt-30 { padding-top: 48px; }
.about-section .about-principle + .about-principle { margin-top: 18px; }
.about-section .card.testimonials { padding-bottom: 12px; }
.about-section .about-content { padding: 0; }
.about-section .about-details { margin-top: 44px; }
/* un-stretched row: the img inside the frame is ABSOLUTE (webflow pattern), so the frame
   itself carries the intrinsic 2:3 ratio; the img fills it */
.about-section .about-portrait-frame { align-self: stretch; height: 100%; }
.about-section .about-portrait-2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-section .about-block, .about-section .about-content { background-color: transparent; }   /* inner wrappers painted #f5f5f5 / white over the stage */
.about-section .card.testimonials { background-color: transparent; border-bottom: 0; }
.about-section .about-card-title { color: var(--color-white); }
.about-section .about-philosophy { color: var(--color-white); }
.about-section .card.testimonials .body-text { color: var(--color-neutral-300); }
.about-section .about-principle-text { color: var(--color-neutral-200); }
.about-section .about-details .paragraph-small.align-left,
.about-section .about-details .about-extra__k { color: var(--color-neutral-400); }
.about-section .about-details .sub-heading-large,
.about-section .about-details .about-extra__v { color: var(--color-white); }
.about-section .about-details .body-text { color: var(--color-neutral-300); }
/* dark icon artwork flips light (the awards-strip trick) */
.about-section .contact-icon { filter: grayscale(1) invert(1); }
/* the Resume CTA reads as the hero's PRIMARY white pill on the black stage */
.about-section .badge.popup.project.home { background-color: var(--color-white); border-color: transparent; }
.about-section .badge.popup.project.home .title-badge { color: var(--color-ink); }
.about-section .badge.popup.project.home .icon svg path { fill: var(--color-ink); }

/* ============================================================
   Homepage type unification (2026-07-21): fewer, role-based sizes.
   Late in source = wins ties; caption overrides scoped >=992 so the
   phone ladders keep their tuned values.
   ============================================================ */
@media screen and (min-width: 992px) {
  /* name captions: ONE display size (computed mix was 36 / 32 / 31.09) */
  .project-thumb-caption, .project-thumb-caption.large { font-size: var(--text-h3); }
  /* tile captions: ONE size (em-based mix computed ~15.7-16.8 depending on card) */
  .project-thumb-caption.middle, .project-thumb-caption.small { font-size: var(--text-h4); }
}
/* card intros: one weight (a leftover 300 variant lived on the light desc) */
.project-card-text .project-card-desc { font-weight: 400; }
/* contact/meta values join the --text-sm fluid family (was a stray fixed 15px) */
.sub-heading-large { font-size: var(--text-sm); }

/* review #3 fixes (2026-07-21) */
/* keyboard users get the project-name captions too (hover-only before) */
.project-media:focus-within .project-thumb-caption,
.sharge-media:focus-within .project-thumb-caption,
.more-works-grid:focus-within .project-thumb-caption { opacity: 1; transform: translateY(0); }
/* works cards: thumbs collapsed to 0x0 until lazy images arrived (2775px layout jump) */
.works-grid-3 .card-thumb { width: 100%; }
/* backdrop color still switches under reduced motion, just without the animated fade */
@media (prefers-reduced-motion: reduce) { .works-backdrop { transition: none; } }

/* ===== About / photography strip — "Beyond the Screen" (2026-07-21) =====
   personal photography (self-hosted webp copies from the user's own instagram) on the
   About black stage: a horizontally scrollable film strip, edge-faded, scrollbar hidden */
.photo-strip-block { width: min(1280px, calc(100% - 48px)); margin: clamp(40px, 5vw, 72px) auto 0; }
.photo-strip-label { color: var(--color-neutral-400); font-size: var(--text-micro); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.photo-strip-sub { color: var(--color-neutral-300); font-size: var(--text-lead); margin: 0 0 30px; }
/* Masonry photo wall (React Bits port): JS packs the columns; items are GRAYSCALE at
   rest and colorize on hover — the entrance (rise + blur->focus, staggered) and fluid
   resize reflow ride the transitions below */
.masonry { position: relative; width: 100%; }
.msn-item { position: absolute; top: 0; left: 0; background-size: cover; background-position: center; border-radius: var(--radius-sm); box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .5); filter: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1), width .6s cubic-bezier(.22, 1, .36, 1), height .6s cubic-bezier(.22, 1, .36, 1), opacity .8s ease, filter .8s ease; }
.msn-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); transition: backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease, opacity .35s ease; }
.msn-item:hover::after { opacity: 0; backdrop-filter: grayscale(0); -webkit-backdrop-filter: grayscale(0); }   /* both channels: some engines keep backdrop-filter active at opacity 0 */
@media (hover: none) { .msn-item::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .msn-item, .msn-item::after { transition: none; } }

/* ===== About themes: four narrative blocks (dual education / scales / lens / nature) ===== */
.about-themes { width: min(1280px, calc(100% - 48px)); margin: clamp(140px, 16vw, 260px) auto 0; display: flex; flex-direction: column; gap: clamp(72px, 9vw, 140px); }
/* every About theme: regular two-column — text left, content right */
.about-theme { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.about-theme-text { align-self: start; position: sticky; top: clamp(96px, 13vh, 150px); }
.about-theme-media { min-width: 0; }
.about-kicker { color: var(--color-neutral-400); font-size: var(--text-micro); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.about-theme-title { font-family: var(--font-headings); color: var(--color-white); font-size: var(--text-h3); font-weight: 600; line-height: 1.25; margin: 0 0 18px; }
.about-theme-body { color: var(--color-neutral-300); font-size: var(--text-lead); line-height: 1.7; margin: 0; }
.edu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* each school as a glass card: seal + name + degree */
.edu-row { display: flex; flex-direction: column; gap: 16px; padding: 26px 22px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); }
.edu-seal { width: 56px; height: 56px; object-fit: contain; flex: none; background: var(--color-white); border-radius: 50%; padding: 5px; }
.edu-school { color: var(--color-white); font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.edu-degree { color: var(--color-neutral-300); font-size: var(--text-sm); line-height: 1.6; margin: 0; }
/* details grid is contact-only now: three items in one airy row */
.about-section .about-details { grid-template-columns: 1fr; }
.about-section .about-details > div:first-child { display: flex; flex-wrap: wrap; gap: 28px 72px; }


@media screen and (max-width: 991px) {
  /* the 340px/1fr split leaves a ~280px media strip through 768-990 — stack instead */
  .about-theme { grid-template-columns: 1fr; gap: 24px; }
  .about-theme-text { position: static; }
}
@media screen and (max-width: 767px) {
  .edu-list { grid-template-columns: 1fr; }
  .scales-track img { height: 160px; }
}

/* theme 3 "Behind the Lens": Vimeo tour above the photo wall (both in the right column) */
.lens .about-theme-media .masonry { margin-top: 12px; }
.lens-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .6); }
.lens-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Out of Office: 4-photo justified strip, same language as the discipline gallery */
.office-grid { display: flex; flex-direction: column; gap: 10px; }
/* full-width bars, all four cropped to the same height */
.office-grid img { width: 100%; height: clamp(200px, 24vw, 320px); object-fit: cover; border-radius: var(--radius-sm); display: block; }
@media screen and (max-width: 767px) { .office-grid img { height: clamp(150px, 40vw, 240px); } }

/* ===== About gallery lightbox (glass popup, prev/next) ===== */
html.fx-lb-on { overflow: clip; }
.fx-lb { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 40px; animation: pdf-modal-in .2s ease-out; }
.fx-lb[hidden] { display: none; }
.fx-lb-scrim { position: absolute; inset: 0; background: rgba(6, 8, 11, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fx-lb-stage { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(1100px, 88vw); max-height: 86vh; }
.fx-lb-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .8); }
.fx-lb-nav, .fx-lb-close { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; color: var(--color-white); background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14); transition: background .2s ease; }
.fx-lb-nav:hover, .fx-lb-close:hover { background: rgba(255, 255, 255, .2); }
.fx-lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; }
.fx-lb-nav svg { width: 24px; height: 24px; }
.fx-lb-prev { left: 24px; } .fx-lb-next { right: 24px; }
.fx-lb-close { top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; }
.fx-lb-close svg { width: 20px; height: 20px; }
.fx-lb-nav:focus-visible, .fx-lb-close:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }
.msn-item:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fx-lb { animation: none; } }
@media screen and (max-width: 600px) { .fx-lb { padding: 16px; } .fx-lb-nav { width: 42px; height: 42px; } .fx-lb-prev { left: 8px; } .fx-lb-next { right: 8px; } }

/* contact as three horizontal glass cards (same language as the education cards) */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 14px; }   /* each card fits its value on one line, extra space shared evenly */   /* email/phone wider; linkedin just enough for one line */
.contact-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; padding: 24px 22px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); min-width: 0; }
.contact-head { display: flex; align-items: center; justify-content: flex-start; gap: 9px; }
.about-section .contact-card .contact-icon { width: 17px; height: 17px; object-fit: contain; flex: none; filter: grayscale(1) invert(1); }
.contact-card .contact-label { color: var(--color-neutral-300); font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; margin: 0; }
.contact-card .contact-value { color: var(--color-white); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; overflow-wrap: break-word; }
@media screen and (max-width: 767px) { .contact-cards { grid-template-columns: 1fr; } }

/* interactive contact cards: pointer + subtle hover (they DO something now) */
.contact-card.is-action { cursor: pointer; transition: background .2s ease, transform .2s var(--ease-out); }
.contact-card.is-action:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.contact-card.is-action:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }
/* "Copied" toast */
.fx-toast { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 12px); z-index: 4000; padding: 11px 20px; border-radius: var(--radius-pill); background: rgba(var(--glass-frost-rgb), .7); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .14); color: var(--color-white); font-size: var(--text-sm); font-weight: 500; box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s var(--ease-out); }
.fx-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .fx-toast { transition: opacity .25s ease; } }

.contact-intro { color: var(--color-white); font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin: 0 0 6px; }

/* left portrait: illustration at rest, real photo on hover */
.about-portrait-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.about-portrait-frame:hover .about-portrait-real { opacity: 1; }
@media (hover: none) { .about-portrait-real { display: none; } }

/* resume badge row under the About intro (both pages), aligned with the intro container */
.about-resume-row { display: flex; justify-content: center; width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: clamp(64px, 8vw, 130px) 0; }

/* auto-scrolling WebGL gallery band under the About intro (homepage) */
.about-circular { width: 100%; height: clamp(400px, 46vw, 620px); position: relative; }
.circular-gallery { width: 100%; height: 100%; overflow: hidden; cursor: grab; touch-action: pan-y; }
.circular-gallery.is-grabbing { cursor: grabbing; }
.circular-gallery:focus-visible { outline: 2px solid var(--color-white); outline-offset: 4px; }

/* one-line summary of the About page themes, above the circular gallery */
.about-gallery-intro { max-width: 1000px; margin: clamp(-40px, -2.5vw, -8px) auto 0; position: relative; padding: 0 24px clamp(72px, 8vw, 128px); text-align: center; }
.about-page .about-resume-row { padding-top: clamp(120px, 14vw, 220px); }
.about-page .about-themes { margin-top: clamp(24px, 3vw, 56px); }   /* resume row already carries its own bottom padding */
@media screen and (max-width: 991px) { .about-gallery-intro p br { display: inline; } }   /* keep the 5-line stanza on small screens (hero hides its brs, this copy keeps them) */
.about-more-row { display: flex; justify-content: center; padding-bottom: clamp(48px, 6vw, 96px); }

/* homepage: extra air between the works finale and the About intro */
.more-works-link.pb-100 { padding-bottom: clamp(84px, 9vw, 220px); }
/* secondary buttons (dark pill badges): fill only — no stroke in any context */
.badge.popup.project.home, .home-hero-section .badge.popup.project.home { border: 0; }

/* pill CTAs: gentle grow on hover (original IX2 had scale 1.05; reveal is-in outranks
   a bare :hover transform, hence the html.js .reveal variant) */
.badge.popup { transition: transform .25s var(--ease-out), opacity .5s ease, box-shadow .25s var(--ease-out); }
html.js .reveal.is-in.badge.popup { transition: transform .25s var(--ease-out), opacity .6s ease, box-shadow .25s var(--ease-out); }   /* is-in's own transition (transform 1s) outranks the line above — restore the snappy hover on revealed badges */
html.js .reveal.badge.popup:hover, .badge.popup:hover { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { html.js .reveal.badge.popup:hover, .badge.popup:hover { transform: none; } }

/* hand-rolled before/after compare (homepage css-bridge tile): two cover imgs fill
   the 3:2 frame exactly; clip-path wipes the top one at --fx-x */
.project-tile-css-bridge .homepic._3-2 { position: relative; }
.fx-compare { position: absolute; inset: 0; cursor: col-resize; background-color: var(--color-neutral-500); }   /* the imgs are RGBA — this is the scene backdrop showing through */
.fx-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-compare-top { clip-path: inset(0 calc(100% - var(--fx-x, 50%)) 0 0); }
.fx-compare-divider { position: absolute; top: 0; bottom: 0; left: var(--fx-x, 50%); width: 2px; margin-left: -1px; background: var(--color-white); box-shadow: 0 0 10px rgba(0, 0, 0, .35); pointer-events: none; }
.fx-compare-divider .compare-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* About intro: the 4.7/6 desktop grid must stack below 992 (the unscoped rule
   at ~8006 was out-cascading the stock 1fr stacking rules) */
@media screen and (max-width: 991px) {
  .about-section .about-row { grid-template-columns: 1fr; grid-row-gap: 28px; width: min(600px, calc(100% - 48px)); }
  .about-section .about-portrait-frame { align-self: auto; height: auto; aspect-ratio: 3 / 4; }
}

/* phone footer: the 84px envelope with -34px top margin lands on the copyright line */
@media screen and (max-width: 600px) { .ft-lottie { width: 56px; height: 56px; margin-top: 0; } .site-footer.ft-done .ft-lottie { transform: none; } }

/* resume modal: dark scrollbar */
.pdf-modal-body { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
.pdf-modal-body::-webkit-scrollbar { width: 10px; }
.pdf-modal-body::-webkit-scrollbar-track { background: transparent; }
.pdf-modal-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .24); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.pdf-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); border: 2px solid transparent; background-clip: content-box; }

/* below the wide layouts the chapter intro reads in one column — let it use the full width */
@media screen and (max-width: 1279px) { .project-card-text .project-card-desc { max-width: 100%; } }

/* hero -> works cover: the hero stage pins, Selected Works slides up over it
   (single boundary only — the chapters inside keep their sequential flow) */
.home-stack > .home-stage { background-color: var(--color-ink); }
html.js .home-stack > section:not(:last-child) { padding-bottom: clamp(160px, 26vh, 300px); }   /* dwell below the awards strip before the cover begins */
html.js .home-stack > section:last-child { position: static; top: auto; }   /* the closing section scrolls normally; the footer must not trigger a third cover */
html.js .home-stack > #selected-works { position: sticky; padding-bottom: clamp(240px, 38vh, 440px); }   /* the stock #selected-works{position:relative} outranks the stack's sticky by ID — relative + the stick-top offset shifted the whole run 4000px up. Sticky restored: pins at its end, About covers. */

/* More Works: secondary tier — quiet fill, dark label (the dark pill read as primary) */
.more-works-link .badge.popup.project.home { background-color: rgba(31, 32, 33, .07); }
.more-works-link .title-badge.white { color: var(--color-text); }
.more-works-link .icon.white svg path { fill: var(--color-text); }

/* pre-baked finished signature: instant on revisit; hidden while a real intro writes it */
.hero-signature .sig-static { display: block; width: 100%; height: auto; }
html.sig-intro .sig-static { display: none; }

/* ===== Works page: overlay cards, 3-up, full-bleed, vw-sized ===== */
.wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5vw; width: 100%; padding: 0 6vw; box-sizing: border-box; }
.wcard { position: relative; display: block; border-radius: 0; overflow: hidden; text-decoration: none; isolation: isolate; transform: translateZ(0); }
.wcard-shot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transition: transform .5s var(--ease-out); }   /* aspect-ratio reserves height before decode so cards don't collapse & flash the footer; beat the blanket small-screen img{border-radius:15px} */
@media (hover: hover) { .wcard:not(.coming-soon):hover .wcard-shot { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .wcard-shot { transition: none; } .wcard:not(.coming-soon):hover .wcard-shot { transform: none; } }
.wcard-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 1.4vw 2vw 0; text-align: center; pointer-events: none; }
.wcard-brand { display: inline-flex; align-items: center; justify-content: center; gap: 0.5vw; }
.wcard-logo { height: 1.4vw; width: auto; display: block; border-radius: 0; }
.wcard-logo.is-wordmark { height: 1.5vw; }
.wcard-name { color: var(--color-neutral-800); font-size: 1.45vw; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.wcard-desc { color: var(--color-neutral-800); margin: 0.2vw auto 0; max-width: 92%; font-size: 0.92vw; font-weight: 400; line-height: 1.28; }
.wcard[data-tone="dark"] .wcard-name { color: #fff; }
.wcard[data-tone="dark"] .wcard-desc { color: #fff; }
.wcard .cs-badge { z-index: 3; }
/* tablet: 2-up, vw scaled up for the wider cards */
@media screen and (max-width: 1100px) {
  .wgrid { grid-template-columns: repeat(2, 1fr); gap: 0.8vw; padding: 0 3vw; }
  .wcard { border-radius: 0; }
  .wcard-head { padding: 2.2vw 3vw 0; }
  .wcard-brand { gap: 0.8vw; }
  .wcard-logo { height: 2.6vw; } .wcard-logo.is-wordmark { height: 3.2vw; }
  .wcard-name { font-size: 2.4vw; }
  .wcard-desc { font-size: 1.5vw; margin-top: 0.5vw; max-width: 92%; }
}
/* phone: 1-up */
@media screen and (max-width: 700px) {
  .wgrid { grid-template-columns: 1fr; gap: 3vw; padding: 0 4vw; }
  .wcard { border-radius: 0; }
  .wcard-head { padding: 4.6vw 6vw 0; }
  .wcard-brand { gap: 1.6vw; }
  .wcard-logo { height: 5.4vw; } .wcard-logo.is-wordmark { height: 6.6vw; }
  .wcard-name { font-size: 5vw; }
  .wcard-desc { font-size: 3vw; margin-top: 1vw; max-width: 92%; }
}

/* GlareHover on works cards (matches the homepage sweep); coming-soon cards keep the
   glare but not the scale (they aren't clickable) */
.wcard::before { content: ''; position: absolute; inset: -40%; z-index: 1; pointer-events: none; background: linear-gradient(45deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translate(-100%, 100%); transition: transform 1.6s ease; }
.wcard:hover::before { transform: translate(100%, -100%); }
@media (prefers-reduced-motion: reduce) { .wcard::before { transition: none; } }
/* homepage coming-soon (Cereus, Loop): drop the scale invite, keep the glare */
#selected-works .coming-soon:hover .homepic > img { transform: none; }