/* No @imports here: each one is another render-blocking round trip before
   first paint. Montagu Slab / Roboto were unused; Material Symbols is inline
   SVG now; Departure Mono's face is declared inline below. */
@font-face {
  font-family: "Departure Mono";
  src:
    url("../fonts/departure-mono/DepartureMono-Regular.woff2") format("woff2"),
    url("../fonts/departure-mono/DepartureMono-Regular.woff") format("woff");
  /* One regular cut. Claiming the whole weight range stops browsers from
     smearing synthetic bold onto the pixel grid when a rule asks for 600+. */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks for the Google web fonts. Until Inter / Bricolage
   Grotesque arrive (display=swap), text renders in Arial (desktop, iOS) or
   Roboto (Android) resized to the web font's average width and line box, so
   the swap no longer re-wraps lines and shoves the page (it was ~0.2 CLS on
   /work and /404 on mobile). Values measured in Chrome per weight against real
   site copy; every Inter / Bricolage stack lists these two right after the web
   font. "Fallback" = Arial, "Fallback R" = Roboto (no Arial on Android). */
@font-face {
  font-family: "Inter Fallback";
  src: local('Arial'), local('ArialMT');
  font-weight: 100 500;
  size-adjust: 106.43%;
  ascent-override: 91.14%;
  descent-override: 22.55%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 501 700;
  size-adjust: 100.89%;
  ascent-override: 96.15%;
  descent-override: 23.79%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 701 900;
  size-adjust: 103.08%;
  ascent-override: 94.1%;
  descent-override: 23.28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback R";
  src: local('Roboto'), local('Roboto-Regular');
  font-weight: 100 500;
  size-adjust: 107.27%;
  ascent-override: 90.43%;
  descent-override: 22.37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback R";
  src: local('Roboto Bold'), local('Roboto-Bold');
  font-weight: 501 700;
  size-adjust: 107.58%;
  ascent-override: 90.16%;
  descent-override: 22.31%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback R";
  src: local('Roboto Bold'), local('Roboto-Bold');
  font-weight: 701 900;
  size-adjust: 109.93%;
  ascent-override: 88.24%;
  descent-override: 21.83%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local('Arial'), local('ArialMT');
  font-weight: 100 500;
  size-adjust: 101.15%;
  ascent-override: 91.45%;
  descent-override: 27.19%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 501 700;
  size-adjust: 96.75%;
  ascent-override: 95.61%;
  descent-override: 28.42%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 701 900;
  size-adjust: 99.49%;
  ascent-override: 92.97%;
  descent-override: 27.64%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Grotesque Fallback R";
  src: local('Roboto'), local('Roboto-Regular');
  font-weight: 100 500;
  size-adjust: 101.95%;
  ascent-override: 90.73%;
  descent-override: 26.97%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Grotesque Fallback R";
  src: local('Roboto Bold'), local('Roboto-Bold');
  font-weight: 501 700;
  size-adjust: 103.17%;
  ascent-override: 89.66%;
  descent-override: 26.65%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Grotesque Fallback R";
  src: local('Roboto Bold'), local('Roboto-Bold');
  font-weight: 701 900;
  size-adjust: 106.1%;
  ascent-override: 87.18%;
  descent-override: 25.92%;
  line-gap-override: 0%;
}
@media only screen and (max-width: 768px){

  body{
    background-size: 120% !important;
  }

}
:root {
    --bkgd: rgb(255 255 255);
    --frgd: #3a4237;
    --action: #fcf7a7;
    --accent: #f8fff0;
    --border: #baf1a9;
    --stars: red;
    --notime: #ffffff;
    --shadow: #00000080;
    --shortTrigger: #ff7574;

    /* Design-system rail multipliers (independent type vs density). */
    --ds-font-scale: 1;
    --ds-space-scale: 1;

    /* Type scale (relative to root rem × --ds-font-scale). One job per step;
       headings clamp so mobile keeps the same order as desktop.
       Nothing readable goes below --text-floor. */
    --text-floor: calc(0.6875rem * var(--ds-font-scale));        /* 11 */
    --text-meta: 0.6875rem;                                       /* 11  Departure Mono: its pixel grid (11 / 22 px), not scaled */
    --text-functional-sm: calc(0.75rem * var(--ds-font-scale));  /* 12  meta labels (mono) */
    --text-functional: calc(0.875rem * var(--ds-font-scale));    /* 14  UI, captions */
    --text-body: calc(1rem * var(--ds-font-scale));              /* 16  running text */
    --text-lead: calc(1.125rem * var(--ds-font-scale));          /* 18  lede, pull lines */
    --text-h4: calc(1.25rem * var(--ds-font-scale));             /* 20  label headings */
    --text-h3: calc(clamp(1.25rem, 1rem + 0.8vw, 1.5rem) * var(--ds-font-scale));   /* 20→24 */
    --text-h2: calc(clamp(1.5rem, 1.1rem + 1.6vw, 2rem) * var(--ds-font-scale));    /* 24→32 */
    --text-h1: calc(clamp(2.25rem, 1.5rem + 3vw, 3rem) * var(--ds-font-scale));     /* 36→48 */
    --text-display: calc(clamp(2.5rem, 1rem + 5vw, 4rem) * var(--ds-font-scale));   /* 40→64 */
    --leading-body: 1.6;
    --leading-tight: 1.15;

    /* Font roles: Bricolage for display, Inter for reading and UI,
       Departure Mono for short meta labels (400 only, it has no bold). */
    --font-display: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;
    --font-text: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif;
    --measure: 65ch;

    /* Spacing scale (rem steps × --ds-space-scale). Medium matches legacy --gap: 2rem. */
    --space-1: calc(0.25rem * var(--ds-space-scale));
    --space-2: calc(0.5rem * var(--ds-space-scale));
    --space-3: calc(0.75rem * var(--ds-space-scale));
    --space-4: calc(1rem * var(--ds-space-scale));
    --space-5: calc(1.5rem * var(--ds-space-scale));
    --space-6: calc(2rem * var(--ds-space-scale));
    --space-7: calc(3rem * var(--ds-space-scale));
    --space-8: calc(4rem * var(--ds-space-scale));
    --space-9: calc(6rem * var(--ds-space-scale));
    --space-10: calc(8rem * var(--ds-space-scale));

    /* Metadata / small UI text (https://departuremono.com/) */
    --font-meta: 'Departure Mono', ui-monospace, monospace;
}

/* Metadata / small UI text: Departure Mono across the site.
   Headlines and body copy stay on Inter / Bricolage. */
.headerHeading,
figcaption,
.main .quoteAuthor,
.recommendationAuthorRole,
span.section-description,
.popUpCategory,
.cs-card__meta,
.caseStudyLabel,
h4.caseStudyLabel,
.main > h4.caseStudyLabel,
.main > .caseStudyInProgress > h4.caseStudyLabel,
.caseStudyRole,
span.wordType,
.storySnippet b,
.experience,
.noTimeLink a,
.noTimeLink__chip,
div#carousel #seeAllBtn,
.carouselControls #seeAllBtn,
.carouselControls .carousel-see-all,
.carouselControls .sq-rec-see-all,
.cs-carousel__see-all,
.metaInformation,
footer > span,
.inpageNavigation nav li a,
.second-level-bar__mobile select,
.companiesContainer .org-logo::after,
.homepage .orgCarousel__tip,
.homepage .accent-picker__trigger::after,
.homepage .highlight-toggle::after,
.PopUpsAreAwesomeText i {
    font-family: var(--font-meta);
    letter-spacing: 0;
}

.experience h5 {
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif;
    letter-spacing: normal;
}

/* Root size = browser default (16px) at every width. (Up-scaling media queries
   used to sit below, but the reset further down sets html back to 100%, so they
   never applied; the site is designed at 16px.) Type size from the design-system
   rail multiplies --text-* tokens, not this root size, so spacing
   (rem × --ds-space-scale) stays independent of typography. */
html {
    font-size: 100%;
    scroll-padding-top: 96px;
}

/* Assistant / in-page source links land below sticky chrome */
#introduction,
#project-knowledge-base,
#project-ai-native,
#about,
#work-section,
#more-section,
#organizations,
#recommendations,
#contact,
#certifications,
#recomendationsContainer,
#experience,
#skills,
#skill-empathy,
#skill-communication,
#skill-collaboration,
#manifiesto,
#what-my-team-says,
.singlerecomendation[id] {
    scroll-margin-top: 96px;
}


/* Design-system rail: density falls back to these when JS has not set --ds-space-scale.
   --gap tracks the spacing scale so layout gutters move with Small/Medium/Large. */
html[data-ds-space="sm"] {
    --ds-space-scale: 0.7;
}
html[data-ds-space="md"] {
    --ds-space-scale: 1;
}
html[data-ds-space="lg"] {
    --ds-space-scale: 2;
}

body#MainSection {background-position: bottom;}

.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* Buttons and button-like controls always show the hand on hover. :where()
   keeps this at zero specificity so any component cursor still wins. */
:where(button, [role="button"], summary, select, label[for],
  input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"])) {
  cursor: pointer;
}
:where(button, input, select):disabled,
:where([aria-disabled="true"]) {
  cursor: not-allowed;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

.topBorder{
    display: none;
    width: 100%;
    height: 18px;
    position: sticky;
    z-index: 5;
    top: 0;
    margin-bottom: -16px;
    background: var(--frgd);
}

body {
	line-height: 1;
	text-rendering: geometricprecision;
}


blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
    padding: 0;
    --gap: var(--space-6);
    margin: 0;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--frgd);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--frgd);
    background-color: var(--accent);
    /* background: linear-gradient(180deg, var(--accent), var(--bkgd)); */
    overflow-x: hidden;
    /* background-image: url('../images/grid3.png') !important; */
    background-size: coveR !important;
    -webkit-font-smoothing: antialiased;
    /* animation: animatedBackground 0s ease-in-out infinite alternate; */
}

img#face {
    display: none;
    opacity: 0.8;
    position: absolute;
    top: -8px;
    right: -32px;
    filter: grayscale(1);
    animation-name: shake-slow;
    animation-duration: 60s;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    animation-iteration-count: infinite;
}

.headerHeading{
    display: none;
    color: var(--frgd);
    background: var(--bkgd);
    position: sticky;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 20;
    font-size: var(--text-functional-sm);
    letter-spacing: 0;
    /* text-transform: uppercase; */
    font-family: var(--font-meta);
    font-weight: 600;
    width: 100%;
    text-align: center;
    line-height: 1.4;
    margin: 0 8px;
    margin-bottom: -16px;
  }

  .headerHeading span{
      z-index: 9;
  }

  .headerHeading a {
    position: absolute;
    right: 16px;
    top: 0px;
}

.headerHeading a svg *{
    fill: var(--action);
}

nav.mainNavigation{box-sizing: border-box;width: 100%;padding: var(--space-7) 0 var(--space-2);margin-bottom: var(--space-2);z-index: 6;max-width: 1400px;margin: auto;}

nav.mainNavigation ol {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0 0px 4px 0;
    flex-wrap: nowrap;
    z-index: 6;
    align-items: center;
    align-content: center;
}

nav.mainNavigation ol li {
    padding: var(--space-2) var(--space-4) var(--space-2);
    margin: 0;
    border-left: none;
    z-index: 0;
    }


nav.mainNavigation ol li:first-child {border: none;}

nav.mainNavigation ol li a{
    top: 0;
    left: 0;
    box-sizing: border-box;
    /* transition: 0.3s linear; */
    color: var(
    --frgd);
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-text);
    font-size: calc(1.25rem * var(--ds-font-scale));
    letter-spacing: 2px;
    text-decoration: none;
    text-align: center;
     /* Will override color (regardless of order) */
    /* -webkit-text-stroke-color: var(--action);;text-underline-offset: 16px;
    line-height: 100%;
    /* background: var(--frgd); */
    border-radius: 8px;
    padding: 4px 8px;
    box-shadow: 2px 2px 0 var(--shadow);
    border: 2px solid var(--frgd);
    backdrop-filter: hue-rotate(45deg);
    background: var(--action);
    }


.graffiti{
    position: absolute;
    height: 120px;
    width: 160px;
    border-radius: 8px;
    top: 80px;
    z-index: 5;
    transform: rotate(348deg);
    /* animation: rubberBand 7s infinite; */
    -webkit-animation-name: rubberBand 15s infinite;
    /* filter: drop-shadow(-2px -4px 2px #fff); */
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  
  45% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  47% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  48% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  52% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  54% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  
  56% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  
  45% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  47% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  48% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  52% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  54% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  
  56% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}



#HomeLink{
  z-index: 2;
  min-width: 126px;
  max-width: 160px;
  background: var(--action);
  position: absolute;
  left: 16px;
  top: 16px;
  border-radius: 50%;
  box-shadow: 4px 5px 0 var(--frgd);
  max-width: 50px !important;
  min-width: 50px !important;
  height: 50px;
  overflow: hidden;
  box-shadow: none !important;
  border: 2px solid var(--action);
  /* position: fixed; */
  z-index: 99999;
}

#HomeLink img {
  width: 100px !important;
  min-width: 100px !important;
  height: 100px;
  margin-top: -32px;
  margin-left: -16px;
  filter: grayscale(1);
  animation-name: shake-slow;
  animation-duration: 30s;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-iteration-count: infinite;
  /* margin-top: 16px; */
  z-index: 7;
}

#HomeLink img:hover{
    animation-duration: 100s;
    filter: none;
}

nav.mainNavigation ol li a:hover{
    /* text-decoration: underline; */
    /* -webkit-text-fill-color: var(--action); */
    color: var(--frgd);
    /* text-shadow: 0 0 16px var(--bkgd); */
    background: var(--action);
    box-shadow: none;
    /* background: none; */
    position: relative;
    /* border-color: transparent; */
    top: 2px;
    left: 2px;
    transition: 0.3s linear;
}


article {
    box-sizing: border-box;
    /* border: 8px solid var(--action); */
    border-width: 4px 0;
    margin: 0 auto;
    background-color: var(--bkgd);
    box-shadow: none;/* z-index: 1; */
    width: 100%;
}

.ABBFill, .HitachiFill{
    fill: var(--frgd);
    fill: var(--frgd);
    }

svg.companyLogo{
    margin-top: 128px;
    margin-bottom: var(--space-7);
    max-width: 50%;
    min-width: 248px;
    margin-left: -2%;
    opacity: 0.7;
}
  
h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.2;
    font-weight: 600;
    font-family: var(--font-display);
}

h1
	{
	font-size: var(--text-h1);
	letter-spacing: -0.03em;
	word-break: break-word;
	text-align: left;
	padding: var(--space-2) 0 var(--space-9);
	line-height: 1.05;
	/* line-height: 1; */
	position: relative;}
h2
	{
	padding-top: 80px;
	margin-top: 150px;
	font-size: var(--text-h2);
	letter-spacing: -0.01em;
	}
h3
	{
	font-size: var(--text-h3);
	letter-spacing: -0.005em;
	margin-top: -8px !important;
	}

h4
	{
	font-size: var(--text-h4);
	letter-spacing: 0;
	}

h3 + ul{
    margin-top: -32px !important;
}

ul + h3{
    margin-top: 0px !important;
}


p, li
	{
	margin: var(--space-4) var(--space-1);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	list-style-position: outside;
	/* Ragged right: justified text opened rivers in cards and on phones. */
	text-align: left;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
	/* position: relative; */
}

