@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&family=IBM+Plex+Mono:wght@400&display=swap');

/**
 * Content
 */
.title01{
	font-size: 10rem;
    line-height: 9rem;
    font-family: Cosi Times;
    
}

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

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: 0.4;
}

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 1em;
}

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

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

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	line-height: 1.3;
	font-family: 'Neue Haas Grotesk', Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(41, 41, 41, 0.3);
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 2rem;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.9);
	font-family: "Authentic Sans", Icons;
	font-style: normal;
	line-height: 1.3;
    letter-spacing: 0.01em;
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 0.9);
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.9);
	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: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 500;
	padding: 0;
	margin: 0;
	font-size: 1.5rem;
	line-height: 2;
	color: rgba(0, 0, 0, 0.9);
    letter-spacing: 0.01em;
	}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgb(41, 41, 41);
}

[data-predefined-style="true"] h2 {
	font-family: "Authentic Sans", Icons;
	font-style: normal;
	font-weight: 300;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.9);
	font-size: 2.2rem;
	line-height: 1.3;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgb(41, 41, 41);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.3;
	font-family: "Authentic Sans", Icons;
	font-style: normal;
	font-weight: 300;
	color: rgba(57, 48, 48, 0.9);
}

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

/**
 * Breakpoints
 */


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

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

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

[data-css-preset] body {
	background-color: rgb(255, 255, 255) /*!body_bgcolor*/;
}

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

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


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * 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.6rem/*!thumbnails_padding*/;
}

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

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

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

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

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: 0.1rem;
    font-size: 2.2rem;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.9);
	font-family: 'Montserrat', Icons;
	font-style: normal;
	line-height: 1.3;
}


.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	line-height: 1.3;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: 'Neue Haas Grotesk', Icons;
	font-style: normal;
}

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

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

/**
 * Thumbnail Hover
 */

.thumbnails .thumbnail > a {
    overflow:hidden;
	position: relative;
}

.thumbnails .thumbnail .title {
	background: rgba(0, 0, 0, 0.4);
    padding:0.5rem 1.2rem 0.7rem 1.2rem;
    margin: 0rem;
    color: rgba(255, 255, 255, 1);
    align-content: center;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    height:inherit;
    width: inherit;
    z-index: 9;
    opacity: 0;
}

.thumbnails .title span {
	margin: auto;
	display: inline-block;
   
}

.thumbnails .thumbnail:hover .title {
    opacity: 1;
}

body.mobile .thumbnails .thumbnail:hover .title {
	opacity: 0;
}

/**
 * Site Menu
 */

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

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

#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: 40px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 1.2rem /*!shop_button*/;
	right: 1.2rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 2.2rem;
    padding: 0;
    line-height: 1.2;
	font-style: normal;
	font-weight: 400;
}

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

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

/*
 * Shop Product Widget
 */

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

.shop_product .price {
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.9);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: "Neue Haas Grotesk", Icons;
    color: rgba(0, 0, 0, .9);
    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.2;
    padding: .8rem 2.5rem .8rem 1rem;
}

