@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

#toolset {
	display: none;
}

body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 2.5em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 1em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: 2rem;
    vertical-align: bottom;
}

[image-gallery="slideshow"] {
    margin-bottom: 2rem;
}

.gallery_image_caption {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.30);
	font-family: "Monument Grotesk Mono", Icons;
	font-style: normal;
	line-height: 1.2;	
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.4rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	line-height: 1.2;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 0.75);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 3rem;
	line-height: 1.1;
	color: rgba(0, 0, 0, 0.75);
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.75);
}

[data-predefined-style="true"] h2 {
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.75);
	font-size: 2rem;
	line-height: 1.2;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.75);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.2;
	font-family: "Monument Grotesk Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.3);
	font-variation-settings: 'slnt' 0, 'MONO' 1;
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.75);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: transparent /*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_center*/;
}

[data-css-preset] .content_padding {
	padding-top: 3rem /*!main_margin*/;
	padding-bottom: 3rem /*!main_margin*/;
	padding-left: 3rem /*!main_margin*/;
	padding-right: 3rem /*!main_margin*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: transparent/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0.75rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -1.5rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1.0rem;
    margin-bottom: 0.7rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: .8rem;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.3);
	font-family: "Monument Grotesk Mono", Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: -0.5rem;
}

/**
 * Site Menu Button
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 22px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
	right: 3rem /*!site_menu_button*/;
	top: 3rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 24px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}


/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 1rem /*!shop_button*/;
	left: 1.5rem /*!shop_button*/;
}

#shop_button.text {
    font-size: 1.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	font-family: Diatype, Icons;
    padding: 0;
    line-height: 1.3;
	font-style: normal;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 40px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: Diatype, Icons;
	font-size: 1.6rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.75);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .dropdown {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.3;
    padding: .7rem 2.5rem .8rem 1rem;
	font-style: normal;
	font-weight: 400;
    color: rgba(0, 0, 0, 0.75);
}

.shop_product .button {
	font-family: Diatype, Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.75);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1.3;
    padding: .8rem 1rem .9rem;
	font-style: normal;
	font-weight: 700;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}

[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: "Monument Grotesk Mono", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.4rem;
	font-style: normal;
	font-weight: 400;
    line-height: 1.2;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.4);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.4rem;
    line-height: 1.2;
	font-family: Diatype, Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

/* ==== Thumbnail System ==== */

.thumbnail {
  border-radius: 16px;
  overflow: hidden;
}

.thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  transform-origin: center center;
  transition: transform 0.35s ease;
}

.thumbnail:hover img {
  transform: scale(1.015);
}

@media (hover: none) {
  .thumbnail:hover img {
    transform: none;
  }
}

/* Hide thumbnail navigation only on project detail pages */
body:not(.homepage) div[data-set="GlobalThumbnails"] {
    display: none !important;
}

/* Alternative: target the overlay container */
.pinned_top .page_container.overlay {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
}

/* Move fixed header from bottom to top */
.pinned_bottom {
    top: 0 !important;
    bottom: auto !important;
}

/* Sticky header - force fixed positioning */
div[data-view="pinned_top"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    background-color: #ffffff !important;
}

div[data-view="pinned_top"] .page_container {
    position: relative !important;
    pointer-events: auto !important;
}

/* Add top padding to body so content doesn't hide behind fixed header */
.main_container {
    padding-top: 0px !important;
}

/* Add spacing between page nav and footer */
div[data-view="pinned_bottom"] {
    margin-bottom: 40px !important;
}

.gallery-item a {
    pointer-events: none;
}

h2.intro-serif,
.intro-serif {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 36px !important;
  line-height: 1.45 !important;
  letter-spacing: -0.02em !important;
  max-width: 800px !important;
  color: rgba(0, 0, 0, 0.75) !important;
  font-variation-settings: normal !important;
  
}

.intro-serif br.desktop-break {
  display: inline;
}

h2.intro-serif em,
.intro-serif em {
  font-style: italic !important;
  font-family: 'Libre Baskerville', Georgia, serif !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  h2.intro-serif,
  .intro-serif {
    font-size: 20px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.015em !important;
    max-width: 100% !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
}
.thumbnails {
  margin-top: -3rem;
}

@media (max-width: 768px) {
  .thumbnails {
    margin-top: 0rem !important;
  }
}
/* ==== Selected Works grid (custom) ==== */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 1.5rem;
  margin-top: -3rem;
}