/* Hyphenate only where the measure is too short to rag cleanly. */
@media (max-width: 480px) {
	p, li {
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

figcaption {
	font-size: var(--text-functional-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.4;
}

.main li{
    padding-left: 0.15em;
    margin-left: 0;
}


/* HOME PAGE -------------------*/

.mainSection:nth-child(2) {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.mainSection {
    display: flex;
    flex-direction: column;
    width: 33%;
    justify-content: space-between;
    padding: var(--space-5) var(--space-4) var(--space-9);
    z-index: 1;
}

.homeStage{position: relative;margin: 0 auto;display: flex;width: 100%;max-width: none;height: 240px;/* z-index: 2; */align-items: center;justify-content: space-around;align-content: center;flex-direction: row;overflow: hidden;/* position: relative; */}

.homeStage h1 {
    display: none;
    text-align: center;
    z-index: 2;
    /* text-transform: uppercase; */
    width: unset;
    font-weight: 800;
    /* margin: 64px 16px 0; */
    /* Cap in px so root scaling does not inflate the hero past the design max */
    font-size: calc(10rem * var(--ds-font-scale));
    text-align: left;
    color: var(--action);
    /* padding: 16px; */
    font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif !important;
    /* border-radius: 32px 32px 32px 0px; */
    /* text-shadow: 0 0 16px var(--frgd); */
    -webkit-text-fill-color: var(--bkgd) !important;
    -webkit-text-fill-color: none;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--action);
    -webkit-text-stroke-color: var(--frgd);
    /* text-shadow: 0 0 8px var(--action); */
}

.homeStage h2 {position: relative;display: inline-block;font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;margin: var(--space-4);padding: var(--space-4) var(--space-7);color: var(--bkgd);letter-spacing: inherit;font-size: calc(clamp(2rem, 4vw, 4rem) * var(--ds-font-scale));line-height: 1;background: var(--action);/* border: 1px solid var(--action); *//* box-shadow: -4px 4px 0px var(--action); */font-weight: 200;z-index: 2;}

.homeStage p{
    background: var(--bkgd);
    color: var(--frgd);
    line-height: var(--leading-body);
    font-size: calc(1.125rem * var(--ds-font-scale));
    font-weight: 300;
    padding: 16px 18px;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    max-width: 380px;
    margin: 0px 6px 0;
    z-index: 2;
    border-radius: 32px 32px;
    border: 2px solid var(--border);
    position: relative;
    display: none;
}

  
  .homeStage p:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 16px solid var(--bkgd);
    border-right: 16px solid rgba(255, 255, 255, 0);
    border-top: 16px solid var(--bkgd);
    border-bottom: 16px solid rgba(255, 255, 255, 0);
    left: 100px;
    bottom: -29px;
  }

.marquee {
    transform: rotate(357deg);
    position: absolute;
    min-height: 30px;
    left: 0;
    top: 56vh;
    margin: 0 auto;
    width: 105%;
    margin-left: -8px;
    min-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    opacity: 0.3;background: var(--action);
  }

  .marquee__content.opposite {
    animation: marqueeOpposite 600s linear infinite;
    }

.marquee .marquee__content.opposite li {font-size: calc(1.25rem * var(--ds-font-scale));font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;font-weight: 600;letter-spacing: initial;padding: 2px 16px;line-height: 1;margin: 0;background-color: var(--action) !important;color: var(--bkgd) !important;/* text-transform: uppercase; */}

  .marquee li {
    box-sizing: content-box;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    font-weight: 600;
    line-height: 0.9;
    font-size: var(--text-display);
    background-color: var(--action);
    color: var(--bkgd);
    display: inline-block;
    margin: 0;
    text-align: center;
    padding: 0px 22px 15px 0px;
    letter-spacing: -4px;
    margin-bottom: -6px;
}

.marquee li:nth-child(odd){
    background-color: var(--bkgd);
    color: var(--action);
}

  .marquee__content {
    will-change: content;
    width: 300%;
    display: flex;
    animation: marquee 600s linear infinite backwards;
  }
  .marquee:hover .marquee__content {
    animation-play-state: paused;
  }

  .opposite ul.list-inline {
    justify-content: space-around;
    display: flex !important;
}

  .list-inline {
    display: flex;
    justify-content: flex-end;
    min-width: 33.33%;
    /* reset list */
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-66.6%);
    }
  }

  @keyframes marqueeOpposite {
    0% {
      transform: translateX(-66.6%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes animatedBackground {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 10%;
    }
  }

  

::marker{font-weight: 700;font-size: var(--text-h3);letter-spacing: 4px;font-family:'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;}

.navigationHidder{
    display: none !important;
    height: 76px;
    background: var(--bkgd);
    z-index: 4;
    margin-top: -68px;
    position: relative;
    border-bottom: 1px solid var(--accent);
}

.inpageNavigation{display: none !important;position: -webkit-sticky;position: sticky;top: 8px;background: var(--bkgd);background: var(--accent);z-index: 3;/* padding-right: 16px; */border: 2px solid var(--bkgd);border-radius: 16px;/* width: calc(100% - 64px); */margin: 4px;padding: 0 8px;backdrop-filter: blur(3px);}

.inpageNavigation ul{display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;overflow: auto;justify-content: space-between;margin-bottom: 2px;}

.inpageNavigation nav li{
    list-style: none;
    float: left;
    padding: 4px 2px 6px;
    margin: 0;
    white-space: nowrap;
}

.inpageNavigation nav li a{text-decoration: none;background: var(--action);color: var(--frgd);padding: 4px 8px;margin: 0px 2px;font-family: var(--font-meta);text-transform: uppercase;border: 2px solid;border-radius: 16px;font-size: var(--text-functional-sm);font-weight: 600;letter-spacing: 0;box-shadow: 1px 1px;}

.inpageNavigation nav li a.active {margin-top: 2px;background: var(--bkgd);box-shadow: none;color: var(--frgd);border-color: var(--bkgd);}

.main {
    --max-width: 800px;
    --heading-col: 38%;
    --content-col: 62%;
    --section-start: calc(16rem * var(--ds-space-scale));
    max-width: var(--max-width);
    margin: auto;
    padding: var(--gap) var(--gap) var(--space-10);
    align-self: center;
}

/* Full-bleed elements: clear floats and span the article width */
.main > :is(
    h1,
    .companyLogo,
    img.companyLogo,
    svg.companyLogo,
    .caseStudyCompanyLogo,
    .caseStudyCompanyLogoWrap,
    .inpageNavigation,
    .navigationHidder,
    .NDAsign,
    .cs-tldr,
    .LatestProject,
    .kb-aws-stack,
    .nextCaseStudy,
    .caseStudyInProgress,
    .mainImage,
    img.mainImage,
    video,
    .mediaAccentFrame,
    .imageViewer,
    #carousel,
    .kb-carousel,
    #movingBanner,
    object,
    .quoteDescription.mediaDescription,
    .tableScroll
),
.main > .caseStudyInProgress > :is(
    .mainImage,
    img.mainImage,
    video,
    .mediaAccentFrame,
    .imageViewer,
    #carousel,
    .kb-carousel,
    #movingBanner,
    object,
    .quoteDescription.mediaDescription,
    .tableScroll
) {
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    box-sizing: border-box;
}

/* Right column: body copy, lists, role labels */
.main > p,
.main > ol,
.main > ul,
.main > h3,
.main > a,
.main > .caseStudyInProgress > p,
.main > .caseStudyInProgress > ol,
.main > .caseStudyInProgress > ul,
.main > .caseStudyInProgress > h3,
.main > .caseStudyInProgress > a {
    box-sizing: border-box;
    width: calc(var(--content-col) - var(--gap) / 2);
    max-width: none;
    margin: var(--space-5) 0;
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
    display: flow-root; /* keeps list markers inside the content column */
}

/* Section headings inside a case study read as headings, not as a centred
   caption: left-aligned, at the h3 size the scale already defines. The global
   h3 tracking is 0.25em, which is a caption setting and falls apart at this
   size, so it comes down to something a heading can carry. */
.main > h3,
.main > .caseStudyInProgress > h3 {
    padding: var(--space-3) 0;
    font-size: calc(clamp(1.125rem, 0.9vw + 0.95rem, 1.5rem) * var(--ds-font-scale));
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: left;
    margin-top: calc(2.25rem * var(--ds-space-scale)) !important;
    margin-bottom: calc(0.75rem * var(--ds-space-scale));
}

/* The global `h3 + ul` pull assumes the old, shorter heading. */
.main > h3 + ul,
.main > .caseStudyInProgress > h3 + ul {
    margin-top: 0 !important;
}

/* Cards/carousels share the content column, but keep their own display model */
.main > .cs-cards,
.main > .cs-carousel,
.main > .caseStudyInProgress > .cs-cards,
.main > .caseStudyInProgress > .cs-carousel {
    box-sizing: border-box;
    width: calc(var(--content-col) - var(--gap) / 2);
    max-width: none;
    margin: var(--space-5) 0;
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
}

.main > ul,
.main > ol,
.main > .caseStudyInProgress > ul,
.main > .caseStudyInProgress > ol {
    list-style-position: outside;
}

/* Homepage header CV link: keeps its outlined look (site-header.css styles it further). */
#downloadResumeHome {
    width: fit-content;
    display: block;
    box-sizing: border-box;
    margin: 8px auto;
    text-align: center;
    background: var(--bkgd);
    padding: 4px 16px;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    color: var(--frgd);
    text-decoration: none;
    border: 2px solid var(--frgd) !important;
    border-radius: 4px;
    box-shadow: 2px 2px var(--shadow);
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* short.html restyles its article links in short.css on top of this base,
   so it keeps the base from before the soft buttons below. */
body#short.canvas-board article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle):not([class^="dsLive"]):not([class^="wfDeck"]):not([class^="dsViewer"]),
body#short.canvas-board article a:not(#everestLink):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]) {
    width: fit-content;
    display: block;
    box-sizing: border-box;
    margin: 8px auto;
    text-align: center;
    background: var(--bkgd);
    padding: 4px 16px;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    color: var(--frgd);
    text-decoration: none;
    border: 2px solid var(--frgd) !important;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

body#short.canvas-board article a:not(#everestLink):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]) {
    text-transform: uppercase;
}

/* --- body buttons ------------------------------------------------------------
   Three tiers, one look each (the header and footer keep their own buttons):
   - primary (.btn--primary): the sticker yellow with an ink edge and offset
     shadow; lifts on hover, presses on click. One per view: Next case study,
     View my CV.
   - secondary (default): soft fill with a hairline ink edge so it still reads
     on the tinted case-study papers; the icon nudges on hover.
   - tertiary (.btn--tertiary, .cs-tldr__toggle): no fill or edge until hover.
   All three share the rule below and differ only in the --btn-* variables, so
   the long selector list (which outweighs any id) never needs a second copy.

   The icon is a mask on ::before, moved behind the label with `order` (::after
   is the stretched-link overlay on the work cards). It follows the link, see
   --btn-icon below: download for PDFs, mail, open-in-new for other sites, an
   arrow for pages on this site. --btn-nudge moves it the way it points.
   --------------------------------------------------------------------------- */
:root {
    /* Two yellows: strong for primary actions on light paper, soft for dark
       surfaces (footer) and the nav hover. */
    --yellow-strong: #ffd02f;
    --yellow-soft: #fcf7a7;
    /* Radius scale: tags and nav stickers, buttons, chips/pills. */
    --radius-tag: 8px;
    --radius-btn: 12px;
    --radius-pill: 999px;
    /* Soft-button colours, shared with .cs-tldr__toggle. Label at 82% ink
       clears 4.5:1 on the light papers; the icon stays a step quieter. */
    --btn-soft-bg: color-mix(in srgb, var(--frgd, #050038) 7%, transparent);
    --btn-soft-bg-hover: color-mix(in srgb, var(--frgd, #050038) 13%, transparent);
    --btn-soft-ink: color-mix(in srgb, var(--frgd, #050038) 82%, transparent);
    --btn-soft-icon: color-mix(in srgb, var(--frgd, #050038) 68%, transparent);
    --btn-soft-line: color-mix(in srgb, var(--frgd, #050038) 16%, transparent);
    --btn-soft-line-hover: color-mix(in srgb, var(--frgd, #050038) 32%, transparent);
    /* Text links: standalone links (Read case study) are semibold, links in
       lists and sentences medium; the underline thickens on hover. */
    --link-weight: 600;
    --link-weight-inline: 500;
    --link-underline: 1.5px;
    --link-underline-hover: 2.5px;
    --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
    --icon-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
    --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
    --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z'/%3E%3C/svg%3E");
    --icon-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
}

/* Anything clickable shows the hand. Kept low in specificity on purpose: the
   canvas tools (canvas-board.css) and disabled states override it. */
:is(a[href], button:not(:disabled), summary, [role="button"], [role="tab"], label[for], select, .craftCard) {
    cursor: pointer;
}

a[href^="http"] { --btn-icon: var(--icon-open); --btn-nudge: translate(2px, -2px); }
a[href$=".pdf"] { --btn-icon: var(--icon-download); --btn-nudge: translateY(2px); }
a[href^="mailto:"] { --btn-icon: var(--icon-mail); --btn-nudge: translateX(2px) rotate(-6deg); }
#contactMeButtons a[href*="linkedin.com"] { --btn-icon: var(--icon-chat); }
#load-more-btn { --btn-icon: var(--icon-expand); }

a#downloadReferences,
    .home:not(#short.canvas-board) article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle):not([class^="dsLive"]):not([class^="wfDeck"]):not([class^="dsViewer"]),
    .nextCaseStudy a,
    .downloadResumeTop a,
    .home:not(#short.canvas-board) article a:not(#everestLink):not(#BackToHome):not(.CaseStudyDescription > a):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]),
    body#short:not(.canvas-board) :is(.sq-link, p a, .gotSomeTime a, a.contactMeShort, .relaxTime a) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    box-sizing: border-box;
    min-height: var(--btn-height, 40px);
    margin: 8px auto;
    padding: var(--btn-pad, 11px 14px);
    border: 0 !important;
    border-radius: var(--radius-btn, 12px);
    background: var(--btn-soft-bg);
    color: var(--btn-soft-ink);
    box-shadow: var(--btn-shadow, inset 0 0 0 1px var(--btn-soft-line));
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif;
    font-size: var(--btn-font-size, 12px);
    font-weight: var(--btn-weight, 500);
    letter-spacing: var(--btn-tracking, 0.07em);
    text-transform: var(--btn-case, uppercase);
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

:is(a#downloadReferences,
    .home:not(#short.canvas-board) article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle):not([class^="dsLive"]):not([class^="wfDeck"]):not([class^="dsViewer"]),
    .nextCaseStudy a,
    .downloadResumeTop a,
    .home:not(#short.canvas-board) article a:not(#everestLink):not(#BackToHome):not(.CaseStudyDescription > a):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]),
    body#short:not(.canvas-board) :is(.sq-link, p a, .gotSomeTime a, a.contactMeShort, .relaxTime a)):hover {
    background: var(--btn-soft-bg-hover);
    box-shadow: var(--btn-shadow-hover, inset 0 0 0 1px var(--btn-soft-line-hover));
    transform: var(--btn-lift, none);
}

:is(a#downloadReferences,
    .home:not(#short.canvas-board) article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle):not([class^="dsLive"]):not([class^="wfDeck"]):not([class^="dsViewer"]),
    .nextCaseStudy a,
    .downloadResumeTop a,
    .home:not(#short.canvas-board) article a:not(#everestLink):not(#BackToHome):not(.CaseStudyDescription > a):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]),
    body#short:not(.canvas-board) :is(.sq-link, p a, .gotSomeTime a, a.contactMeShort, .relaxTime a)):active {
    box-shadow: var(--btn-shadow-active, inset 0 0 0 1px var(--btn-soft-line-hover));
    transform: var(--btn-press, none);
}

:is(a#downloadReferences,
    .home:not(#short.canvas-board) article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle):not([class^="dsLive"]):not([class^="wfDeck"]):not([class^="dsViewer"]),
    .nextCaseStudy a,
    .downloadResumeTop a,
    .home:not(#short.canvas-board) article a:not(#everestLink):not(#BackToHome):not(.CaseStudyDescription > a):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]),
    body#short:not(.canvas-board) :is(.sq-link, p a, .gotSomeTime a, a.contactMeShort, .relaxTime a)):hover::before {
    transform: var(--btn-nudge, translateX(3px));
}

/* Primary: the sticker yellow, ink edge and an offset shadow that deepens as
   it lifts (the contact block's Email me uses the same physics). */
.btn--primary {
    --btn-soft-bg: var(--yellow-strong);
    --btn-soft-bg-hover: var(--yellow-strong);
    --btn-soft-ink: var(--frgd, #050038);
    --btn-soft-icon: var(--frgd, #050038);
    --btn-height: 44px;
    --btn-pad: 12px 18px;
    --btn-font-size: 14px;
    --btn-weight: 600;
    --btn-tracking: 0.02em;
    --btn-case: none;
    --btn-shadow: inset 0 0 0 2px var(--frgd, #050038), 3px 4px 0 var(--frgd, #050038);
    --btn-shadow-hover: inset 0 0 0 2px var(--frgd, #050038), 5px 7px 0 var(--frgd, #050038);
    --btn-shadow-active: inset 0 0 0 2px var(--frgd, #050038), 1px 1px 0 var(--frgd, #050038);
    --btn-lift: translate(-1px, -2px);
    --btn-press: translate(2px, 3px);
}

/* Tertiary: text-button, the fill only shows on hover. */
.btn--tertiary {
    --btn-soft-bg: transparent;
    --btn-height: 32px;
    --btn-pad: 7px 10px;
    --btn-shadow: none;
    --btn-shadow-hover: none;
    --btn-shadow-active: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn--primary { --btn-lift: none; --btn-press: none; }
}

:is(a#downloadReferences,
    .home:not(#short.canvas-board) article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle):not([class^="dsLive"]):not([class^="wfDeck"]):not([class^="dsViewer"]),
    .nextCaseStudy a,
    .downloadResumeTop a,
    .home:not(#short.canvas-board) article a:not(#everestLink):not(#BackToHome):not(.CaseStudyDescription > a):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]),
    body#short:not(.canvas-board) :is(.sq-link, p a, .gotSomeTime a, a.contactMeShort, .relaxTime a)):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--frgd, #050038) 45%, transparent);
    outline-offset: 2px;
}

:is(a#downloadReferences,
    .home:not(#short.canvas-board) article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle):not([class^="dsLive"]):not([class^="wfDeck"]):not([class^="dsViewer"]),
    .nextCaseStudy a,
    .downloadResumeTop a,
    .home:not(#short.canvas-board) article a:not(#everestLink):not(#BackToHome):not(.CaseStudyDescription > a):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]),
    body#short:not(.canvas-board) :is(.sq-link, p a, .gotSomeTime a, a.contactMeShort, .relaxTime a))::before {
    content: "";
    order: 1;
    flex: none;
    width: 18px;
    height: 18px;
    background: var(--btn-soft-icon);
    -webkit-mask: var(--btn-icon, var(--icon-arrow)) center / contain no-repeat;
    mask: var(--btn-icon, var(--icon-arrow)) center / contain no-repeat;
    transition: transform 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --btn-nudge: none; }
    a[href] { --btn-nudge: none; }
}

/* Work cards: the read link wears the same pill as the homepage's
   "Read case study" (craft-cards.css) and the case-study jump links
   (.cs-tldr__jumpLink): accent hairline, white fill, soft accent shadow; on
   hover the edge goes full accent, the fill takes a 10% tint, the text
   underlines and the arrow nudges. On phones the whole card is the tap target
   as well. */
article .CaseStudyDescription > a {
    --link-accent: var(--caseAccent, var(--frgd, #050038));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    background: var(--rgc-panel, #fff);
    border: 1px solid color-mix(in srgb, var(--link-accent) 35%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--link-accent) 12%, transparent);
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif;
    font-size: var(--text-body);
    font-weight: var(--link-weight, 600);
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-underline-offset: 3px;
    color: color-mix(in srgb, var(--link-accent) 45%, var(--frgd, #050038));
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

article .CaseStudyDescription > a:not(.disabled):hover,
article .CaseStudyDescription > a:not(.disabled):focus-visible {
    left: 0;
    top: 0;
    border-color: var(--link-accent);
    background: color-mix(in srgb, var(--link-accent) 10%, var(--rgc-panel, #fff));
    color: color-mix(in srgb, var(--link-accent) 35%, var(--frgd, #050038));
    text-decoration: underline;
}

article .CaseStudyDescription > a:not(.disabled):focus-visible {
    outline: 2px solid var(--link-accent);
    outline-offset: 2px;
}

/* The label's own arrow icon stays hidden; the arrow is drawn here so it
   matches the homepage link. ::after is the phone stretched-link overlay. */
article .CaseStudyDescription > a .caseStudyLinkIcon {
    display: none;
}

article .CaseStudyDescription > a:not(.disabled)::before {
    content: "";
    order: 1;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
    transition: transform 120ms ease;
}

article .CaseStudyDescription > a:not(.disabled):hover::before {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    article .CaseStudyDescription > a,
    article .CaseStudyDescription > a::before { transition: none; }
    article .CaseStudyDescription > a:not(.disabled):hover::before { transform: none; }
}

/* 404/500: a link inside a sentence stays in the line of text. */
body#short:not(.canvas-board) p > a[href] {
    display: inline-flex;
    margin: 0 2px;
    padding: 4px 10px;
    vertical-align: baseline;
}

/* The icon above replaces the ones these links carried before. */
:is(a#downloadReferences,
    .home:not(#short.canvas-board) article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle):not([class^="dsLive"]):not([class^="wfDeck"]):not([class^="dsViewer"]),
    .nextCaseStudy a,
    .downloadResumeTop a,
    .home:not(#short.canvas-board) article a:not(#everestLink):not(#BackToHome):not(.CaseStudyDescription > a):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink):not([class^="dsLive"]),
    body#short:not(.canvas-board) :is(.sq-link, p a, .gotSomeTime a, a.contactMeShort, .relaxTime a)) :is(.downloadIcon, .caseStudyLinkIcon),
#contactMeButtons a > svg {
    display: none;
}

.imagePlaceholder{
    border-radius: 8px;
    /* background-color: var(--action); */
    box-sizing: border-box;
    width: 100%;
    height: 20vh;
    
    margin: 0 0 8px;
    position: relative;
    overflow: hidden;
    display: flex;
box-shadow: none;}

.imagePlaceholder img{position: relative;/* top: -60px; */min-width: auto !important;min-height: 80% !important;width: 100%;filter: grayscale(1);/* margin: -10% 0 0 -10%; */}

.imagePlaceholder .before {
    /* display: none !important; */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: var(--action); */
    background: var(--accent);
    opacity: 0.4;
    z-index: 1;
  }

.mainHome {
    display: flex;
    padding: 4px;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 820px;
    margin: auto;
}

.mainHome .borderWrapper{
    box-sizing: border-box;
    width: 100%;
    /* border: 1px solid; */
    border-radius: 30px;
    padding: 0 16px 16px;
    /* box-shadow: inset 0px -1px 1px var(--action); */
    display: flex;
    flex-wrap: wrap;
}

.mainSectionsContainer{
    display: flex;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    width: 100%;
}

.mainHome h2{
    text-align: center;
    padding: 16px 8px 16px;
    padding-top: 32px;
    line-height: 1;
    margin: 0 auto;
    /* border-bottom: 1px solid; */
    align-items: flex-end;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
width: fit-content;}

/* Left column: section titles + quote faces float beside content starts */
.main > h2,
.main > h4.caseStudyLabel,
.main > .quoteImage,
.main > .caseStudyInProgress > h2,
.main > .caseStudyInProgress > h4.caseStudyLabel,
.main > .caseStudyInProgress > .quoteImage {
    float: left;
    clear: both;
    box-sizing: border-box;
    width: calc(var(--heading-col) - var(--gap) / 2);
    max-width: none;
    min-width: 0;
    text-align: end;
}

.main > h2,
.main > .caseStudyInProgress > h2 {
    margin: var(--section-start) 0 0;
    padding: 0 0 0.35rem;
    letter-spacing: 1px;
}

.main > h4.caseStudyLabel,
.main > .caseStudyInProgress > h4.caseStudyLabel {
    margin: 2rem 0 0;
    display: block;
    background: var(--accent);
    padding: 4px;
    letter-spacing: -0.005em;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: 600;
    line-height: 1.3;
}

/* The heading is floated, so it takes the previous sibling's bottom margin on
   top of its own --section-start, while the block beside it only collapses to
   the larger of the two. Zeroing that bottom margin is what keeps the pair
   level, and it needs !important to beat component margins like .cs-roles. */
.main > *:has(+ h2),
.main > *:has(+ h4.caseStudyLabel),
/* The in-page ToC pair is display:none, but it still breaks DOM adjacency
   between the hero media and the first section heading. */
.main > *:has(+ .inpageNavigation + .navigationHidder + h2),
.main > .caseStudyInProgress > *:has(+ h2),
.main > .caseStudyInProgress > *:has(+ h4.caseStudyLabel) {
    margin-bottom: 0 !important;
}

/* Match section-start so heading + first content top-align. Every block that
   can open a section belongs in this list: one that is missing keeps its own
   smaller margin and starts above the heading instead of beside it. */
.main > h2 + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock),
.main > .caseStudyInProgress > h2 + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock) {
    margin-top: var(--section-start) !important;
}

.main > h4.caseStudyLabel + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock),
.main > .caseStudyInProgress > h4.caseStudyLabel + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock) {
    margin-top: 2rem !important;
}

/* Research quotes read like the homepage chat: the quote is their bubble,
   squared at the lower-left corner where the avatar sits, then name and role
   in the chat's smaller author sizes. */
.main .quoteText{
    box-sizing: border-box;
    text-align: left;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0;
    font-style: normal;
    padding: 0.625rem 0.875rem;
    line-height: 1.4;
    color: var(--frgd);
    background: var(--accent);
    border: 1px solid var(--border);
    border-radius: 16px 16px 16px 4px;
    max-width: none;
    width: calc(var(--content-col) - var(--gap) / 2);
    margin-bottom: 0;
}

.main .quoteAuthor{
    padding: 0;
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}

.main .quoteDescription{
    margin-top: 0.125rem;
    font-size: var(--text-functional-sm);
    font-family: var(--font-text);
    opacity: 0.6;
    line-height: 1.45;
    -webkit-hyphens: manual;
    hyphens: manual;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
}

.main .quoteDescription.mediaDescription{
    opacity: 0.85;
    margin-top: 8px;
    text-align: center;
    width: 100%;
    font-size: var(--text-functional);
    margin-bottom: 0;
    margin-left: 0;
}

.main > .quoteText,
.main > .caseStudyInProgress > .quoteText {
    margin-top: 2.25rem;
}

/* The face follows its bubble in the markup and is pulled up beside the
   bubble's squared lower-left corner, just across the gutter. The negative
   top margin equals its height, so it adds no height and the name and role
   still sit right under the bubble. */
.main > .quoteImage,
.main > .caseStudyInProgress > .quoteImage{
    float: none;
    clear: none;
    width: 36px;
    height: 36px;
    margin: -36px 0 0 calc(var(--heading-col) + var(--gap) / 2 - 36px - 0.5rem);
    padding: 0;
}

/* Duotone in the company accent: the grayscale face screens onto a dark
   shade of --caseAccent, so its shadows take that shade and its highlights
   go white; the ::after then multiplies a pale tint of the accent over the
   whites. isolation keeps both blends off the page background. */
.quoteImage {
    position: relative;
    box-sizing: border-box;
    line-height: 0;
    overflow: hidden;
    isolation: isolate;
    border-radius: 100%;
    background: color-mix(in srgb, var(--caseAccent, var(--frgd)) 75%, #000);
}

.quoteImage::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--caseAccent, var(--frgd)) 22%, #fff);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.main > .mediaAccentFrame,
.main > .caseStudyInProgress > .mediaAccentFrame {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--accent);
    padding: 0 16px 32px;
    box-sizing: border-box;
    width: 100%;
    clear: both;
}

.main > .mediaAccentFrame[hidden] {
    display: none;
}

.main > .mediaAccentFrame:has(iframe) {
    padding: 16px;
    margin-top: var(--space-7);
    margin-bottom: 8px;
}

.main > .mediaAccentFrame iframe {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.main > .mediaAccentFrame iframe.cs-flow-diagram {
    max-width: 100%;
    aspect-ratio: 1300 / 600;
    height: auto;
    filter: grayscale(1);
}

.quoteImage img{display: block;font-size: 0;height: 36px;width: 36px;object-fit: cover;object-position: 0% center;border-radius: 100%;filter: grayscale(1) contrast(1.15);mix-blend-mode: screen;}

.crossSectionNavigation{z-index: 1;cursor: pointer;/* background: var(--action); */display: flex;justify-content: center;}

.crossSectionNavigation ul{list-style: none;display: flex;padding: 0px;text-decoration: none;flex-direction: row;justify-content: center;align-items: stretch;max-width: 800px;width: 100%;padding: 0 8px;flex-wrap: wrap;}



.crossSectionNavigation ul li{
    margin: 8px;
    text-align: start;
    flex-grow: 1;
    cursor: pointer;
    max-width: calc(33% - 16px);
    width: 33%;
}

.crossSectionNavigation ul li a{
    /* background: var(--bkgd); */
    border: 8px solid var(--action);
    background: var(--action);
    text-decoration: none;
    display: block;
    padding: 8px 16px 16px;
    border-radius: 16px;
    color: var(
    --frgd);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    cursor: pointer;
    align-items: flex-start;
    border: 1px solid var(--border);
    box-shadow: 3px 3px var(--bkgd);
}

.crossSectionNavigation ul li a:hover {
    box-shadow: none;
    background: var(--accent);
    border-color: var(--accent);
}

.crossSectionNavigation svg.companyLogo {
    min-width: 181px;
    margin-left: -5%;
    max-width: 60%;
}

.crossSectionNavigation span{display: block;width: 100%;font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;/* text-shadow: 1px 1px 16px var(--bkgd); */}

.section-title{font-size: 1rem;font-weight: 800;/* padding-bottom: 4px; */line-height: 1.1;min-height: 36px;}

span.section-description{display: none;font-size: 0.75rem;padding: 0px 0px 0px;max-width: 300px;}
.section-callToAction{font-weight: 800;/* text-transform: uppercase; */font-size: 1.375rem;padding-top: 32px;/* min-width: 50%; */display: none !important;}

footer{box-sizing: border-box;max-width: 100%;display: flex;text-align: center;font-size: calc(1.125rem * var(--ds-font-scale));padding: var(--space-9) var(--space-4) var(--space-9);flex-direction: column;justify-content: flex-end;align-content: center;font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;}

.footerHeading{
    text-align: center;
    color: var(--bkgd);
    font-size: 3rem;
    letter-spacing: 2px;
    font-weight: 600;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    padding: 32px 0 8px;
    text-shadow: 2px 2px 8px var(--frgd);
}

.footerNavigation  ol{margin: auto;max-width: 800px;display: flex;justify-content: space-evenly;list-style: none;}

.footerNavigation  ol a{box-sizing: border-box;background: var(--action);text-decoration: none;font-weight: 600;font-size: 1.375rem;text-transform: uppercase;padding: 8px 8px;/* text-shadow: 2px 2px 8px var(--frgd); */color: var(--frgd);border-radius: 8px;border: 2px solid;box-shadow: 2px 3px 0 var(--shadow);}

footer span{
    /* width: 320px; */
    color: var(--bkgd);
    /* text-shadow: 2px 2px 8px var(--frgd); */
    color: var(--frgd);
    margin: 0 auto;
}

.socialNavigation{margin: 0 auto;margin-top: var(--space-9);}

.socialNavigation ol{display: flex;list-style: none;align-items: center;flex-wrap: nowrap;}

.socialNavigation ol a{display: block;box-sizing: border-box;padding: 8px;margin: 4px;height: 44px;width: 44px;background: var(--action);fill: var(--frgd);border-radius: 32px;border: 2px solid var(--frgd);box-shadow: 1px 1px 0 var(--shadow);}

footer ol a:hover {
    /* color: var(--bkgd); */
    /* text-decoration: underline; */
    /* fill: var(--bkgd); */
    /* filter: drop-shadow(0px 0px 17px var(--bkgd)); */
    /* background: none; */
    position: relative;
    top: 2px;
    left: 2px;
    box-shadow: none;
}

.Introduction p {
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    font-size: clamp(0.9375rem, 1.5vw + 0.75rem, 1.875rem);
    line-height: 1.25;
    padding: 16px;
    font-weight: 400;
    filter: none;
    /* padding-bottom: 32px; */
}

#Welcome {
    position: relative;
    font-size: calc(clamp(2.5rem, 8vw, 5rem) * var(--ds-font-scale));
    line-height: 1.05;
    border-bottom: 1px solid var(--border);
    margin: var(--space-2) 0;
    padding: var(--space-9) 0 var(--space-4);
    letter-spacing: -0.04em;
    font-weight: 600;
    width: 100%;
    font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;
    /* Wrap at spaces only; never hyphenate mid-word */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    word-wrap: normal;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

/* Desktop board: a smaller, one-line headline that the agents click through
   (welcome-swap.js). --welcome-fit only drops below 1 if the longest phrase
   would otherwise wrap. Phones and tablets keep the big wrapped one. */
@media (min-width: 769px) and (any-hover: hover) and (any-pointer: fine) {
    #Welcome {
        font-size: calc(var(--text-h1) * var(--welcome-fit, 1));
    }
}

/* Every line sits in the same grid cell, so the outgoing phrase falls away
   under the incoming one without moving anything around it. */
#Welcome .welcome-swap {
    display: grid;
    justify-items: center;
    transform-origin: 50% 60%;
}

#Welcome .welcome-swap > * {
    grid-area: 1 / 1;
}

/* Right padding is the stop's width, so words + stop are centred together. */
#Welcome .welcome-line {
    white-space: pre;
    padding-right: var(--welcome-stop, 0.25em);
}

#Welcome .welcome-ch,
#Welcome .welcome-stop {
    display: inline-block;
}

#Welcome .welcome-probe {
    position: absolute;
    visibility: hidden;
    white-space: pre;
}


.mainHome p {
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    font-weight: 400;
    z-index: 2;
}



.Introduction {
  text-align: center;
  /* padding-bottom: 32px; */
  width: 100%;
  position: relative;
  /* border-bottom: 1px solid; */
}

.mainSection svg {
  margin: 0 auto;
  width: 100%;
  opacity: 0.95;
}

.mainSection svg * {
  fill: var(--frgd);
}

.mainHome h2 span {
  font-size: calc(1.125rem * var(--ds-font-scale));
  position: absolute;
  filter: grayscale(1);
}

.companiesContainer div > * {
  max-width: 168px;
  min-width: 17%;
  padding: 16px 28px;
  max-height: none;
}

.companiesContainer div {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 64px 32px;
  margin: auto;
  flex-grow: 1;
  align-content: space-around;
}

.companiesContainer .org-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  cursor: default;
}

.companiesContainer .org-logo img {
  width: 147px;
  height: 63px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.companiesContainer .org-logo:hover,
.companiesContainer .org-logo:focus-within {
  opacity: 1;
}

.companiesContainer {
  box-sizing: border-box;
  width: 50%;
  padding: 16px 8px 64px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
  .companiesContainer .org-logo::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid var(--frgd);
    background: var(--bkgd);
    color: var(--frgd);
    font-family: var(--font-meta);
    font-size: var(--text-functional-sm);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    box-shadow: 2px 2px 0 var(--shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 20;
  }

  .companiesContainer .org-logo:hover::after,
  .companiesContainer .org-logo:focus-within::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.homepage .orgCarousel__tip {
  position: absolute;
  z-index: 30;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 8px));
  width: max-content;
  max-width: min(220px, calc(100vw - 24px));
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid var(--frgd);
  background: var(--bkgd);
  color: var(--frgd);
  font-family: var(--font-meta);
  font-size: var(--text-functional-sm);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow: 2px 2px 0 var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.homepage .orgCarousel__tip.is-visible {
  opacity: 1;
  visibility: visible;
}

.colleaguesContainer {
  background: var(--bkgd);
  width: 50%;
  position: relative;
  /* background: red; */
  min-height: 300px;
  border-left: 1px solid var(--border);
  padding: 16px 16px 64px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
}

.colleaguesContainer img {
  max-width: 80px;
  filter: grayscale(1);
  opacity: 1;
}

.poweredByLI {
  display: flex;
  margin: 24px auto 16px;
  width: 160px;
  text-align: center;
  font-family: 'Inter', "Inter Fallback", "Inter Fallback R",sans-serif;
  font-size: 0.875rem;
  flex-direction: column;
  align-items: center;
}

#recomendationsContainer > .poweredByLI {
  flex-shrink: 0;
}

.chat-wrapper {
  border-top: 2px dashed var(--border);
  height: 75vh;
  display: flex;
  /* justify-content: center; */
}

.chat-container {
  background: transparent;
  overflow:auto;
  max-width: 360px;
  max-height: 150vh;
  display: flex;
  flex-direction: column-reverse;
  padding: 10px;
}

.chat-container {
-ms-overflow-style: none;  /* Internet Explorer 10+ */
scrollbar-width: none;  /* Firefox */
}
.chat-container::-webkit-scrollbar { 
display: none;  /* Safari and Chrome */
}

.recommendation{
  height: auto;
  transition: height 0.8s ease-out, width 0.2s ease-out, color 1s ease-out;
}

.chat-container .singlerecomendation:first-child .recommendation:not(.last-recomendation){
  /* margin-left: -6px; */
  background:url(../images/typingDots.gif);
  background-size: cover;
  color: transparent;
  width: 50px !important;
  height: 30px !important;
  padding: 0;
  box-shadow: none;
  filter: none;
}

.chat-container .singlerecomendation:first-child .recommendation:before,
.chat-container .singlerecomendation:first-child .recommendation:after{
  display: none;
}

/*.recommendation {*/
/*  /* background: var(--accent); */*/
/*  background: var(--accent);*/
/*  border-radius: 8px;*/
/*  padding: 16px 16px;*/
/*  font-size: 1rem;*/
/*  line-height: 1.8;*/
/*  /* font-style: italic; */*/
/*  margin-top: 16px;*/
/*  position: relative;*/
/*  text-align: left;*/
/*  filter: drop-shadow(1px 1px 1px var(--border));*/
/*}*/
/**/
/*.recommendation:after {content: '';position: absolute;bottom: 0;left: 32px;width: 0;height: 0;border: 22px solid rgba(255, 255, 255, 0);border-top-color: var(--accent);border-top-color: var(--accent);border-bottom: 0;border-right: 0;margin-left: -11px;margin-bottom: -22px;}*/

.singlerecomendation {
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    font-size: calc(1.25rem * var(--ds-font-scale));
    margin: 0 auto 1rem;
    max-width: 600px;
    padding: 0.5rem 1.5rem;
}

.recommendation {
  /* filter: drop-shadow(1px 1px 1px var(--shadow)); */
  border-radius: 1.15rem;
  line-height: 1.4;
  max-width: 75%;
  padding: 0.5rem .875rem;
  position: relative;
  word-wrap: break-word;
  /* Bubble shape borrows from iMessage; the type stays the site's reading face. */
  font-family: var(--font-text);
}

.recommendation::before,
.recommendation::after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
}

.recommendation {
  background-color: var(--accent);
  /* background: linear-gradient(180deg, #5eabff, #3394ff,#057cff); */
  color: #000;
  color: var(--frgd);
  /* color: #fff; */
  max-width: calc(100% - 80px);
}

.recommendation:before {
  border-bottom-right-radius: 0.8rem 0.7rem;
  border-left: 1rem solid var(--accent);
  /* border-color: #057cff; */
  left: -0.35rem;
  transform: translate(0, -0.1rem);
}

.recommendation::after {
  background-color: var(--bkgd);
  border-bottom-right-radius: 0.5rem;
  left: 20px;
  transform: translate(-30px, -2px);
  width: 10px;
  filter: none;
}

.recommendationAuthor {
  padding-top: 4px;
  font-family: 'Inter', "Inter Fallback", "Inter Fallback R";
  width: 100%;
  font-weight: 600;
  color: var(--frgd);
  /* padding: 8px 16px 0 100px; */
}

.recommendationAuthorRole {
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  opacity: 0.6;
  /* padding: 0 102px 0; */
  margin-bottom: var(--space-7);
}

.mainHome *:not(a) {border-color: var(--border) !important;/* border-color: var(--frgd) !important; *//* border-width: 2px !important; *//* filter: grayscale(1); */}



.certBadges {
  position: static;
  margin: 48px auto 16px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.certBadges a {
  display: block;
  line-height: 0;
  position: relative;
}

.certBadges img {
  width: auto;
  height: auto;
  border: none;
}

.certBadges #NNg img {
  max-height: 72px;
}

.certBadges #IxDF {
  margin-top: 0;
}

.certBadges #IxDF img {
  max-height: 56px;
}

a#NNg:hover,
a#IxDF:hover {
  filter: none;
}




i {
  font-style: italic;
  letter-spacing: 0px;
}

.home article {
  box-sizing: border-box !important;
  width: auto;
  /* width: 100%; */
  /* max-width: 1400px; */
  box-sizing: border-box;
  border-radius: 32px;
  min-height: 100vh;
  box-shadow: none;
  border: none;margin: 0 8px;
  z-index: 1;
}

.home nav.mainNavigation {
  max-width: 1400px;
}

body.home, body#MainSection {
  box-sizing: border-box;
  width: 100%;
  /* padding: 0 16px; */
}

nav.mainNavigation ol li a.disabled {
  -webkit-text-fill-color: unset;
  -webkit-text-fill-color: unset;
  text-decoration: none;
  text-shadow: none;
  background: none;
  /* color: var(--frgd); */
  /* color: var(--bkgd); */
  background: var(--bkgd);
  /* text-shadow: 2px 2px 6px var(--action); */
  pointer-events: none;
  cursor: default;
  background: var(--action);
  /* background: var(--bkgd); */
  box-shadow: 0 0 16px 8px var(--action);
  /* border: none; */
  border-color: var(--action);
}

.Introduction img {
  max-width: 1000px;
  width: 72vw;
  min-width: 200px;
  margin: 64px auto 32px;
  padding: 16px;
  /* background: radial-gradient(var(--bkgd), #f5f8f2); */
  /* box-shadow: 0 0 32px var(--accent); */
  border-radius: 32px;
}

.Introduction img.intro-company-logo {
  display: inline;
  height: 1em;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 0.08em;
  padding: 0;
  border-radius: 0;
  vertical-align: -0.18em;
  object-fit: contain;
}

.Introduction img.intro-company-logo--wide {
  height: 0.9em;
  vertical-align: -0.08em;
}

.dictionarySnippet h2 {
  hyphens: manual;
  display: inline-block;
  text-align: left;
  /* font-family: serif; */
  border-width: 0;
  padding: 0;
  font-size: 2rem;
  padding-right: 4px;
  text-shadow: 2px 2px var(--bkgd);
  /* word-break: break-all; */
}

.dictionarySnippet {
  text-align: left;
}

div.dictionarySnippet {
  min-width: calc (30% - 36px) !important;
  position: relative;
  flex-basis: 100%;
  flex-shrink: 1;
  padding: 24px;
  background: var(--accent);
  /* border: 2px solid var(--bkgd) !important; */
  /* border-width: 0 2px !important; */
  border-radius: 8px;
  margin: 4px;
  filter: drop-shadow(1px 1px 1px var(--border));
  overflow: hidden;
}

span.wordType {
  display: inline-block;
  padding: 0 10px;
  font-size: var(--text-meta);
  background: var(--bkgd);
  border-radius: 8px;
}

span.wordSeparation {display: inline-block;font-weight: 600;letter-spacing: 2px;padding: 4px;}

.dictionarySnippet p {
  font-size: 1rem;
}

.dicctionaryRow {
  margin: 32px 0;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

span.wordPronunciation {
  display: inline-block;
  margin-bottom: var(--space-4);
}

/* Manifesto, drawn by hand: each line is one stroked SVG path in the
   signature's ink, generated from a single-stroke script font by
   scripts/manifest-svg.mjs (which also bakes each line's --delay/--dur).
   When JS arms it (.is-armed), the pen draws each line on scroll-in with a
   stroke-dashoffset transition, and the signature signs last (script at the
   end of about.html). No-JS and reduced-motion readers get it fully drawn. */
ol.manifest_copy {
  list-style: none;
  max-width: 640px;
  margin: var(--space-7) auto 0;
  padding: 0;
  color: var(--frgd);
}

.manifest_line {
  transform: rotate(var(--tilt, -1deg)) translateX(var(--nudge, 0));
}
.manifest_line + .manifest_line { margin-top: -.35rem; }
.manifest_line:nth-child(2) { --tilt: .8deg;  --nudge: .8rem; }
.manifest_line:nth-child(3) { --tilt: -.4deg; --nudge: -.5rem; }
.manifest_line:nth-child(4) { --tilt: 1.4deg; --nudge: .4rem; }
.manifest_line:nth-child(5) { --tilt: -1.2deg; --nudge: -.9rem; }
.manifest_line:nth-child(6) { --tilt: .5deg;  --nudge: .3rem; }
.manifest_line:nth-child(7) { --tilt: -.7deg; --nudge: -.3rem; }

.manifest_ink {
  display: block;
  height: min(3.4rem, 10vw);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
}
.manifest_ink path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
}

/* The pen. Only the stroke offset moves, so it is paint-only and cheap. */
.manifest_copy.is-armed .manifest_ink path { stroke-dashoffset: 1.001; }
.manifest_copy.is-written .manifest_ink path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur, 1s) cubic-bezier(.3, .1, .6, 1) var(--delay, 0s);
}
.Manifest.is-armed #signature { clip-path: inset(-.3em 100% -.3em -.3em); }
.Manifest.is-written #signature {
  clip-path: inset(-.3em -.3em -.3em -.3em);
  transition: clip-path 1.4s cubic-bezier(.45, .05, .55, .95) var(--sign-delay, 0s);
}

.Manifest {
  position: relative;width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 64px 0 128px;
  background: none;
}

/* On narrow screens the signature is wider than the list; drop it below
   the last line instead of over it. */
@media (max-width: 768px) {
  .Manifest { padding-bottom: 176px; }
}

.Manifest h2 {
  border-bottom: none;
}

/* My Experience: one role per row.
   Hierarchy: role title > company > period, place, duration > reference. */
.ExperienceWrapper {
  width: calc(100% - 64px);
  max-width: 1100px;
  margin: 32px auto 48px;
  border-collapse: collapse;
  font-family: var(--font-text);
  font-size: var(--text-functional);
  line-height: 1.4;
  border-radius: 16px;
  overflow: hidden;
}

/* Zebra rows: every other row lets the section's accent show through */
.ExperienceWrapper tbody tr {
  background: var(--bkgd);
}

.ExperienceWrapper tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bkgd) 55%, transparent);
}

.ExperienceWrapper td {
  padding: 20px 12px;
  text-align: left;
  vertical-align: middle;
}

.ExperienceWrapper tbody tr:first-child td {
  padding-top: 32px;
}

.ExperienceWrapper tbody tr:last-child td {
  padding-bottom: 32px;
}

.ExperienceWrapper .experienceOrg {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.ExperienceWrapper .experienceOrg > * {
  display: inline-flex;
  vertical-align: middle;
}

/* Logos differ a lot in shape (Hitachi is ~6:1, UNIMET ~1:2), so each gets
   its own height to carry a similar visual weight; --logo-scale shrinks
   them all on smaller screens. */
.ExperienceWrapper .experienceOrg img {
  --logo-h: 26px;
  height: calc(var(--logo-h) * var(--logo-scale, 1));
  width: auto;
  max-width: none;
}

.ExperienceWrapper .experienceOrg img[src$="org-11.svg"] { --logo-h: 28px; } /* Cense */
.ExperienceWrapper .experienceOrg img[src$="org-40.png"] { --logo-h: 24px; } /* FNZ */
.ExperienceWrapper .experienceOrg img[src$="org-05.svg"] { --logo-h: 34px; } /* AWS */
.ExperienceWrapper .experienceOrg img[src$="org-15.svg"] { --logo-h: 20px; } /* Hitachi Energy */
.ExperienceWrapper .experienceOrg img[src$="org-10.svg"] { --logo-h: 30px; } /* Credit Suisse */
.ExperienceWrapper .experienceOrg img[src$="org-28.svg"] { --logo-h: 36px; } /* TEDxZurich */
.ExperienceWrapper .experienceOrg img[src$="org-22.svg"] { --logo-h: 36px; } /* Media Frontier */
.ExperienceWrapper .experienceOrg img[src$="org-31.svg"] { --logo-h: 40px; } /* UNIMET */

.ExperienceWrapper .experienceOrg--stack img {
  display: block;
  --logo-h: 20px;
}

.ExperienceWrapper .experienceOrg--stack img[src$="org-10.svg"] {
  --logo-h: 26px;
}

.ExperienceWrapper .experienceOrg--stack img + img {
  margin-top: 4px;
}

.ExperienceWrapper .experienceOrg > div {
  height: auto !important;
  font-size: 0.75rem;
}

.ExperienceWrapper .experienceRole {
  width: 50%;
  min-width: 16em;
}

.ExperienceWrapper h5 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.ExperienceWrapper .experienceCompany {
  display: block;
  font-weight: 600;
}

.ExperienceWrapper .experienceLocation {
  font-weight: 400;
  white-space: nowrap;
}

.ExperienceWrapper .experiencePeriod {
  white-space: nowrap;
}

.ExperienceWrapper .country {
  white-space: nowrap;
}

.ExperienceWrapper img.flag {
  display: inline-block;
  height: 0.9em;
  width: auto;
  margin-right: 6px;
  vertical-align: -0.1em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
  opacity: 1;
}

.ExperienceWrapper .experienceRef {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.home article .ExperienceWrapper a.referenceDoc {
  margin: 0 !important;
}

/* Table layout only: inset the outer columns from the rounded edge */
@media only screen and (min-width: 1141px) {
  .ExperienceWrapper td:first-child {
    padding-left: 24px;
  }

  .ExperienceWrapper td:last-child {
    padding-right: 24px;
  }

  .ExperienceWrapper .experienceOrg {
    text-align: right;
  }

  .ExperienceWrapper .experienceOrg--stack img {
    margin-left: auto;
  }

  .ExperienceWrapper .experienceOrg > div {
    justify-content: flex-end;
  }
}

/* Tablets and small laptops: let places wrap, shrink logos */
@media only screen and (max-width: 1200px) {
  .ExperienceWrapper .experienceRole {
    min-width: 12em;
  }

  .ExperienceWrapper {
    --logo-scale: 0.85;
  }
}

@media only screen and (max-width: 1140px) {
  /* Narrow screens: each row becomes a card, still one role per row.
     Hierarchy: logo + dates (meta) > title > company > location > reference. */
  .ExperienceWrapper {
    width: calc(100% - 32px);
    margin: 24px 16px 32px;
  }

  .ExperienceWrapper,
  .ExperienceWrapper tbody {
    display: block;
  }

  .ExperienceWrapper tr {
    --exp-ref-w: 88px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 28px 20px 24px;
  }

  .ExperienceWrapper td,
  .ExperienceWrapper tbody tr:first-child td,
  .ExperienceWrapper tbody tr:last-child td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
  }

  /* Undo the desktop column widths (50% / 1%), which outrank the reset above */
  .ExperienceWrapper .experienceOrg,
  .ExperienceWrapper .experienceRole,
  .ExperienceWrapper .experienceRef {
    width: auto;
    min-width: 0;
  }

  .ExperienceWrapper .experienceOrg {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 20px;
  }

  /* Spans the whole top row (right-aligned) so it doesn't widen the
     button column below it */
  .ExperienceWrapper .experiencePeriod {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
    margin-bottom: 20px;
    text-align: right;
    font-size: 0.8125rem;
    opacity: 0.7;
  }

  .ExperienceWrapper .experienceRole {
    grid-column: 1;
    grid-row: 2;
  }

  .ExperienceWrapper tr:not(:has(.referenceDoc)) .experienceRole {
    grid-column: 1 / -1;
  }

  /* The title may run over the button column; only company and location
     share the row with the Reference button. */
  .ExperienceWrapper tr:has(.referenceDoc) h5 {
    margin-right: calc(-1 * (var(--exp-ref-w) + 12px));
  }

  .ExperienceWrapper h5 {
    margin-bottom: 10px;
  }

  .ExperienceWrapper .experienceCompany {
    line-height: 1.3;
  }

  .ExperienceWrapper .experienceLocation {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    white-space: normal;
    opacity: 0.75;
  }

  .ExperienceWrapper .experienceSep {
    display: none;
  }

  .ExperienceWrapper .experienceRef {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    width: var(--exp-ref-w);
  }

  .ExperienceWrapper .experienceRef:empty {
    display: none;
  }

  /* Compact Reference button; the site-wide button rule has an id in its
     selector, hence !important. */
  .home article .ExperienceWrapper a.referenceDoc {
    width: var(--exp-ref-w) !important;
    padding: 6px 0 !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.02em;
    gap: 4px !important;
    border-radius: 8px !important;
  }
}

/* Smallest phones: no room beside company/location, so the button drops below */
@media only screen and (max-width: 360px) {
  .ExperienceWrapper .experienceRole {
    grid-column: 1 / -1;
  }

  .ExperienceWrapper tr:has(.referenceDoc) h5 {
    margin-right: 0;
  }

  .ExperienceWrapper .experienceRef {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 16px;
    text-align: left;
  }
}

.RecomendationsContent {
  width: 33%;
  min-width: 280px;
  max-width: 50%;
  box-sizing: border-box;
  padding: 16px 16px 32px;
  font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
  font-weight: 400;
  /* border: 1px solid; */
  /* margin: -2px; */
}


.poweredByLI.aboutUsLinkedin img {
  filter: grayscale(1);
  opacity: 0.6;
}

.ExperienceWrapper img {
  opacity: 0.8;
}

.aboutUsLinkedin {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  align-items: baseline;
}

.aboutUsLinkedin a {
  flex-grow: 1;
}

.home article a.referenceDoc{margin: 8px 0 16px !important;}

.referenceDoc-View{
  height: 60px;
  margin: -12px 0px -14px 0px;
  height: 60px;
}

div.mainHome div div.CaseStudyAnimation {
  /* Cap below the 1600px bleed: 25vw grows with the viewport while
     .mainHome stays ~820px, so ~1330–1599 stacked the row. */
  width: min(25vw, 320px);
  height: min(25vw, 320px);
  min-width: 240px;
  min-height: 240px;
  position: relative;
  margin-right: 16px;
  margin-left: 16px;
  border-radius: 100%;
  overflow: hidden;
  background: var(--accent);
  /* background: radial-gradient( transparent,var(--accent),var(--accent)); */
  border: 1px solid var(--border);
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--caseAccent) 28%, transparent));
}

.CaseStudyWrapper {
  --caseAccent: var(--border, #c9c9c9);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 64px 0px;
}

svg.CaseStudycompanyLogo {
  width: 200px;
  margin-top: var(--space-7);
  margin-left: -9px;
}

img.caseStudyLogo {
  margin-bottom: var(--space-4);
}

.caseStudyLogoPair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  width: fit-content;
  max-width: 100%;
}

.caseStudyLogoPair .caseStudyLogo,
.caseStudyLogoPair .companyLogo,
.caseStudyLogoPair .caseStudyCompanyLogo {
  margin-bottom: 0;
  margin-left: 0 !important;
}

.main > .caseStudyCompanyLogoWrap.caseStudyLogoPair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  width: 100%;
  max-width: 100%;
}

.main > .caseStudyCompanyLogoWrap.caseStudyLogoPair .caseStudyCompanyLogo,
.main .caseStudyCompanyLogoWrap.caseStudyLogoPair .companyLogo {
  display: block;
  margin: 0;
}

.image-CaseStudy.caseStudyLogoPair {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin-bottom: 0;
  width: 72px;
  max-width: 72px;
}

.second-level-bar .image-CaseStudy.caseStudyLogoPair {
  padding: 4px;
}

.image-CaseStudy.caseStudyLogoPair .second-level-bar__logo {
  max-width: 48px;
  max-height: 16px;
  margin: 0;
}

div.CaseStudyDescription *:not(.topKeyFigures):not(.topKeyFigure):not(.topKeyFigure__value):not(.topKeyFigure__label) {
  text-align: left;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.CaseStudyDescription {
  /* background: radial-gradient(var(--accent), transparent, transparent); */
  width: 40%;
  min-width: 420px;
  padding-bottom: 58px;
  margin: 0 16px;
}

.CaseStudyAnimation svg {width: 100%;height: 100%;opacity: 0.85;}

/* !important: div.CaseStudyDescription :not(…) zeroes every child's padding. */
article .CaseStudyDescription > a {
  margin: 16px 0 !important;
  padding: 5px 10px 5px 12px !important;
  width: fit-content;
}

.CaseStudyDescription > .caseStudyUnavailable {
  margin: 16px 0;
  width: fit-content;
  max-width: 100%;
  opacity: 0.55;
  font-size: var(--text-functional);
  line-height: 1.35;
  color: var(--frgd, #050038);
}

.flashCardsArea{
  display: none;
  width: 228px;
  position: fixed;
  bottom: 16px;
  left: 16px;
  border: 2px solid var(--border);
  border-style: dashed;
  text-align: center;
  padding: 16px 32px;
  background-color: var(--accent);
  /* background: url(Grass.jpeg); */
  background-size: cover;
  /* text-shadow: 2px 2px 16px #002d00; */
  color: #2e36d9;
  border-radius: 16px;
  /* filter: hue-rotate(123deg); */
}

.flashCardsArea span{
  display: block;
  padding: var(--space-2) 0;
}

.flashCardsArea span.flashCardInstructionTitle{font-size: 2.938rem;line-height: 0.9;font-weight: 700;font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;}

.flashCardsArea button {
  text-decoration: none;
  background: var(--action);
  color: var(--frgd);
  padding: 4px 8px;
  margin: 0px 2px;
  font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
  /* text-transform: uppercase; */
  border: 2px solid;
  border-radius: 8px;
  font-size: calc(1.125rem * var(--ds-font-scale));
  font-weight: 800;
}

@keyframes shake-slow {
2% {
  transform: translate(0px, -7px) rotate(2.5deg)
}
4% {
  transform: translate(6px, 3px) rotate(-.5deg)
}
6% {
  transform: translate(6px, -5px) rotate(.5deg)
}
8% {
  transform: translate(3px, 3px) rotate(-1.5deg)
}
10% {
  transform: translate(-4px, 5px) rotate(1.5deg)
}
12% {
  transform: translate(2px, 7px) rotate(2.5deg)
}
14% {
  transform: translate(0px, 6px) rotate(-1.5deg)
}
16% {
  transform: translate(-9px, 5px) rotate(-2.5deg)
}
18% {
  transform: translate(4px, -8px) rotate(-.5deg)
}
20% {
  transform: translate(2px, 9px) rotate(3.5deg)
}
22% {
  transform: translate(-5px, 1px) rotate(-2.5deg)
}
24% {
  transform: translate(-2px, -8px) rotate(.5deg)
}
26% {
  transform: translate(4px, -2px) rotate(-.5deg)
}
28% {
  transform: translate(-4px, 9px) rotate(1.5deg)
}
30% {
  transform: translate(-4px, -3px) rotate(3.5deg)
}
32% {
  transform: translate(-2px, 6px) rotate(-2.5deg)
}
34% {
  transform: translate(4px, -4px) rotate(-.5deg)
}
36% {
  transform: translate(-1px, 6px) rotate(.5deg)
}
38% {
  transform: translate(8px, 8px) rotate(1.5deg)
}
40% {
  transform: translate(9px, -2px) rotate(3.5deg)
}
42% {
  transform: translate(-2px, -9px) rotate(.5deg)
}
44% {
  transform: translate(-1px, 10px) rotate(-1.5deg)
}
46% {
  transform: translate(-1px, 1px) rotate(-.5deg)
}
48% {
  transform: translate(6px, -8px) rotate(2.5deg)
}
50% {
  transform: translate(-1px, -7px) rotate(-1.5deg)
}
52% {
  transform: translate(0px, 1px) rotate(-1.5deg)
}
54% {
  transform: translate(1px, -8px) rotate(-2.5deg)
}
56% {
  transform: translate(-4px, 2px) rotate(1.5deg)
}
58% {
  transform: translate(10px, -7px) rotate(-2.5deg)
}
60% {
  transform: translate(-2px, -4px) rotate(-1.5deg)
}
62% {
  transform: translate(-3px, 3px) rotate(1.5deg)
}
64% {
  transform: translate(8px, 2px) rotate(-1.5deg)
}
66% {
  transform: translate(-4px, -1px) rotate(1.5deg)
}
68% {
  transform: translate(-1px, -2px) rotate(-1.5deg)
}
70% {
  transform: translate(8px, 8px) rotate(.5deg)
}
72% {
  transform: translate(-8px, -3px) rotate(-2.5deg)
}
74% {
  transform: translate(6px, 5px) rotate(.5deg)
}
76% {
  transform: translate(4px, -9px) rotate(1.5deg)
}
78% {
  transform: translate(-2px, -6px) rotate(3.5deg)
}
80% {
  transform: translate(1px, 0px) rotate(1.5deg)
}
82% {
  transform: translate(-4px, 6px) rotate(-2.5deg)
}
84% {
  transform: translate(-4px, -3px) rotate(1.5deg)
}
86% {
  transform: translate(7px, 10px) rotate(2.5deg)
}
88% {
  transform: translate(-3px, -2px) rotate(1.5deg)
}
90% {
  transform: translate(8px, -3px) rotate(3.5deg)
}
92% {
  transform: translate(0px, 3px) rotate(1.5deg)
}
94% {
  transform: translate(5px, -5px) rotate(-2.5deg)
}
96% {
  transform: translate(7px, -2px) rotate(-.5deg)
}
98% {
  transform: translate(-6px, 0px) rotate(3.5deg)
}
0%,
100% {
  transform: translate(0, 0) rotate(0)
}
}

.sweaterContainer {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  /* background: #ffffff; */
  z-index: -1;
  cursor: pointer;
  /* backdrop-filter: hue-rotate(178deg); */
}

.sweater {
  /* -webkit-animation: grain 7s steps(10) infinite; */
  /* animation: grain 7s steps(10) infinite; */
  background-image: url(../images/noise.webp);
  content: "";
  height: 285%;
  left: -50%;
  opacity: .4;
  position: absolute;
  top: -100%;
  width: 300%;
}

.homepage .sweater {
  -webkit-animation: grain 7s steps(10) infinite;
  animation: grain 7s steps(10) infinite;
}

.quoteImage img {
  -webkit-animation: nod 3s infinite, quote-face-sprite 12s steps(1, end) infinite;
  animation: nod 3s infinite, quote-face-sprite 12s steps(1, end) infinite;
}

.quoteDescription + .quoteText + .quoteImage img{
  animation-delay: 2s, 3.4s;
}

@keyframes quote-face-sprite {
  0% { object-position: 0% center; }
  16% { object-position: 20% center; }
  32% { object-position: 40% center; }
  48% { object-position: 60% center; }
  64% { object-position: 80% center; }
  82% { object-position: 100% center; }
  100% { object-position: 0% center; }
}

@-webkit-keyframes quote-face-sprite {
  0% { object-position: 0% center; }
  16% { object-position: 20% center; }
  32% { object-position: 40% center; }
  48% { object-position: 60% center; }
  64% { object-position: 80% center; }
  82% { object-position: 100% center; }
  100% { object-position: 0% center; }
}

@media (prefers-reduced-motion: reduce) {
  .quoteImage img {
    -webkit-animation: none;
    animation: none;
    object-position: 0% center;
  }
}

@keyframes nod {
  30% {
    -webkit-transform: rotate(0deg); 
    transform:rotate(0deg)
  }
  40% {
    -webkit-transform: rotate(10deg); 
    transform:rotate(10deg)
  }
  60% {
    -webkit-transform: rotate(-10deg); 
    transform:rotate(-10deg)
  }
  70% {
    -webkit-transform: rotate(0deg); 
    transform:rotate(0deg)
  }
}


@-webkit-keyframes grain {
  0%,
  to {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
  10% {
    -webkit-transform: translate(-5%, -10%);
    transform: translate(-5%, -10%)
  }
  20% {
    -webkit-transform: translate(-15%, 5%);
    transform: translate(-15%, 5%)
  }
  30% {
    -webkit-transform: translate(7%, -25%);
    transform: translate(7%, -25%)
  }
  40% {
    -webkit-transform: translate(-5%, 25%);
    transform: translate(-5%, 25%)
  }
  50% {
    -webkit-transform: translate(-15%, 10%);
    transform: translate(-15%, 10%)
  }
  60% {
    -webkit-transform: translate(15%);
    transform: translate(15%)
  }
  70% {
    -webkit-transform: translateY(15%);
    transform: translateY(15%)
  }
  80% {
    -webkit-transform: translate(3%, 35%);
    transform: translate(3%, 35%)
  }
  90% {
    -webkit-transform: translate(-10%, 10%);
    transform: translate(-10%, 10%)
  }
}

@keyframes grain {
  0%,
  to {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
  10% {
    -webkit-transform: translate(-5%, -10%);
    transform: translate(-5%, -10%)
  }
  20% {
    -webkit-transform: translate(-15%, 5%);
    transform: translate(-15%, 5%)
  }
  30% {
    -webkit-transform: translate(7%, -25%);
    transform: translate(7%, -25%)
  }
  40% {
    -webkit-transform: translate(-5%, 25%);
    transform: translate(-5%, 25%)
  }
  50% {
    -webkit-transform: translate(-15%, 10%);
    transform: translate(-15%, 10%)
  }
  60% {
    -webkit-transform: translate(15%);
    transform: translate(15%)
  }
  70% {
    -webkit-transform: translateY(15%);
    transform: translateY(15%)
  }
  80% {
    -webkit-transform: translate(3%, 35%);
    transform: translate(3%, 35%)
  }
  90% {
    -webkit-transform: translate(-10%, 10%);
    transform: translate(-10%, 10%)
  }
}



@keyframes floatinPopUp {
  0% {
    box-shadow: 2px 2px 0px var(--frgd);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 2px 4px 0px var(--frgd);
    transform: translatey(-4px);
  }
  100% {
    box-shadow: 2px 2px 0px var(--frgd);
    transform: translatey(0px);
  }
}







.aboutUsLinkedin {
  font-family: 'Inter', "Inter Fallback", "Inter Fallback R";
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding: 32px 0;
}

.aboutUsLinkedin a {
  width: 100%;
  max-width: 260px;
}

.RecomendationsWrapper {
  --rec-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--rec-cols), minmax(0, 1fr));
  gap: 20px 24px;
  align-items: stretch;
  width: 100%;
}

.RecomendationsWrapper.is-bento .RecomendationsContent {
  display: none;
}

.RecomendationsWrapper .singlerecomendation {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  margin-block: 0;
  height: 100%;
  box-sizing: border-box;
  grid-column: span 1;
  /* Keep avatar+bubble, author and role as one tight stack at the bottom;
     space-around would spread them apart in taller cells. */
  align-content: flex-end;
}

.RecomendationsWrapper .recommendation {
  max-width: calc(100% - 52px);
}

.RecomendationsWrapper .recommendationAuthorRole {
  margin-bottom: 0;
}

/* One chat per cell, so a full row always holds --rec-cols chats.
   Size variety comes from height tiers instead of column spans. */
.RecomendationsWrapper .singlerecomendation.rec--lg {
  min-height: 9rem;
}

.RecomendationsWrapper .singlerecomendation.rec--xl {
  min-height: 12rem;
}

.RecomendationsWrapper[data-rec-cols="1"] .singlerecomendation.rec--lg,
.RecomendationsWrapper[data-rec-cols="1"] .singlerecomendation.rec--xl {
  min-height: 0;
}

.poweredByLI img {
  filter: grayscale(1);
  opacity: 0.6;
}

div#recomendationsContainer.load-all {
  max-height: none;
}

.load-more {
  max-height: 80vh;
  overflow: hidden;
  position: relative;
  margin: 32px 0 64px;
  }

.load-more-footer {
  /* border-bottom: 1px solid; */
  position: absolute;
  display: flex;
  bottom: 0;
  width: 100%;
  background: var(--bkgd);
  -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent);
  mask-image: linear-gradient(0deg, #000 40%, transparent);
  height: 120px;
  /* border-radius: 0 0 32px 32px; */
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 0;
  z-index: 1;
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in;
  padding-bottom: 16px;
}

/* Open: the fade goes and the toggle sits under the last recommendation. */
.load-all .load-more-footer {
  position: static;
  height: auto;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#load-more-btn[aria-expanded="true"]::before {
  transform: rotate(180deg);
}

.mainSection h2 {
  /* border-bottom: 1px solid; */
}

.dictionarySnippet svg {
  opacity: 0.75;
  margin: -24px -24px 16px -24px;
}

img.recommendationImage {
  position: absolute;
  bottom: 0;
  left: 50px;
  border-radius: 100%;
  filter: grayscale(1);
  opacity: 0.8;
}

.singleRecomendation {
  position: relative;
}

.recommendationimage {
  /* position: absolute; */
  bottom: 0;
  filter: none;
  border-radius: 32px;
  left: 50px;
  opacity: 0.8;
}

.RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd),
.RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even){
  /* text-align: right; */
  margin-bottom: var(--space-7);
}

.RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd) .recommendationimage,
.RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even) .recommendationimage{
  /* right: 50px; */
  /* left: auto; */
}

.RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd) .recommendationAuthor,
.RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even) .recommendationAuthor,
.RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd) .recommendationAuthorRole,
.RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even) .recommendationAuthorRole{/* padding-left: 16px; *//* padding-right: 100px; */}

.RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd) .recommendation:after ,
.RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even) .recommendation:after {/* content: ''; *//* position: absolute; *//* bottom: 0; *//* right: 30px; *//* left: auto; *//* width: 0; *//* height: 0; *//* border: 22px solid rgba(255, 255, 255, 0); *//* border-top-color: var(--accent); *//* border-bottom: 0; *//* border-left: 0; *//* margin-left: 0; *//* margin-right: -11px; *//* margin-bottom: -22px; */}



.singlerecomendation {
  display: flex;
  width: 100%;
  /* position: relative; */
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  align-items: flex-end;
  max-width: 440px;
  margin: 8px auto;
}

.sprite {background: url('../images/sprite.png') no-repeat top left;width: 42px;height: 42px;margin-right: 10px;} 
.sprite.sprite-SR { background-position: 0 0; } 
.sprite.sprite-DDE { background-position: -52px 0; } 
.sprite.sprite-LAO { background-position: -104px 0; } 
.sprite.sprite-PJ { background-position: -156px 0; } 
.sprite.sprite-JMU { background-position: -208px 0; } 
.sprite.sprite-JMO { background-position: -260px 0; } 
.sprite.sprite-ALR { background-position: -312px 0; } 
.sprite.sprite-MMA { background-position: -364px 0; } 
.sprite.sprite-RBA { background-position: -416px 0; } 
.sprite.sprite-IPE { background-position: -468px 0; } 
.sprite.sprite-NDR { background-position: -520px 0; } 
.sprite.sprite-MME { background-position: -572px 0; } 
.sprite.sprite-BGR { background-position: -624px 0; } 
.sprite.sprite-GPO { background-position: -676px 0; } 
.sprite.sprite-KHO { background-position: -728px 0; } 
.sprite.sprite-IDJ { background-position: -780px 0; } 
.sprite.sprite-MBA { background-position: -832px 0; } 
.sprite.sprite-ABR { background-position: -884px 0; } 
.sprite.sprite-VSH { background-position: -936px 0; } 
.sprite.sprite-CIN { background-position: -988px 0; } 
.sprite.sprite-KTH { background-position: -1040px 0; } 
.sprite.sprite-AWI { background-position: -1092px 0; } 
.sprite.sprite-EMO { background-position: -1144px 0; } 
.sprite.sprite-BAL { background-position: -1196px 0; } 
.sprite.sprite-IGP { background-position: -1248px 0; } 
.sprite.sprite-AG { background-position: -1300px 0; } 
.sprite.sprite-AI { background-position: -1352px 0; } 
.sprite.sprite-AL { background-position: -1404px 0; } 
.sprite.sprite-AP { background-position: -1456px 0; } 
.sprite.sprite-API { background-position: -1508px 0; } 
.sprite.sprite-DB { background-position: -1560px 0; } 
.sprite.sprite-DD { background-position: -1612px 0; } 
.sprite.sprite-DG { background-position: -1664px 0; } 
.sprite.sprite-EM { background-position: -1716px 0; } 
.sprite.sprite-GS { background-position: -1768px 0; } 
.sprite.sprite-LM { background-position: -1820px 0; } 
.sprite.sprite-MAV { background-position: -1872px 0; } 
.sprite.sprite-MB { background-position: -1924px 0; } 
.sprite.sprite-PL { background-position: -1976px 0; } 
.sprite.sprite-PP { background-position: -2028px 0; } 
.sprite.sprite-SB { background-position: -2080px 0; } 
.sprite.sprite-SJ { background-position: -2132px 0; } 
.sprite.sprite-UH { background-position: -2184px 0; } 

.sprite-9 {
background: url('../images/sprite-second.png') -10px -10px;
}

.sprite-12 {
background: url('../images/sprite-second.png') -72px -10px;
}

.sprite-2 {
background: url('../images/sprite-second.png') -134px -10px;
}

.sprite-3 {
background: url('../images/sprite-second.png') -196px -10px;
}

.sprite-5 {
background: url('../images/sprite-second.png') -258px -10px;
}

.sprite-4 {
background: url('../images/sprite-second.png') -320px -10px;
}

.sprite-6 {
background: url('../images/sprite-second.png') -382px -10px;
}

.sprite-7 {
background: url('../images/sprite-second.png') -444px -10px;
}

.sprite-8 {
background: url('../images/sprite-second.png') -506px -10px;
}

.sprite-10 {
background: url('../images/sprite-second.png') -568px -10px;
}

.sprite-11 {
background: url('../images/sprite-second.png') -630px -10px;
}

.sprite-13 {
background: url('../images/sprite-second.png') -692px -10px;
}

.sprite-14 {
background: url('../images/sprite-second.png') -754px -10px;
}

.sprite-15 {
background: url('../images/sprite-second.png') -816px -10px;
}

.sprite-16 {
background: url('../images/sprite-second.png') -878px -10px;
}

.sprite-18 {
background: url('../images/sprite-second.png') -940px -10px;
}

.sprite-17 {
background: url('../images/sprite-second.png') -1002px -10px;
}

.sprite-19 {
background: url('../images/sprite-second.png') -1064px -10px;
}

.sprite-20 {
background: url('../images/sprite-second.png') -1126px -10px;
}

.sprite-21 {
background: url('../images/sprite-second.png') -1188px -10px;
}

.sprite-22 {
background: url('../images/sprite-second.png') -1250px -10px;
}

.sprite-23 {
background: url('../images/sprite-second.png') -1312px -10px;
}

.sprite-24 {
background: url('../images/sprite-second.png') -1374px -10px;
}

.sprite-25 {
background: url('../images/sprite-second.png') -1436px -10px;
}

.sprite-1 {
background: url('../images/sprite-second.png') -1498px -10px;
}



a.social-icon img {
  margin: -3px;
}

.sprite.sprite-default{
  background: url(../images/sprite-default.png) no-repeat top left !important;
}

#Welcome{text-align: center;text-shadow: 4px 4px 16px var(--bkgd);/* backdrop-filter: blur(5px); */background: #ffffffb3;border-radius: 16px 16px 0 0;z-index: 2;}

@-webkit-keyframes intro-gradient {
0%{background-position:0% 4%}
50%{background-position:100% 97%}
100%{background-position:0% 4%}
}
@-moz-keyframes intro-gradient {
0%{background-position:0% 4%}
50%{background-position:100% 97%}
100%{background-position:0% 4%}
}
@keyframes intro-gradient { 
0%{background-position:0% 4%}
50%{background-position:100% 97%}
100%{background-position:0% 4%}
}

.CaseStudyWrapper:nth-child(odd) .CaseStudyDescription *:not(.topKeyFigures):not(.topKeyFigure):not(.topKeyFigure__value):not(.topKeyFigure__label) {
  text-align: right;
  margin-left: auto !important;
  overflow-wrap: normal;
}

.CaseStudyWrapper:nth-child(odd) {flex-direction: row-reverse;text-align: right;display: flex;justify-content: flex-start;/* background: var(--accent); */}

.CaseStudyWrapper:last-child .CaseStudyDescription {
  border-radius: 8px 8px 24px 24px;
  margin-bottom: 0px;
}

.curve {
-webkit-shape-outside:circle();
shape-outside:circle();
}

div.CaseStudyDescription p span {
  text-align: center;
  font-weight: 600;
}

span.scratch {
  font-weight: 300;
}

div#workfooter {
  /* min-height: 32px; */
}

span.scratch {
  font-weight: 200 !important;
  text-decoration: line-through;
}

.dictionaryNumber {
  position: absolute;
  font-family: 'Inter', "Inter Fallback", "Inter Fallback R";
  width: 24px;
  height: 24px;
  background: var(--bkgd);
  border-radius: 50%;
  text-align: center;
  z-index: 1;
  top: 16px;
  left: 16px;
  border: 2px solid var(--accent);
}

div.popUp {
  z-index: 2;
  /* display: none; */
  /* left: 9999999px; */
  border: 1px solid var(--frgd) !important;
  border-radius: 8px;
  position: absolute;
  /* box-shadow: 4px 4px 8px #bdbdbd; */
  overflow: hidden;
  max-width: 380px;
  transform: translatey(0px);
  /* animation: floatinPopUp 8s ease-in-out infinite; */
  filter: grayscale(1);
  /* opacity: 0.9; */
  transition: top 12s ease, left 2s ease;
}

.popUp:hover{z-index: 99 !important;cursor: grab;box-shadow: 8px 8px 22px var(--border);filter: none;opacity: 1;border: 2px solid var(--border) !important;transition: top 30s ease, left 30s ease !important;}

div.popUpHeader {
  display: flex;
  height: 24px;
  background: var(--action);
  background: var(--accent);
  border-bottom: 2px solid var(--action) !important;
  justify-content: space-between;
  z-index: 2;
}

.popUpArea {
  width: 100%;
  position: relative;
  min-height: 100vh;
  background: none;
}

.popUpActions {
  display: flex;
}

.popUpHeader .popUpActions button {
  width: 18px;
  height: 18px;
  padding: 0px 0px 1px 1px;
  margin: 4px 2px;
  box-shadow: 1px 1px var(--action);
  border-radius: 32px;
  background: var(--accent);
  border-color: var(--frgd);
  font-family: monospace;
  font-size: 1rem;
  text-align: center;
  line-height: 0;
  text-transform: lowercase;
  background: var(--action);
  border-width: 1px !important;
}

.popUpContent {
  overflow: hidden;
  z-index: 1;
  display: flex;
  width: 320px;
  max-height: 475px;
  background: var(--bkgd);
  flex-direction: column;
  justify-content: flex-end;
}

.popUpCategory {
  padding: 4px 8px;
  font-family: var(--font-meta);
  font-size: 0.75rem;
}

.popUpContent h2 {
  font-size: 2.938rem;
  font-weight: 800;
  text-align: left;
  /* text-transform: uppercase; */
  padding: 16px;
}

.popUpLinks {
  display: flex;
  justify-content: space-evenly;
  padding: 0 0 16px;
}

.popUpImage {/* display: none !important; */height: 40%;overflow: hidden;flex-shrink: 1;display: flex;justify-content: center;align-items: center;background: var(--action);}

.popUpText p {
  padding: 0 16px;
  font-size: 0.875rem;
  filter: grayscale(1);
}

.popUpText {
  height: 60%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  backdrop-filter: opacity(1);
}

.popUpLinks a {
  font-size: 0.75rem;
  padding: 2px 8px !important;
  margin: 2px !important;
  background: var(--action) !important;
}

.popUp.ui-draggable-dragging {
  cursor: grabbing;
}

/* .PopUpsAreAwesomeText {
  display: block;
  margin: auto;
  z-index: 1 !important;
  line-height: 0.8;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%,-50%);
  /* text-transform: uppercase; */
  font-family: verdana;
  font-size: 6vw;
  font-weight: 800 !important;
  color: #f5f5f5;
  text-shadow: 1px 1px 1px var(--action),
      1px 2px 1px var(--action),
      1px 3px 1px var(--action),
      1px 4px 1px var(--action),
      1px 5px 1px var(--action),
      1px 6px 1px var(--action),
      1px 7px 1px var(--action),
      1px 8px 1px var(--action),
      1px 9px 1px var(--action),
      1px 10px 1px var(--action),
  1px 18px 6px rgba(16,16,16,0.4),
  1px 22px 10px rgba(16,16,16,0.2),
  1px 25px 35px rgba(16,16,16,0.2),
  1px 30px 60px rgb(197 225 165 / 39%);
} */

/* .PopUpsAreAwesomeText span{
  font-size: 25vw;
} */

 .PopUpsAreAwesomeText {
   z-index: 1 !important;
   position: absolute;
   font-size: 5vw;
   font-weight: 800 !important;
   text-align: center;
   line-height: 0.9;
   top: 30vh;
   width: 100%;
   padding: 18px;
   border-radius: 8px;
 }

 .PopUpsAreAwesomeText span {
   font-size: 8vw;
   /* text-transform: uppercase; */
 }

 .huerotate {
  /* -webkit-animation: hue 10s infinite; */
  /* background: var(--action) !important; */
}

@-webkit-keyframes hue {
  1% { -webkit-filter: hue-rotate(0deg);}
  100% { -webkit-filter: hue-rotate(359deg);}
}

/* smartphones, touchscreens */


@media only screen and (min-width: 1600px){
  .CaseStudyWrapper {margin-left: calc(85vw - 104vw);margin-right: calc(85vw - 104vw);margin-bottom: calc(108vw - 102vw);/* margin: 128px 0px; */}

  div.mainHome div div.CaseStudyAnimation,
  .CaseStudyAnimation{
    width: 22vw;
    height: 22vw;
    max-width: none;
    max-height: none;
  }

 #workfooter{height: 10vw;}


 .popUpArea{
   left: -10vw;
 }

 .contactMe{
   
 }
 
}

#carousel {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin-left: auto;
}

#carouselBlocks {
  display: flex;
  overflow: hidden;
  order: 1;
   /* Adjust based on your requirement */
}

#carouselBlocks .storySnippet {
  max-width: 100%;
  opacity:0; /* Hide Blocks initially */
  width: 0;
  display: none;
}