.shop_product .button {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

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

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.2rem /*!quick_view_padding*/;
    padding-bottom: 2.2rem /*!quick_view_padding*/;
    padding-left: 2.2rem /*!quick_view_padding*/;
    padding-right: 2.2rem /*!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(0, 0, 0, 0.8) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: "Neue Haas Grotesk", 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.3rem;
    line-height: 3.5;
	font-style: normal;
	font-weight: 400;
    line-height: 1.3;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    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: 1.5px;
}

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

.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: 1.5px;
}

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

/** 
 * 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.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", 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;
}




/* ==========================================================
   REDESIGN 2026 — Alma Terrones (overrides above)
   ========================================================== */
body, [data-css-preset] body { background-color:#EDEEEB !important; color:#141516; }

[data-predefined-style="true"] bodycopy {
	font-family:"Archivo", sans-serif; font-weight:400; font-size:1.8rem;
	line-height:1.45; letter-spacing:0; color:#141516;
}
[data-predefined-style="true"] bodycopy a { color:#141516; border-bottom:1px solid #C9CBC7; padding-bottom:0.05em; }
[data-predefined-style="true"] bodycopy a:hover { color:#2F3CF0; border-bottom-color:#2F3CF0; }

/* H1 = page / section titles */
[data-predefined-style="true"] h1 {
	font-family:"Archivo", sans-serif; font-weight:500; font-size:3rem;
	line-height:1.15; letter-spacing:-0.01em; color:#141516;
}
[data-predefined-style="true"] h1 a { color:#141516; border-bottom:0; }

/* H2 = sub-headings */
[data-predefined-style="true"] h2 {
	font-family:"Archivo", sans-serif; font-weight:400; font-size:3rem;
	line-height:1.15; letter-spacing:-0.01em; color:#141516;
}
/* Large intro / project hook: wrap text in <div class="hook">…</div> */
.hook { font-family:"Archivo", sans-serif; font-weight:400; font-size:6.8rem; line-height:1.02; letter-spacing:-0.02em; color:#141516; }
body.mobile .hook { font-size:3.6rem; }
[data-predefined-style="true"] h2 a { color:#141516; border-bottom:0; }

/* Small = mono labels (PROJECT, ROLE, CREDITS, chapter numbers) */
[data-predefined-style="true"] small {
	font-family:"IBM Plex Mono", monospace; font-weight:400; font-size:1.15rem;
	line-height:1.5; letter-spacing:0.06em; text-transform:uppercase; color:#6B6E6F;
}
[data-predefined-style="true"] small a { color:#6B6E6F; }

.mute { color:#6B6E6F; }
.dot { color:#2F3CF0; }
hr { background:#C9CBC7; height:1px; margin:4.8rem 0; }

/* Image captions (e.g. "The imagery is mood references.") */
.gallery_image_caption {
	font-family:"IBM Plex Mono", monospace; font-size:1.15rem; letter-spacing:0.06em;
	text-transform:uppercase; color:#6B6E6F; margin-top:1rem;
}

/* Homepage thumbnails: title shown under the image, not on hover */
.thumbnails .thumbnail .title {
	position:static; opacity:1; background:none; display:block;
	padding:0; margin:1.2rem 0 0; height:auto; width:auto;
	font-family:"Archivo", sans-serif; font-size:1.8rem; line-height:1.3; color:#141516;
}
.thumbnails .title span { margin:0; }
.thumbnails .tags { display:none; }

/* Phones */
body.mobile [data-predefined-style="true"] h2 { font-size:2.4rem; }
body.mobile [data-predefined-style="true"] h1 { font-size:2.4rem; }
body.mobile hr { margin:3.2rem 0; }


/* ===== REDESIGN 2026 · case-study layout (rd-) ===== */
.rd{--ink:#141516;--mute:#6B6E6F;--rule:#C9CBC7;--plate:#DFE1DD;--accent:#2F3CF0;--gut:clamp(16px,2.4vw,32px);font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:clamp(16.5px,1.15vw,18px);line-height:1.55;color:var(--ink);display:block}
.rd *{box-sizing:border-box}
.rd .rd-label{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;font-weight:400;color:var(--mute)}
.rd .rd-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.rd .rd-head{padding:clamp(32px,4.5vw,64px) 0 28px;display:grid;row-gap:12px}
.rd .rd-title{font-size:clamp(32px,4.4vw,68px);font-weight:500;line-height:1.02;letter-spacing:-.03em;margin:0}
.rd .rd-sub{font-size:14px;color:var(--mute)}
.rd .rd-intro{padding-bottom:clamp(28px,3.5vw,48px);row-gap:20px;align-items:end}
.rd .rd-hook{grid-column:1/9;font-size:clamp(32px,4.4vw,68px);font-weight:500;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.rd .rd-meta{grid-column:9/13;display:grid;gap:10px;font-size:14px;line-height:1.4}
.rd .rd-ch{margin-top:clamp(56px,7vw,112px)}
.rd .rd-text{border-top:1px solid var(--rule);padding-top:16px;margin-bottom:clamp(20px,2.5vw,32px);row-gap:10px}
.rd .rd-h{grid-column:1/5;font-size:clamp(22px,2.1vw,30px);font-weight:500;line-height:1.18;letter-spacing:-.018em;display:flex;gap:14px;align-items:baseline;margin:0}
.rd .rd-p{grid-column:5/11;max-width:58ch}
.rd .rd-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);align-items:start}
.rd .rd-gal img{display:block;width:100%!important;height:auto!important;max-width:none!important;background:var(--plate);margin:0!important}
.rd .rd-w{grid-column:1/-1}
.rd .rd-t img{aspect-ratio:3/4;height:auto!important;object-fit:cover}
.rd .rd-hf img{aspect-ratio:4/3;height:auto!important;object-fit:cover}
.rd .rd-cap{padding-top:10px}
.rd .rd-hero{margin:0}
.rd .rd-hero img{display:block;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain}
.rd .rd-coda{margin-top:clamp(72px,9vw,128px)}
.rd .rd-credits{margin-top:clamp(56px,7vw,112px);border-top:1px solid var(--ink);padding-top:16px}
.rd .rd-credits .rd-label{display:block;margin-bottom:14px}
.rd .rd-cr{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px var(--gut);font-size:14px;line-height:1.4}
.rd .rd-cr span{display:block;color:var(--mute)}
.rd .rd-next{display:block;text-decoration:none!important;border-top:1px solid var(--ink);margin-top:clamp(72px,9vw,140px);padding:24px 0 48px;color:var(--ink)}
.rd .rd-next b{display:block;margin-top:10px;font-size:clamp(32px,4.4vw,68px);font-weight:500;line-height:1.02;letter-spacing:-.03em;transition:color .2s}
.rd .rd-next:hover b{color:var(--accent)}
.rd br{display:none}
@media (max-width:900px){.rd .rd-hook,.rd .rd-meta,.rd .rd-h,.rd .rd-p{grid-column:1/13}}
@media (max-width:600px){.rd .rd-gal{grid-template-columns:1fr}}

.rd .rd-ph{background:#DFE1DD;display:grid;place-items:center;aspect-ratio:3/2;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#6B6E6F}
.rd .rd-t .rd-ph{aspect-ratio:3/4}.rd .rd-hf .rd-ph{aspect-ratio:4/3}
/* redesign pages use the full width */
.page[data-id="38276023"] .content_padding,.page[data-id="38655965"] .content_padding,.page[data-id="38655973"] .content_padding{padding:0 clamp(16px,2.4vw,32px) 2.7rem!important}


/* ===== REDESIGN 2026 · homepage + menu bar (hp-) ===== */
.hp{--ink:#141516;--mute:#6B6E6F;--rule:#C9CBC7;--accent:#2F3CF0;--ok:#1F8A4C;--gut:clamp(16px,2.4vw,32px);font-family:"Archivo","Helvetica Neue",Arial,sans-serif;color:var(--ink);display:block;font-size:clamp(16.5px,1.15vw,18px);line-height:1.5}
.hp *{box-sizing:border-box}
.hp br{display:none}
.hp a{color:inherit;text-decoration:none;border:0}
.hp .hp-label{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;font-weight:400;color:var(--mute)}
.hp .hp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.hp-bar{border-bottom:1px solid var(--rule);padding:14px 0;align-items:center;font-size:14px;line-height:1.4}
.hp-bar .hp-who{grid-column:1/5}
.hp-bar .hp-nav{grid-column:5/10;display:flex;gap:22px;justify-content:center}
.hp-bar .hp-nav a:hover{color:var(--accent)}
.hp-bar .hp-loc{grid-column:10/13;text-align:right}
.hp .hp-statement{font-size:clamp(36px,5vw,84px);font-weight:500;line-height:1.04;letter-spacing:-.035em;max-width:21ch;margin:0;padding-top:clamp(40px,7vw,112px)}
.hp .hp-statement .hp-hi{color:var(--mute)}
.hp .hp-statement .hp-hl{color:var(--accent)}
.hp .hp-clients{margin-top:clamp(28px,3.5vw,56px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 0;row-gap:10px}
.hp .hp-clients .hp-label{grid-column:1/4;padding-top:.6em}
.hp .hp-clients .hp-list{grid-column:4/13;font-size:clamp(22px,2.1vw,30px);font-weight:400;line-height:1.18;letter-spacing:-.018em}
.hp .hp-clients .hp-sl{color:var(--rule);margin:0 .4em}
.hp .hp-intro{padding:20px 0 24px;border-bottom:1px solid var(--ink);row-gap:20px;font-size:14px;line-height:1.4}
.hp .hp-intro .hp-role{grid-column:1/4}
.hp .hp-intro .hp-role span{display:block;color:var(--mute)}
.hp .hp-intro .hp-status{grid-column:4/13}
.hp .hp-intro .hp-status div:last-child{color:var(--ink)}
.hp .hp-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(31,138,76,.22)}
.hp .hp-workhead{margin-top:clamp(72px,9vw,140px);border-top:1px solid var(--ink);padding:24px 0 28px}
.hp .hp-sec{font-size:clamp(22px,2.1vw,30px);font-weight:500;line-height:1.18;letter-spacing:-.018em;margin:0 0 8px}
@media (max-width:900px){.hp .hp-clients .hp-label,.hp .hp-clients .hp-list,.hp .hp-intro .hp-role,.hp .hp-intro .hp-status{grid-column:1/13}}
@media (max-width:720px){.hp-bar .hp-who{grid-column:1/6}.hp-bar .hp-nav{grid-column:6/13;justify-content:flex-end;gap:14px}.hp-bar .hp-loc{display:none}}
/* menu bar, homepage and redesigned project pages: full width with one side gutter */
.page[data-id="20169235"],.page[data-id="20169234"],.page[data-id="38276023"],.page[data-id="38655965"],.page[data-id="38655973"]{width:100%!important;margin-left:0!important;margin-right:0!important}
.page[data-id="20169235"] .content_padding,.page[data-id="20169234"] .content_padding{padding:0 clamp(16px,2.4vw,32px)!important}
.thumbnails .content_padding{padding:0 clamp(16px,2.4vw,32px) 48px!important}
[thumbnails="grid"]{margin:0!important}

/* homepage project grid, like the redesign cards */
[thumbnails="grid"]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4.5vw,72px) clamp(16px,2.4vw,32px);padding:0!important}
[thumbnails="grid"] .thumbnail{width:auto!important;max-width:none!important;padding:0!important;margin:0!important;float:none!important}
[thumbnails="grid"] .thumbnail .thumb_image{aspect-ratio:4/3;overflow:hidden;padding:0!important;height:auto!important;background:#DFE1DD}
[thumbnails="grid"] .thumbnail .thumb_image img{width:100%!important;height:100%!important;object-fit:cover;margin:0!important;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
[thumbnails="grid"] .thumbnail:hover .thumb_image img{transform:scale(1.045)}
[thumbnails="grid"] .thumbnail .title{padding-top:12px!important;font-size:clamp(22px,2.1vw,30px)!important;font-weight:500!important;line-height:1.18!important;letter-spacing:-.018em}
[thumbnails="grid"] .thumbnail:hover .title{color:#2F3CF0}
@media (max-width:600px){[thumbnails="grid"]{grid-template-columns:1fr}}


/* ===== SELECTED 8 · homepage grid shows only these, in this order ===== */
/* Hidden pages are kept, only removed from the grid. */
.thumbnail[data-id="38655965"]{order:1}
.thumbnail[data-id="38276023"]{order:2}
.thumbnail[data-id="38655973"]{order:7}
.thumbnail[data-id="20169230"]{order:3}
.thumbnail[data-id="37163996"]{order:4}
.thumbnail[data-id="20169231"]{order:5}
.thumbnail[data-id="37164596"]{order:6}
.thumbnail[data-id="37564699"]{order:8}
.thumbnail[data-id="38370544"],.thumbnail[data-id="37164574"],.thumbnail[data-id="20241952"],.thumbnail[data-id="20169229"],.thumbnail[data-id="37164208"],.thumbnail[data-id="20169228"],.thumbnail[data-id="20237371"]{display:none!important}

/* homepage title: fixed four-line break as in the redesign */
.hp .hp-statement{max-width:none!important}
.hp .hp-ln{display:block;white-space:nowrap}
@media (max-width:700px){.hp .hp-ln{display:inline;white-space:normal}}

/* embedded videos in case studies (Vimeo) */
.rd .rd-vid{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.rd .rd-vid iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:0}


/* ===== REDESIGN 2026 · About, Contact and footer (in the Footer page) ===== */
.page[data-id="20169236"] .content_padding{padding:0 clamp(16px,2.4vw,32px)!important;background:transparent!important}
.page[data-id="20169236"]{width:100%!important;margin:0!important;background:transparent!important}
body:not(.homepage) .hp-home-only{display:none}
.hp .hp-ab{margin-top:clamp(72px,9vw,140px);border-top:1px solid var(--ink);padding-top:24px}
.hp .hp-ab-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.hp .hp-ab-statement{margin-top:clamp(28px,4vw,56px);max-width:26ch;font-size:clamp(32px,4.4vw,68px);font-weight:500;line-height:1.12;letter-spacing:-.03em}
.hp .hp-face{display:inline-block;width:1.9em;height:1.1em;border-radius:999px;overflow:hidden;vertical-align:-.16em;margin:0 .06em;background:#DFE1DD}
.hp .hp-face img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 22%;margin:0!important}
.hp .hp-ab-cols{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:1em}
.hp .hp-ab-off{grid-column:1/4;color:var(--mute);font-size:14px}
.hp .hp-ab-off .hp-label{display:block;margin-bottom:6px}
.hp .hp-ab-p{grid-column:span 4;max-width:44ch}
.hp .hp-ab-cols .hp-ab-p:nth-child(2){grid-column:5/9}
.hp .hp-ab-cols .hp-ab-p:nth-child(3){grid-column:9/13}
.hp .hp-ab-sheet{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gut);border-top:1px solid var(--rule)}
.hp .hp-ab-sheet > div{padding-top:14px;min-width:0}
.hp .hp-dd{margin-top:6px;font-size:14px;line-height:1.5}
.hp .hp-nl{display:block}
.hp .hp-dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.hp .hp-dd a:hover{color:var(--accent)}
.hp .hp-contact{margin-top:clamp(72px,9vw,140px);border-top:1px solid var(--ink);padding:24px 0 40px;row-gap:24px}
.hp .hp-contact .hp-k{grid-column:1/4}
.hp .hp-contact .hp-k .hp-label{display:block;margin-top:8px}
.hp .hp-contact .hp-cbody{grid-column:4/13;min-width:0}
.hp .hp-mail{display:inline-block;font-size:clamp(32px,4.4vw,68px);font-weight:500;line-height:1.02;letter-spacing:-.03em;overflow-wrap:anywhere}
.hp .hp-mail:hover{color:var(--accent)}
.hp .hp-reach{margin-top:18px}
.hp .hp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);padding:16px 0 24px;margin-top:clamp(56px,7vw,112px)}
.hp .hp-foot a:hover{color:var(--accent)}
@media (max-width:900px){.hp .hp-ab-off,.hp .hp-ab-p,.hp .hp-ab-cols .hp-ab-p:nth-child(2),.hp .hp-ab-cols .hp-ab-p:nth-child(3){grid-column:1/-1}.hp .hp-ab-off{order:9}.hp .hp-ab-sheet{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}.hp .hp-contact .hp-k,.hp .hp-contact .hp-cbody{grid-column:1/13}}
@media (max-width:520px){.hp .hp-ab-sheet{grid-template-columns:1fr}}

/* ===== homepage cards: client line + project line, as in the redesign ===== */
[thumbnails="grid"] .thumbnail .title span{display:none}
[thumbnails="grid"] .thumbnail .title::before{display:block;font-size:14px;font-weight:400;line-height:1.4;letter-spacing:0;color:#6B6E6F;margin-bottom:2px}
[thumbnails="grid"] .thumbnail .title::after{display:block;transition:color .2s}
[thumbnails="grid"] .thumbnail:hover .title{color:inherit}
[thumbnails="grid"] .thumbnail:hover .title::after{color:#2F3CF0}
.thumbnail[data-id="38655965"] .title::before{content:"European Football Clubs \00B7  33rd EFC General Assembly, Copenhagen"}
.thumbnail[data-id="38655965"] .title::after{content:"No club above another"}
.thumbnail[data-id="38276023"] .title::before{content:"Audemars Piguet \00B7  150th anniversary reception"}
.thumbnail[data-id="38276023"] .title::after{content:"Legacy in motion"}
.thumbnail[data-id="20169230"] .title::before{content:"Akisa \00B7  Artisanal mezcal"}
.thumbnail[data-id="20169230"] .title::after{content:"Balance through duality"}
.thumbnail[data-id="37163996"] .title::before{content:"YSL \00D7  FT Weekend \00B7  Private reception"}
.thumbnail[data-id="37163996"] .title::after{content:"The invitation as prelude"}
.thumbnail[data-id="20169231"] .title::before{content:"Hotei \00B7  Japanese restaurant, Mexico City"}
.thumbnail[data-id="20169231"] .title::after{content:"Shibui as a system"}
.thumbnail[data-id="37164596"] .title::before{content:"Financial Times \00B7  Brand campaign"}
.thumbnail[data-id="37164596"] .title::after{content:"Make the right connections"}
.thumbnail[data-id="38655973"] .title::before{content:"PACE+ \00B7  Skincare for active days \00B7  Self-initiated"}
.thumbnail[data-id="38655973"] .title::after{content:"Skin in the game"}
.thumbnail[data-id="37564699"] .title::before{content:"Prismora \00B7  Architecture and design studio"}
.thumbnail[data-id="37564699"] .title::after{content:"Structure as identity"}

/* footer: drop the old dark band */
.pinned_bottom .page_background{background:transparent!important;display:none!important}
.pinned_bottom{color:#141516}

/* project pages: hide the old Index / Next bar (the new layout ends with Next project) */
.page[data-id="20169232"]{display:none!important}
/* footer line sits closer to Next project on project pages */
body:not(.homepage) .hp .hp-foot{margin-top:0}

/* remaining project pages, full width with one side gutter (applies once rebuilt) */
.page[data-id="20169230"],.page[data-id="37163996"],.page[data-id="20169231"],.page[data-id="37164596"],.page[data-id="37564699"]{width:100%!important;margin-left:0!important;margin-right:0!important}
.page[data-id="20169230"] .content_padding,.page[data-id="37163996"] .content_padding,.page[data-id="20169231"] .content_padding,.page[data-id="37164596"] .content_padding,.page[data-id="37564699"] .content_padding{padding:0 clamp(16px,2.4vw,32px) 2.7rem!important}

/* uploaded videos in case studies fit the column */
.rd video{display:block;width:100%!important;height:auto!important;max-width:100%!important;background:#DFE1DD}

/* title row like the redesign: subtitle on the right, level with the title */
.rd .rd-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.rd .rd-title{grid-column:1/10}
.rd .rd-sub{grid-column:10/13;text-align:right;padding-bottom:.6em;font-size:14px;line-height:1.4}
@media (max-width:900px){.rd .rd-title,.rd .rd-sub{grid-column:1/13;text-align:left;padding-bottom:0}}

/* side-by-side pairs cropped to the same 16:9 height */
.rd .rd-169 img{aspect-ratio:16/9;object-fit:cover;height:auto!important}

/* external link inside case-study text */
.rd .rd-nl{display:block;height:14px}
.rd .rd-link{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#141516;text-decoration:none!important;border-bottom:1px solid #141516!important;padding-bottom:2px}
.rd .rd-link:hover{color:#2F3CF0;border-color:#2F3CF0!important}