.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.work-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f2f2f2;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 1.3rem;
  transition: transform 0.35s ease;
}

.work-card:hover .work-cover {
  transform: scale(1.015);
}

@media (hover: none) {
  .work-card:hover .work-cover { transform: none; }
}

.work-meta {
  padding-top: 1.4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #f0f0f0;
}

.work-title {
  font-family: Diatype, Icons;
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(0,0,0,0.85);
  line-height: 1.3;
}

.work-impact {
  font-family: "Diatype Variable", Icons;
  font-size: 2.2rem;
  font-weight: 400;
  color: rgba(0,0,0,0.85);
  line-height: 1.3;
  margin-top: 0.6rem;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.work-tags span {
  font-family: "Monument Grotesk Mono", Icons;
  font-size: 1.2rem;
  color: rgba(0,0,0,0.5);
  background: #f0f0f0;
  border-radius: 1.4rem;
  padding: 0.5rem 1.2rem;
}

@media (max-width: 768px) {
  .work-grid {
    grid-template-columns: 1fr;
    margin-top: 0;
  }
}
.work-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-cover-verizon {
background-image: url("https://freight.cargo.site/t/original/i/2f02a253570c9ff2aa7ddf32f3bd4a25fd01fe213890074155139be42b60c230/Account-Home_cover.png");  background-size: cover;
  background-position: center;
}
.work-cover-directv {
  background-image: url("https://freight.cargo.site/t/original/i/2e4cd4b723492a014ceb96b199f4d312965afdb6e4bde8c86ede365033a68ab7/Engagement-Widget_new-cover.png");
  background-size: cover;
  background-position: center;
}
.work-cover-quiz {
  background-image: url("https://freight.cargo.site/t/original/i/9766a1efa6af323620c661fd988d2099d05ed72b98f65ce4d17d4e9f9eb4b5ef/Lead-Capture-Quiz_new-cover.png");
  background-size: cover;
  background-position: center;
}
.work-cover-vengo {
  background-image: url("https://freight.cargo.site/t/original/i/14d28d55974f71182016793896e8f91f040ca7ab19ac0b2174733a7ab0c406aa/VenGo_new-cover.png");
  background-size: cover;
  background-position: center;
}
/* ===== Home grid refinements (overrides) ===== */
.work-grid {
  margin-top: 1.5rem;
  margin-bottom: 6rem;
}

.work-impact {
  font-size: 1.9rem;
}

.section-label {
  margin: 5rem 0 0 0 !important;
}
/* ===== Tags: metadata label, not CTA ===== */
.work-tags span {
  font-size: 1.05rem !important;        /* 比 1.2 小一档，沉到最底层 */
  border-radius: 5px !important;        /* full pill → 轻圆角矩形 */
  background: #f4f4f4 !important;       /* 更浅的灰，存在感更弱 */
  padding: 0.3rem 0.6rem !important;    /* 收紧，更像 label */
  color: #6b6b6b !important;            /* 文字也降一点对比，不抢 */
}
.work-tags span:hover {
  background: #f4f4f4 !important;        /* 杀掉任何 hover 变化 */
}
.work-card:hover .work-title {
  color: #555;
}
/* ===== Text color system: unified default + title hover ===== */
.work-title,
.work-impact {
  color: rgba(0,0,0,0.75) !important;
}
.work-tags span {
  color: rgba(0,0,0,0.75) !important;
}
.work-card:hover .work-title {
  color: rgba(0,0,0,0.92) !important;
}
/* ===== Focus hover affordance on cover + title only ===== */
.work-meta {
  cursor: default;
}
.work-title {
  cursor: pointer;
}
.work-impact,
.work-tags span {
  cursor: default;
}
.work-card:hover .work-impact {
  color: rgba(0,0,0,0.75) !important;
}
/* ===== Header / bodycopy links: unified subtle hover ===== */
[data-predefined-style="true"] bodycopy a {
  transition: color 0.15s ease;
}
[data-predefined-style="true"] bodycopy a:hover {
  color: rgba(0,0,0,0.92) !important;
}
.section-label {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
}
/* ===== Liquid glass cursor on cover ===== */
.work-cover { cursor: none; }

.glass-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass-cursor span {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: rgba(0,0,0,0.7);
}
.glass-cursor.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* ===== Experience section ===== */
.exp-section {
  grid-column: 1 / -1;
  margin-top: -8px;
  scroll-margin-top: 48px;
  overflow-x: hidden;
}
.exp-table {
  margin-top: 28px;
  border-top: 1px solid #ededed;
}
.exp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid #ededed;
}
.exp-meta-group {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 16px;
}
.exp-role {
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(0,0,0,0.75);
}
.exp-co,
.exp-years,
.exp-loc {
  font-family: 'Monument Grotesk Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.05rem;
  color: rgba(0,0,0,0.75);
}