#carouselBlocks .storySnippet.shown, #carousel.showAll #carouselBlocks .storySnippet{
  opacity: 1; /* Show active image */
  transition: 2s;
  width: 100%;
  display: block;
}

#carousel.showAll .storySnippetContainer{
  flex-wrap: wrap;
}

#carousel.showAll button{
  display: none;
}

#carousel.showAll #seeAllBtn,
#carousel.showAll .cs-carousel__see-all,
#carousel.showAll button.carousel-see-all {
  display: inline-flex !important;
}

#prevBtn,#nextBtn,
.kb-nav-btn,
.sq-rec-prev,
.sq-rec-next,
.cs-carousel__prev,
.cs-carousel__next {
  font-size: var(--text-body);
  line-height: 1;
  padding: 0;
}

/* Shared carousel arrow icons (Material Symbols: arrow_back / arrow_forward) */
#prevBtn .material-symbols-outlined,
#nextBtn .material-symbols-outlined,
.kb-nav-btn .material-symbols-outlined,
.sq-rec-prev .material-symbols-outlined,
.sq-rec-next .material-symbols-outlined,
.cs-carousel__prev .material-symbols-outlined,
.cs-carousel__next .material-symbols-outlined,
.carouselControls button .material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: calc(1.25rem * var(--ds-font-scale));
  width: 20px;
  height: 20px;
  color: inherit;
  display: block;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
}

.storySnippetContainerScrollable{
  overflow-x: scroll;
}

.storySnippetContainer{display: flex;width: auto;flex-direction: row;flex-wrap: nowrap;align-items: stretch;}

.storySnippet{background: var(--accent);font-family:'Inter', "Inter Fallback", "Inter Fallback R",sans-serif;font-size: calc(0.938rem * var(--ds-font-scale));text-align: left;line-height: 1.25;padding: var(--space-4);border-radius: 4px;/* min-width: 240px; */margin: var(--space-4);}

.storySnippet img{
  width: 60px;
  padding: 10px;
  margin-right: 18px;
  opacity: 0.75;
  float: left;
  border-radius: 100px;
  background: var(--bkgd);
  border: 1px solid var(--accent);
}

.storySnippet b{
 display: block;
 font-weight: 400;
 font-size: var(--text-meta);
 padding: 16px 0 8px;
 /* text-transform: uppercase; */
 letter-spacing: 0.01em;
}

.showAll{max-width: 500px!important;margin-right: 0px !important;}



.mainHome a.disabled {
  /* display: none; */
  filter: grayscale(1);
  opacity: 0.5;
  cursor: default !important;
  box-shadow: none !important;
  position: static !important;
  z-index: -1;
}

div#uniquePopUp-10 {
  top: 47vh;
  left: 11vw;
}

div#uniquePopUp-9 {
  top: 26vh;
  left: 67vw;
}

div#uniquePopUp-8 {
  top: 22vh;
  left: 32vw;
}

div#uniquePopUp-6 {
  left: 61vw;
  top: 10vw;
}

div#uniquePopUp-5 {
  left: 64vw;
  top: -5vh;
}

div#uniquePopUp-4 {
  left: 38vw;
}

div#uniquePopUp-3 {left: -2vw;top: 69vh;}

div#uniquePopUp-12 {
  top: 60vh;
  left: 62vw;
}

div#uniquePopUp-11 {
  left: 40vw;
  top: 53vh;
}

div#uniquePopUp-7 {
  left: 2vw;
  top: 30vh;
}

div#uniquePopUp-2 {
  left: 18vw;
}

div#uniquePopUp-1 {
  left: 1vh;
  top: 2vh;
}


a:active {
  box-shadow: inset 4px 3px 0px 0px #6262625e !important;
}

.homepage .sweaterContainer {
  display: block;
}

.popUpImage img {
  width: 100%;
  opacity: 0.6;
  filter: contrast(1.5);
}

.planet {
  display: none;
  height: 100vh;
  width: 100vw;
  max-width: 1200px;
  position: absolute;
  top: 1px;
}

svg#eXgNx2DaCFV1 {
  padding: 9%;
  box-sizing: border-box;
}

div#CustomerJourney {
  background: var(--bkgd);
}

.PopUpsAreAwesomeText i {
  font-size: 0.75rem;
  color: var(--frgd);
}

body#MainSection > a {
  /* display: block; */
  /* width: 80px; */
  /* height: 80px; */
}

.main li b {
  display: block;
  padding: 4px;
  letter-spacing: 1px;
  font-family: var(--font-text);
}

/* caseStudyLabel, three levels: section and list labels (here and above) are
   --text-h4 display; stepper card titles --text-lead; role-card items Inter. */
.main li h4.caseStudyLabel {
  display: block;
  padding: 4px;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.main li b {
  background: var(--accent);
}

.main li h4.caseStudyLabel {
  background: none;
}

.main .is-struck {
  text-decoration: line-through;
}

.main .is-muted-note {
  color: #191919;
  background: #eeedee;
  opacity: 0.55;
  padding: 0 16px;
}

.main > video.is-strip {
  border: none;
  background: #eeedee;
  width: 100%;
  height: 128px;
  margin-bottom: -32px;
}

/* Contact card ---------------------------------------------------------------
   The desk video plays full strength under a slowly drifting tint (ink to
   violet to rose) with a film grain on top, so the sticky notes show through
   and the white text still reads. The headline's "chat" is one more sticky
   note; a canvas cursor labelled "You" drifts over to the email button, like
   the collaborators on the board. The poster (and the ink behind it) covers
   reduced motion and the moment before the video loads.
   --------------------------------------------------------------------------- */
.contactMe {
  --contact-ink: var(--frgd, #050038);
  --contact-violet: #7122ec; /* the canvas Designer cursor */
  --contact-rose: #d78191;
  --contact-note: var(--yellow-strong, #ffd02f);   /* the primary-button yellow */
  --contact-mono: var(--font-meta, 'Departure Mono', ui-monospace, monospace);
  --btn-soft-bg: rgb(255 255 255 / 0.12);
  --btn-soft-bg-hover: rgb(255 255 255 / 0.22);
  --btn-soft-ink: #fff;
  --btn-soft-icon: rgb(255 255 255 / 0.85);
  container-type: inline-size;
  display: flex;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 420px;
  width: 100%;
  box-sizing: border-box;
  margin: 16px 0;
  padding: 72px 24px 64px;
  border-radius: 24px;
  background: var(--contact-ink);
  color: #fff;
  text-align: center;
  outline: 1px solid rgb(255 255 255 / 0.14);
  outline-offset: -1px;
  box-shadow:
    0 30px 60px -30px color-mix(in srgb, var(--contact-violet) 70%, transparent),
    0 12px 24px -16px color-mix(in srgb, var(--contact-ink) 60%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Tint: a fixed pool of ink behind the text, over a gradient that drifts. */
.contactMe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--contact-ink) 50%, transparent), transparent),
    linear-gradient(120deg,
      color-mix(in srgb, var(--contact-ink) 85%, transparent),
      color-mix(in srgb, var(--contact-violet) 65%, transparent) 35%,
      color-mix(in srgb, var(--contact-rose) 55%, transparent) 55%,
      color-mix(in srgb, var(--contact-violet) 65%, transparent) 75%,
      color-mix(in srgb, var(--contact-ink) 85%, transparent));
  background-size: 100% 100%, 300% 100%;
  background-position: center, 0% 50%;
  animation: contact-tint 24s ease-in-out infinite alternate;
}

/* Film grain. */
.contactMe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes contact-tint {
  to { background-position: center, 100% 50%; }
}

.contactMe > :not(video) {
  position: relative;
  z-index: 2;
}

.contactMe p {
  text-align: center;
}

.contactMe h2 {
  /* text-align: left; */
  text-transform: none;
  font-weight: 600;
  font-size: 5.75rem;
  padding: 16px 0;
  letter-spacing: -4px;
}

/* Eyebrow: mono, with a live-looking dot. */
.contactMe .contactMe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--contact-mono);
  font-size: var(--text-meta);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.9);
}

.contactMe__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--contact-note);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--contact-note) 70%, transparent);
  animation: contact-dot 2.4s ease-out infinite;
}

@keyframes contact-dot {
  70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--contact-note) 0%, transparent); }
}

.contactMe .contactMe__title {
  max-width: 14ch;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--contact-ink) 55%, transparent);
}

/* "chat" on a sticky note. */
.contactMe__title mark {
  display: inline-block;
  padding: 0 0.14em 0.06em;
  margin: 0 0.02em;
  background: var(--contact-note);
  color: var(--contact-ink);
  text-shadow: none;
  border-radius: 2px;
  box-shadow: 0 10px 18px -8px rgb(0 0 0 / 0.45);
  transform: rotate(-4deg);
}

.contactMeButtons {
  display: flex;
}

#contact-background-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: saturate(1.15);
}

div#contactMeButtons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
}

/* The body-button rule above outweighs any id selector (its :not(#…) list),
   so colours come in through its --btn-soft-* variables and the rest needs
   !important. */
div#contactMeButtons a {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28) !important;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* Email is the primary action: the footer's yellow button, ink edge and an
   offset shadow that deepens as it lifts. */
div#contactMeButtons a.contactMe__primary {
  --btn-soft-bg: var(--contact-note);
  --btn-soft-bg-hover: var(--contact-note);
  --btn-soft-ink: var(--contact-ink);
  --btn-soft-icon: var(--contact-ink);
  position: relative;
  z-index: 3; /* keeps the cursor above the next button */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 2px var(--contact-ink), 3px 4px 0 var(--contact-ink) !important;
}

div#contactMeButtons a.contactMe__primary:hover {
  transform: translate(-1px, -2px);
  box-shadow: inset 0 0 0 2px var(--contact-ink), 5px 7px 0 var(--contact-ink) !important;
}

div#contactMeButtons a.contactMe__primary:active {
  transform: translate(2px, 3px);
  box-shadow: inset 0 0 0 2px var(--contact-ink), 1px 1px 0 var(--contact-ink) !important;
}

div#contactMeButtons a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The "You" cursor, drawn like the board's collaborators (canvas-board.css). */
.contactMe .contactMe__cursor {
  position: absolute;
  right: -22px;
  bottom: -26px;
  z-index: 3;
  pointer-events: none;
  animation: contact-cursor 6s ease-in-out infinite;
}

.contactMe .contactMe__cursor svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: var(--contact-violet);
  overflow: visible;
  filter: drop-shadow(0 1.5px 2px rgb(0 0 0 / 0.35));
}

.contactMe__cursor svg path {
  fill: var(--contact-violet);
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
}

.contactMe__cursor span {
  position: absolute;
  left: 14px;
  top: 18px;
  padding: 3px 6px;
  border-radius: 2px 6px 6px 6px;
  background: var(--contact-violet);
  color: #fff;
  box-shadow: 0 1.5px 4px rgb(0 0 0 / 0.25);
  font-family: var(--contact-mono);
  font-size: var(--text-meta);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

@keyframes contact-cursor {
  0%, 100% { transform: translate(18px, 20px); }
  40%, 60% { transform: translate(0, 0); }
  48%      { transform: translate(0, 0) scale(0.88); }
}

/* Footer line: mono, quiet. */
.contactMe .contactMe__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin: 28px 0 0;
  padding: 0;
  font-family: var(--contact-mono);
  font-size: var(--text-meta);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.72);
  text-shadow: none;
}

.contactMe__meta span + span::before {
  content: "✷";
  margin-right: 20px;
  color: var(--contact-note);
}

@container (max-width: 480px) {
  .contactMe .contactMe__cursor { display: none; }
  .contactMe__meta span + span::before { display: none; }
  .contactMe .contactMe__meta { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .contactMe::before,
  .contactMe__dot,
  .contactMe .contactMe__cursor { animation: none; }
  div#contactMeButtons a { transition: none; }
}

a.lowTimeIcon svg#eiLeq2IX49s1 {
  width: 36px;
  padding: 0;
}

/* Second-level Work navigation bar
   Each item: title, short description, company logo */
nav.mainNavigation {
  position: relative;
  max-width: min(1400px, 100%);
  width: 100%;
  box-sizing: border-box;
}

nav.mainNavigation:has(.second-level-bar),
nav.mainNavigation:has(ol.second-level-navigation) {
  overflow-x: hidden;
}

nav.mainNavigation:has(.second-level-bar) > ol > li > a,
nav.mainNavigation:has(ol.second-level-navigation) > ol > li > a {
  font-size: calc(1.25rem * var(--ds-font-scale));
}

.second-level-bar {
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  z-index: 5;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 4px 4px;
  backdrop-filter: blur(3px);
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Desktop: reuse main-CaseStudy card structure */
.second-level-bar__item.main-CaseStudy-link,
nav.mainNavigation .second-level-bar__item.main-CaseStudy-link {
  display: block !important;
  flex-shrink: 0;
  height: 100%;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: var(--frgd) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  white-space: normal;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  opacity: 1;
  -webkit-text-fill-color: unset !important;
  backdrop-filter: none !important;
  transition: 0.3s linear;
  cursor: pointer;
}

.second-level-bar__item.main-CaseStudy-link:focus-visible,
nav.mainNavigation .second-level-bar__item.main-CaseStudy-link:focus-visible {
  opacity: 1;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

.second-level-bar__item.main-CaseStudy-link:focus-visible {
  outline: 1px solid var(--frgd);
  outline-offset: 1px;
}

.second-level-bar__item.main-CaseStudy-link .main-CaseStudy {
  margin-bottom: 0;
  height: 100%;
  border: 2px solid var(--frgd);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--shadow);
  background: var(--action);
  overflow: hidden;
}

/* Match nav.mainNavigation ol li a hover / active press */
.second-level-bar__item.main-CaseStudy-link:hover,
nav.mainNavigation .second-level-bar__item.main-CaseStudy-link:hover,
nav.mainNavigation ol li .second-level-bar__item.main-CaseStudy-link:hover,
.second-level-bar__item.main-CaseStudy-link:active,
nav.mainNavigation .second-level-bar__item.main-CaseStudy-link:active,
nav.mainNavigation ol li .second-level-bar__item.main-CaseStudy-link:active {
  color: var(--frgd) !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  top: 2px !important;
  left: 2px !important;
  transition: 0.3s linear;
}

.second-level-bar__item.main-CaseStudy-link:hover .main-CaseStudy,
.second-level-bar .main-CaseStudy:hover,
.second-level-bar__item.main-CaseStudy-link:active .main-CaseStudy,
.second-level-bar .main-CaseStudy:active {
  box-shadow: none;
  margin: 0;
  border: 2px solid var(--frgd);
  background: var(--action);
}

.second-level-bar__item[aria-current="page"],
nav.mainNavigation .second-level-bar__item[aria-current="page"] {
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

.second-level-bar__item[aria-current="page"] .main-CaseStudy {
  background: none;
  box-shadow: none;
  border: none;
}

.second-level-bar__item[aria-current="page"] .linkIcon {
  display: none;
}

.second-level-bar__item[aria-current="page"] .contentLayout-CaseStudy {
  background: none;
}

.second-level-bar__item[aria-current="page"] .image-CaseStudy {
  background: none;
  border-right: none;
}

.second-level-bar .contentLayout-CaseStudy {
  height: 100%;
  align-items: center;
  background: var(--action);
}

.second-level-bar .content-CaseStudy {
  min-width: 0;
  padding: 6px 12px 6px 8px;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
}

.second-level-bar .content-CaseStudy h4 {
  font-size: 0.9375rem;
  font-weight: 800;
  /* text-transform: uppercase; */
  letter-spacing: 0.5px;
  line-height: 1.15;
  padding: 0;
  margin: 0;
  font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
  color: #000;
  text-align: left;
}

.second-level-bar .content-CaseStudy p {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
  opacity: 1;
  white-space: normal;
  text-align: left;
}

.second-level-bar .image-CaseStudy {
  min-width: 72px;
  width: 72px;
  height: 48px;
  padding: 8px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-right: 2px solid var(--frgd);
}

.second-level-bar__logo {
  display: block;
  width: 100%;
  max-width: 56px;
  height: auto;
  max-height: 28px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  pointer-events: none;
}

.second-level-bar .linkIcon {
  display: none;
}

/* Legacy orb styles — kept for case study pages not yet migrated */
.second-level-bar__orb.CaseStudyAnimation {
  width: 100%;
  height: 44px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  display: block;
  background: var(--bkgd);
  border: none;
  filter: none;
  flex-shrink: 0;
}

.second-level-bar__orb.CaseStudyAnimation > svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.second-level-bar__scroller {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
  /* Vertical inset so focus rings / box-shadows aren't clipped */
  padding: 2px 0;
  /* Soft fade at edges so items glide out instead of hard-clipping */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
}

.second-level-bar__scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.second-level-bar__scroller:focus-visible {
  outline: 1px solid var(--frgd);
  outline-offset: 1px;
  border-radius: 2px;
}

nav.mainNavigation ol.second-level-navigation,
.second-level-bar ol.second-level-navigation {
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0 6px;
  height: 100%;
  width: max-content;
  max-width: none;
  list-style: none;
  justify-content: flex-start;
  right: auto;
  left: auto;
}

nav.mainNavigation ol.second-level-navigation > li,
.second-level-bar ol.second-level-navigation > li,
nav.mainNavigation ol ol.second-level-navigation li {
  padding: 0;
  margin: 0;
  border: none !important;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: 100%;
}


.second-level-bar__mobile {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.second-level-bar__mobile select {
  /* width: 100%; */
  max-width: 140px;
  /* height: 44px; */
  margin-left: auto;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-meta);
  font-size: var(--text-functional-sm);
  font-weight: 600;
  /* text-transform: uppercase; */
  letter-spacing: 0;
  color: var(--frgd);
  background: var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233a4237' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--frgd);
  border-radius: 8px;
  box-shadow: 1px 1px;
  padding: 8px 28px 8px 10px;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.second-level-bar__mobile select:hover,
.second-level-bar__mobile select:focus {
  border-color: var(--frgd);
  box-shadow: none;
  outline: none;
}

.second-level-bar__mobile select:focus-visible {
  outline: 2px solid var(--frgd);
  outline-offset: 2px;
}



.main > video,
.main > .caseStudyInProgress > video {box-sizing: border-box;width: 100%;margin-top: var(--space-7);margin-bottom: -64px;/* box-shadow: 2px 2px 12px 1px var(--action); */border-radius: 8px;border: 1px solid var(--accent);margin-bottom: 0px;}

.imageViewer {display: flex;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-start;margin-top: var(--space-10);background: var(--accent);padding: var(--space-4) var(--space-2);border-radius: 16px;margin-bottom: 8px;}

.imageViewer img {width: 22%;}

.imageViewer.templatePictograms > img {filter: grayscale(1);opacity: 0.7;}

ellipse#eibwYEZDXzF4 {stroke: var(--action);}

g#eibwYEZDXzF5_to {}

ellipse#eibwYEZDXzF5 {fill: var(--action);}

h2::before {
    content: '';
    width: 100%;
    height: 20px;
    /* background: var(--accent); */
    /* background: var(--action); */
    position: absolute;
    left: 0;
    bottom: 16px;
    z-index: -1;
    border-radius: 2px;
    transform: rotate(358deg);
    transition: all .2s;
    opacity: 0.5;
    }

h2 {z-index: 2;position: relative;}

.contactMe h2::before {content: none;}

div.CaseStudyDescription h2 {padding-bottom: 12px !important;}

tspan#epOGhwRnLdF43 {fill: var(--accent);}

.nextCaseStudy {text-align: right;padding-bottom: 64px;padding-top: 32px;/* display: inline-block; */}

.nextCaseStudy p {width: auto;}

.nextCaseStudy span {font-weight: 400;letter-spacing: 0.08em;
    display: block;font-family: var(--font-meta);
    font-size: var(--text-meta);
    text-transform: uppercase;
}

.nextCaseStudy a {margin-right: 0 !important;}

.main img.mainImage {max-width: 100%;margin: var(--space-9) auto 0;border-radius: 16px;filter: grayscale(1);}
.main img.mainImage.is-color {filter: none; background: var(--accent);}

/* Design System hero: the illustration cut into three transparent layers
   (board, cards, screen). The cards and the screen float gently up and down,
   out of step, so the stack breathes. They start at the original position (the
   highest point) and sink from there. Offsets are % of the layer's own
   height, so the motion scales with the image. */
.main > .dsHero {
    position: relative;
    margin: var(--space-9) 0 0;
}
.main > .dsHero > img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
.main > .dsHero > img + img {
    position: absolute;
    inset: 0;
    will-change: transform;
    animation: dsHeroFloat 6s ease-in-out infinite;
}
.main > .dsHero > img:nth-child(2) { --lift: 1.2%; animation-delay: -1.2s; }
.main > .dsHero > img:nth-child(3) { --lift: 2.8%; }
@keyframes dsHeroFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, var(--lift), 0); }
}
@media (prefers-reduced-motion: reduce) {
    .main > .dsHero > img + img { animation: none; }
}

/* A documentation figure: the screenshot sits as a white sheet on the accent
   board, with even breathing room all round. Tall sheets keep their natural
   width instead of stretching to the column. Iframe frames keep their own
   rules above. */
.main > .mediaAccentFrame:has(> img) {
    align-items: center;
    margin-top: var(--space-9);
    padding: clamp(16px, 4vw, 40px);
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 0) 0 0 / 16px 16px,
        var(--accent);
}
.main > .mediaAccentFrame > img.mainImage,
.main > .mediaAccentFrame > img.mainImage.is-color {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.06),
        0 16px 32px -20px rgb(0 0 0 / 0.35);
}

.imageViewer.bigViewer img {width: 44%;}

#movingBanner {display: none;box-sizing: border-box;background: var(--accent);/* background: var(--action); */padding: 32px;border-radius: 16px;margin: 16px 0;position: relative;filter: drop-shadow(1px 1px 1px var(--border));overflow: hidden;/* border: 6px solid var(--action) !important; */}

#movingBanner > p {text-align: left !important;margin: 0;font-size: 1rem;line-height: 1.5;
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;padding: 0;max-width: 55%;}

#movingBanner > h2 {
line-height: 1;text-align: left;padding-bottom: 16px;margin: 0;width: 600px;max-width: 70%;padding-left: 0;}

#movingBanner > h2::before {
display: none;}

#movingBanner > img {
  position: absolute;
  top: -15vw;
  width: 63vw;
  right: -27%;
  /* max-width: 775px !important; */
  opacity: 0.8;
  margin: 0;
  -webkit-animation:spin 120s linear infinite;
  -moz-animation:spin 120s linear infinite;
  animation:spin 120s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

#movingBanner > * {max-width: 70%;}

@media only screen and (max-width: 768px) {
    
  body{
    background-size: 120% !important;
  }

  .homeStage {
    /* align-items: flex-end; */
    margin: 0;
    height: auto;
    }

  .certBadges {
    margin: 32px auto 12px;
    gap: var(--space-2);
    }

  .certBadges #NNg img {
    width: 60px;
    height: auto;
    max-height: none;
    object-fit: contain;
    }

  .certBadges #IxDF img {
    width: 40px;
    height: 40px;
    max-height: 40px;
    object-fit: contain;
    }

  .companiesContainer, .colleaguesContainer {
    /* display: none; */
    padding: 0;
    width: 100%;
    min-width: 100%;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    margin-top: -1px;
    padding-bottom: 64px !important;
    }

    .sweaterContainer{
    opacity: 0.7;
    }

    .graffiti{
        height: 120px;
        bottom: 16px;
        right: auto;
        display: none;
    }
    


    #Welcome {
    font-size: 12vw;
    letter-spacing: -2px;
    padding-top: 32px;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    background: none;
    /* text-transform: capitalize; */
    }

    .mainHome h2 {
      width: 100%;border: none;
      text-align: center;
      font-size: 1.5rem;
      padding: 32px 4px 16px;
      /* text-transform: uppercase; */
    text-shadow: none;}

    .mainHome .borderWrapper {
      padding: 0 16px 16px;
    }

    .companiesContainer div > * {
      max-width: 74px !important;
    }

    nav.mainNavigation ol {
      justify-content: flex-end;
      left: auto !important;
      right: 8px !important;
      justify-content: flex-end !important;
      padding-left: 0px;
      }

    /* Non-index: drop FAQ so the face home button fits beside About/Work/More */
    body:not(.homepage) nav.mainNavigation > ol > li#shortVersion {
      display: none;
    }

  .RecomendationsContent {
    max-width: 100%;
    width: 100%;
    padding: 0;
  }

  .RecomendationsWrapper {
    --rec-cols: 2;
    gap: 10px 12px;
  }

  @media only screen and (max-width: 360px) {
    .RecomendationsWrapper {
      --rec-cols: 1;
    }
  }

  .contactMe h2 {
    letter-spacing: 0;
    font-size: calc(3.75rem * var(--ds-font-scale));
    letter-spacing: -2px;
    text-transform: none !important;
    /* text-align: left; */
}

    .imagePlaceholder {
        display: flex;
        height: 100px;
        width: 100px;
        margin-bottom: -16px;
        /* max-width: 400px; */
        max-height: 400px;
        margin-left: auto;
        margin-right: auto;
        align-items: center;
        border-radius: 100%;
        border: 1px solid var(--accent);
    }
    
    .mainSectionsContainer,
    .mainHome .mainSectionsContainer{
        display: none;
    }

    .mainSection{
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 0 0 66px;
        flex-direction: row;
        align-items: center;
        position: relative;
    }

    .mainSection:nth-child(2){
        border: none;
    }

    .dicctionaryRow {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
    }

    div.dictionarySnippet{
    margin-bottom: var(--space-4);
    }

    .aboutUsLinkedin {
      flex-direction: column;
      text-align: center;
      align-items: center;
      padding: 32px 8px;
      width: auto;
  }

  .aboutUsLinkedin * {
    width: 100%;
}

    .marquee {
        top: 50vh;
        display: none!important;
    }

    .marquee__content li{
    font-size: 1.438rem;
    letter-spacing: -3px;
    line-height: 1.1;
    padding: 2px 6px 8px;
}

    .marquee .marquee__content.opposite li {
    font-size: 0.812rem !important;
    background-color: var(--accent) !important;
}

    .marquee__content.opposite {
    display: none;
    }

    .homeStage h1 {
      display: block;
      /* opacity: 0; */
      /* margin-top: 8px !important; */
      color: var(--frgd) !important;
      width: 100%;
      text-align: center;
      margin: 32px 0 16px !important;
      font-size: 1.5rem !important;
      /* height: 200px; */
      /* font-size: 6.25rem !important; */
      padding: 0 16px;
      text-align: center;
      -webkit-text-stroke-width: 0px;
      -webkit-text-fill-color: var(--frgd) !important;
      letter-spacing: 2px;
      /* text-shadow: 4px 4px var(--bkgd); */
      /* text-align: left !important; */
      z-index: 1;
      /* display: none; */
      padding-left: 84px !important;
      font-weight: 600;
      text-align: left !important;
      }

  #movingBanner > p {
    max-width: 100%;
    /* background: var(--action); */
    text-shadow: 2px 2px var(--accent);
    filter: none;
    filter: drop-shadow(2px 4px 6px var(--accent));
    }

  #movingBanner{
    display: none;
    padding: 16px;
    margin: 64px 0 0;
    position: relative;
    }

  .planet {
    height: 30vh;
    width: 60vw;
    top: -10vh;
}

  #top + .noTimeLink{
    display: none;
  }

    .homeStage h2 {
        font-size: 2.125rem;
        margin: 8px auto;
        text-align: center;
    }

    div#stars, div#stars2 {
        display: none;
    }

    ul.list-inline:nth-child(1) {
        display: none;
    }

    nav.mainNavigation {
        padding: 16px 0 8px;
        margin: 0;
    }

    nav.mainNavigation ol li a,
    nav.mainNavigation:has(.second-level-bar) > ol > li > a,
    nav.mainNavigation:has(ol.second-level-navigation) > ol > li > a {
        font-size: 0.875rem;
        -webkit-text-stroke-width: 0px;
        /* -webkit-text-fill-color: var(--action); */
        text-underline-offset: 2px;
        padding: 6px 10px;
        border-width: 2px !important;
    }

    /* The stickers draw at ~32px; an invisible 44px hit area keeps them easy
       to tap without making them louder. */
    nav.mainNavigation ol li a {
        position: relative;
    }

    nav.mainNavigation ol li a::after {
        content: "";
        position: absolute;
        inset: -8px -4px;
    }

    nav.mainNavigation ol li {padding: 4px 8px;margin: 4px 4px 4px -2px;border-width: 2px !important;}

    a.disabled {
      pointer-events: none;
      cursor: default;
    }


    
    .main{
        padding: 16px;
        text-align: center;
        --max-width: 800px;
        --heading-col: 100%;
        --content-col: 100%;
        --section-start: 8rem;
    }

    .main > p,
    .main > ol,
    .main > ul,
    .main > h3,
    .main > a,
    .main > h2,
    .main > h4.caseStudyLabel,
    .main > .quoteImage,
    .main > .cs-cards,
    .main > .cs-carousel,
    .main > .caseStudyInProgress > p,
    .main > .caseStudyInProgress > ol,
    .main > .caseStudyInProgress > ul,
    .main > .caseStudyInProgress > h3,
    .main > .caseStudyInProgress > a,
    .main > .caseStudyInProgress > h2,
    .main > .caseStudyInProgress > h4.caseStudyLabel,
    .main > .caseStudyInProgress > .quoteImage,
    .main > .caseStudyInProgress > .cs-cards,
    .main > .caseStudyInProgress > .cs-carousel,
    .main .quoteText {
        float: none;
        clear: both;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .main h2:not(.qBand__title){
        text-align: center;
        margin-top: var(--section-start) !important;
        padding-top: 0;
        padding-bottom: 16px;
        width: 100%;
        border: none;
        font-size: 1.5rem;
        /* text-transform: uppercase; */
    }

    .main > h4.caseStudyLabel,
    .main > .caseStudyInProgress > h4.caseStudyLabel {
        text-align: left;
        width: 100%;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .main > h2 + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock),
    .main > .caseStudyInProgress > h2 + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock) {
        margin-top: 0.75rem !important;
    }

    .main > h4.caseStudyLabel + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock),
    .main > .caseStudyInProgress > h4.caseStudyLabel + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock) {
        margin-top: 0.5rem !important;
    }

    /* One column: the face drops just under the bubble's squared corner and
       the name and role run beside it, like a chat sender line. */
    .main .quoteImage {
        float: left;
        width: 36px;
        margin: 0.5rem 0.625rem 0 0;
    }

    .main > .quoteAuthor,
    .main > .quoteDescription,
    .main > .caseStudyInProgress > .quoteAuthor,
    .main > .caseStudyInProgress > .quoteDescription {
        clear: none;
        width: auto;
        text-align: left;
    }

    h1{
        font-size: 16vw;
        text-align: center;
    }

    ::marker {
    font-size: 1rem;
    }

    .main li {
        padding-left: 0.15em;
        margin-left: 0;
        list-style-position: outside;
        text-align: left;
    }

    .main > ul,
    .main > ol,
    .main > .caseStudyInProgress > ul,
    .main > .caseStudyInProgress > ol {
        padding-left: 32px;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    .main .quoteText {
    min-width: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    }

    a.lowTimeIcon svg#eiLeq2IX49s1 {
      width: 36px;
      padding: 0px 0px;
  }
  
  nav.mainNavigation ol li a.lowTimeIcon {
      padding: 2px;
      min-height: 40px;
  }

    .section-description{
        display: none !important;
    }

    .crossSectionNavigation ul li a {
        padding: 8px;
        border-radius: 8px;
        border-width: 4px;
    }

    .crossSectionNavigation svg.companyLogo {
        min-width: 100%;
        padding: 2px 0px 4px;
    }



  nav.mainNavigation > a img {
    max-width: 60px !important;
    min-width: 60px !important;
    height: 60px;
  }

  .CaseStudyWrapper {
    /* background: radial-gradient(var(--accent), transparent); */
    text-align: center;
    margin: 0px 0px;
    padding: 48px 0px 0;
}

  .CaseStudyAnimation {
    background: var(--accent);
    /* width: 80% !important; */
    max-width: 50vh;
    height: auto !important;
    margin: auto !important;
}
  .CaseStudyDescription {
    width: 100%;
    height: auto;
    text-align: center !important;
    margin-bottom: var(--space-7);
    margin: 16px 8px;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: var(--space-7);
    background: none;
    padding: 0 16px 32px;
    border-radius: 8px;
    min-width: auto;
  }

  article .CaseStudyDescription > a {
    /* width: 90%; */
    margin: 12px auto 4px !important;
  }

  svg.CaseStudycompanyLogo {
    margin: 0;
    margin-bottom: -30px;
  }

  .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription p {
    text-align: left !important;
    margin-left: auto;
  }

  .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription a,
  .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription h2{
    text-align: center !important;
  }

  .PopUpsAreAwesomeText{
    display: none;
  }

  .popUp.ui-draggable.ui-draggable-handle {
    filter: none;
    position: static;
    animation: none;
    box-shadow: none;
    margin: 16px auto 1px;
    /* border: none !important; */
    max-width: 100%;
    width: 100%;
    border: 2px solid var(--border);
    border-width: 0 0 1px !important;
    border-color: var(--border) !important;
  }
  div.popUpHeader {
      display: none;
  }

  .popUpLinks {
    /* justify-content: flex-start; */
    /* flex-direction: column; */
    padding: 8px 16px;
  }
  
  .popUpLinks a {
    margin-bottom: 8px !important;
  }

  .popUpText {
      /* width: calc(100vw - 200px); */
      min-width: 66%;
      height: auto;
      background: var(--bkgd);
      border-radius: 0 0 8px 8px;
      /* border-top: none; */
      border: none !important;
  text-align: center !IMPORTANT;}

  div.popUpContent{
    min-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    max-height: inherit;
    position: relative;
    background: var(--bkgd);
    border: 2px solid var(--border);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0 0 8px;
    border: none !important;
    box-shadow: none !important;
  }

  div.popUpImage{border-radius: 100%;max-width: 25vw;max-height: 25vw;margin-top: 16px;/* margin: auto; */margin-left: 16px;flex-shrink: 1;display: none;}

  div.popUpImage img{height: 24vw;width: 25vw;display: none;}

  .main p+svg, .main p+object, .main ol+object {
    margin: 0;
    width: 100% !important;
  }

  .contactMe p{
    font-size: 1.5rem;
  }

  .contactMe svg {
    /* height: 100vh !important; */
    /* margin-left: -100vw; */
  }

  .second-level-bar {
    max-width: calc(100% - 24px);
    flex-wrap: nowrap;
    padding: 4px 6px;
    align-items: center;
    overflow-x: hidden;
  }

  .second-level-bar__scroller {
    display: none;
  }

  .second-level-bar__mobile {
    display: flex;
    flex: 1 1 140px;
    width: auto;
  }

  .second-level-bar__mobile select {
    max-width: none;
  }

  nav.mainNavigation:has(.second-level-bar),
  nav.mainNavigation:has(ol.second-level-navigation) {
    overflow-x: hidden;
  }

  ol.second-level-navigation {
    margin-top: 4px;
    margin-left: 0;
  }

nav.mainNavigation ol ol li a {
    /* padding: 2px; */
    box-shadow: none;
    font-size: 0.812rem;
}

nav.mainNavigation ol ol li {
    margin: 0;
}


body#short h1 {
  /* font-size: 5rem !important; */
}

.load-more {
  max-height: 1200px;
}

.mainSection > div{
  display: flex;
  flex-direction: column-reverse;
  padding: 8px 4px;
}

.mainSection > p{
  margin: 0;
  position: relative;
  padding: 8px;
}

.mainSection h2{
  padding: 4px 0 8px;
  display: none;
}

.mainSection a{position: absolute !important;right: 0 !IMPORTANT;bottom: 26px !important;top: auto !important;left: auto !important;align-items: center;}

.Introduction{
    padding-bottom: 8px;
}

.colleaguesContainer h2{
  display: none;
}

.colleaguesContainer{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.colleaguesContainer p {
  margin-top: var(--space-7);
}


.Introduction a{
  /* margin: 32px auto !IMPORTANT; */
}

#downloadResumeHome{
  display: none;
}

div.latestDescription{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0;
  box-sizing: border-box;
}

div.latestDescription > div{
  width: 100%;
  flex-grow: 1;
}

div.latestDescription > div:first-child > h5{
  display: none;
}

details.latestDescription-more {
  display: block;
  flex: 1 1 100%;
  width: 100%;
}

details.latestDescription-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
  font-size: var(--text-functional);
  font-weight: 600;
  padding: 12px 0;
  margin: 0 0 8px;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid color-mix(in srgb, var(--frgd) 18%, transparent);
}

details.latestDescription-more > summary::-webkit-details-marker,
details.latestDescription-more > summary::marker {
  display: none;
  content: none;
}