@media (max-width: 700px) {
  .exp-row { grid-template-columns: 1fr; row-gap: 6px; }
  .exp-meta-group { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .exp-role { font-size: 1.2rem; }
}
html {
  scroll-behavior: smooth;
}
/* ===== Off Screen carousel (auto-scroll) ===== */
.life-label { margin-top: 140px !important; }

.life-row {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.life-row::-webkit-scrollbar { display: none; }
.life-row.dragging { cursor: grabbing; }

.life-card { flex: 0 0 300px; }

.life-img {
  width: 300px;
  height: 350px;
  border-radius: 16px;
  background: #e9e9e9 center / cover no-repeat;
  pointer-events: none;
}
.life-img-1 { background-image: url(https://freight.cargo.site/t/original/i/52b35525dc7b6ab612bfdfe8bece8a140271fcf39a9cd8c1ccdcad64bcfcabd6/travel_me.jpg); }
.life-img-2 { background-image: url(https://freight.cargo.site/t/original/i/b0b90fcaeba90990e880290f516e32dfddb3220bcbee9665733cec7591dd2d2f/MET.jpg); }
.life-img-3 { background-image: url(https://freight.cargo.site/t/original/i/476906c015375e857c82a245e26c97f0937e744da629ebc48f36b1d70183e68f/watercolor.jpg); }
.life-img-4 { background-image: url(https://freight.cargo.site/t/original/i/1841bbcb61ebe1885b6216ee63c7052aace82f997b7298fdb55491be07fbabb7/watercolor_frame.jpg); }
.life-img-5 { background-image: url(https://freight.cargo.site/t/original/i/b9e8789c0dcf3b781aa42acaf9a4aa5d426a976a35fbe2a86da716f8432c962c/camera.jpg); }
.life-img-6 { background-image: url(https://freight.cargo.site/t/original/i/e44853fef58c7bb19d186696f3646e78e50b215982761d035f83c10d5c6b9b89/NYC.jpg); }

.life-cap {
  margin-top: 14px;
  font-family: "Monument Grotesk Mono", Icons;
  font-size: 1.05rem;
  color: rgba(0,0,0,0.75);
}

@media (max-width: 700px) {
  .life-label { margin-top: 80px; }
  .life-row { gap: 14px; -webkit-overflow-scrolling: touch; }
  .life-card { flex: 0 0 72vw; }
  .life-img { width: 72vw; height: 84vw; }
}
html {
  scroll-behavior: smooth;
}
.qba-wrap{width:100%;display:flex;justify-content:center;background:#f5f5f5;}
.qba{position:relative;width:75%;max-width:980px;aspect-ratio:4000/2322;overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize;background:transparent;}
.qba-img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain;display:block;-webkit-user-drag:none;}
.qba-top{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.qba-handle{position:absolute;top:0;bottom:0;left:var(--pos);transform:translateX(-50%);pointer-events:none;}
.qba-line{width:1px;height:100%;margin:0 auto;background:rgba(255,255,255,.7);}
.qba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.16);backdrop-filter:blur(2px);transition:transform .12s ease;}
.qba:hover .qba-knob{transform:translate(-50%,-50%) scale(1.06);}
.qba-knob svg{opacity:.6;}
/* ===== Static cards: cover + text only, not clickable ===== */
.work-card-static,
.work-card-static .work-cover,
.work-card-static .work-title {
  cursor: default !important;
}
.work-card.work-card-static:hover .work-cover {
  transform: none !important;
}
.work-card.work-card-static:hover .work-title {
  color: rgba(0,0,0,0.75) !important;
}
.work-cover-twa {
  background-image: url("https://freight.cargo.site/t/original/i/bc18f16da4ac195b166e5a269985a6987acdf894da5d98e7804d7b76499c72f0/TWA_cover.png");
  background-size: cover;
  background-position: center;
}
.work-cover-jma {
  background-image: url("https://freight.cargo.site/t/original/i/00f4efb50e59bf0f6074721839ec96990b66b1167a90dbaec1522dba914fa5a9/JMA_cover.png");
  background-size: cover;
  background-position: center;
}
/* ===== Cursor: solid black dot (matches favicon) ===== */
.glass-cursor {
  width: 16px;
  height: 16px;
  background: #000;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.glass-cursor span {
  display: none;
}
/* ===== Cursor fallback: only hide system cursor when the dot script is running ===== */
.work-cover {
  cursor: pointer;
}
html.dot-cursor-ready a.work-card .work-cover {
  cursor: none;
}

/* =====================================================================
   Case-study frame: narrow text + wide media
   Pages: Quiz (38228735), Engagement Widget (38228733)
   To add another page later, copy one selector line and change the id.
   Cargo's own columns still work inside the frame (x12 = full frame,
   1/10/1 ≈ 83%, 3/6/3 = 50%), so you can keep resizing in the editor.
   ===================================================================== */

/* 1. Frame width: 84% of the window, never wider than 1400px
      (Kelly ≈ 81%, Brandon ≈ 84%). Narrower: 80vw / 1320px. Wider: 88vw / 1480px */
.page[data-id="38228735"] .page_content,
.page[data-id="38228733"] .page_content {
  max-width: min(84vw, 1400px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .page[data-id="38228735"] .page_content,
  .page[data-id="38228733"] .page_content {
    max-width: none;
  }
}

/* 2. 16px corners on every image */
.page[data-id="38228735"] .page_content img,
.page[data-id="38228733"] .page_content img {
  border-radius: 16px;
}

/* 3. Before / After panel (Quiz): full frame width, 16px corners,
      top/bottom gray cropped. 4000/1900 = crop; 4000/2322 = original.
      Smaller second number = more crop (try 1800–2000). */
.page[data-id="38228735"] .qba-wrap {
  border-radius: 16px;
  overflow: hidden;
}
.page[data-id="38228735"] .qba {
  width: 100%;
  max-width: none;
  aspect-ratio: 4000 / 1900;
}
.page[data-id="38228735"] .qba-img {
  object-fit: cover !important;
  border-radius: 0 !important;   /* the panel already clips the corners */
}

/* 4. Stronger drag handle (closer to Kelly's) */
.page[data-id="38228735"] .qba-line {
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.page[data-id="38228735"] .qba-knob {
  width: 48px;
  height: 48px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.page[data-id="38228735"] .qba-knob svg {
  width: 22px;
  height: 22px;
  opacity: 0.85;
}

/* 5. Video panel (Widget hero): same gray + 16px corners as the Before/After panel */
.vid-wrap,
.page[data-id="38228733"] .page_content div[style*="background:#f2f2f2"] {
  background: #CFDDF2 !important;
  border-radius: 16px;
  overflow: hidden;
  padding: 4% 6% !important;
}
.vid-frame {
  position: relative;
  padding-top: 68.06%;          /* video ratio — change only if you swap the video */
  border-radius: 12px;
  overflow: hidden;
}
.vid-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 768px) {
  .vid-wrap,
  .page[data-id="38228733"] .page_content div[style*="background:#f2f2f2"] {
    padding: 12px !important;
    border-radius: 12px;
  }
  .vid-frame { border-radius: 8px; }
}
/* Corner radius by panel size: full 16 / 2-up 12 / 3-up 10 */
.page[data-id="38228735"] [grid-col="x11"] img,
.page[data-id="38228733"] [grid-col="x11"] img {
  border-radius: 12px;
}
.page[data-id="38228735"] [grid-col="x10"] img,
.page[data-id="38228733"] [grid-col="x10"] img {
  border-radius: 10px;
}

/* ===== Quiz: Before/After matches the single quiz screens (2/8/2) ===== */
.page[data-id="38228735"] .qba-wrap {
  width: 83.333%;
  margin-left: auto;
  margin-right: auto;
}

/* Before / After labels (same mono style as the step numbers) */
.page[data-id="38228735"] .qba-wrap { position: relative; }
.qba-label {
  position: absolute;
  top: 20px;
  z-index: 2;
  font-family: "Monument Grotesk Mono", Icons;
  font-size: 1.05rem;
  color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.qba-label-l { left: 24px; }
.qba-label-r { right: 24px; }

/* ===== Quiz: step switcher (5 quiz steps) ===== */
.qstep-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.qstep-tab {
  position: relative;
  flex: 1 1 0;
  padding-top: 12px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  outline: none;
  color: rgba(0, 0, 0, 0.35);
  transition: color 0.2s ease;
}
.qstep-tab:hover,
.qstep-tab.is-active { color: rgba(0, 0, 0, 0.75); }
.qstep-tab:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.4); outline-offset: 4px; }
.qstep-fill {
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: rgba(0, 0, 0, 0.75);
  transition: width 0.1s linear;
}
.qstep-num {
  display: block;
  font-family: "Monument Grotesk Mono", Icons;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.qstep-label {
  display: block;
  font-size: 1.4rem;
  line-height: 1.25;
}
.qstep-stage { display: grid; }
.qstep-stage img {
  grid-area: 1 / 1;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.qstep-stage img.is-active { opacity: 1; }

@media (max-width: 768px) {
  .page[data-id="38228735"] .qba-wrap { width: 100%; }
  .qba-label { top: 12px; font-size: 0.95rem; }
  .qba-label-l { left: 14px; }
  .qba-label-r { right: 14px; }
  .qstep-tabs { overflow-x: auto; gap: 12px; scrollbar-width: none; }
  .qstep-tabs::-webkit-scrollbar { display: none; }
  .qstep-tab { flex: 0 0 auto; min-width: 120px; }
  .qstep-stage img { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .qstep-stage img { transition: none; }
}
/* ===== Landing + header/footer: one frame, aligned ===== */
.page[data-id="38228729"] .page_content,
.page[data-id="38349576"] .page_content,
.page[data-id="38228739"] .page_content,
.page[data-id="38228740"] .page_content {
  max-width: min(84vw, 1400px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .page[data-id="38228729"] .page_content,
  .page[data-id="38349576"] .page_content,
  .page[data-id="38228739"] .page_content,
  .page[data-id="38228740"] .page_content {
    max-width: none;
  }
}

/* Intro: natural line breaks instead of the manual <br> */
.intro-serif br { display: none; }
h2.intro-serif,
.intro-serif {
  max-width: 21em !important;
  text-wrap: pretty;
}

/* Cover hover: card stays still, only the mockup zooms */
.work-cover {
  position: relative;
  overflow: hidden;
  background-size: 0 0 !important;
  background-color: #f4f4f4;
}
.work-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.1);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.work-card:hover .work-cover { transform: none !important; }
.work-card:hover .work-cover::before { transform: scale(1.14); }
.work-card.work-card-static:hover .work-cover::before { transform: scale(1.1); }
@media (hover: none) {
  .work-card:hover .work-cover::before { transform: scale(1.1); }
}
/* ===== Verizon (38228734) + VenGo (38228737): same case-study frame ===== */
.page[data-id="38228734"] .page_content,
.page[data-id="38228737"] .page_content {
  max-width: min(84vw, 1400px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .page[data-id="38228734"] .page_content,
  .page[data-id="38228737"] .page_content {
    max-width: none;
  }
}
.page[data-id="38228734"] .page_content img,
.page[data-id="38228737"] .page_content img {
  border-radius: 16px;
}
.page[data-id="38228734"] [grid-col="x11"] img,
.page[data-id="38228737"] [grid-col="x11"] img {
  border-radius: 12px;
}