details.latestDescription-more > summary::after {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

details.latestDescription-more[open] > summary::after {
  transform: rotate(225deg);
  margin-top: 0.2em;
}

details.latestDescription-more > summary:focus-visible {
  outline: 2px solid var(--frgd);
  outline-offset: 4px;
}

details.latestDescription-more[open] .latestDescription-extra {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

div.latestDescription-extra > div {
  width: 100%;
  flex: 0 0 100%;
  padding: 8px;
  box-sizing: border-box;
}

div.LatestProject{
  align-items: stretch;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-start;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 24px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  box-sizing: border-box;
  }

  div.LatestProject:has(> .LatestProject__track) {
    display: block;
    overflow: visible;
  }

  div.LatestProject::-webkit-scrollbar,
  div.LatestProject__track::-webkit-scrollbar {
    display: none;
  }

  div.topProject{
    padding: 0px 16px 40px;
    box-sizing: border-box;
  }

  .topPhraseRow {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px 0 !important;
    gap: var(--space-4);
  }

  p#topPhrase, p.topPhrase {
    display: none;
  }

  ul.topKeyFigures {
    display: none;
  }

  .topKeyFigure {
    flex: none;
    width: auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5em;
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    text-align: left;
    white-space: nowrap;
    margin: 0;
  }

  .topKeyFigure + .topKeyFigure {
    margin: 0;
  }

  .topMeta {
    margin-top: 12px;
    gap: 8px 16px;
  }

  .topRole,
  #topDate,
  .topDate {
    font-size: 0.875rem;
  }

  .topDateGroup .topDate {
    font-size: 0.875rem;
  }

  img#topLogo, img.topLogo{margin-top: 16px;margin-left: 0;width: 64px;}

  div#disclaimer,
  .topProject .disclaimer {
    right: 0;
  }

div.LatestProject > img{
    /* aspect-ratio: .4666666666666667 / 1; */
    width: 33vw;
    flex: none;
    overflow: visible;
    position: relative;
    /* width: 280px; */
}

div.LatestProject > .LatestDemo--cense {
    width: 33vw;
    flex: none;
}

div.LatestProject > .LatestDemo--aws {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
}

div.LatestProject__scroller > .LatestDemo--aws {
    flex: 0 0 100cqw;
    width: 100cqw;
    min-width: 100cqw;
    max-width: none;
}

#carousel{
  margin-right: auto;
}

}

/* End of Media Mobile */

@media (hover: none) and (pointer: coarse) {

 .PopUpsAreAwesomeText{
   display: none;
 }

  .popUpArea {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: auto;
    justify-content: center;
  }

      div.popUp {
        position: static !important;
        box-shadow: none;
        margin: 16px auto 32px;
        border: none !important;
        max-width: 100%;
        width: 45%;
        margin: 16px auto;
        box-shadow: none !important;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      div.popUpHeader {
          display: none;
      }

      .popUpLinks {
        justify-content: space-evenly;
        flex-direction: row;
        padding: 8px 8px;
      }
      
      .popUpLinks a {
        margin-bottom: 8px !important;
    }

    .popUpText {
        background: var(--bkgd);
        border: 2px solid var(--border);
        border-radius: 0 0 8px 8px;
    }

    a#contactMeBadge {
    transform: scale(0.75);
}

}



a#contactMeBadge {
    display: none !important;
    box-sizing: border-box;
    position: absolute !important;
    top: -12px !important;
    right: -27px !important;
    left: auto !important;
    z-index: 9999;
    /* background: linear-gradient(45deg,#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91C6AC,#b4d48d,#dfc17e); */
    /* background-image: conic-gradient(#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91c6a8,#b4d48d,#dfc17e,#ec8c86); */
    color: var(--frgd);
    padding: 0px;
    border-radius: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    margin: 0;
    padding: 0!important;
    box-shadow: 3px 3px var(--frgd);
}

a#contactMeBadge:hover{
  filter: saturate(1.5);
} 

a#contactMeBadge svg {
  width: 80px;
  height: 80px;
  margin: 5px 5px 0;
}

.rotate {
  animation: rotation 20s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.contactMeButton * {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background: linear-gradient(45deg,#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91C6AC,#b4d48d,#dfc17e);
    background-image: conic-gradient(#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91c6a8,#b4d48d,#dfc17e,#ec8c86);
}

.contactMe.popUp{
  border: none !important;
  left: 30vw;
  top: 30vh;
  z-index: 1;
  filter: none !important;
}



a.contactMeLink {
    box-shadow: -2px -2px var(--frgd) !important;
    position: relative;
    top: -30px !important;
    left: 12px !important;
    /* background: linear-gradient(45deg,#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91C6AC,#b4d48d,#dfc17e) !important; */
    /* background-image: conic-gradient(#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91c6a8,#b4d48d,#dfc17e,#ec8c86) !important; */
    /* background: #fdd835!important; */
    /* color: var(--bkgd) !important; */
}



a.contactMeLink:hover {
}

a.contactMeLink:hover {
    box-shadow: none !important;
    top: -32px
 !important;
    left: 10px
 !important;
}

.noTimeLink {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    /* background: var(--bkgd); */
    background: var(--notime);
    display: flex;
    padding: 8px 8px 8px 4px;
    border-radius: 0px 0 0 16px;
    max-height: 60px;
    display: none;
}

svg#eiLeq2IX49s1 {
    padding: 0 4px 0 0;
    width: 50px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.noTimeLink span {
    font-size: 2.5rem;
    color: var( --frgd);
    font-weight: 600;
    /* text-transform: uppercase; */
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    font-size: calc(1.25rem * var(--ds-font-scale));
    text-align: center;
    display: block;
}

.noTimeLink .noTimeLink__chip,
.noTimeLink a:not(.noTimeLink) {
    display: block;
    font-size: var(--text-meta);
    box-sizing: border-box;
    text-align: center;
    background: var(--shortTrigger);
    padding: 2px 8px;
    font-family: var(--font-meta);
    text-transform: uppercase;
    text-decoration: none;
    color: #1a1f18;
    text-decoration: none;
    border: 2px solid var(--frgd) !important;
    border-radius: 4px;
    box-shadow: 2px 2px var(
    --shadow);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.noTimeLink a:not(.noTimeLink):hover {
    box-shadow: none;
    position: relative;
    left: 2px;
    top: 2px;
    cursor: pointer;
}

body#short {
    --action: #fcf7a7;
    --accent: #e9ffe0;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R" !important;
    background: var(--accent);
}

body#short #BackToHome {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    background: var(--action);
    color: var(--frgd);
    text-decoration: none;
    border: 2px solid;
    border-radius: 100%;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

body#short #BackToHome:hover {
    box-shadow: 2px 2px 0 var(--frgd);
}

body#short * {
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R" !important;
}

/* Keep icon font ligatures working (body#short * forces Inter otherwise). */
body#short .material-symbols-outlined {
    font-family: "Material Symbols Outlined", sans-serif !important;
}

/* Bricolage display/heading exceptions over body#short * Inter lock. */
body#short #topPhrase,
body#short .topPhrase,
body#short #Welcome,
body#short .latestDescription h5,
body#short h1,
body#short .sq-body .sq-big,
body#short .sq-body .sq-statement,
body#short .sq-body .sq-row h4 {
    font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif !important;
}

body#short .sq-trio h4,
body#short .sq-title {
    font-family: var(--font-display) !important;
}

body#short h2 {
    font-size: var(--text-functional-sm);
    padding-top: 0px;
    margin-top: 0;
    font-weight: 600;
    /* text-transform: uppercase; */
    letter-spacing: 0.01em;
}

body#short p {
    font-size: calc(1.25rem * var(--ds-font-scale));
    text-align: left;
    padding-bottom: 32px;
    line-height: 1.7;
    max-width: var(--measure);
    hyphens: none !important;
}

.shortContent {
    box-sizing: border-box;
    max-width: 600px;
    width: 100%;
    margin: auto;
    padding: 16px;
    /* background: var(--accent); */
    z-index: 1;
    backdrop-filter: blur(42px);
}

body#short footer {
    padding: 0px;
    padding-bottom: 32px;
}

body#short h1 {
    text-align: left;
    font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
    font-weight: 800;
    /* margin-top: 128px; */
    line-height: 1.2;
    padding-bottom: 16px;
}

a.contactMeShort {box-sizing: border-box;padding: 8px;text-align: center;display: block;color: var(--frgd);/* color: black; */text-decoration: none;font-weight: 800;text-transform: uppercase;border: 2px solid;box-shadow: 2px 2px;border-radius: 4px;font-size: 2.125rem;background: var(--action);/* background: orange; */width: 100%;}

a.contactMeShort:hover {
    cursor: pointer;
}

.noTimeLink.bottomNotime {
    position: static;
    width: fit-content;
    flex-direction: row-reverse;
    border-radius: 0 8px 0 0;
    padding: 8px 0px 20px 16px;
    max-height: 64px;
}

body#short p a, .gotSomeTime a {
    text-decoration: none !important;
    color: var(--frgd);
    background: var(--action);
    display: inline-block;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1.6;
    cursor: pointer;
    padding: 2px 8px;
    margin: 2px 8px 2px 0;
    /* border: 2px solid rgb(0 0 0 / 0%); */
    font-weight: 800;
    border-radius: 8px;
    border: 2px solid;
    box-shadow: 1px 1px var(--frgd);
}

body#short p a:hover, .gotSomeTime a:hover {
    border: 2px solid var(--frgd);
}

.main-CaseStudy-link{
  color: var(--frgd);
  text-decoration: none;
  margin-bottom: var(--space-4);
  display: block;
}

.linkIcon{background: var(--bkgd);width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 100%;margin-left: auto;/* border: 4px solid var(--action); */transition: 0.5s;position: absolute;bottom: -4px;right: -4px;}

.linkIcon:hover{
  transition: box-shadow 0.2s ease-out 0s;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0px 0px 6px;
}

.linkIcon svg{
  
}

.main-CaseStudy:hover{
  box-shadow: none;
  margin: 2px 0 2px 2px;
}

.gotSomeTime {
    display: block;
    margin: 64px
 auto 32px;
    width: fit-content;
    text-align: center;
}

.main-CaseStudy{background: var(--bkgd);border: 2px solid var(--frgd);border-radius: 8px;overflow: hidden;box-shadow: 2px 2px var(--shadow);}
.contentLayout-CaseStudy{display: flex;align-items: stretch;background: var(--action);flex-wrap: nowrap;}
.content-CaseStudy h4{
    font-weight: bold;
    /* text-transform: uppercase; */
    padding: 4px 0 8px;
    letter-spacing: 1px;
}
.contentLayout-CaseStudy {}
.image-CaseStudy{
    min-width: 100px;
    width: 100px;
    background: var(--bkgd);
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
}

body#short .content-CaseStudy p{
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  flex-grow: 1;
}

.content-CaseStudy{
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
}
.CaseStudyAnimation{
  background: var(--bkgd);
}

body#short .metaInformation {
    display: none;
    position: absolute;
    top: 8px;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-meta) !important;
    letter-spacing: 1px;
    font-size: 0.75rem;
}

.faces .recommendationimage {
    position: initial;
    margin-left: -20px;
    border: none;
    /* Keep bounce transforms on .faces div; only longhands so .sprite shorthand cannot wipe the sheet */
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.faces .recommendationimage.rec-sprite {
    background-image: url('../images/recommendation-profiles-sprite.webp');
    background-repeat: no-repeat;
    background-size: calc(var(--rec-count, 115) * var(--rec-display, 42px)) var(--rec-display, 42px);
    background-position: calc(var(--rec-i, 0) * -1 * var(--rec-display, 42px)) 0;
}

.faces {
    display: flex;
    padding: 8px 2px 0px;
    justify-content: center;
    flex-direction: row-reverse;
}

.faces div{
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

.faces div:nth-child(odd){
  animation-name: bounce-1;
}

.faces div:nth-child(even){
  animation-name: bounce-2;
}

.faces div:nth-child(3n){
  animation-name: bounce-3;
}

@keyframes bounce-1 {
  0%   { transform: scale(1,1)    translateY(0); }
  10%  { transform: scale(1.1,.9) translateY(0); }
  30%  { transform: scale(.9,1.1) translateY(-10px); }
  50%  { transform: scale(1,1)    translateY(0); }
  100% { transform: scale(1,1)    translateY(0); }
}

@keyframes bounce-2 {
  0%   { transform: scale(1,1)    translateY(0); }
  10%  { transform: scale(1.1,.9) translateY(0); }
  20%  { transform: scale(.9,1.1) translateY(-10px); }
  50%  { transform: scale(1,1)    translateY(0); }
  100% { transform: scale(1,1)    translateY(0); }
}

@keyframes bounce-3 {
  0%   { transform: scale(1,1)    translateY(0); }
  40%  { transform: scale(1.1,.9) translateY(0); }
  50%  { transform: scale(.9,1.1) translateY(-12px); }
  80%  { transform: scale(1,1)    translateY(0); }
  100% { transform: scale(1,1)    translateY(0); }
}

nav.mainNavigation ol li.lowTime {
    padding: 0;
}

nav.mainNavigation ol li a.lowTimeIcon {
    border: 0;
    box-shadow: none;
    background: none !important;
    top: 0;
    left: 0;
}



.main p+svg, .main p+object, .main ol+object {
    border: 1px solid var(--accent);
    border-radius: 16px;
    margin-bottom: 22px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    display: block;
}

.main p+h2, .main ul+h2, .main ol+h2 {
    margin-top: var(--section-start, 4rem);
}

.main object {
    border: none !important;
    border-radius: 0 !important;
filter: grayscale(1);}


.contactMe svg {
    /* display: none; */
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* bottom: 0; */
    height: 20px;
    width: 20px;
    fill: var(--frgd);
    z-index: 0 !important;
}

.contactMe * {
    z-index: 1;
}

ol {}




/* second-level-navigation styles live with .second-level-bar above */

.relaxTime {
    display: none;
    position: absolute;
    right: 94px;
    bottom: 0;
    height: 0;
    /* z-index: -1; */
}

.relaxTime img {
    opacity: 0.8;
    width: 80px;
}

body#short .relaxTime p {
    margin: 0 0 4px;
    padding: 0;
    font-size: 0.75rem;
    max-width: 80px;
    line-height: 1;
    text-align: center;
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(calc(-50% - 32px));
  }
  }
  .slider {
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
  border-top: 1px solid var(--border) !important;
  }
  .slider .slide-track {
  animation: scroll 80s linear infinite;
  display: flex;
  gap: 48px;
  width: max-content;
  }
  .slider .slide {
  height: 100px;
  width: auto;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .slider .slide img {
  width: 105px;
  height: auto;
  }

/* Home org carousel: full-bleed, full-color, pause + tooltip on hover.
   Loop is two identical halves; margin-right (not gap) keeps -50% seamless. */
@keyframes orgCarouselScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.homepage .orgCarousel {
  display: block;
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: auto;
  min-height: 88px;
  width: 100vw;
  max-width: 100vw;
  margin-top: 0;
  margin-bottom: var(--space-10);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  overflow: visible;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  -webkit-mask-image: none;
  mask-image: none;
}

.homepage .orgCarousel__viewport {
  overflow: hidden;
  width: 100%;
}

.homepage .orgCarousel .slide-track {
  gap: 0;
  animation: orgCarouselScroll 80s linear infinite;
  width: max-content;
  will-change: transform;
}

.homepage .orgCarousel .slide {
  position: relative;
  height: 56px;
  margin-right: 72px;
  cursor: default;
}

.homepage .orgCarousel .slide img {
  width: 74px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
  filter: none;
}

.homepage .orgCarousel:hover .slide-track,
.homepage .orgCarousel:focus-within .slide-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .homepage .orgCarousel .slide-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    gap: 32px 40px;
  }

  .homepage .orgCarousel .slide {
    margin-right: 0;
  }

  .homepage .orgCarousel {
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-bottom: var(--space-10);
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
    padding-top: 0;
  }

  .homepage .orgCarousel__viewport {
    overflow: visible;
  }

  /* Hide the duplicated loop set when motion is off */
  .homepage .orgCarousel .slide:nth-child(n+32) {
    display: none;
  }
}

#ProfilePic{
  width: 80px;
  border-radius: 100%;
  margin-top: 128px;
  margin-bottom: var(--space-7);
  border: 2px solid var(--bkgd);
  -webkit-animation: nod 3s infinite;
  animation: nod 3s infinite;
}

.relaxTime a {
    font-size: 0.75rem;
    display: block;
    text-align: center;
    width: 70px;
    text-decoration: none !important;
    color: var(--frgd);
    background: var(--action);
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 8px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 1px 1px var(--frgd);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


#movingBanner > a {margin: 16px 0;}

div#newExperienceContent {display: flex;background: rgb(255 255 255);border-radius: 16px;border-color: var(--bkgd) !important;border-width: 2px;border-style: dashed;border-style: solid;box-shadow: none;flex-direction: column;justify-content: flex-end;}

div#newExperienceContent a {margin: 16px 0 0;}

img#signature {position: absolute;bottom: 32px;right: 0;opacity: 0.9;filter: drop-shadow(4px 4px 2px var(--action));}

span#revamp {
    color: var(--action);
    /* text-transform: uppercase; */
    font-size: 2.5rem;
    text-shadow: none;
    /* line-height: 1.15; */
    max-width: 14em;
    text-align: center;
    position: absolute;
    bottom: 86px;
    left: 16%;
    transform: rotateZ(365deg);
    /* text-shadow: -2px 2px var(--bkgd); */
    /* -webkit-text-stroke: 1px var(--frgd); */
    pointer-events: none;
    background: var(--frgd);
    opacity: 0.8;
}

p > b {
    font-weight: bold;
}


img.snake {
    position: absolute;
    bottom: 32px;
    right: 33%;
    height: 80px;
    transform: rotateZ(15deg);
}

.colleaguesContainer p {/* margin-top: 48px; */}

.NDAsign {
    background: var(--accent);
    font-size: var(--text-functional);
    padding: 16px;
    font-family: var(--font-text);
    border-radius: 4px;
    line-height: 1.5;
    margin-top: 16px;
}

/* The notice reads in Inter; only its short lead-in keeps the meta face. */
.NDAsign > b {
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tableScroll {
    overflow-x: auto;
    margin: 1.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.main > .tableScroll,
.main > .caseStudyInProgress > .tableScroll {
    margin-top: var(--section-start);
}

.main .tableScroll table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    font-size: 0.875rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    background: var(--bkgd);
}

.main .tableScroll th,
.main .tableScroll td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--accent);
    text-align: left;
    vertical-align: top;
}

.main .tableScroll th {
    font-weight: 700;
    /* text-transform: uppercase; */
    letter-spacing: 0.04em;
    background: var(--accent);
    white-space: nowrap;
}

.main .tableScroll tbody tr:last-child td {
    border-bottom: none;
}

.main .tableScroll td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

img.companyLogo {
    display: block;
    margin-top: var(--space-9);
    padding-top: 0;
    opacity: 0.85;
}

img.companyLogo.is-color {
    filter: none;
}

img.companyLogo.is-faint {
    opacity: 0.7;
}

.main > .caseStudyCompanyLogoWrap {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin: 64px 0 0;
    padding: 0;
    text-align: left;
}

.main > .caseStudyCompanyLogoWrap .caseStudyCompanyLogo,
.main .caseStudyCompanyLogoWrap .companyLogo {
    display: block;
    float: none;
    clear: none;
    max-height: 60px;
    width: auto;
    height: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    margin-left: 0;
    margin-right: auto;
    padding: 0;
    object-fit: contain;
}

.storySnippet i {line-height: 0.25;}

div#carousel button,
.carouselControls button,
.cs-carousel__prev,
.cs-carousel__next {
    border: 2px solid var(--frgd);
    background: var(--action);
    color: var(--frgd);
    border-radius: 50%;
    min-height: 36px;
    height: 36px;
    width: 36px;
    padding: 0;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-family: "Inter", "Inter Fallback", "Inter Fallback R", sans-serif;
    font-size: var(--text-body);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: normal;
    transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

div#carousel button:hover,
.carouselControls button:hover,
.cs-carousel__prev:hover:not(:disabled),
.cs-carousel__next:hover:not(:disabled) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: scale(1.04);
    position: static;
    top: auto;
    left: auto;
}

div#carousel button:active:not(:disabled),
.carouselControls button:active:not(:disabled),
.cs-carousel__prev:active:not(:disabled),
.cs-carousel__next:active:not(:disabled) {
    transform: scale(0.96);
}

div#carousel button:disabled,
.carouselControls button:disabled,
.cs-carousel__prev:disabled,
.cs-carousel__next:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    transform: none;
}

div#carousel button:focus-visible,
.carouselControls button:focus-visible,
.cs-carousel__prev:focus-visible,
.cs-carousel__next:focus-visible {
    outline: 2px solid var(--frgd);
    outline-offset: 2px;
}

div#carousel #seeAllBtn,
.carouselControls #seeAllBtn,
.carouselControls .carousel-see-all,
.carouselControls .sq-rec-see-all {
    width: auto;
    min-height: 32px;
    border-radius: 20px;
    border: 2px solid var(--frgd);
    background: var(--action);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    /* text-transform: uppercase; */
    padding: 6px 12px;
    margin-left: auto;
}

.carouselControls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    margin: 10px 0 0;
    z-index: 1;
    position: relative;
    order: 2;
}

sup {
    font-size: 0.75rem;
    font-weight: bold;
}

#short a+span {
    text-align: center;
    width: 100%;
    display: block;
    padding: 2px;
    font-size: 0.875rem;
}

body#short .CaseStudyAnimation {
    width: 100px;
    height: auto;
}

.homepage nav.mainNavigation ol {
    justify-content: center !important;
    align-items: center;
}

.downloadIcon {
    width: 18px;
    height: 18px;
    margin: 0px 0px -2px 4px;
    display: inline-block;
    background: url(../images/downloadIcon.svg) no-repeat;
}


#Welcome + p {
    text-align: center;
    width: 100%;
    max-width: 660px;
    margin: auto;
}

p.experienceIntro {
    text-align: center;
    margin: 0;
    font-family: var(--font-meta);
    filter: grayscale(1);
    font-size: var(--text-meta);
    margin-top: -14px;
}

li#shortVersion {
    max-width: 90px;
    min-width: 0;
    overflow: hidden;
    /* min-width: 20px; */
}

li#shortVersion a {
    /* min-width: 20px; */
    display: block;
    box-sizing: border-box;
    max-width: 100px !important;
    overflow: hidden;
    background: var(--shortTrigger);
    color: #1a1f18;
    letter-spacing: 0px;
    font-style: italic;
    /* box-shadow: var(--shortTrigger) 2px 2px 10px; */
    padding-left: 0;
    padding-right: 0;
    line-height: 1;
    border-color: #000;
    /* border-radius: 100%; */
}

li#shortVersion marquee {
    display: block;
    width: 100%;
    max-width: 100%;
}

li#shortVersion a:hover,
li#shortVersion a:focus,
li#shortVersion a:active {
    background: var(--shortTrigger);
    color: #1a1f18;
}

.bottomNotime {
    display: flex;
}

a#downloadReferences {
    position: absolute;
    top: 60px;
    right: 16px;
    text-transform: uppercase;
    border-radius: 32px;
    background: var(--bkgd);
    /* background: linear-gradient(45deg, var(--notime),var(--action), var(--bkgd), var(--shortTrigger) ) !important; */
    transition: background 2s ease;
}

a#downloadResumeHome {
    position: absolute;
    top: 12px;
    right: 69px;
    text-transform: uppercase;
    border-radius: var(--radius-btn, 12px);
    background: var(--bkgd);
    /* background: linear-gradient(45deg, var(--notime),var(--action), var(--bkgd), var(--shortTrigger) ) !important; */
    transition: background 2s ease;
}

.a#downloadResumeHome:hover{
  
}

a#downloadResumeHome:hover {
    background: var(--action) !important;
}

.LatestProject {
  display: flex;
  flex-wrap: nowrap;
  padding: 16px 0 0;
  justify-content: space-between;
  filter: none;
}

.LatestProject #hand {
    width: 300px;
    height: auto;
}

img.Latestmockup {
    width: 23%;
    height: auto;
    filter: grayscale(0);
}

.LatestProject--cense img.Latestmockup {
    border: 4px solid var(--border);
    border-radius: 2px;
}

.LatestProject img.Latestmockup:nth-child(n+5) {
    display: none;
}

.LatestProject--cense .LatestDemo:nth-child(n+5) {
    display: none;
}

.LatestDemo {
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    contain: layout paint;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.LatestDemo__viewport {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    pointer-events: none;
}

.LatestDemo iframe {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    max-width: none;
    overflow: hidden;
    pointer-events: none;
}

.LatestDemo--cense {
    width: 23%;
    flex: none;
    aspect-ratio: 620 / 1024;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: content-box;
}

.LatestDemo--cense .LatestDemo__viewport {
    width: 620px;
    height: 1024px;
    transform: scale(calc(100cqw / 620px));
}

.LatestDemo--cense iframe {
    width: 620px;
    height: 1024px;
}

.LatestDemo--aws {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 16 / 10;
}

/* Match cs-carousel: outer visible, track bleeds to viewport edge, scroller scrolls */
.LatestProject:has(> .LatestProject__track) {
    --lp-track-w: 100%;
    --lp-end-pad: 16px;
    --lp-gap: 12px;
    --lp-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    display: block;
    overflow: visible;
    position: relative;
    container-type: inline-size;
    container-name: latest-project;
    box-sizing: border-box;
}

.LatestProject__track {
    display: block;
    width: var(--lp-track-w);
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    outline: none;
    box-sizing: border-box;
}

.LatestProject__track::-webkit-scrollbar {
    display: none;
}

.LatestProject__scroller {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: max-content;
    max-width: none;
    gap: var(--lp-gap);
    padding-inline-end: var(--lp-end-pad, 8px);
    box-sizing: border-box;
}

.LatestProject__scroller > .LatestDemo--aws {
    flex: 0 0 82cqw;
    width: 82cqw;
    min-width: 82cqw;
    max-width: none;
    scroll-snap-align: start;
}

.LatestProject__scroller > .LatestDemo--aws:only-child {
    flex: 0 0 100cqw;
    width: 100cqw;
    min-width: 100cqw;
}

/* Ancestors must not clip the Apple-style bleed */
.topProject:has(.LatestProject__track),
.topProjectsStack:has(.LatestProject__track),
.home article:has(.LatestProject__track),
.mainHome:has(.LatestProject__track) {
    overflow: visible;
}

@media only screen and (max-width: 768px) {
    .LatestProject__scroller > .LatestDemo--aws,
    .LatestProject__scroller > .LatestDemo--aws:only-child {
        flex: 0 0 100cqw;
        width: 100cqw;
        min-width: 100cqw;
    }
}

.LatestDemo--aws .LatestDemo__viewport {
    width: 1440px;
    height: 900px;
    transform: scale(calc(100cqw / 1440px));
}

.LatestDemo--aws iframe {
    width: 1440px;
    height: 900px;
}

.LatestDemo--ainative {
    width: 100%;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 832 / 420;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: content-box;
}

.LatestDemo--ainative .LatestDemo__viewport {
    width: 832px;
    height: 420px;
    transform: scale(calc(100cqw / 832px));
}

.LatestDemo--ainative iframe {
    width: 832px;
    height: 420px;
}

/* Featured video inside a top project card (Hitachi Energy page templates) */
.topProject .topProjectVideo {
    width: 100%;
    margin: 16px 0 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--accent);
    line-height: 0;
    box-sizing: border-box;
}

.topProject .topProjectVideo video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1326 / 742;
    background: var(--accent);
    object-fit: cover;
}

img.topLogo {
    margin-left: 8px;
}

.topProject img.topLogo--wide {
    width: 150px;
    height: auto;
}

.topProjectsStack {
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%;
    position: relative;
    padding-bottom: 64px;
}

.topProject {
    width: 100%;
    padding: 32px;
    position: relative;
    background: none;
    margin: 16px 0 16px;
    border-radius: 32px;
    border: none;
    box-sizing: border-box;
}

.topProjectsStack .topProject {
    margin: 0;
}

@media only screen and (min-width: 769px) {
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .topProjectsStack .topProject {
                animation: topProjectFade linear both;
                animation-timeline: view();
                /* Tall cards: finish the fade early so they show while still lower in the viewport */
                animation-range: entry 0% entry 8%;
            }
        }
    }
}

@keyframes topProjectFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media only screen and (max-width: 768px) {
    .topProjectsStack {
        gap: 64px;
    }

    /* Mobile shows only the craft card stack, not the long project write-ups */
    .topProjectsStack:not(.topProjectsStack--craft) {
        display: none;
    }
}



.topMeta {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
}

.topRole {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 14px;
    font-family: 'Departure Mono', ui-monospace, monospace;
    line-height: 1.2;
    text-align: left;
}

.topRole .material-symbols-outlined {
    font-size: 1em;
    flex-shrink: 0;
    line-height: 1.2;
}

#topDate,
.topDate {
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 14px;
    font-family: 'Departure Mono', ui-monospace, monospace;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.topDateGroup {
    text-align: center;
}

.topDateGroup .topDate {
    margin-left: 0;
}

.topDateTag {
    display: none;
    font-size: 0.625rem;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    margin-top: 4px;
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: 0.75;
}

.topPhraseRow {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding: 24px 0 0;
}

#topPhrase,
.topPhrase {
    text-align: center;
    /* max-width: 506px; */
    background: none !important;
    font-size: clamp(0.9375rem, 1.5vw + 0.75rem, 1.875rem);
    font-weight: 600 !important;
    line-height: 1.25;
    font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif !important;
    /* letter-spacing: 2px; */
    display: block;
    padding: 0;
    margin: 0;
    /* text-align: left; */
    min-width: 0;
}

#topPhrase > mark:first-of-type,
.topPhrase > mark:first-of-type {
    font-size: clamp(1.75rem, 4vw + 1rem, 3.25rem);
    line-height: 1.15;
}

.topProject > .topMeta {
    margin-top: 12px;
    margin-bottom: 8px;
}

p.topPhrase strong,
.Introduction strong {
    background-color: var(--border);
}

.topKeyFigures {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
}

.topKeyFigure {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5em;
    text-align: left;
    white-space: nowrap;
    width: auto;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    flex: none;
    margin: 0;
}

.topKeyFigure + .topKeyFigure {
    margin-top: 0;
}

.topKeyFigure__value {
    flex: none;
    font-size: var(--text-functional);
    font-weight: 600;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    color: var(--frgd);
}

.topKeyFigure__label {
    font-size: 0.8125rem;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    color: color-mix(in srgb, var(--frgd) 62%, transparent);
    max-width: none;
}

.CaseStudyDescription .topKeyFigures {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px;
}

.CaseStudyDescription .topKeyFigure {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5em;
    text-align: left;
    white-space: nowrap;
    width: auto;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    flex: none;
    margin: 0 !important;
}

.CaseStudyDescription .topKeyFigure + .topKeyFigure {
    margin: 0 !important;
}

.CaseStudyDescription .topKeyFigure__value,
.CaseStudyDescription .topKeyFigure__label {
    padding: 0;
    margin: 0 !important;
}

.CaseStudyWrapper .CaseStudyDescription .topKeyFigure__value {
    color: color-mix(in srgb, var(--caseAccent) 78%, var(--frgd, #050038));
}

.CaseStudyWrapper .CaseStudyDescription a:not(.disabled):not(.caseStudyLinkDisabled) .caseStudyLinkIcon,
.CaseStudyWrapper .CaseStudyDescription a:not(.disabled):not(.caseStudyLinkDisabled) .caseStudyLinkLabel {
    color: inherit;
}

.CaseStudyWrapper:nth-child(even) .CaseStudyDescription .topKeyFigures {
    justify-content: flex-start;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.CaseStudyWrapper:nth-child(odd) .CaseStudyDescription .topKeyFigures {
    justify-content: flex-end;
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* ---------------------------------------------------------------------------
   TL;DR band — the summary that opens every case study.
   Speaks the .topProject / .topKeyFigures language from the homepage so the
   band reads as part of the site rather than a new component.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Shared surface for the quieter blocks: a hairline card, no shadow, no
   texture. Everything below sits on it.
   --------------------------------------------------------------------------- */
.cs-roles {
    --cs-hair: color-mix(in srgb, var(--frgd) 16%, transparent);
    --cs-hair-soft: color-mix(in srgb, var(--frgd) 9%, transparent);
    --cs-quiet: color-mix(in srgb, var(--frgd) 58%, transparent);
    --cs-tint: color-mix(in srgb, var(--action) 55%, transparent);
}

.cs-roles,
.cs-roles p,
.cs-roles li {
    text-align: left;
    text-justify: auto;
}

/* ---------------------------------------------------------------------------
   cs-roles: the hats worn on a project, side by side as cards.
   Base state is every hat stacked; assets/js/cs-roles.js lays them out as
   cards (the home page's craftCard look) with a canvas motif on each.
   --------------------------------------------------------------------------- */
.main > .cs-roles,
.main > .caseStudyInProgress > .cs-roles {
    --cs-role-tint: color-mix(in srgb, var(--action) 70%, var(--frgd) 30%);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0 2rem;
    padding: clamp(20px, 2.6vw, 30px);
    border: 1px solid var(--cs-hair);
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
}

.main > .cs-roles.is-enhanced,
.main > .caseStudyInProgress > .cs-roles.is-enhanced {
    /* Cards sit in the text column, like the paragraphs around them. */
    width: calc(var(--content-col) - var(--gap) / 2);
    margin: var(--space-5) 0 var(--space-6) calc(var(--heading-col) + var(--gap) / 2);
    padding: 0;
    border: 0;
    border-radius: 0;
}

@media only screen and (max-width: 768px) {
    .main > .cs-roles.is-enhanced,
    .main > .caseStudyInProgress > .cs-roles.is-enhanced {
        width: 100%;
        margin-left: 0;
    }
}

.cs-roles__head {
    margin-bottom: 14px;
}

.main .cs-roles .cs-roles__count {
    margin: 0;
    text-align: left;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cs-quiet);
}

.cs-roles__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.cs-roles__card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    padding: 16px 16px 20px;
    border-radius: 16px;
    background: var(--bkgd);
    color: var(--frgd);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 28px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.22, 1.2, 0.36, 1), box-shadow 0.3s ease;
}

.cs-roles__card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 16px 36px rgba(0, 0, 0, 0.12);
}

.cs-roles__art {
    margin: 0 0 18px;
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--frgd) 4%, transparent);
}

.cs-roles__art canvas {
    display: block;
    width: 100%;
    height: 132px;
}

.main .cs-roles__role > h3 {
    width: auto;
    max-width: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: var(--text-h3);
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-align: left;
}

.main .cs-roles__card > h3 {
    margin-bottom: var(--space-4);
    font-weight: 600;
    font-size: var(--text-h3);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Responsibilities sit on hairline rules instead of bullets, so the hat
   reads as a list of things owned rather than a bulleted paragraph. */
.main .cs-roles__role > ul {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.main .cs-roles__role > ul > li {
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--cs-hair-soft);
    line-height: 1.6;
}

.main .cs-roles__card > ul > li {
    padding: 10px 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.main .cs-roles__role > ul > li:first-child {
    padding-top: 0;
    border-top: 0;
}

.main .cs-roles__role > ul > li:last-child {
    padding-bottom: 0;
}

.main .cs-roles__role h4.caseStudyLabel {
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 4px;
    padding: 0;
    font-size: var(--text-functional);
    letter-spacing: 0;
    font-family: var(--font-text);
    font-weight: 600;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .cs-roles__card,
    .cs-roles__card:hover {
        transition: none;
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   cs-totop: the floating pill back to the summary.
   --------------------------------------------------------------------------- */
.cs-totop {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 9px 18px 9px 14px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    /* Same brand colour and face as the TL;DR tag it takes you back to
       (h2.cs-tldr__kicker). --caseAccent is set on body per case study;
       pages with a light brand (green, orange) set --caseAccentInk so the
       label keeps 4.5:1. */
    background: color-mix(in srgb, var(--caseAccent, #4262ff) 82%, #0a0a0a);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--caseAccent, #050038) 30%, rgba(5, 0, 56, 0.18));
    color: var(--caseAccentInk, #fff);
    font-family: var(--font-meta);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.cs-totop[hidden] {
    display: none;
}

.cs-totop__arrow {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.cs-totop:hover,
.cs-totop:focus-visible {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

.cs-totop:focus-visible {
    outline: 2px solid var(--caseAccent, #4262ff);
    outline-offset: 3px;
}

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

    .cs-totop:hover,
    .cs-totop:focus-visible {
        transform: translateX(-50%);
    }
}

/* The site already parks a "low on time?" widget bottom-right; keep clear. */
@media only screen and (max-width: 600px) {
    .cs-totop {
        bottom: 14px;
        padding: 8px 15px 8px 12px;
    }
}

/* ---------------------------------------------------------------------------
   cs-shift — a quantity that changed, drawn to scale.
   Base state is a two-term definition list; assets/js/cs-shift.js draws it.
   --------------------------------------------------------------------------- */
.main > .cs-shift,
.main > .caseStudyInProgress > .cs-shift {
    box-sizing: border-box;
    width: calc(var(--content-col) - var(--gap) / 2);
    max-width: none;
    margin: var(--space-5) 0 var(--space-5) calc(var(--heading-col) + var(--gap) / 2);
}

.cs-shift dl {
    margin: 0;
}

.cs-shift dt {
    margin: 0 0 4px;
    font-family: var(--font-meta);
    font-size: var(--text-functional-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.cs-shift dd {
    margin: 0 0 12px;
    line-height: 1.6;
}

.cs-shift.is-enhanced > dl {
    display: none;
}

.cs-shift__ui {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: clamp(14px, 2vw, 20px);
    background: var(--bkgd);
}

.cs-shift__row + .cs-shift__row {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.cs-shift__tag {
    margin: 0 0 8px;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.cs-shift__meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cs-shift__track {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.cs-shift__bar {
    display: block;
    height: 26px;
    min-width: 3px;
    border-radius: 4px;
    background: var(--border);
    transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-shift__row.is-after .cs-shift__bar {
    background: var(--frgd);
}

.cs-shift__figure {
    flex: none;
    font-family: var(--font-meta);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.cs-shift__delta {
    flex: none;
    padding: 3px 10px;
    border: 1px solid var(--frgd);
    border-radius: 999px;
    background: var(--action);
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    line-height: 1.4;
    white-space: nowrap;
}

.cs-shift__body {
    margin: 0;
    line-height: 1.6;
}

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

@media only screen and (max-width: 768px) {
    .main > .cs-shift,
    .main > .caseStudyInProgress > .cs-shift {
        width: 100%;
        margin-left: 0;
    }

    .cs-shift__meter {
        flex-wrap: wrap;
    }

    .cs-shift__track {
        flex-basis: 100%;
        order: 3;
    }

    .cs-shift__bar {
        height: 18px;
    }
}

/* ---------------------------------------------------------------------------
   cs-stepper — an ordered process you can scrub through.
   Base state is a plain numbered list, so no-JS readers lose nothing.
   assets/js/cs-stepper.js adds the track and panels on top.
   --------------------------------------------------------------------------- */
.main > ol.cs-stepper,
.main > .caseStudyInProgress > ol.cs-stepper {
    margin: var(--space-5) 0 var(--space-5) calc(var(--heading-col) + var(--gap) / 2);
}

.cs-stepper > li {
    margin: 0 0 16px;
}

.cs-stepper > li > p {
    margin: 0;
    line-height: 1.6;
}

/* Once enhanced, the list has been emptied into the panels.
   Descendant (not only direct-child) so nested lists — e.g. inside .qBand —
   hide too; otherwise empty numbered shells stay visible beside the UI. */
.main ol.cs-stepper.is-enhanced {
    display: none;
}

.cs-stepper__ui {
    box-sizing: border-box;
    width: calc(var(--content-col) - var(--gap) / 2);
    max-width: none;
    margin: var(--space-5) 0 var(--space-5) calc(var(--heading-col) + var(--gap) / 2);
}

.cs-stepper__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cs-stepper__count {
    margin: 0;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    line-height: 1;
    letter-spacing: 0.06em;
}

.cs-stepper__nav {
    display: flex;
    gap: 6px;
}

.main .cs-stepper__prev,
.main .cs-stepper__next {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 2px solid var(--frgd) !important;
    border-radius: 50%;
    background: var(--bkgd);
    box-shadow: none;
    color: var(--frgd);
    cursor: pointer;
}

.main .cs-stepper__prev:disabled,
.main .cs-stepper__next:disabled {
    opacity: 0.35;
    cursor: default;
}

.main .cs-stepper__prev .material-symbols-outlined,
.main .cs-stepper__next .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

/* Same physics as the carousel arrows: lift with an ink offset shadow, press
   flat on click. */
.main .cs-stepper__prev,
.main .cs-stepper__next {
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.main .cs-stepper__prev:hover:not(:disabled),
.main .cs-stepper__next:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 2px 3px 0 var(--frgd);
}

.main .cs-stepper__prev:active:not(:disabled),
.main .cs-stepper__next:active:not(:disabled) {
    transform: translate(1px, 1px);
    box-shadow: 0 0 0 var(--frgd);
}

@media (prefers-reduced-motion: reduce) {
    .main .cs-stepper__prev:is(:hover, :active),
    .main .cs-stepper__next:is(:hover, :active) { transform: none; }
}

/* --- the track ----------------------------------------------------------- */
.cs-stepper__track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    margin-bottom: 14px;
    cursor: ew-resize;
    touch-action: pan-y;
}

.cs-stepper__track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--border);
}

.cs-stepper__track.is-dragging {
    cursor: grabbing;
}

.main button.cs-stepper__tick {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

/* The tick is 24px tall; on touch screens the hit area grows to 44px above
   and below without changing the layout. */
@media (pointer: coarse) {
    .main button.cs-stepper__tick::after {
        content: "";
        position: absolute;
        inset: -10px 0;
    }
}

.cs-stepper__tickMark {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--border);
    transition: background 160ms ease, height 160ms ease;
}

.cs-stepper__ui.is-reduced .cs-stepper__tickMark {
    transition: none;
}

.cs-stepper__tick.is-done .cs-stepper__tickMark {
    background: var(--frgd);
    opacity: 0.4;
}

.cs-stepper__tick.is-active .cs-stepper__tickMark {
    height: 16px;
    background: var(--frgd);
}

.main button.cs-stepper__tick:focus-visible {
    outline: 2px solid var(--frgd);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- the panel ----------------------------------------------------------- */
.cs-stepper__panels {
    min-height: 0;
}

.cs-stepper__panel[hidden] {
    display: none;
}

.cs-stepper__ordinal {
    margin: 0 0 6px;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    line-height: 1;
    opacity: 0.6;
}

.main .cs-stepper__panel h4.caseStudyLabel {
    margin: 0 0 6px;
    padding: 0;
    width: auto;
    max-width: none;
    line-height: 1.35;
    font-family: var(--font-display);
    font-size: var(--text-lead);
    font-weight: 600;
    letter-spacing: 0;
}

.cs-stepper__panel p:not(.cs-stepper__ordinal) {
    margin: 0 0 8px;
    line-height: 1.6;
}

.cs-stepper__panel p:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
    .cs-stepper__ui {
        width: 100%;
        margin-left: 0;
    }

    .main > ol.cs-stepper,
    .main > .caseStudyInProgress > ol.cs-stepper {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------------
   cs-faults — several symptoms of ONE broken flow.
   A card grid reads as N unrelated things; a spine says they share a cause.
   --------------------------------------------------------------------------- */
ol.cs-faults {
    counter-reset: cs-fault;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

/* Direct children of .main sit in the body-copy column. */
.main > ol.cs-faults,
.main > .caseStudyInProgress > ol.cs-faults {
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
}

.cs-faults > li {
    position: relative;
    margin: 0;
    padding: 0 0 22px 46px;
    counter-increment: cs-fault;
}

/* the spine */
.cs-faults > li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 26px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.cs-faults > li:last-child {
    padding-bottom: 0;
}

.cs-faults > li:last-child::before {
    display: none;
}

/* the node on the spine */
.cs-faults > li::after {
    content: counter(cs-fault);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 2px solid var(--frgd);
    border-radius: 50%;
    background: var(--bkgd);
    font-family: var(--font-meta);
    font-size: var(--text-functional-sm);
    line-height: 1;
}

/* Company accent: fault spine + number nodes use --caseAccent from .main.
   Mix with transparent (not --border/--accent) so design-system Colour cannot
   retint company chrome. */
.main .cs-faults > li::before {
    background: color-mix(in srgb, var(--caseAccent) 45%, transparent);
}

.main .cs-faults > li::after {
    border-color: var(--caseAccent);
}

.main .cs-faults h4.caseStudyLabel {
    margin: 0 0 4px;
    padding: 0;
    width: auto;
    max-width: none;
    line-height: 1.35;
}

.cs-faults p {
    margin: 0;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   cs-pulls — the lines worth quoting.
   These are the payload of a case study; a card renders them at body weight.
   --------------------------------------------------------------------------- */
ol.cs-pulls {
    counter-reset: cs-pull;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

/* Direct children of .main sit in the body-copy column. */
.main > ol.cs-pulls,
.main > .caseStudyInProgress > ol.cs-pulls {
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
}

.cs-pulls > li {
    position: relative;
    margin: 0;
    padding: 18px 0;
    counter-increment: cs-pull;
    border-top: 1px solid var(--border);
}

.cs-pulls > li:last-child {
    border-bottom: 1px solid var(--border);
}

.cs-pulls__line {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

.cs-pulls__line::before {
    content: counter(cs-pull, decimal-leading-zero);
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-meta);
    font-size: var(--text-functional-sm);
    font-weight: 400;
    line-height: 1;
    opacity: 0.6;
}

.cs-pulls > li > p:not(.cs-pulls__line) {
    margin: 0;
    line-height: 1.6;
}

/* Below the site's breakpoint the columns collapse (--heading-col: 100%),
   so the body-copy offset has to go or the block lands off-screen. */
@media only screen and (max-width: 768px) {
    .main > ol.cs-faults,
    .main > .caseStudyInProgress > ol.cs-faults,
    .main > ol.cs-pulls,
    .main > .caseStudyInProgress > ol.cs-pulls {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------------
   cs-tldr — the summary that opens every case study, as a board frame.
   Uses the canvas tokens the rest of the site already ships (--rgc-*), so it
   reads as part of the board rather than a panel bolted onto it.
   --------------------------------------------------------------------------- */
.cs-tldr,
.cs-tldr p,
.cs-tldr dd,
.cs-tldr li {
    text-align: left;
    text-justify: auto;
    hyphens: manual;
}

.cs-tldr {
    --tldr-ink: var(--rgc-ink, #050038);
    --tldr-soft: var(--rgc-ink-soft, #656479);
    --tldr-line: var(--rgc-line, #e6e6ec);
    --tldr-blue: var(--rgc-blue, #4262ff);
    --tldr-blue-soft: var(--rgc-blue-soft, #e8ecff);
    /* Inherit --caseAccent from body/.main (company logo). Fallback to board blue
       only when the page did not set a company accent. Do not redefine --caseAccent
       here — that would shadow the company colour for nested chrome. */

    position: relative;
    box-sizing: border-box;
    margin: 2.75rem 0 2.75rem;
    padding: clamp(24px, 2.8vw, 34px) clamp(18px, 2.6vw, 30px) clamp(18px, 2.6vw, 30px);
    border: 1px solid var(--tldr-line);
    border-radius: var(--rgc-radius, 14px);
    background-color: var(--rgc-panel, #fff);
    background-image:
        radial-gradient(circle, rgba(5, 0, 56, 0.10) 0.9px, transparent 1.3px);
    background-size: 20px 20px;
    background-position: -1px -1px;
    box-shadow:
        0 6px 24px color-mix(in srgb, var(--caseAccent) 18%, transparent),
        0 1px 3px rgba(5, 0, 56, 0.1),
        inset 0 1px 0 color-mix(in srgb, var(--caseAccent) 10%, transparent);
    color: var(--tldr-ink);
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}

/* Homepage cards sit on the board without the framed panel.
   Visual-first: claim → media → figures → (pair/meta behind toggle) → actions.
   --homeAccent tints the expand control to match each craft card.
   The homepage body sets no company colour, so each card hands its own
   --homeAccent to --caseAccent: chip icons, tool logos, figures and team
   faces then take the brand colour exactly as on the case-study page.
   Spacing: every block sits --home-gap apart, folded or open; only the NDA
   note hugs the figures it qualifies. Each gap lives on the block below it
   (visual, pair and figures margins don't meet, the folded blocks between
   them are their own formatting contexts), so folding just zeroes them. */
.cs-tldr--home {
    --homeAccent: var(--frgd, #050038);
    --caseAccent: var(--homeAccent);
    --home-gap: 24px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

#project-ai-native .cs-tldr--home {
    --homeAccent: #7de39a;
}

#project-knowledge-base .cs-tldr--home {
    --homeAccent: #ff9900;
}

#project-page-templates .cs-tldr--home {
    --homeAccent: #eb0023;
}

.cs-tldr--home > .cs-tldr__kicker {
    display: none;
}

.cs-tldr--home .cs-tldr__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}

.cs-tldr--home .cs-tldr__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 16px;
    width: 100%;
}

.cs-tldr--home .cs-tldr__header .topLogo {
    margin: 0;
    flex: 0 0 auto;
    max-height: 36px;
    width: auto;
    object-fit: contain;
}

.cs-tldr--home .cs-tldr__header .topLogo--wide {
    max-height: 28px;
}

.cs-tldr--home .cs-tldr__period {
    margin: 0 0 0 auto;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--frgd, #050038) 55%, transparent);
    white-space: nowrap;
}

.cs-tldr--home .cs-tldr__claim {
    margin: 0;
    max-width: 28ch;
    flex: none;
    width: 100%;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.cs-tldr--home .cs-tldr__visual {
    margin: var(--home-gap) 0 0;
    border-radius: 16px;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 14px 32px color-mix(in srgb, var(--homeAccent) 20%, transparent);
}

.cs-tldr--home .cs-tldr__figures .topKeyFigure__value {
    color: color-mix(in srgb, var(--homeAccent) 78%, var(--frgd, #050038));
}

/* .topKeyFigures too, to outrank the later `.cs-tldr .topKeyFigures` margin. */
.cs-tldr--home .cs-tldr__figures.topKeyFigures {
    margin: var(--home-gap) 0 0;
    overflow: hidden;
    max-height: 80rem;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        transform 0.28s ease,
        margin 0.28s ease;
}

.cs-tldr--home .cs-tldr__figuresNote,
.cs-tldr--home .cs-tldr__meta {
    overflow: hidden;
    max-height: 80rem;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        transform 0.28s ease,
        margin 0.28s ease,
        padding 0.28s ease;
}

.cs-tldr--home .cs-tldr__figuresNote {
    margin: 8px 0 0;
}

.cs-tldr--home .cs-tldr__pair {
    margin: var(--home-gap) 0 0;
}

/* "What we did" peeks ~3 lines when folded and grows open; problem stays fully readable. */
.cs-tldr--home .cs-tldr__pair > div:last-child {
    overflow: hidden;
    max-height: 80rem;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-tldr--home .cs-tldr__meta {
    margin: var(--home-gap) 0 0;
    padding-top: var(--home-gap);
}

/* Once the card has finished opening, let the team and tool tooltips poke
   out of the meta block instead of being cut off at its top edge. Folding
   hides the overflow again straight away. */
.cs-tldr--home:not(.is-collapsed) > .cs-tldr__meta {
    overflow: visible;
    transition:
        max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        transform 0.28s ease,
        margin 0.28s ease,
        padding 0.28s ease,
        overflow 0s linear 0.45s;
    transition-behavior: allow-discrete;
}

.cs-tldr--home.is-collapsed > .cs-tldr__pair {
    align-items: start;
    pointer-events: none;
}

/* content-box, so padding and the top rule sit outside max-height:
   dt line (1.55 × meta size) + its 8px margin + 3 dd lines. The third line
   fades out so the cut reads as "more below", not a sliced line. */
.cs-tldr--home.is-collapsed > .cs-tldr__pair > div:last-child {
    max-height: calc((1.55 * var(--text-meta)) + 8px + (3 * 1.55rem));
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.55rem), rgba(0, 0, 0, 0.15));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.55rem), rgba(0, 0, 0, 0.15));
}

.cs-tldr--home.is-collapsed > .cs-tldr__figures,
.cs-tldr--home.is-collapsed > .cs-tldr__figuresNote,
.cs-tldr--home.is-collapsed > .cs-tldr__meta {
    display: block;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .cs-tldr--home .cs-tldr__figures,
    .cs-tldr--home .cs-tldr__figuresNote,
    .cs-tldr--home .cs-tldr__pair > div:last-child,
    .cs-tldr--home .cs-tldr__meta,
    .cs-tldr--home:not(.is-collapsed) > .cs-tldr__meta {
        transition: none;
    }
}

.cs-tldr__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 0.5rem;
}

.cs-tldr--home .cs-tldr__footer {
    margin-top: var(--home-gap);
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px 20px;
}

.cs-tldr--home .readMoreTop {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    padding: 0;
    order: 1;
}

.cs-tldr--home .readMoreTop p {
    display: none !important;
}

body.home #main-content .cs-tldr--home .readMoreTop a.craftCard__link,
body.home article .cs-tldr--home .readMoreTop a.craftCard__link {
    /* The pill, its colours and hover come from craft-cards.css via
       --link-accent. */
    --link-accent: var(--homeAccent);
    display: inline-flex !important;
    margin: 0 !important;
}

/* Homepage: Cense-style disclosure; sits with the read link, right-aligned. */
.cs-tldr--home .cs-tldr__toggle {
    order: 2;
    margin-left: auto;
}

/* --- the page opens on the index's blueprint ---------------------------------
   Same paper as the homepage while its chat is in view (intro-chat.css):
   company-accent wash + accent dots (pages set --caseAccent on body).
   Once the TL;DR scrolls away, assets/js/cs-totop.js sets cs-hero-off and the
   board theme and toolbars return. :has() puts the blueprint on at first paint,
   before the deferred script runs. Homepage cards use .cs-tldr--home and must
   not trigger this hero (nothing sets cs-hero-off there).
   --------------------------------------------------------------------------- */
html[data-canvas]:has(.cs-tldr:not(.cs-tldr--home)) body {
    transition: background-color 0.7s ease, background-image 0.7s ease;
}

html[data-canvas]:has(.cs-tldr:not(.cs-tldr--home)):not(.cs-hero-off) body {
    background-color: color-mix(in srgb, var(--caseAccent, #ffd02e) 34%, transparent) !important;
    background-image:
        radial-gradient(
            circle,
            color-mix(in srgb, var(--caseAccent, #576fff) 55%, transparent) 0.9px,
            transparent 1.3px
        ) !important;
    background-size: 24px 24px !important;
    background-repeat: repeat !important;
    background-position: 12px 12px !important;
}

html:has(.cs-tldr:not(.cs-tldr--home)) .rgc-rail,
html:has(.cs-tldr:not(.cs-tldr--home)) .rgc-projects {
    transition: opacity 320ms ease, visibility 0s linear 0s;
}

html:has(.cs-tldr:not(.cs-tldr--home)):not(.cs-hero-off) .rgc-rail,
html:has(.cs-tldr:not(.cs-tldr--home)):not(.cs-hero-off) .rgc-projects {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}

@media (prefers-reduced-motion: reduce) {
    html[data-canvas]:has(.cs-tldr:not(.cs-tldr--home)) body,
    html:has(.cs-tldr:not(.cs-tldr--home)) .rgc-rail,
    html:has(.cs-tldr:not(.cs-tldr--home)) .rgc-projects {
        transition: none;
    }
}

/* Arriving from a homepage TL;DR card with ?tldr=seen: hide the on-page summary. */
html.cs-tldr-seen .cs-tldr {
    display: none;
}

/* --- collapsible on phones ------------------------------------------------
   The TL;DR opens the page, so on a phone it would fill the first few screens.
   There it shows the tag, the claim and the context line, and the rest folds
   behind a toggle (added by assets/js/cs-totop.js, so without script the
   whole summary shows).
   --------------------------------------------------------------------------- */
/* Cense-style disclosure control (soft fill, uppercase, filled chevron). */
.cs-tldr__toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    min-height: 32px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-btn, 12px);
    /* Tertiary: a disclosure, so it stays quieter than the read link beside it;
       the soft fill only appears on hover. */
    background: transparent;
    color: var(--btn-soft-ink);
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    width: fit-content;
    text-align: left;
    transition: background-color 150ms ease;
}

.cs-tldr__toggle:hover {
    background: var(--btn-soft-bg-hover);
}

.cs-tldr__toggle:hover .cs-tldr__toggleIcon {
    transform: translateY(2px);
}

.cs-tldr__toggle[aria-expanded="true"]:hover .cs-tldr__toggleIcon {
    transform: rotate(180deg) translateY(2px);
}

.cs-tldr__toggleIcon {
    flex: none;
    width: 18px;
    height: 18px;
    fill: var(--btn-soft-icon);
    transition: transform 0.15s ease;
}

.cs-tldr__toggle[aria-expanded="true"] .cs-tldr__toggleIcon {
    transform: rotate(180deg);
}

.cs-tldr__toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--frgd, #050038) 45%, transparent);
    outline-offset: 2px;
}

.cs-tldr--home .cs-tldr__toggle {
    display: flex;
}

@media only screen and (max-width: 600px) {
    .cs-tldr.is-collapsed > :not(.cs-tldr__kicker, .cs-tldr__claim, .cs-tldr__context, .cs-tldr__toggle) {
        display: none;
    }

    /* Homepage cards keep the punchy stack while pair/meta animate open. */
    .cs-tldr--home.is-collapsed > .cs-tldr__header,
    .cs-tldr--home.is-collapsed > .cs-tldr__footer {
        display: flex;
    }

    .cs-tldr--home.is-collapsed > .cs-tldr__visual {
        display: block;
    }

    /* Keep foldable blocks in the flow so max-height expand can animate. */
    .cs-tldr--home.is-collapsed > .cs-tldr__figures {
        display: flex;
    }

    .cs-tldr--home.is-collapsed > .cs-tldr__figuresNote,
    .cs-tldr--home.is-collapsed > .cs-tldr__pair,
    .cs-tldr--home.is-collapsed > .cs-tldr__meta {
        display: block;
    }

    .cs-tldr.is-collapsed .cs-tldr__context {
        margin-bottom: var(--space-4);
    }

    .cs-tldr:not(.cs-tldr--home) .cs-tldr__toggle {
        display: flex;
        margin: 18px 0 0;
    }

    .cs-tldr.is-collapsed .cs-tldr__toggle {
        margin-top: 0;
    }
}

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

/* The frame label, the way Miro tags a frame above its top-left corner. */
.main .cs-tldr > h2.cs-tldr__kicker,
.mainHome .cs-tldr > h2.cs-tldr__kicker {
    position: absolute;
    top: -12px;
    left: 14px;
    width: auto;
    max-width: none;
    /* !important: the mobile .main h2 rule pins margin-top with !important,
       which dropped the tag into the middle of the frame. */
    margin: 0 !important;
    padding: 2px 10px;
    float: none;
    border-radius: 6px;
    background: color-mix(in srgb, var(--caseAccent) 82%, #0a0a0a);
    color: #fff;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: none;
    opacity: 1;
}

/* Visual slot inside a homepage TL;DR card (demo iframe, carousel, or video). */
.cs-tldr__visual {
    width: 100%;
    margin: 16px 0 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--accent);
    line-height: 0;
    box-sizing: border-box;
}

.cs-tldr__visual .topProjectVideo {
    margin: 0;
    border: none;
    border-radius: 0;
}

.cs-tldr__visual .LatestProject {
    margin: 0;
}

.cs-tldr__visual .LatestDemo--ainative {
    border: none;
    border-radius: 0;
}

/* Knowledge-base assistant loop. Not scaled like the other demos: the frame
   lays itself out at the real width, so text stays legible on a phone. */
.LatestDemo--kb {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #f9f9fa;
}

.LatestDemo--kb iframe {
    width: 100%;
    height: 100%;
}

.cs-tldr__visual:has(> .LatestDemo--kb) {
    container-type: inline-size;
}

/* 562px = the frame's own 560px breakpoint plus the 1px visual border. */
@container (min-width: 562px) {
    .LatestDemo--kb {
        aspect-ratio: 16 / 10;
    }
}

.cs-tldr__claim {
    margin: 6px 0 12px;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tldr-ink);
    max-width: 22ch;
}

/* Context is a sentence, so it is Inter, not the pixel face. */
.cs-tldr__context {
    margin: 0 0 24px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tldr-soft);
}

.cs-tldr__pair {
    display: grid;
    gap: 14px;
    margin: 0 0 22px;
}

/* Flat, un-shadowed panels with a rule on top: raised white cards read as
   clickable, and nothing here is. */
.cs-tldr__pair > div {
    min-width: 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 2px solid var(--tldr-ink);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.cs-tldr__pair dt {
    margin: 0 0 8px;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tldr-soft);
    opacity: 1;
}

.cs-tldr__pair dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--tldr-ink);
}

/* --- the figures, same inline chips as the homepage .topKeyFigures --------
   Accent-tinted bordered pills: mono value + Inter label, matching sitewide
   key-figure treatment (no sticky-note paper, rotation, or drop shadow).
   --------------------------------------------------------------------------- */
.cs-tldr .topKeyFigures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 26px;
    width: fit-content;
    max-width: 100%;
}

.cs-tldr__figures:empty {
    display: none;
}

.cs-tldr .topKeyFigure {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5em;
    width: auto;
    min-height: 0;
    padding: 6px 12px;
    /* Fill only, no edge: in the TL;DR a bordered pill means a jump link, so
       the static figures must not wear one. */
    border: 1px solid transparent;
    border-radius: var(--radius-tag, 8px);
    background: color-mix(in srgb, var(--caseAccent, var(--tldr-blue)) 9%, var(--rgc-panel, #fff));
    box-shadow: none;
    white-space: nowrap;
    color: var(--tldr-ink);
    transform: none;
}

.cs-tldr .topKeyFigure__value {
    flex: none;
    font-family: var(--font-display);
    font-size: var(--text-functional);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: color-mix(in srgb, var(--caseAccent) 72%, var(--tldr-ink));
}

.cs-tldr .topKeyFigure__label {
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--tldr-soft);
    max-width: none;
}

.cs-tldr__figuresNote {
    margin: 0 0 22px;
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--tldr-soft);
}

/* --- meta rows ------------------------------------------------------------ */
.cs-tldr__meta {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding-top: 18px;
    border-top: 1px solid var(--tldr-line);
}

.cs-tldr__metaLabel,
.mainHome p.cs-tldr__metaLabel {
    margin: 0 0 6px;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tldr-soft);
    opacity: 1;
}

/* Research methods and tools are a plain run of text separated by dots:
   filled pills here looked like filters, and louder than the jump links,
   which are the only thing in the frame you can click. */
.cs-tldr__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-tldr__chips li {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-text);
    font-size: var(--text-functional);
    font-weight: 400;
    line-height: 1.55;
    color: var(--tldr-ink);
}

.cs-tldr__chips li:not(:last-child)::after {
    content: "\00b7";
    margin: 0 0.55em;
    color: var(--tldr-soft);
}

/* Research methods carry a pixelarticons glyph (inline, no icon font) that
   already marks where each item starts, so the dots give way to a gap. */
.cs-tldr__chips--icons {
    gap: 0.2em 1.15em;
}

.cs-tldr__chips--icons li {
    display: inline-flex;
    align-items: center;
}

.cs-tldr__chips--icons li:not(:last-child)::after {
    content: none;
}

.cs-tldr__chipIcon {
    flex: none;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.45em;
    fill: currentColor;
    color: color-mix(in srgb, var(--caseAccent, var(--tldr-ink)) 72%, var(--tldr-ink));
}

/* Tools are a row of logos; the name, and how the tool was used, sits in a
   tooltip on hover or focus. The text stays in the DOM, so screen readers,
   search and agents still get it. Tooltips open to the right of the logo,
   not centred, so the first one never runs off a phone screen. */
.cs-tldr__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: -4px 0 -4px -4px;
    padding: 0;
    align-self: center;
}

.cs-tldr__metaLabel:has(+ .cs-tldr__tools) {
    align-self: center;
}

/* Two classes to beat the base `p, li` margin and `.main li` padding. */
.cs-tldr__tools .cs-tldr__tool {
    position: relative;
    display: inline-flex;
    margin: 0;
    padding: 4px;
    border-radius: 6px;
    color: color-mix(in srgb, var(--caseAccent, var(--tldr-ink)) 72%, var(--tldr-ink));
    cursor: default;
    transition: color 0.15s ease;
}

.cs-tldr__toolIcon {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.cs-tldr__toolTip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 5;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--tldr-ink);
    color: #fff;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(5, 0, 56, 0.18);
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cs-tldr__toolTip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 9px;
    border: 5px solid transparent;
    border-top-color: var(--tldr-ink);
}

.cs-tldr__tool:hover,
.cs-tldr__tool:focus {
    color: var(--tldr-ink);
}

.cs-tldr__tool:focus {
    outline: none;
}

.cs-tldr__tool:focus-visible {
    outline: 2px solid var(--tldr-blue);
    outline-offset: 0;
}

.cs-tldr__tool:hover .cs-tldr__toolTip,
.cs-tldr__tool:focus .cs-tldr__toolTip {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Escape hides it until the pointer leaves or focus moves (cs-totop.js). */
.cs-tldr__tool.is-tipDismissed .cs-tldr__toolTip {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .cs-tldr__tool,
    .cs-tldr__toolTip {
        transition: none;
    }
}

/* Team is a row of faces, grouped, each group captioned. Faces tuck a little
   under their neighbour; who they are and what they did sits in a tooltip on
   hover or focus, in the DOM like the tool names. A dashed circle is a role
   with no face to show; a tinted one counts the people too many to draw.
   cs-totop.js keeps the tooltip inside the summary and handles Escape. */
.cs-team {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    align-items: flex-start;
}

.cs-team__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cs-tldr .cs-team__faces {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
    list-style: none;
    margin: 0;
    /* Each face pulls 8px left under its neighbour; this gives the first
       one of every row that 8px back. */
    padding: 0 0 0 8px;
}

.cs-tldr .cs-team__person {
    position: relative;
    margin: 0 0 0 -8px;
    padding: 0;
    border-radius: 50%;
    cursor: default;
}

.cs-tldr .cs-team__person::before,
.cs-tldr .cs-team__person::marker {
    content: none;
}

.cs-team__face {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tldr-blue-soft);
    box-shadow: 0 0 0 2px var(--rgc-panel, #fff);
    font-family: var(--font-meta);
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--caseAccent, var(--tldr-ink)) 72%, var(--tldr-ink));
    transition: transform 0.15s ease;
}

.cs-team__person--role .cs-team__face {
    border: 1.5px dashed color-mix(in srgb, var(--tldr-soft) 70%, transparent);
    background: var(--rgc-panel, #fff);
    color: var(--tldr-soft);
}

.cs-team__person--more .cs-team__face {
    background: color-mix(in srgb, var(--caseAccent, var(--tldr-blue)) 14%, var(--rgc-panel, #fff));
}

.cs-team__caption {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--tldr-soft);
}

.cs-tldr .cs-team__person:hover,
.cs-tldr .cs-team__person:focus-within {
    z-index: 4;
}

.cs-team__person:hover .cs-team__face,
.cs-team__person:focus .cs-team__face {
    transform: translateY(-3px);
}

.cs-team__person:focus {
    outline: none;
}

.cs-team__person:focus-visible .cs-team__face {
    outline: 2px solid var(--tldr-blue);
    outline-offset: 2px;
}

.cs-team__tip,
.cs-tldr__methodTip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 5;
    box-sizing: border-box;
    width: max-content;
    max-width: 15rem;
    padding: 7px 10px 8px;
    border-radius: 6px;
    background: var(--tldr-ink);
    color: #fff;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 4px 12px rgba(5, 0, 56, 0.18);
    opacity: 0;
    transform: translate(calc(-50% + var(--tip-shift, 0px)), 3px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* The arrow stays on the face when the bubble is nudged sideways. */
.cs-team__tip::after,
.cs-tldr__methodTip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - var(--tip-shift, 0px));
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--tldr-ink);
}

/* Covers the gap down to the face, so the pointer can move onto the bubble. */
.cs-team__tip::before,
.cs-tldr__methodTip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.cs-team__name,
.cs-team__role,
.cs-team__did {
    display: block;
}

.cs-team__name {
    font-weight: 600;
}

.cs-team__role {
    color: rgba(255, 255, 255, 0.72);
}

.cs-team__did {
    margin-top: 3px;
}

.cs-team__person:hover .cs-team__tip,
.cs-team__person:focus .cs-team__tip,
.cs-tldr__method:hover .cs-tldr__methodTip,
.cs-tldr__method:focus .cs-tldr__methodTip {
    opacity: 1;
    transform: translate(calc(-50% + var(--tip-shift, 0px)), 0);
    pointer-events: auto;
}

/* Escape hides it until the pointer leaves or focus moves (cs-totop.js). */
.cs-team__person.is-tipDismissed .cs-team__tip,
.cs-tldr__method.is-tipDismissed .cs-tldr__methodTip {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .cs-team__face,
    .cs-team__tip,
    .cs-tldr__methodTip {
        transition: none;
    }
}

/* Research methods say how each was used on this project in the same bubble
   as the team, on hover or focus. The label takes a dotted underline so it
   reads as "more here", not as a link; the bubble is out of flow, so the
   underline never reaches it. */
.cs-tldr__chips--icons .cs-tldr__method {
    position: relative;
    border-radius: 4px;
}

.cs-tldr__method:hover,
.cs-tldr__method:focus {
    z-index: 4;
    text-decoration: underline dotted var(--tldr-soft);
    text-underline-offset: 3px;
}

.cs-tldr__method:focus {
    outline: none;
}

.cs-tldr__method:focus-visible {
    outline: 2px solid var(--tldr-blue);
    outline-offset: 2px;
}

.cs-tldr__jump {
    padding-top: 16px;
    border-top: 1px solid var(--tldr-line);
}

.cs-tldr__jump::before {
    content: "Jump to";
    display: block;
    margin: 0 0 10px;
    font-family: var(--font-meta);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tldr-soft);
}

.cs-tldr__jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-tldr__jump li {
    margin: 0;
}

.main .cs-tldr__jumpLink {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 5px 12px 5px 10px;
    border: 1px solid color-mix(in srgb, var(--caseAccent) 35%, transparent);
    border-radius: 999px;
    background: var(--rgc-panel, #fff);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--caseAccent) 12%, transparent);
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    color: color-mix(in srgb, var(--caseAccent) 45%, var(--tldr-ink));
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.main .cs-tldr__jumpLink::before {
    content: "\2193";
    display: inline-block;
    margin-right: 0.35em;
    font-weight: 400;
    transition: transform 120ms ease;
}

.main .cs-tldr__jumpLink:hover,
.main .cs-tldr__jumpLink:focus-visible {
    left: 0;
    top: 0;
    border-color: var(--caseAccent);
    background: color-mix(in srgb, var(--caseAccent) 10%, var(--rgc-panel, #fff));
    color: color-mix(in srgb, var(--caseAccent) 35%, var(--tldr-ink));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.main .cs-tldr__jumpLink:hover::before {
    transform: translateY(2px);
}

.main .cs-tldr__jumpLink:focus-visible {
    outline: 2px solid var(--caseAccent);
    outline-offset: 2px;
}

/* Nothing in the frame but the jump links, the toggle and the tool, team and
   research tooltips reacts to the pointer, so nothing else should look like
   it does. */
.cs-tldr .topKeyFigure,
.cs-tldr__pair,
.cs-tldr__chips li {
    cursor: default;
    user-select: text;
}

@media (prefers-reduced-motion: reduce) {
    .main .cs-tldr__jumpLink,
    .main .cs-tldr__jumpLink::before {
        transition: none;
    }
}

@media only screen and (min-width: 700px) {
    .cs-tldr__pair {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .cs-tldr__meta {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 22px 20px;
        align-items: baseline;
    }

    .cs-tldr__metaLabel {
        margin: 0;
        white-space: nowrap;
        text-align: right;
    }

    /* Centre the label on the first row of 36px faces. */
    .cs-tldr__metaLabel:has(+ .cs-team) {
        align-self: start;
        padding-top: 9px;
    }

    .cs-team {
        align-self: start;
    }
}

.latestDescription {
    display: flex;
    border-top: 1px solid;
    padding-top: 2px;
    margin-top: 16px;
}

.latestDescription > div {
    padding: 8px;
    width: 50%;
}

@media only screen and (min-width: 769px) {
    .latestDescription-more {
        display: block;
        flex: 1 1 50%;
        min-width: 0;
    }

    .latestDescription-more > summary {
        display: none;
    }

    .latestDescription-more::details-content {
        display: block;
        content-visibility: visible;
        height: auto;
        overflow: visible;
    }

    .latestDescription-extra {
        display: flex;
        width: 100%;
        flex: 1;
    }

    .latestDescription-extra > div {
        padding: 8px;
        width: 50%;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 768px) {
    details.latestDescription-more > summary {
        padding: 8px;
    }
}

.latestDescription h5 {
    font-size: calc(1.25rem * var(--ds-font-scale));
    font-weight: 800;
    font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;
}

.latestDescription p {
    margin: 4px 0 16px;
    line-height: 1.25;
    text-align: left;
}

div#disclaimer,
.topProject .disclaimer {
    font-size: 0.5rem;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R";
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.readMoreTop p {
    display: block;
    padding-top: 16px;
    text-align: center !important;
    width: 100%;
}

body.home #main-content .readMoreTop a.craftCard__link,
body.home article .readMoreTop a.craftCard__link {
    display: none !important;
}

.readMoreTop {
    width: 100%;
    padding-bottom: 16px;
}

@media only screen and (max-width: 768px) {
  .readMoreTop p {
    display: none !important;
  }

  body.home #main-content .readMoreTop a.craftCard__link,
  body.home article .readMoreTop a.craftCard__link {
    display: inline-flex !important;
  }
}

#short .slider {
    border-bottom: none !important;
}

#short .slider .slide-track {
    animation-duration: 80s;
}

.downloadResumeTop {
    width: 100%;
    padding-bottom: 32px;
    border-bottom: none;
}

.Introduction a {
    display: inline;
}

svg#Arrow\.7 {
    display: inline-block;
    height: 18px;
    width: auto;
    alignment-baseline: middle;
}

.readMoreTop {
    display: flex;
    flex-direction: row;
}

div#contactMeButtons a {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

img#AWSHand {
    position: absolute;
    width: 43%;
    right: 0;
}

p#\34 04 {
    font-size: 4vw;
}

div#fourOfour {
    text-align: center;
    font-size: 6vw;
    line-height: 1;
    padding: 64px 64px 32px;
    font-weight: 700;
    font-family: var(--font-display) !important;
    letter-spacing: -0.03em;
}

div#fourOfourHelp {
    text-align: center;
    padding: 0 64px;
}

.sprite-Andr {
    background: url('../images/recomendation3rd_sprites.png') -0 -0;
}

.sprite-Bruc {
    background: url('../images/recomendation3rd_sprites.png') -42px -0;
}

.sprite-Iren {
    background: url('../images/recomendation3rd_sprites.png') -84px -0;
}

.sprite-Darr {
    background: url('../images/recomendation3rd_sprites.png') -126px -0;
}

.sprite-Gize {
    background: url('../images/recomendation3rd_sprites.png') -168px -0;
}

.sprite-Crai {
    background: url('../images/recomendation3rd_sprites.png') -210px -0;
}

.sprite-Pila {
    background: url('../images/recomendation3rd_sprites.png') -252px -0;
}

.sprite-Paul {
    background: url('../images/recomendation3rd_sprites.png') -294px -0;
}

.sprite-Sara {
    background: url('../images/recomendation3rd_sprites.png') -336px -0;
}

.sprite-Anku {
    background: url('../images/recomendation3rd_sprites.png') -378px -0;
}

.sprite-Mart {
    background: url('../images/recomendation3rd_sprites.png') -420px -0;
}

.sprite-Anwe {
    background: url('../images/recomendation3rd_sprites.png') -462px -0;
}

.sprite-Leis {
    background: url('../images/recomendation3rd_sprites.png') -504px -0;
}

/* Fourth recommendation sprite sheet (recomendation4th_sprites.png) */
:root {
    --recommendation-sprite-image: url('../images/recomendation4th_sprites.png');
}

.bg-Alberto { width: 42px; height: 42px; background: var(--recommendation-sprite-image) 0 0 no-repeat; }
.bg-Andres { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -42px 0 no-repeat; }
.bg-Aram { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -84px 0 no-repeat; }
.bg-Daniel { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -126px 0 no-repeat; }
.bg-Gajen { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -168px 0 no-repeat; }
.bg-John { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -210px 0 no-repeat; }
.bg-Maggie { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -252px 0 no-repeat; }
.bg-Marcin { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -294px 0 no-repeat; }
.bg-Ivy { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -336px 0 no-repeat; }
.bg-Matt { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -378px 0 no-repeat; }
.bg-Michal { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -420px 0 no-repeat; }
.bg-Thibault { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -462px 0 no-repeat; }
.bg-Ringo { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -504px 0 no-repeat; }
.bg-Tom { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -546px 0 no-repeat; }
.bg-Tomasz { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -588px 0 no-repeat; }
.bg-Arashdeep { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -630px 0 no-repeat; }
.bg-Lewis { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -672px 0 no-repeat; }
.bg-Uros { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -714px 0 no-repeat; }
/* Placeholder circles — faces pending */
.bg-Jonathan { width: 42px; height: 42px; background: transparent; }
.bg-Marina { width: 42px; height: 42px; background: transparent; }
.bg-Vincent { width: 42px; height: 42px; background: transparent; }
.bg-Catherine { width: 42px; height: 42px; background: transparent; }
.bg-empty { width: 42px; height: 42px; background: transparent; }

/* LinkedIn recommendation profiles — 115 cells @ 100×100 source, shown at 42×42 */
.sprite.recommendationimage.rec-sprite {
  --rec-count: 115;
  --rec-display: 42px;
  width: var(--rec-display);
  height: var(--rec-display);
  background-image: url('../images/recommendation-profiles-sprite.webp');
  background-repeat: no-repeat;
  background-size: calc(var(--rec-count) * var(--rec-display)) var(--rec-display);
  background-position: calc(var(--rec-i, 0) * -1 * var(--rec-display)) 0;
}


/* Accent color picker */
.accent-picker-item {
  list-style: none;
  border: none !important;
  z-index: 9999 !important;
}

.accent-picker {
  z-index: 9999 !important;
}

.accent-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.accent-picker__swatch {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--frgd);
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: pointer;
  padding: 0;
  background: var(--accent);
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.accent-picker__swatch:hover,
.accent-picker__swatch:focus-visible {
  transform: scale(1.1);
  outline: none;
}

.accent-picker__swatch:focus-visible {
  box-shadow: 2px 2px 0 var(--shadow), 0 0 0 3px color-mix(in srgb, var(--frgd) 25%, transparent);
}

.accent-picker__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.accent-picker.is-open .accent-picker__menu {
  pointer-events: auto;
}

.accent-picker__menu .accent-picker__swatch {
  opacity: 0;
  transform: translateY(-10px) scale(0.5);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.accent-picker.is-open .accent-picker__menu .accent-picker__swatch {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(1) { transition-delay: 0.02s; }
.accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(2) { transition-delay: 0.05s; }
.accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(3) { transition-delay: 0.08s; }
.accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(4) { transition-delay: 0.11s; }
.accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(5) { transition-delay: 0.14s; }
.accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(6) { transition-delay: 0.17s; }

@media only screen and (min-width: 769px) {
  .accent-picker-item {
    position: fixed;
    top: 28px;
    right: 28px;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Homepage-only desktop tooltip for the accent trigger */
  .homepage .accent-picker__trigger {
    position: relative;
  }

  .homepage .accent-picker__trigger::after {
    content: "What color are you feeling today?";
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: max-content;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid var(--frgd);
    background: var(--bkgd);
    color: var(--frgd);
    font-family: var(--font-meta);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    box-shadow: 2px 2px 0 var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 10000;
  }

  .homepage .accent-picker__trigger:hover::after,
  .homepage .accent-picker__trigger:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .homepage .accent-picker.is-open .accent-picker__trigger::after {
    opacity: 0;
    visibility: hidden;
  }
}

@media only screen and (max-width: 768px) {
  .accent-picker-item {
    position: relative;
    margin: 4px 4px 4px 2px !important;
    padding: 4px !important;
    display: flex;
    align-items: center;
    align-self: center;
  }

  .accent-picker__swatch {
    width: 22px;
    height: 22px;
  }

  .accent-picker__menu {
    top: calc(100% + 8px);
    gap: 6px;
  }
}

/* ============================================================
   Short page — question accordions (body#short only)
   ============================================================ */

body#short .sq {
    background: var(--bkgd);
    border: 2px solid var(--frgd);
    border-radius: 8px;
    box-shadow: 2px 2px var(--shadow);
    margin-bottom: var(--space-4);
    scroll-margin-top: 16px;
}

/* First card sits right under the logo slider, so it needs its own breathing room */
body#short .sq:first-of-type {
    margin-top: var(--space-7);
}

body#short .sq-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 16px;
    background: var(--action);
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    font-size: calc(1.125rem * var(--ds-font-scale));
    font-weight: 800;
    line-height: 1.2;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
}

body#short .sq-summary::-webkit-details-marker {
    display: none;
}

body#short .sq-summary::marker {
    content: "";
}

body#short .sq-summary:focus-visible {
    outline: 2px solid var(--frgd);
    outline-offset: 2px;
}

body#short .sq[open] .sq-summary {
    border-bottom: 2px solid var(--frgd);
    border-radius: 6px 6px 0 0;
}

body#short .sq-num {
    flex: none;
    opacity: 0.6;
}

body#short .sq-title {
    flex: 1;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
}

body#short .sq-icon {
    flex: none;
    position: relative;
    width: 16px;
    height: 16px;
}

body#short .sq-icon::before,
body#short .sq-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: var(--frgd);
    transition: transform 0.3s ease;
}

body#short .sq-icon::after {
    transform: rotate(90deg);
}

body#short .sq[open] .sq-icon::after {
    transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    body#short .sq-icon::before,
    body#short .sq-icon::after {
        transition: none;
    }
}

body#short .sq-body {
    padding: 22px 18px 28px;
    overflow: hidden;
    transition: height 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    body#short .sq-body {
        transition: none;
    }
}

body#short .sq-body p {
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif !important;
    font-size: calc(1.25rem * var(--ds-font-scale));
    font-weight: 400;
    text-align: left;
    line-height: 1.7;
    padding: 0 0 32px;
    max-width: var(--measure);
    letter-spacing: normal;
    hyphens: none !important;
}

body#short .sq-skills {
    margin: 0.35em 0 1.5em;
    padding: 0 0 0 1.1em;
    background: none;
    border: 0;
    border-radius: 0;
    list-style: disc;
    opacity: 0.72;
}

body#short .sq-skills li {
    padding: 0.15em 0;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
}

body#short .sq-body > p:last-child,
body#short .sq-body > .sq-rows:last-child,
body#short .sq-body > .sq-trio:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

body#short .sq-body .sq-eyebrow {
    font-size: 0.75rem;
    font-weight: 800;
    /* text-transform: uppercase; */
    letter-spacing: 0.08em;
    opacity: 0.65;
    padding-bottom: 0.6em;
}

/* Display lines use Bricolage Grotesque; body copy stays Inter. */
body#short .sq-body .sq-big,
body#short .sq-body .sq-statement,
body#short .sq-body .sq-row h4 {
    font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif !important;
}

body#short .sq-body .sq-big {
    font-size: clamp(1.75rem, 6vw, 4.35rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 16em;
    padding-bottom: 0.55em;
}

body#short .sq-body .sq-statement {
    font-size: clamp(1.35rem, 3.5vw, 1.7rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    max-width: 18em;
    padding-bottom: 0.7em;
}

body#short .sq-trio {
    display: grid;
    gap: 12px;
    padding: 0.4em 0 1.4em;
}

body#short .sq-trio-item {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0;
    align-items: stretch;
    background: var(--accent);
    border: 2px dashed var(--frgd);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

body#short .sq-trio-media {
    width: 88px;
    min-height: 88px;
    height: auto;
    align-self: stretch;
    flex: none;
    background: var(--bkgd);
    border: 0;
    border-right: 2px solid var(--frgd);
    border-radius: 0;
    overflow: hidden;
    display: block;
    padding: 0;
    margin: 0;
    line-height: 0;
}

body#short .sq-trio-media .CaseStudyAnimation {
    width: 100% !important;
    height: 100% !important;
    min-height: 88px;
    margin: 0 !important;
    padding: 0;
    background: var(--bkgd);
    line-height: 0;
}

body#short .sq-trio-media svg {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body#short .sq-trio-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 12px 14px;
}

body#short .sq-trio h4 {
    font-size: 0.8rem;
    font-weight: 800;
    /* text-transform: uppercase; */
    letter-spacing: 0.06em;
    padding: 0.45em;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
}

body#short .sq-trio p {
    font-size: calc(1.25rem * var(--ds-font-scale));
    font-weight: 400;
    line-height: 1.7;
    padding: 0;
    max-width: none;
}

@media only screen and (max-width: 480px) {
    body#short .sq-trio-item {
        grid-template-columns: 72px 1fr;
    }

    body#short .sq-trio-media {
        width: 72px;
        min-height: 72px;
    }

    body#short .sq-trio-media .CaseStudyAnimation {
        min-height: 72px;
    }

    body#short .sq-trio-copy {
        padding: 10px 12px;
    }
}

body#short .sq-rows {
    border-top: 2px dotted var(--frgd);
    margin: 0.4em 0 1.2em;
}

body#short .sq-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 1em 0;
    border-bottom: 2px dotted var(--frgd);
}

body#short .sq-row h4 {
    flex: none;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

body#short .sq-result-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

body#short .sq-company-logo {
    width: auto;
    max-width: 110px;
    height: 30px;
    object-fit: contain;
    object-position: right center;
}

body#short .sq-rec-carousel {
    margin: 0 0 1.4em;
    max-width: 520px;
    display: flex;
    flex-direction: column;
}

body#short .sq-rec-carousel .carouselControls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    margin: 10px 0 0;
    z-index: 1;
    position: relative;
    order: 2;
}

body#short .sq-rec-carousel .carouselControls button {
    border: 2px solid var(--frgd);
    background: var(--action);
    color: var(--frgd);
    border-radius: 50%;
    width: 36px;
    min-height: 36px;
    height: 36px;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-size: var(--text-body);
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: normal;
    font-family: "Inter", "Inter Fallback", "Inter Fallback R", sans-serif;
    transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

body#short .sq-rec-carousel .carouselControls button:hover {
    position: static;
    top: auto;
    left: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: scale(1.04);
}

body#short .sq-rec-carousel .carouselControls button:active:not(:disabled) {
    transform: scale(0.96);
}

body#short .sq-rec-carousel .carouselControls button:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    transform: none;
}

body#short .sq-rec-carousel .carouselControls button:focus-visible {
    outline: 2px solid var(--frgd);
    outline-offset: 2px;
}

body#short .sq-rec-carousel .carouselControls .sq-rec-see-all {
    width: auto;
    min-height: 32px;
    height: auto;
    border-radius: 20px;
    border: 2px solid var(--frgd);
    background: var(--action);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    /* text-transform: uppercase; */
    padding: 6px 12px;
    margin-left: auto;
}

body#short .sq-rec-carousel.is-show-all .sq-rec-prev,
body#short .sq-rec-carousel.is-show-all .sq-rec-next {
    display: none !important;
}

body#short .sq-rec-status {
    display: none;
}

body#short .sq-rec-viewport {
    position: relative;
    min-height: 10rem;
    order: 1;
}

body#short .sq-rec-carousel.is-show-all .sq-rec-viewport {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: min(70vh, 640px);
    overflow-y: auto;
}

body#short .sq-rec-carousel.is-show-all .singlerecomendation {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

body#short .sq-rec-carousel .singlerecomendation {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 0;
    align-items: end;
    margin: 0;
    max-width: none;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    inset: 0 auto auto 0;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

body#short .sq-rec-carousel .singlerecomendation.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
}

body#short .sq-rec-carousel .recommendationimage {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    position: static;
    left: auto;
    bottom: auto;
    flex: none;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 50%;
    opacity: 1;
    filter: grayscale(1);
    background-repeat: no-repeat;
    overflow: hidden;
}

body#short .sq-rec-carousel .recommendation {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.55;
    max-width: none;
    width: auto;
    margin: 0;
}

body#short .sq-rec-carousel .recommendationAuthor {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    padding: 6px 0 0;
    margin: 0;
    font-size: 0.95rem;
}

body#short .sq-rec-carousel .recommendationAuthorRole {
    grid-column: 2;
    grid-row: 3;
    width: auto;
    padding: 0;
    margin: 0;
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    body#short .sq-rec-carousel .singlerecomendation {
        transition: none;
    }
}

body#short .sq-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.4em;
}

body#short .sq-link {
    display: inline-flex;
    margin: 2px 8px 2px 0;
}

body#short .sq-body .contactMeShort {
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

body#short .sq-body .NDAsign {
    font-size: 0.95rem;
    line-height: 1.5;
}

body#short .sq-body .sq-email {
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.7;
}


/* Work page: mobile card layout */
body.workMobileCards .caseStudyLinkIcon {
  display: none;
}

@media only screen and (max-width: 768px) {
  body.workMobileCards .borderWrapper {
    padding: 8px 8px 16px;
  }

  body.workMobileCards .borderWrapper p {
    text-align: left;
    margin: 0 0 8px;
  }

  body.workMobileCards .mainHome > div {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 16px 24px;
    max-width: 560px;
    margin: 0 auto;
  }

  body.workMobileCards .CaseStudyWrapper,
  body.workMobileCards .CaseStudyWrapper:nth-child(odd) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 12px;
    background: var(--bkgd);
    border: 1px solid var(--frgd) !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 2px 2px var(--shadow);
    position: relative;
    text-align: left;
  }

  body.workMobileCards .CaseStudyWrapper:active {
    box-shadow: none;
    transform: translate(2px, 2px);
  }

  body.workMobileCards div.mainHome div div.CaseStudyAnimation,
  body.workMobileCards .CaseStudyAnimation {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 300px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 10px 0 56px;
    border: none;
    filter: none;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.25;
    background: var(--bkgd);
  }

  body.workMobileCards .CaseStudyAnimation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bkgd);
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 48%);
    mask-image: linear-gradient(to right, #000 0%, transparent 48%);
    pointer-events: none;
    z-index: 1;
  }

  body.workMobileCards .CaseStudyAnimation svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
  }

  body.workMobileCards .CaseStudyDescription,
  body.workMobileCards .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription {
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    position: relative;
    z-index: 1;
  }

  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .CaseStudyDescription {
    padding-top: 44px;
  }

  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .CaseStudyDescription > :not(a):not(.caseStudyLogo):not(.caseStudyLogoPair):not(.topKeyFigures) {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }

  body.workMobileCards .CaseStudyDescription *,
  body.workMobileCards .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription * {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.workMobileCards .caseStudyLogo,
  body.workMobileCards .caseStudyLogoPair,
  body.workMobileCards svg.CaseStudycompanyLogo {
    min-height: 24px;
    height: auto;
    width: auto;
    max-width: 72px;
    max-height: 32px;
    margin: 0 0 6px !important;
    object-fit: contain;
    object-position: left center;
  }

  body.workMobileCards .caseStudyLogoPair {
    max-width: 120px;
    max-height: none;
    gap: 6px 10px;
    min-height: 0;
  }

  body.workMobileCards .caseStudyLogoPair .caseStudyLogo {
    max-width: 56px;
    max-height: 24px;
    margin: 0 !important;
  }

  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogo,
  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogoPair,
  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) svg.CaseStudycompanyLogo {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    max-width: 56px;
    max-height: 28px;
    min-height: 0;
    margin: 0 !important;
  }

  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogoPair {
    max-width: 110px;
    max-height: none;
  }

  body.workMobileCards .CaseStudyDescription h2,
  body.workMobileCards div.CaseStudyDescription h2 {
    font-size: 1.1rem;
    line-height: 1.25;
    padding-top: 0;
    padding-bottom: 6px;
    margin-bottom: 0;
    letter-spacing: -0.02em;
  }

  body.workMobileCards .CaseStudyDescription .topKeyFigures {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.workMobileCards .CaseStudyDescription p {
    font-size: 0.88rem;
    line-height: 1.35;
    margin: 0 0 10px !important;
    padding-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.workMobileCards .CaseStudyDescription > .caseStudyUnavailable {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    opacity: 0.55;
    font-size: var(--text-functional-sm);
    margin: 0 !important;
  }

  body.workMobileCards .caseStudyRole {
    font-size: 0.75rem;
    margin: 0 0 6px !important;
    opacity: 0.8;
  }

  body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled .caseStudyLinkLabel {
    display: none;
  }

  body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled .caseStudyLinkIcon {
    display: inline-block;
  }

  body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled {
    position: absolute !important;
    top: 0px;
    right: 2px;
    margin: 0 !important;
    width: fit-content;
    min-width: 40px;
    padding: 6px !important;
    z-index: 4;
    text-align: center !important;
    align-self: auto;
    text-transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled {
    z-index: 2;
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    box-shadow: none;
  }

  body.workMobileCards article .CaseStudyDescription > a.contactMeLink {
    display: none !important;
  }

  body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled:hover {
    position: absolute !important;
    top: 0px;
    right: 2px;
    left: auto;
  }

  body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled .caseStudyLinkIcon {
    font-family: "Material Symbols Outlined", sans-serif;
    font-size: 24px;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    color: #1f1f1f;
    opacity: 0.45;
    user-select: none;
  }

  body.workMobileCards .CaseStudyWrapper.is-tappable {
    cursor: pointer;
  }

  body.workMobileCards .CaseStudyWrapper.is-tappable a.card-stretch,
  body.workMobileCards .CaseStudyWrapper.is-tappable a.card-stretch:hover,
  body.workMobileCards .CaseStudyWrapper.is-tappable a.card-stretch:active {
    left: auto;
  }

  body.workMobileCards article .CaseStudyDescription > a.disabled:not(.caseStudyLinkDisabled) {
    opacity: 0.55;
    pointer-events: none;
    box-shadow: none;
  }

  body.workMobileCards .CaseStudyWrapper.is-tappable > .CaseStudyDescription > a.card-stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
  }

  body.workMobileCards #workfooter {
    display: none;
  }

  body.workMobileCards .contactMe {
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
  }

  body.workMobileCards .ndaStrip {
    padding: 20px 16px;
  }
}

@media only screen and (max-width: 480px) {
  body.workMobileCards div.mainHome div div.CaseStudyAnimation,
  body.workMobileCards .CaseStudyAnimation {
    width: 100% !important;
    height: 256px !important;
    opacity: 0.25;
  }

  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogo,
  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogoPair,
  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) svg.CaseStudycompanyLogo {
    max-width: 48px;
    max-height: 24px;
    top: 12px;
    left: 12px;
  }

  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogoPair {
    max-width: 96px;
    max-height: none;
  }

  body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .CaseStudyDescription {
    padding-top: 40px;
  }
}

/* Case study content cards + carousels (Cense AI, AI Native UX, etc.) */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--frgd);
  user-select: none;
}

.cs-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  box-sizing: border-box;
  line-height: 1.45;
  text-align: left;
}

.main > .cs-cards,
.main > .caseStudyInProgress > .cs-cards {
  display: grid;
}

/* Stacked playing-card deck (enhanced .cs-cards) */
.cs-cards.is-deck {
  --cs-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.main > .cs-cards.is-deck,
.main > .caseStudyInProgress > .cs-cards.is-deck {
  display: flex;
}

.cs-cards__stack {
  display: grid;
  width: 100%;
  padding: 12px 16px 22px;
  box-sizing: border-box;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.cs-cards__stack:active {
  cursor: grabbing;
}

.cs-cards__stack.is-swiping {
  touch-action: none;
}

.cs-cards.is-deck > .cs-cards__stack > .cs-card {
  grid-area: 1 / 1;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch;
  transform: translate3d(var(--deck-x, 0px), var(--deck-y, 0px), 0)
    rotate(var(--deck-r, 0deg)) scale(var(--deck-s, 1));
  transform-origin: center center;
  z-index: var(--deck-z, 0);
  opacity: var(--deck-o, 1);
  pointer-events: none;
  transition:
    transform 0.45s var(--cs-ease),
    opacity 0.35s var(--cs-ease),
    box-shadow 0.35s var(--cs-ease);
  will-change: transform, opacity;
}

.cs-cards.is-deck > .cs-cards__stack > .cs-card.is-front {
  pointer-events: auto;
  box-shadow: 3px 4px 0 rgba(58, 66, 55, 0.14) !important;
}

.cs-cards.is-deck > .cs-cards__stack > .cs-card.is-dragging,
.cs-cards.is-deck > .cs-cards__stack > .cs-card.is-settling {
  transition: none;
}

.cs-cards.is-deck > .cs-cards__stack > .cs-card.is-exiting {
  pointer-events: none;
  opacity: 0;
  z-index: 40 !important;
}

.cs-cards__controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  margin: 10px 0 0;
  z-index: 2;
  position: relative;
}

.cs-cards.is-deck:not(.is-show-all) .cs-cards__controls .cs-carousel__prev,
.cs-cards.is-deck:not(.is-show-all) .cs-cards__controls .cs-carousel__next {
  display: none !important;
}

.cs-cards.is-deck.is-show-all .cs-cards__controls .cs-carousel__prev,
.cs-cards.is-deck.is-show-all .cs-cards__controls .cs-carousel__next {
  display: none !important;
}

.cs-cards.is-deck.is-show-all .cs-cards__stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  cursor: default;
  touch-action: auto;
  user-select: auto;
  -webkit-user-select: auto;
}

.cs-cards.is-deck.is-show-all .cs-cards__stack > .cs-card {
  grid-area: auto;
  position: relative;
  transform: none !important;
  opacity: 1 !important;
  z-index: auto !important;
  pointer-events: auto;
  box-shadow: 2px 2px 0 rgba(58, 66, 55, 0.1) !important;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .cs-cards.is-deck > .cs-cards__stack > .cs-card {
    transition: none;
  }
}

.main > .cs-carousel,
.main > .caseStudyInProgress > .cs-carousel {
  display: flex;
}

.cs-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 !important;
  padding: 16px;
  box-sizing: border-box;
  background: var(--accent) !important;
  border: 1px solid rgba(58, 66, 55, 0.16) !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 rgba(58, 66, 55, 0.1) !important;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.45;
  text-align: left;
  float: none;
  width: auto !important;
  max-width: none;
  z-index: auto;
}

/* Company logo accents inside case-study body (.main --caseAccent) */
.main .cs-card {
  border-color: color-mix(in srgb, var(--caseAccent, #3a4237) 32%, rgba(58, 66, 55, 0.16)) !important;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--caseAccent, #3a4237) 22%, transparent) !important;
}

.main .cs-card__heading > [class^="pixelart-icons-font-"],
.main .cs-card__heading > [class*=" pixelart-icons-font-"],
.main .cs-card__heading > .material-symbols-outlined {
  color: color-mix(in srgb, var(--caseAccent, var(--frgd)) 70%, var(--frgd));
}

.main .cs-stepper__tick.is-active .cs-stepper__tickMark {
  background: var(--caseAccent, var(--frgd));
}

.main .cs-stepper__tick.is-done .cs-stepper__tickMark {
  background: color-mix(in srgb, var(--caseAccent, var(--frgd)) 55%, transparent);
  opacity: 1;
}

.main .cs-pulls__line::before {
  color: color-mix(in srgb, var(--caseAccent, var(--frgd)) 75%, var(--frgd));
  opacity: 1;
}

.main .cs-pulls > li {
  border-top-color: color-mix(in srgb, var(--caseAccent) 28%, transparent);
}

.main .cs-pulls > li:last-child {
  border-bottom-color: color-mix(in srgb, var(--caseAccent) 28%, transparent);
}

.main .NDAsign {
  border-left: 3px solid var(--caseAccent, transparent);
}

.main .cs-roles {
  --cs-hair: color-mix(in srgb, var(--caseAccent) 28%, transparent);
  --cs-hair-soft: color-mix(in srgb, var(--caseAccent) 16%, transparent);
  --cs-tint: color-mix(in srgb, var(--caseAccent) 40%, transparent);
  --cs-role-tint: color-mix(in srgb, var(--caseAccent) 65%, var(--frgd) 35%);
}

.main li b {
  background: color-mix(in srgb, var(--caseAccent) 18%, transparent);
}

.main h4.caseStudyLabel {
  color: color-mix(in srgb, var(--caseAccent) 42%, var(--frgd));
}

.main .cs-tldr__pair > div {
  border-top-color: color-mix(in srgb, var(--caseAccent) 70%, var(--tldr-ink, var(--frgd)));
}

.main .qBand__cue {
  border-color: var(--q1);
  color: var(--q1);
}

.main .qBand__plus::before,
.main .qBand__plus::after {
  background: color-mix(in srgb, var(--caseAccent) 70%, var(--q1, var(--frgd)));
}

.cs-card__heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
}

.cs-card__heading > .material-symbols-outlined {
  width: 2.25rem;
  height: 2.25rem;
  padding: 8px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: var(--bkgd);
  border: 1.75px solid var(--border);
  font-size: calc(1.25rem * var(--ds-font-scale));
  flex-shrink: 0;
}

.cs-card .caseStudyLabel,
.cs-card h4,
.cs-card__heading .caseStudyLabel,
.cs-card__heading h4 {
  float: none !important;
  clear: none !important;
  display: block;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--frgd);
}

.cs-card__heading .caseStudyLabel,
.cs-card__heading h4 {
  flex: 1;
  min-width: 0;
}

.cs-card p {
  float: none !important;
  clear: none !important;
  display: block;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  font-size: var(--text-functional);
  line-height: 1.5;
  color: var(--frgd);
  text-align: left;
}

.cs-card .cs-card__meta {
  margin: 0;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* text-transform: uppercase; */
  opacity: 0.7;
  line-height: 1.2;
}

.cs-carousel {
  --cs-card-w: min(100%, 240px);
  --cs-gap: 12px;
  --cs-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --cs-track-w: 100%;
  display: flex;
  flex-direction: column;
  /* Allow the track to bleed past the content column (Apple-style peek) */
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  line-height: 1.45;
  text-align: left;
}

.cs-carousel__track {
  order: 1;
}

.cs-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  margin: 10px 0 0;
  z-index: 2;
  position: relative;
  order: 2;
}

.cs-carousel__see-all {
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 2px solid var(--frgd) !important;
  border-radius: 20px !important;
  background: var(--action) !important;
  color: var(--frgd) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  font-family: var(--font-meta) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  /* text-transform: uppercase; */
  padding: 6px 12px !important;
  min-height: 32px;
  width: auto !important;
  left: auto !important;
  top: auto !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.25s var(--cs-ease);
}

.cs-carousel__see-all:hover,
.cs-carousel__prev:hover:not(:disabled),
.cs-carousel__next:hover:not(:disabled) {
  left: auto !important;
  top: auto !important;
  position: static !important;
  /* The yellow ink-edged controls share the primary button's physics:
     an ink offset shadow as they lift, pressed flat on click. */
  box-shadow: 2px 3px 0 var(--frgd, #050038) !important;
  transform: translate(-1px, -1px) !important;
}

.cs-carousel__see-all:active,
.cs-carousel__prev:active:not(:disabled),
.cs-carousel__next:active:not(:disabled) {
  box-shadow: 0 0 0 var(--frgd, #050038) !important;
  transform: translate(1px, 1px) !important;
}

.cs-carousel__see-all {
  transition: opacity 0.25s var(--cs-ease), transform 0.15s ease, box-shadow 0.15s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .cs-carousel__see-all:hover,
  .cs-carousel__prev:hover:not(:disabled),
  .cs-carousel__next:hover:not(:disabled),
  .cs-carousel__see-all:active,
  .cs-carousel__prev:active:not(:disabled),
  .cs-carousel__next:active:not(:disabled) {
    transform: none !important;
  }
}

.cs-carousel__see-all:focus-visible,
.cs-carousel__prev:focus-visible,
.cs-carousel__next:focus-visible {
  outline: 2px solid var(--frgd);
  outline-offset: 2px;
}

.cs-carousel__prev,
.cs-carousel__next {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid var(--frgd) !important;
  border-radius: 50% !important;
  background: var(--action) !important;
  color: var(--frgd) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  cursor: pointer;
  font-size: 16px !important;
  line-height: 1 !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  left: auto !important;
  top: auto !important;
  position: static !important;
  transition: opacity 0.25s var(--cs-ease), transform 0.2s var(--cs-ease), box-shadow 0.25s var(--cs-ease);
}

.cs-carousel__prev:hover:not(:disabled),
.cs-carousel__next:hover:not(:disabled) {
  transform: scale(1.04);
}

.cs-carousel__prev:active:not(:disabled),
.cs-carousel__next:active:not(:disabled) {
  transform: scale(0.96);
}

.cs-carousel__prev:disabled,
.cs-carousel__next:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  transform: none;
}

.cs-carousel__track {
  display: block;
  /* JS sets --cs-track-w to (viewport right − track left) so cards peek on wide screens */
  width: var(--cs-track-w);
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
  padding: 4px 2px 4px;
  box-sizing: border-box;
}

/* Disable snap while we animate so the finish doesn’t “jump” */
.cs-carousel__track.is-scrolling {
  scroll-snap-type: none;
}

.cs-carousel__track::-webkit-scrollbar {
  display: none;
}

.cs-carousel__scroller {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: none;
  gap: var(--cs-gap);
  /* JS widens this so the last card can settle at the leading edge */
  padding-inline-end: var(--cs-end-pad, 8px);
  box-sizing: border-box;
}

.cs-carousel .cs-card {
  flex: 0 0 var(--cs-card-w);
  width: var(--cs-card-w);
  max-width: var(--cs-card-w);
  min-width: var(--cs-card-w);
  opacity: 0.92;
  transform: scale(0.985);
  transform-origin: center center;
  scroll-snap-align: start;
  transition: opacity 0.45s var(--cs-ease), transform 0.45s var(--cs-ease);
}

.cs-carousel .cs-card.is-inview {
  opacity: 1;
  transform: scale(1);
}

.cs-carousel.is-show-all .cs-carousel__prev,
.cs-carousel.is-show-all .cs-carousel__next {
  display: none !important;
}

.cs-carousel.is-show-all .cs-carousel__track {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 4px;
}

.cs-carousel.is-show-all {
  --cs-track-w: 100%;
  --cs-end-pad: 0px;
  overflow-x: hidden;
}

.cs-carousel.is-show-all .cs-carousel__scroller {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
  gap: var(--cs-gap);
  padding: 0;
}

.cs-carousel.is-show-all .cs-card {
  flex: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  opacity: 1;
  transform: none;
  scroll-snap-align: unset;
}

@media (min-width: 700px) {
  .cs-cards:not(.is-deck) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .cs-cards.is-deck:not(.is-show-all) .cs-cards__controls .cs-carousel__prev,
  .cs-cards.is-deck:not(.is-show-all) .cs-cards__controls .cs-carousel__next {
    display: inline-flex !important;
  }

  .cs-cards.is-deck.is-show-all .cs-cards__stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .cs-carousel {
    --cs-card-w: 220px;
    --cs-gap: 14px;
  }

  .cs-carousel.is-show-all .cs-carousel__scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .cs-carousel {
    --cs-card-w: min(100%, 220px);
    --cs-gap: 10px;
  }

  .cs-carousel__prev,
  .cs-carousel__next {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .cs-cards:not(.is-deck) {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cs-cards__stack {
    padding: 10px 12px 18px;
  }
}

/* =========================================================================
   Private-beta assistant band — case study section that opens in place.
   Self-contained colour system: independent of the accent themes, which are
   all light. Text-bearing areas stay on --q1/--q2 (white ≥ 9.96:1).
   ========================================================================= */
.main > .qBand {
    --q1: #340B8C;   /* ground — all text sits here */
    --q2: #4811BF;   /* ground end / raised */
    --q3: #7226F3;   /* decorative */
    --q4: #8461F4;   /* borders, rules, icons (3.18:1 — non-text only) */
    --q5: #99A6F2;   /* light accent — decorative on dark */
    --q-text: #FFFFFF;      /* 13.35:1 on --q1 */
    --q-dim: #B8C2F5;       /* 7.68:1 on --q1, 5.73:1 on --q2 */
    --q-link: #EDEFFD;      /* 11.68:1 */
    --q-raised: rgba(255, 255, 255, 0.07);
    --q-hair: rgba(255, 255, 255, 0.16);
    --q-ease: cubic-bezier(0.25, 0.8, 0.3, 1);
    /* Mark block height: the right column starts level with the kicker,
       so the lede offset is derived from these rather than guessed. */
    --q-mark: 56px;
    --q-mark-gap: 20px;

    float: none;
    clear: both;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    width: var(--vw, 100vw);
    max-width: var(--vw, 100vw);
    margin: 96px 0 0 calc(50% - var(--vw, 100vw) / 2);
    background: var(--q1);
    color: var(--q-text);
    /* clip, not hidden: `hidden` makes this a scroll container, and any
       scrollIntoView / #assistant anchor jump then scrolls the band's own
       content out of alignment. `clip` clips without being scrollable. */
    overflow: hidden;
    overflow: clip;
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;
    line-height: 1.6;
}

.qBand__inner {
    position: relative;
    z-index: 1;
    /* Match .main’s content box (max-width 800px, no extra inset) so
       column % widths line up with the rest of the case study. */
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 0 76px;
    box-sizing: border-box;
}

/* Padding lives on the inner wrapper so collapsed and expanded read the same. */
.qBand__head {
    padding: 76px 0 0;
}
.qBand__head::after {
    content: "";
    display: table;
    clear: both;
}

/* Left column: brand + section title (same math as .main > h2) */
.qBand__intro {
    float: left;
    clear: both;
    box-sizing: border-box;
    width: calc(var(--heading-col) - var(--gap) / 2);
    max-width: none;
    min-width: 0;
    text-align: end;
}

.qBand__mark {
    display: block;
    width: var(--q-mark);
    height: var(--q-mark);
    margin: 0 0 var(--q-mark-gap) auto;
}

.qBand__kicker {
    margin: 0 0 12px;
    font-size: var(--text-meta);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--q-dim);
    text-align: end;
    font-family: var(--font-meta);
}

.qBand .qBand__title {
    margin: 0;
    padding: 0 0 0.35rem;
    width: 100%;
    text-align: end;
    font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1px;
    color: var(--q-text);
}

/* Right column: body copy, CTAs, cards (same math as .main > p / h3 / .cs-cards).
   Width/offset shared; vertical rhythm is set per role below so related
   blocks sit closer and section breaks open up. */
.qBand .qBand__lede,
.qBand .qBand__pull,
.qBand .qBand__body,
.qBand .qBand__lead,
.qBand .qBand__subhead,
.qBand .qBand__close,
.qBand .qBand__handoff,
.qBand .cs-cards,
.qBand ol.cs-stepper,
.qBand ol.cs-pulls {
    box-sizing: border-box;
    display: flow-root;
    width: calc(var(--content-col) - var(--gap) / 2);
    max-width: none;
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
}

/* Keep flex so track/controls order + Apple-style bleed match .main carousels */
.qBand .cs-carousel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: calc(var(--content-col) - var(--gap) / 2);
    max-width: none;
    margin: 0.75rem 0 1.5rem;
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
    overflow: visible;
}

.qBand .qBand__lede {
    margin-top: calc(var(--q-mark) + var(--q-mark-gap));
    margin-bottom: 0;
    font-size: calc(1.125rem * var(--ds-font-scale));
    line-height: 1.5;
    color: var(--q-text);
    text-align: left;
}
.qBand__lede strong { font-weight: 700; }

.qBand__trigger {
    display: block;
    clear: both;
    box-sizing: border-box;
    width: fit-content;
    max-width: calc(var(--content-col) - var(--gap) / 2);
    margin: 1.25rem 0 0;
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--q1);
    font: inherit;
    cursor: pointer;
}
/* Lives after the panel in the DOM: collapsed panel is 0fr so the CTA
   still sits under the lede; open, it becomes the Close control at the end. */
.qBand[data-open="true"] .qBand__trigger { margin-top: 2.25rem; }
.qBand__trigger:focus-visible { outline: 2px solid var(--q5); outline-offset: 6px; border-radius: 999px; }

/* Inverted pill: solid light on --q1 so the CTA reads above the ground. */
.qBand__cue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--q1);
    background: var(--q-text);
    border: 1px solid var(--q1);
    border-radius: 999px;
    padding: 9px 16px;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.qBand__trigger:hover .qBand__cue {
    background: var(--q-link);
    border-color: var(--q1);
    color: var(--q1);
}

.qBand__plus { position: relative; width: 11px; height: 11px; flex: none; }
.qBand__plus::before,
.qBand__plus::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--q1);
    transform: translateY(-50%);
    transition: transform .4s var(--q-ease), opacity .3s ease;
}
.qBand__plus::after { transform: translateY(-50%) rotate(90deg); }
.qBand[data-open="true"] .qBand__plus::after { transform: translateY(-50%) rotate(0deg); }

/* ---- The expanding panel ---- */
.qBand__wrap {
    clear: both;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .68s var(--q-ease);
}
.qBand[data-open="true"] .qBand__wrap { grid-template-rows: 1fr; }
.qBand__panel { overflow: hidden; min-height: 0; }
/* After open settles, JS sets overflow:visible so the carousel can peek
   past the content column (same Apple-style bleed as the rest of the page). */
.qBand__panel.is-bleed { overflow: visible; }
.qBand__panelInner { padding: 28px 0 0; }

/* No JS: the story is open and readable. Gated on a root flag set by an inline
   head script, so the panel never paints open and then collapses. */
html:not([data-js]) .qBand__wrap { grid-template-rows: 1fr; }
html:not([data-js]) .qBand__cue { display: none; }
html:not([data-js]) .qBand__trigger { cursor: default; }
html:not([data-js]) .qBand :is(
    .cs-cards, .cs-carousel, .cs-stepper__ui, ol.cs-stepper, ol.cs-pulls,
    .qBand__pull, .qBand__body, .qBand__lead, .qBand__subhead,
    .qBand__demo, .qBand__caption, .qBand__chapter, .qBand__close, .qBand__handoff
) {
    opacity: 1;
    transform: none;
}

/* ---- Case-study cards / stepper / pulls inside the band ---- */
.qBand .cs-cards,
.qBand .cs-carousel,
.qBand .cs-stepper__ui,
.qBand ol.cs-pulls {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s var(--q-ease);
}
.qBand .cs-cards,
.qBand ol.cs-stepper,
.qBand .cs-stepper__ui,
.qBand ol.cs-pulls {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}
.qBand[data-open="true"] .cs-cards,
.qBand[data-open="true"] .cs-carousel,
.qBand[data-open="true"] .cs-stepper__ui,
.qBand[data-open="true"] ol.cs-pulls {
    opacity: 1;
    transform: none;
}
.qBand[data-open="true"] .qBand__lead + .cs-cards { transition-delay: .44s; }
.qBand[data-open="true"] .qBand__subhead + .cs-carousel { transition-delay: .28s; }
.qBand[data-open="true"] .qBand__subhead + .cs-cards { transition-delay: .36s; }
.qBand[data-open="true"] .qBand__subhead + .cs-stepper__ui,
.qBand[data-open="true"] .qBand__subhead + ol.cs-stepper + .cs-stepper__ui { transition-delay: .28s; }
.qBand[data-open="true"] .qBand__subhead + ol.cs-pulls { transition-delay: .36s; }

.qBand .cs-card {
    background: var(--q2) !important;
    border: 1px solid var(--q-hair) !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22) !important;
    color: var(--q-text);
}

.qBand .cs-cards.is-deck > .cs-cards__stack > .cs-card.is-front {
    box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.28) !important;
}

.qBand .cs-card .caseStudyLabel,
.qBand .cs-card h4,
.qBand .cs-card__heading .caseStudyLabel,
.qBand .cs-card__heading h4,
.qBand .cs-card p,
.qBand .cs-card .cs-card__meta {
    color: var(--q-text);
}

.qBand .cs-card p {
    color: var(--q-dim);
}

.qBand .cs-card .cs-card__meta {
    color: var(--q5);
    opacity: 1;
}

/* Pixelarticons in the same badge geometry as Material on .cs-card */
.qBand .cs-card__heading > [class^="pixelart-icons-font-"],
.qBand .cs-card__heading > [class*=" pixelart-icons-font-"] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 8px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.75px solid var(--q4);
    color: var(--q5);
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.qBand .cs-carousel__prev,
.qBand .cs-carousel__next,
.qBand .cs-carousel__see-all,
.qBand .cs-cards__controls .cs-carousel__prev,
.qBand .cs-cards__controls .cs-carousel__next,
.qBand .cs-cards__controls .cs-carousel__see-all {
    background: var(--q-raised) !important;
    border-color: var(--q4) !important;
    color: var(--q-text) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

.qBand .cs-carousel__see-all:hover,
.qBand .cs-carousel__prev:hover:not(:disabled),
.qBand .cs-carousel__next:hover:not(:disabled),
.qBand .cs-cards__controls .cs-carousel__see-all:hover,
.qBand .cs-cards__controls .cs-carousel__prev:hover:not(:disabled),
.qBand .cs-cards__controls .cs-carousel__next:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: var(--q5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

.qBand .cs-carousel__see-all:focus-visible,
.qBand .cs-carousel__prev:focus-visible,
.qBand .cs-carousel__next:focus-visible {
    outline-color: var(--q5);
}

.qBand .cs-carousel__prev .material-symbols-outlined,
.qBand .cs-carousel__next .material-symbols-outlined {
    color: var(--q-text);
    font-size: calc(1.125rem * var(--ds-font-scale));
}

/* Stepper + pulls: page tokens (--frgd/--bkgd/--border) are for the light
   column; recolour them so they read on --q1 instead of vanishing into it. */
.qBand .cs-stepper__count,
.qBand .cs-stepper__ordinal {
    color: var(--q-dim);
}
.qBand .main .cs-stepper__prev,
.qBand .main .cs-stepper__next,
.qBand .cs-stepper__prev,
.qBand .cs-stepper__next {
    border-color: var(--q-hair) !important;
    background: var(--q-raised);
    color: var(--q-text);
    box-shadow: none;
}
.qBand .cs-stepper__prev:hover:not(:disabled),
.qBand .cs-stepper__next:hover:not(:disabled) {
    border-color: var(--q5) !important;
    box-shadow: 2px 3px 0 var(--q5);
}
.qBand .cs-stepper__prev:disabled,
.qBand .cs-stepper__next:disabled {
    opacity: 0.35;
}
.qBand .cs-stepper__prev .material-symbols-outlined,
.qBand .cs-stepper__next .material-symbols-outlined {
    color: var(--q-text);
}
.qBand .cs-stepper__track::before {
    background: var(--q-hair);
}
.qBand .cs-stepper__tickMark {
    background: var(--q-hair);
}
.qBand .cs-stepper__tick.is-done .cs-stepper__tickMark {
    background: var(--q5);
    opacity: 1;
}
.qBand .cs-stepper__tick.is-active .cs-stepper__tickMark {
    background: var(--q-text);
}
.qBand button.cs-stepper__tick:focus-visible {
    outline-color: var(--q5);
}
.qBand .cs-stepper__panel h4.caseStudyLabel,
.qBand .cs-stepper__panel p {
    color: var(--q-text);
}
.qBand .cs-stepper__panel p:not(.cs-stepper__ordinal) {
    color: var(--q-dim);
}
.qBand ol.cs-pulls > li {
    border-color: var(--q-hair);
}
/* The page-wide size tops out at 1.5rem, above the subhead that introduces
   these lines; inside the band they sit a step below it. */
.qBand .cs-pulls__line {
    font-size: var(--text-lead);
    line-height: 1.35;
    color: var(--q-text);
}
.qBand .cs-pulls__line::before {
    color: var(--q-dim);
    opacity: 1;
}
.qBand ol.cs-pulls > li > p:not(.cs-pulls__line) {
    color: var(--q-dim);
}

/* Page-wide text-align: justify stretches short headings; keep band copy ragged. */
.qBand h4,
.qBand .qBand__caption,
.qBand .cs-pulls__line,
.qBand .cs-stepper__panel,
.qBand .cs-stepper__panel p,
.qBand ol.cs-pulls p { text-align: left; }
.qBand .qBand__caption { text-align: center; }

/* ---- Extended narrative blocks ----
   Scale, largest down (site tokens): title --text-h2, pull --text-h3, subhead
   --text-h4, lede and pull-quote lines --text-lead, body --text-body,
   card titles 0.9.
   Spacing: room above section starts; a lead-in, a caption or a handoff sits
   tight to the block it belongs to, so pairs read as units. */
.qBand .qBand__pull {
    hyphens: manual;
    -webkit-hyphens: manual;
    margin-top: 0;
    margin-bottom: 1.75rem;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--q-text);
    text-align: left;
    padding-left: 18px;
    border-left: 2px solid var(--q5);
}

.qBand .qBand__body {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--q-dim);
    text-align: left;
}

/* A sentence that introduces the cards, so it stays at body size and reads
   as copy — at label size it was indistinguishable from the card titles. */
.qBand .qBand__lead {
    margin-top: 2rem;
    margin-bottom: 0.65rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--q-text);
    text-align: left;
}

/* Section starts are marked by the rule, not by size: the pull quote is set
   in the same face and weight, so size alone left the two reading as peers. */
.qBand .qBand__subhead {
    margin-top: 3rem;
    margin-bottom: 0.75rem;
    padding: 1.25rem 0 0;
    background: none;
    border-top: 1px solid var(--q-hair);
    border-radius: 0;
    letter-spacing: 0.01em;
    font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;
    font-size: calc(1.25rem * var(--ds-font-scale));
    font-weight: 600;
    line-height: 1.25;
    color: var(--q-text);
    text-align: left;
}

/* Encapsulates a self-contained chapter (heading + its interactive body)
   so it reads as a unit off the purple ground — not another free-floating
   block in the same stack as the caption above it. */
.qBand__chapter {
    box-sizing: border-box;
    width: calc(var(--content-col) - var(--gap) / 2);
    max-width: none;
    margin: 3.5rem 0 0;
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
    padding: 28px 28px 24px;
    background: var(--q-raised);
    border: 1px solid var(--q-hair);
    border-radius: 16px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s var(--q-ease);
}
.qBand[data-open="true"] .qBand__chapter {
    opacity: 1;
    transform: none;
    transition-delay: .48s;
}
/* Extra air after the demo caption: the chapter is a new beat, not a
   continuation of the frame note above it. */
.qBand .qBand__caption + .qBand__chapter {
    margin-top: 4.5rem;
}
.qBand__chapter .qBand__subhead {
    width: 100%;
    max-width: none;
    margin: 0 0 1rem;
    margin-left: 0;
    padding: 0;
    border-top: 0;
}
.qBand__chapter .cs-stepper,
.qBand__chapter .cs-stepper__ui {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-left: 0;
}
/* The shell carries the reveal; children stay solid so the chapter reads as
   one arriving unit rather than a nested stagger. */
.qBand__chapter .qBand__subhead,
.qBand__chapter .cs-stepper__ui,
.qBand__chapter ol.cs-stepper {
    opacity: 1;
    transform: none;
}

.qBand .qBand__handoff {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--text-body);
    font-style: italic;
    line-height: 1.5;
    color: var(--q-dim);
    text-align: left;
}

/* Staggered reveal shared by every block inside the panel */
.qBand__pull,
.qBand__body,
.qBand__lead,
.qBand__subhead,
.qBand__caption,
.qBand__close,
.qBand__handoff {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s var(--q-ease);
}
.qBand[data-open="true"] :is(
    .qBand__pull, .qBand__body, .qBand__lead, .qBand__subhead,
    .qBand__caption, .qBand__close, .qBand__handoff
) { opacity: 1; transform: none; }
.qBand[data-open="true"] .qBand__pull      { transition-delay: .24s; }
.qBand[data-open="true"] .qBand__body      { transition-delay: .32s; }
.qBand[data-open="true"] .qBand__lead      { transition-delay: .38s; }
.qBand[data-open="true"] .qBand__subhead   { transition-delay: .20s; }
/* Arrives with the frame it describes, which fades in at .42s. */
.qBand[data-open="true"] .qBand__caption   { transition-delay: .50s; }

/* ---- Demo + closing note ---- */
/* qBand__demo keeps its own full-inner width and spacing on purpose. */
.qBand__demo {
    margin: 2.75rem 0 0;
    border: 1px solid var(--q4);
    border-radius: 16px;
    overflow: hidden;
    background: var(--q1);
    opacity: 0;
    transform: translateY(20px) scale(.985);
    transition: opacity .7s ease, transform .7s var(--q-ease);
}
.qBand[data-open="true"] .qBand__demo { opacity: 1; transform: none; transition-delay: .42s; }
.qBand__demo .LatestDemo { display: block; }

/* Belongs to the demo, so it takes the demo's full-inner width. In the
   offset content column a centred caption sat off-centre under the frame. */
.qBand .qBand__caption {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0.75rem 0 0;
    font-size: var(--text-functional);
    letter-spacing: 0;
    line-height: 1.45;
    text-align: center;
    color: var(--q-dim);
    font-family: var(--font-text);
}

.qBand__close {
    margin-top: 2.75rem;
    margin-bottom: 0.65rem;
    padding: 20px 24px;
    background: var(--q-raised);
    border-left: 2px solid var(--q5);
    border-radius: 0 12px 12px 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--q-text);
    text-align: left;
}
.qBand__close strong { font-weight: 700; }

@media (max-width: 768px) {
    .qBand__inner {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 52px;
    }
    .qBand__head { padding-top: 52px; }
    .qBand__panelInner { padding-top: 24px; }

    .qBand__intro,
    .qBand .qBand__lede,
    .qBand .qBand__pull,
    .qBand .qBand__body,
    .qBand .qBand__lead,
    .qBand .qBand__subhead,
    .qBand .qBand__caption,
    .qBand .qBand__close,
    .qBand .qBand__handoff,
    .qBand .qBand__chapter,
    .qBand .cs-cards,
    .qBand .cs-carousel,
    .qBand ol.cs-stepper,
    .qBand .cs-stepper__ui,
    .qBand ol.cs-pulls,
    .qBand__trigger {
        float: none;
        clear: both;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .qBand__intro,
    .qBand .qBand__title,
    .qBand__kicker {
        text-align: left;
    }

    .qBand__mark {
        margin-left: 0;
        margin-right: auto;
    }

    .qBand .qBand__title {
        font-size: 1.5rem;
    }

    .qBand .qBand__lede {
        margin-top: 0.75rem;
        margin-bottom: 0;
    }

    .qBand .qBand__subhead {
        margin-top: 2.5rem;
        padding-top: 1rem;
    }

    .qBand .qBand__caption + .qBand__chapter {
        margin-top: 3.25rem;
    }

    .qBand__chapter {
        padding: 22px 18px 18px;
    }

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

    .main > .qBand { margin-top: var(--space-9); margin-bottom: 0; }
}

@media (max-width: 900px) {
    .main > .qBand { margin-top: var(--space-9); margin-bottom: 0; }
    .qBand__inner { padding-bottom: 52px; }
    .qBand__head { padding-top: 52px; }
    .qBand__panelInner { padding-top: 24px; }
    .qBand .qBand__title { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .qBand__wrap,
    .qBand .cs-cards,
    .qBand .cs-carousel,
    .qBand .cs-stepper__ui,
    .qBand ol.cs-pulls,
    .qBand__demo,
    .qBand__pull,
    .qBand__body,
    .qBand__lead,
    .qBand__subhead,
    .qBand__caption,
    .qBand__chapter,
    .qBand__close,
    .qBand__handoff,
    .qBand__plus::before,
    .qBand__plus::after { transition: none !important; }
    .qBand .cs-cards,
    .qBand .cs-carousel,
    .qBand .cs-stepper__ui,
    .qBand ol.cs-pulls,
    .qBand__demo,
    .qBand__pull,
    .qBand__body,
    .qBand__lead,
    .qBand__subhead,
    .qBand__caption,
    .qBand__chapter,
    .qBand__close,
    .qBand__handoff { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   Scroll-driven highlights  (opt-in, desktop only)
   -------------------------------------------------------------------------
   <mark> wraps the load-bearing sentence in a block. It is inert by default:
   the marks stay in the markup for semantics, but render as plain text until
   the reader turns the highlighter on from the pen toggle under the colour
   switcher, and only ever on desktop.

   When on, each band sweeps in like a highlighter pen as the line scrolls
   into view, using animation-timeline: view().

   The band is always #E2F442 with fixed dark ink. The ink is fixed rather
   than inherited because the short version re-themes its text colour per
   theme, and orange or red type on a chartreuse band is unreadable; #2E2E2E
   holds 11.2:1 against the band everywhere, on every theme and inside the
   dark assistant panel.

   Browsers without scroll-driven animation, and anyone who has asked for
   reduced motion, get the finished highlight instead of a sweep.
   ========================================================================= */

/* Off state, and the whole of mobile: no band at all. Also overrides the
   browser default of black-on-yellow. */
mark {
    background: none;
    color: inherit;
}

@media only screen and (min-width: 769px) {

    [data-highlights="on"] mark {
        color: #2E2E2E;
        background-color: transparent;
        background-image: linear-gradient(to right,
            #E2F442 0 50%, transparent 50% 100%);
        background-repeat: no-repeat;
        background-size: 200% 100%;
        background-position: 0% 0;          /* settled state: fully drawn */
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        padding-inline: 0.14em;
        margin-inline: -0.14em;             /* cancels the padding, so
                                               surrounding text never shifts */
        border-radius: 0.15em;
    }

    /* Case-study body: highlighter band picks up the company logo accent */
    [data-highlights="on"] .main mark {
        background-image: linear-gradient(to right,
            color-mix(in srgb, var(--caseAccent, #E2F442) 42%, #fff4a8) 0 50%,
            transparent 50% 100%);
    }

    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            [data-highlights="on"] mark {
                animation: rg-mark-sweep linear both;
                animation-timeline: view();
                animation-range: cover 32% cover 58%;
            }
        }
    }

    /* A view() timeline resolves against the nearest scroll container, not
       the page — so inside a clipped box (a line-clamped card, a collapsed
       fold, a carousel track) the sweep either never starts or freezes at
       whatever progress that box happens to sit at, which can strand a band
       half-drawn. These opt out and render settled. */
    [data-highlights="on"] .chat-container mark,
    [data-highlights="on"] .load-more mark,
    [data-highlights="on"] .dictionarySnippet mark,
    [data-highlights="on"] .CaseStudyDescription mark,
    [data-highlights="on"] #carouselBlocks mark,
    [data-highlights="on"] .s-fold-body mark,
    [data-highlights="on"] .sq-trio-item mark,
    [data-highlights="on"] .sq-rec-carousel mark,
    [data-highlights="on"] .qBand__panel mark,
    [data-highlights="on"] .cs-carousel__track mark,
    [data-highlights="on"] .homeAssistant mark,
    [data-highlights="on"] .sq-rows mark {
        animation: none;
        background-position: 0% 0;
    }

    /* Homepage intro logos (AWS / ABB / FNZ only): keep the highlighter
       band on the inline brand marks without shifting surrounding text. */
    [data-highlights="on"] mark:has(> .intro-company-logo) {
        display: inline-flex;
        align-items: center;
        vertical-align: text-bottom;
        line-height: 0;
        padding-block: 0.12em;
    }
}

@keyframes rg-mark-sweep {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}


/* =========================================================================
   Highlighter toggle
   -------------------------------------------------------------------------
   The Stabilo Boss photo is the control: no button chrome, no circle, no
   shadow — just a small highlighter in the bottom-right, rotated 22.5°
   left (counter-clockwise) from the source shot.

   Desktop only, because the feature it switches is desktop only.

   Switching on lights the pen with a glow in its own colour, which is the
   entire difference between the two states.
   ========================================================================= */

.highlight-toggle-item {
    display: none;
}

@media only screen and (min-width: 769px) {

    .highlight-toggle-item {
        display: block;
        list-style: none;
        border: none !important;
        position: fixed;
        bottom: -60px;
        right: -12px;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999 !important;
        transition: bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .highlight-toggle-item:has(.highlight-toggle[aria-pressed="true"]) {
        bottom: 20px;
    }

    @media (prefers-reduced-motion: reduce) {
        .highlight-toggle-item {
            transition: none;
        }
    }

    .highlight-toggle {
        display: block;
        width: 90px;
        height: 90px;
        padding: 0;
        border: 0;
        background: none;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .highlight-toggle img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: rotate(-45deg);
        transition: filter 0.2s ease;
        pointer-events: none;
        user-select: none;
    }

    /* Lifts a little on hover. */
    .highlight-toggle:hover,
    .highlight-toggle:focus-visible {
        transform: translateY(-4px);
        outline: none;
    }

    .highlight-toggle[aria-pressed="true"] img {
        filter: drop-shadow(0 0 2px rgba(255, 237, 0, 1))
                drop-shadow(0 0 6px rgba(255, 237, 0, 0.95))
                drop-shadow(0 0 14px rgba(255, 237, 0, 0.85));
    }

    /* No box to outline, so the focus ring goes on the element itself. */
    .highlight-toggle:focus-visible {
        outline: 2px solid var(--frgd);
        outline-offset: 4px;
        border-radius: 4px;
    }

    body#short .highlight-toggle:focus-visible {
        outline-color: var(--s-ink);
    }

    /* Homepage tooltip sits to the left of the pen. */
    .homepage .highlight-toggle {
        position: relative;
    }

    .homepage .highlight-toggle::after {
        content: "Highlighted version";
        position: absolute;
        top: 50%;
        bottom: auto;
        right: calc(100% + 12px);
        left: auto;
        width: max-content;
        max-width: 220px;
        padding: 8px 12px;
        border-radius: 8px;
        border: 2px solid var(--frgd);
        background: #E2F442;
        color: var(--frgd);
        font-family: var(--font-meta);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;
        letter-spacing: 0;
        text-align: left;
        white-space: normal;
        box-shadow: 2px 2px 0 var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translate(4px, -50%);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
        z-index: 10000;
    }

    .homepage .highlight-toggle:hover::after,
    .homepage .highlight-toggle:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }
}

.section-appear {
    opacity: 0;
    transform: translateY(42px);
}

.section-appear.is-appeared {
    opacity: 1;
    transform: none;
    transition:
        opacity 1.4s ease,
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--appear-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .section-appear,
    .section-appear.is-appeared {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Slow-connection scaffolding
   --------------------------------------------------------------------------- */

/* Material Symbols as inline SVG (no ~300 KB icon font, no "arrow_back" text
   flashing while it loads). The glyphs keep the .material-symbols-outlined
   class, so every rule written for the font still sizes them: 1em is the old
   glyph box, and the glyph sits on the baseline exactly like the font did. */
svg.material-symbols-outlined {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  overflow: visible;
}

/* Lazy iframes (demos, diagrams) show a soft shimmer in their reserved box
   until their document has loaded; each iframe marks itself with an inline
   onload, so there is no race with any script. */
iframe[loading="lazy"]:not(.is-loaded) {
  background:
    linear-gradient(100deg,
      transparent 30%,
      color-mix(in srgb, var(--bkgd, #fff) 70%, transparent) 50%,
      transparent 70%) 0 0 / 250% 100% no-repeat,
    color-mix(in srgb, var(--border, #e1e0e7) 38%, var(--bkgd, #fff));
  animation: rg-skeleton-shimmer 1.6s linear infinite;
}

@keyframes rg-skeleton-shimmer {
  from { background-position: 125% 0, 0 0; }
  to { background-position: -125% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  iframe[loading="lazy"]:not(.is-loaded) {
    animation: none;
  }
}