/** * Content */ body { background-color: #fff; color: #000; } a:active { opacity: 0.7; } .page a.active { color: rgba(0, 0, 0, 0.85); } 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 4.5rem; } ol>li { padding-left: 0.75rem; } blockquote { margin: 0; padding: 0 0 0 2em; } hr { background: rgba(0, 0, 0, .25); border: 0; height: 1px; display: block; } .content img { float: none; margin-bottom: 0.5rem; vertical-align: bottom; } .gallery_image_caption { margin-top: 1.2em; margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 400; color: rgba(0, 0, 0, 0.65); font-family: "Inter", Icons; font-style: normal; line-height: 1.3; text-align: left; letter-spacing: 0.01em; } /** * 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.65); font-family: "Inter", Icons; font-style: normal; line-height: 1.4; } [data-predefined-style="true"] bodycopy a { color: rgba(0, 0, 0, 0.65); padding-bottom: 0em; border-bottom: 1px solid rgba(0, 0, 0, 1); text-decoration: underline; } [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: "Inter", Icons; font-style: normal; font-weight: 500; padding: 0; margin: 0; font-size: 5.2rem; line-height: 1.1; color: rgba(0, 0, 0, 0.85); } [data-predefined-style="true"] h1 a { color: rgba(0, 0, 0, 0.85); border-bottom: none; } [data-predefined-style="true"] h2 { font-family: "Playfair Display", Icons; font-style: normal; font-weight: 400; padding: 0; margin: 0; color: rgba(0, 0, 0, 0.85); font-size: 2.2rem; line-height: 1.3; letter-spacing: 0.05em; } [data-predefined-style="true"] h2 a { color: rgba(0, 0, 0, 0.85); } [data-predefined-style="true"] small { display: inline-block; font-size: 1.3rem; line-height: 1.3; font-family: "Inter", Icons; font-style: normal; font-weight: 400; color: rgba(0, 0, 0, 0.65); letter-spacing: 0.01em; ; } [data-predefined-style="true"] small a { color: rgba(0, 0, 0, 0.85); 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: auto /*!content_center*/; margin-right: auto /*!content_center*/; text-align: left /*!text_left*/; } [data-css-preset] body { background-color: rgb(255, 255, 255) /*!body_bgcolor*/; } [data-css-preset] .container_width { width: 97% /*!content_center*/; } [data-css-preset] .content_padding { padding-top: 2rem /*!main_margin*/; padding-bottom: 2rem /*!main_margin*/; padding-left: 2rem /*!main_margin*/; padding-right: 2rem /*!main_margin*/; } [data-css-preset] text-limit { display: inline-block /*!text_width*/; max-width: 66rem/*!text_width*/; } [data-css-preset] .backdrop { width: 100% /*!background_cover*/; } /** * Thumbnails */ div[thumbnails] { justify-content: flex-start; } [data-css-preset] .thumbnails { background-color: rgba(0, 0, 0, 0)/*!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: .8rem; margin-bottom: .2rem; font-size: 1.4rem; font-weight: 500; color: rgba(0, 0, 0, 0.85); font-family: "Inter", Icons; font-style: normal; line-height: 1.3; } .thumbnails .tags { margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1.3rem; font-weight: 400; color: rgba(0, 0, 0, 0.4); font-family: "Inter", Icons; font-style: normal; line-height: 1.3; } .thumbnails .tags a { border-bottom: 0; color: rgba(0, 0, 0, 0.35); text-decoration: none; } .thumbnails .has_title .tags { margin-top: 0rem; } /** * Site Menu */ [data-css-preset] #site_menu_button { color: rgba(0, 0, 0, 1); line-height: 1; font-size: 28px /*!site_menu_button*/; padding: 0.5px; line-height: 0.5; background: rgba(33, 32, 46, 0); position: fixed; top: 3rem /*!site_menu_button*/; right: 3rem /*!site_menu_button*/; } body.mobile #site_menu_button { margin: -6px; font-size: 34px; } #site_menu_button.custom_icon { width: 40px; height: auto; max-width: 100% } #site_menu_button.active { display: none; } /** * Site Menu */ #site_menu { font-family: "Inter", Icons; background: rgba(20, 20, 20, 1); font-size: 17px; font-style: normal; font-weight: 400; line-height: 3; padding: 70px 30px 90px 50px; 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, 1); } #site_menu .set-link > a { color: rgba(255, 255, 255, 1); 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: 1.5rem /*!shop_button*/; right: 2.5rem /*!shop_button*/; } #shop_button.text { font-family: "Inter", Icons; font-size: 2.2rem; padding: 0; font-weight: 500; color: rgba(0, 0, 0, 0.85); font-style: normal; line-height: 1.2; } #shop_button.custom_icon { width: 40px; height: auto; } body.mobile #shop_button:not(.text) { margin: -6px; font-size: 36px; } /** * Shop Product Widget */ .shop_product { width: 100%; max-width: 22rem; position: relative; display: block; } .shop_product .price { font-family: "Inter", Icons; font-size: 1.4rem; line-height: 1; color: rgba(0, 0, 0, 0.65); display: block; margin-bottom: 1rem; font-style: normal; font-weight: 400; } .shop_product .dropdown { font-family: "Inter", Icons; font-size: 1.4rem; display: inline-block; width: 100%; border: 1px solid rgba(0,0,0,.2); background: white; margin-bottom: 1rem; line-height: 1.2; padding: .7rem 2.5rem .7rem 1rem; font-style: normal; font-weight: 400; color: rgba(0, 0, 0, 0.65); } .shop_product .button { font-family: "Inter", Icons; font-size: 1.4rem; background: rgba(0, 0, 0, 0.7); color: rgba(255,255,255,1); flex: 0 0 50%; text-align: left; display: inline-block; line-height: 1; padding: .8rem 1rem; font-style: normal; font-weight: 500; } /** * 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(0, 0, 0, 0.8) /*!quick_view_bgcolor*/; } .quick-view-caption { font-family: "Inter", 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.1rem; font-style: normal; font-weight: 400; } .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: #000; stroke-width: 2.5px; opacity: 0.6; } .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: #000; stroke-width: 2.5px; opacity: 0.6; } /** * 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: rgba(0, 0, 0, 0.85); stroke-width: 1.5px; } .image-gallery-navigation .left-arrow .outer-color, .image-gallery-navigation .right-arrow .outer-color { stroke: #000; stroke-width: 2.5px; opacity: 0; } /** * 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: #000; stroke-width: 2.5px; opacity: 0.6; } /** * 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: 26rem; height: 3.3rem; outline: 1px solid rgba(0,0,0,0.15); color: rgba(0, 0, 0, 0.6); background: transparent; font-size: 1.2rem; line-height: 1.3; font-family: "Inter", 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; }

/* Outbound venture CTAs ("Learn more about X") are marked up inside <small>, so they
   inherited fine-print sizing. They are the primary action on a venture page. */
[data-predefined-style="true"] small a[target="_blank"],
[data-predefined-style="true"] a[target="_blank"] small{font-size:1.45rem;line-height:1.45}

/* ===== Mobile app shell — added 2026-08-23. Every rule is scoped to body.mobile
   (or the .pinned bands, which only exist once per page), so desktop rendering
   is untouched by construction. ===== */

/* Inline-sized images (Cargo exports fixed px) overflow small screens; the
   index headline gap was one such image, 1340x538 on a 393px viewport. */
body.mobile .page_content img{max-width:100%!important;height:auto!important;
  border-radius:14px;transition:transform .18s ease}
body.mobile .pinned .page_content img{border-radius:0}
body.mobile .page_content .image-link:active img{transform:scale(.97)}

/* App bar: the Cargo pinned_top band becomes a fixed, blurred iOS-style bar. */
body.mobile .pinned_top .page_container{position:fixed!important;top:0;left:0;right:0;
  z-index:60;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);padding-top:env(safe-area-inset-top)}

/* Menu overlay: bigger type, breathing room, safe-area padding. */
body.mobile #site_menu_panel{padding:28px!important;
  padding-top:calc(28px + env(safe-area-inset-top))!important}
body.mobile #site_menu_panel a{font-size:32px;line-height:2.1;letter-spacing:.02em}

/* Text links become tappable pills (image links excluded). 44px targets. */
body.mobile .page_content a:not(.image-link){display:inline-block;padding:11px 18px;
  margin:6px 8px 6px 0;border:1.5px solid currentColor;border-radius:999px;
  background-image:none!important;font-weight:500;font-size:15px;line-height:1.2;
  -webkit-user-select:none;user-select:none}
body.mobile .page_content a:not(.image-link):active{transform:scale(.96);opacity:.75}

/* Footer: one calm centered block with a safe-area inset. */
body.mobile .pinned_bottom small{font-size:13px;line-height:2.4;display:block;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom))}

/* get-in-touch: the headline used to sit raw on the photo layer (z-1 under the
   text page). A frosted panel keeps the photo mood and makes the text legible. */
body.mobile [data-id="17332734"] div:has(> h1){background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:18px;padding:22px;margin:0 2px}

body.mobile{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}

/* ---- app-shell fixes, round 2 (2026-08-23) ---- */
/* get-in-touch: headline was breaking mid-word inside the frosted panel */
[data-predefined-style="true"] body.mobile [data-id="17332734"] h1{font-size:min(4.6rem,10.8vw)}
/* trim the <br> stack inside the panel, and the white-on-white F6S logo */
body.mobile [data-id="17332734"] div:has(> h1) > br{display:none}
body.mobile [data-id="17332734"] div:has(> h1) img{display:none}
/* footer sat in a ~35% grid column on mobile: stack it full-width, calm the rhythm */
body.mobile .pinned_bottom [grid-col]{width:100%!important}
body.mobile .pinned_bottom .page_content br{display:none}
body.mobile .pinned_bottom small{line-height:1.9}
body.mobile .pinned_bottom a:not(.image-link){padding:7px 14px}
/* index: the top "image" is a white canvas with a hairline divider — dead
   weight on a phone. Hide it and the blank lines around it. */
body.mobile [local-style="17303379"] img[src*="868bcf42"]{display:none}
body.mobile [local-style="17303379"] [data-marker-id="2"] div > br{display:none}

/* The page's inline block styles this h1 later in the cascade; the html prefix
   out-specifies it. Also restore rhythm the removed <br>s used to provide. */
html[data-predefined-style="true"] body.mobile [data-id="17332734"] h1{
  font-size:min(4.2rem,10vw);line-height:1.12;margin-bottom:16px}
body.mobile [data-id="17332734"] div:has(> h1) small{display:block;margin:12px 0 2px}

/* Footer is a Cargo overlay pinned over the document bottom; on phones it was
   covering the last portfolio tile. In flow, it can never cover content. */
body.mobile .pinned_bottom{height:auto!important}
body.mobile .pinned_bottom .page_container{position:static!important}

/* ===== 2026-08-23 evening pass: typography, motion, footer, intents, dark ===== */

/* homepage lede: same words, staged — first sentence carries the weight */
[data-predefined-style="true"] .page p.body-lead.lede-xl{
  font-size:clamp(21px,2.05vw,30px);line-height:1.42;font-weight:500;
  letter-spacing:-.012em;margin:0 0 .9em}
/* mobile already enlarges body-lead (~28px); the statement must stay on top */
[data-predefined-style="true"] body.mobile .page p.body-lead.lede-xl{
  font-size:min(8.4vw,33px);line-height:1.32}
[data-predefined-style="true"] body.mobile .page p.body-lead.lede-rest{
  font-size:17px;line-height:1.65}
.lede-rest{margin:0 0 .9em}

/* desktop hover: content image links lift; header logo exempt */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  body:not(.mobile) .page_content .image-link img{
    transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease}
  body:not(.mobile) .page_content .image-link:hover img{
    transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.16)}
  body:not(.mobile) .pinned .image-link:hover img{transform:none;box-shadow:none}
}

/* one-time headline reveal */
@media (prefers-reduced-motion:no-preference){
  [data-predefined-style="true"] .content_container h1{
    animation:lytrise .6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes lytrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* footer in flow on every viewport, with real columns */
.pinned_bottom{height:auto!important}
.pinned_bottom .page_container{position:static!important;background:#f4f4f2}
.footcols{display:grid;gap:28px 40px;grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:640px;margin:0 auto;padding:36px 22px 8px;text-align:left}
.fc{display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.5}
.fh{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#6b6b66;margin-bottom:5px}
.fc a{text-decoration:none;color:#454540;background-image:none!important;
  border:0!important;display:inline-block;width:fit-content;padding:0}
.fc a:hover{color:#111;text-decoration:underline}
.pinned_bottom small{display:block;text-align:center;padding:14px 16px 26px;color:#454540}
body.mobile .footcols{grid-template-columns:1fr 1fr}
/* the mobile pill rule must not restyle footer/intent links */
body.mobile .footcols a{display:block;padding:8px 0;margin:0;border:0;border-radius:0;font-size:14px}

/* get-in-touch intents */
.intents{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
/* the shell's `[data-predefined-style] bodycopy a` (0,1,2) out-specifies a bare
   `a.intent` (0,1,1) and paints a 1px black border-BOTTOM, so each pill had one
   heavier, darker edge — invisible in light mode where everything is black, and
   a black arc under white type in dark mode. !important keeps all four sides. */
a.intent{display:inline-block;padding:10px 18px;border:1.5px solid currentColor!important;
  border-radius:999px;text-decoration:none!important;font-size:14px;font-weight:500;
  background-image:none!important;box-shadow:none!important}
a.intent, a.intent:visited{color:inherit}
a.intent:hover{background:rgba(0,0,0,.06)}
a.intent:active{transform:scale(.96)}

/* venture pages: a way back to the grid and on to the next venture. Each of the
   14 story pages used to be a cul-de-sac — the only exits were the hamburger
   and the browser's back button, so reading three ventures meant pressing back
   twice. Arrows are pseudo-elements: a bare glyph in the markup would inherit
   the Icons font from the aria-hidden rule below and render as a PUA symbol. */
.vnav{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;
  flex-wrap:wrap;margin:26px 0 0;padding:14px 0 6px;border-top:1px solid rgba(0,0,0,.14)}
[data-predefined-style="true"] .page .vnav a{display:inline-flex;align-items:center;
  min-height:44px;font-family:"Inter",sans-serif;font-size:15px;font-weight:500;
  line-height:1.3;color:rgba(0,0,0,.85);text-decoration:none;
  background-image:none!important;border:0!important;padding:0}
[data-predefined-style="true"] .page .vnav a:hover{text-decoration:underline}
.vnav-back::before{content:"\2190";margin-right:.5em}
.vnav-next{margin-left:auto;text-align:right}
.vnav-next::after{content:"\2192";margin-left:.5em}
body.mobile .vnav{gap:4px 20px}

/* ===== 2026-08-28: desktop nav, a persistent ask, focus, one body scale ===== */

/* The shell sets `:focus{outline:0}` and nothing ever restored it, so keyboard
   users navigated the whole site blind. currentColor keeps the ring legible on
   both grounds without a second rule in the dark block. */
/* site.css is linked BEFORE the shell sheets, so a bare :focus-visible ties
   :focus{outline:0} on specificity and loses on order — hence the element
   qualifiers and !important. */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid currentColor!important;outline-offset:3px;border-radius:2px}

/* First tab stop on every page; off-screen until it is focused. */
.skip{position:fixed;top:-64px;left:12px;z-index:10000;background:#141414;color:#fff;
  font:500 14px/1 "Inter",sans-serif;padding:13px 17px;border-radius:0 0 4px 4px;
  text-decoration:none;border:0;transition:top .12s ease}
.skip:focus{top:0}

/* Five links, about 220px of text, sat behind a hamburger at 1440px — every
   lateral move cost two clicks. Inline on desktop; the hamburger keeps phones,
   where it is the right control and the panel is already well built. */
.topnav{display:none}
@media (min-width:1024px){
  body:not(.mobile) .topnav{display:flex;gap:26px;align-items:center;
    position:fixed;top:2.1rem;right:3rem;z-index:8}
  body:not(.mobile) .topnav a{display:inline-flex;align-items:center;min-height:44px;
    font:500 12px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(0,0,0,.72);text-decoration:none;border:0!important;background-image:none!important}
  body:not(.mobile) .topnav a:hover{color:rgba(0,0,0,1)}
  body:not(.mobile) .topnav a[aria-current="page"]{color:rgba(0,0,0,1);
    box-shadow:inset 0 -1px 0 currentColor}
  body:not(.mobile) #site_menu_button{display:none}
}

/* What, Who, Portfolio and all 14 venture stories ended in the footer: the
   reader finished convinced and had nowhere to go but back to the hamburger. */
.askband{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin:34px 0 0;padding:26px 0 4px;border-top:1px solid rgba(0,0,0,.14)}
.askband p{flex:1 1 280px;margin:0;font:500 17px/1.45 "Inter",sans-serif;color:rgba(0,0,0,.85)}
[data-predefined-style="true"] .page .askband a{display:inline-flex;align-items:center;
  min-height:44px;padding:0 22px;border-radius:999px;white-space:nowrap;
  font:500 15px/1 "Inter",sans-serif;color:rgba(0,0,0,.85);
  text-decoration:none!important;background-image:none!important;
  border:1.5px solid rgba(0,0,0,.85)!important}
[data-predefined-style="true"] .page .askband a.primary{background:#141414;color:#fff}
[data-predefined-style="true"] .page .askband a:hover{background:rgba(0,0,0,.06)}
[data-predefined-style="true"] .page .askband a.primary:hover{background:#000}
.askband a:active{transform:scale(.98)}
body.mobile .askband p{flex-basis:100%}

/* One body scale. The same running copy set at 15.9px on What, 27.9px on the
   homepage and 29.9px at line-height 1.1 on Who — three sizes for one voice.
   Scoped to .content_container so the header and footer keep their own. */
html[data-predefined-style="true"] .content_container [local-style] bodycopy{
  font-size:1.8rem;line-height:1.5}
html[data-predefined-style="true"] body.mobile .content_container [local-style] bodycopy{
  font-size:1.7rem}
/* the homepage statement paragraph stays a statement; everything else joins the scale */
html[data-predefined-style="true"] .content_container p.body-lead:not(.lede-xl){
  font-size:1.9rem;line-height:1.5}
html[data-predefined-style="true"] body.mobile .content_container p.body-lead:not(.lede-xl){
  font-size:1.7rem}

/* ===== dark mode: system-aware, main site only ===== */
@media (prefers-color-scheme: dark){
  html[data-predefined-style="true"]{background:#121316;color-scheme:dark}
  html[data-predefined-style="true"] body{background:#121316!important;color:#e7e6e3}
  html[data-predefined-style="true"] .page_background{background-color:#121316!important}
  /* the shell sheets pin text to black at several tiers; override each in dark */
  html[data-predefined-style="true"] :is(h1,h2,h3,h4,h5){color:#e9e8e5!important}
  html[data-predefined-style="true"] .page :is(p,div,li,blockquote){color:rgba(238,237,233,.88)!important}
  html[data-predefined-style="true"] .page :is(small,span,a){color:rgba(238,237,233,.8)!important}
  html[data-predefined-style="true"] hr{border-color:rgba(255,255,255,.16)}
  /* The homepage divider is not an <hr> but a 3000x1205 transparent image
     carrying a single hairline down its centre, rgb(35,31,32) at alpha 208 —
     a soft grey rule on white, and a black line on black in dark mode.
     Inverting mirrors it to the same soft rule in light, alpha untouched.
     (The mobile rule below hides this image entirely, so this is desktop.) */
  html[data-predefined-style="true"] .content_container img[src*="868bcf42"]{
    filter:invert(1)}
  /* Same trap one tier up: bodycopy links carry a hard black border-bottom that
     nothing in the dark block ever recolored, so every underlined link drew a
     black rule under near-white text — the venture "Learn more about X" CTAs
     most visibly. currentColor follows whatever colour the link resolves to.
     Left non-!important on purpose: the filled .askband a.primary sets its own
     border with !important and must keep it. */
  html[data-predefined-style="true"] bodycopy a{border-bottom-color:currentColor}
  /* wordmark + hamburger are near-black artwork: invert only in the top band */
  html[data-predefined-style="true"] .pinned_top img{filter:invert(1) hue-rotate(180deg)}
  html[data-predefined-style="true"] #site_menu_button{color:#e7e6e3}
  /* mobile app bar + frosted panel, dark variants */
  body.mobile .pinned_top .page_container{background:rgba(18,19,22,.82)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.08)}
  body.mobile [data-id="17332734"] div:has(> h1){background:rgba(20,21,25,.84)!important}
  /* get-in-touch is the one page with a photographic backdrop, and the photo is
     a bright concrete wall exactly where the headline sits. Dark mode flips the
     type to near-white, so the whole hero — headline, copy, intents, email —
     read as a blank wall. Cargo's own .background_overlay div declares a wash
     inline but no stylesheet ever gave it a box, so it paints nothing; scrim
     the photo layer itself. The text column starts at 2/3 width on every
     desktop breakpoint, so the gradient is light over the staircase and heavy
     under the type: measured worst case 7.7:1 on the headline and 5.7:1 on the
     .8-alpha small copy, from 1024px to 1920px. */
  html[data-predefined-style="true"] [data-backdrop="wallpaper"] .background_splash::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to right,rgba(10,11,14,.42) 0%,rgba(10,11,14,.5) 45%,
      rgba(10,11,14,.76) 68%,rgba(10,11,14,.8) 100%)}
  /* footer band */
  .pinned_bottom .page_container{background:#17181b}
  a.intent:hover{background:rgba(255,255,255,.08)}
  .skip{background:#e7e6e3;color:#121316}
  body:not(.mobile) .topnav a{color:rgba(238,237,233,.78)!important}
  body:not(.mobile) .topnav a:hover,
  body:not(.mobile) .topnav a[aria-current="page"]{color:rgba(238,237,233,1)!important}
  .askband{border-top-color:rgba(255,255,255,.16)}
  [data-predefined-style="true"] .page .askband a{color:rgba(238,237,233,.9)!important;
    border-color:rgba(238,237,233,.85)!important}
  [data-predefined-style="true"] .page .askband a.primary{background:#e7e6e3;color:#121316!important}
  [data-predefined-style="true"] .page .askband a:hover{background:rgba(255,255,255,.08)}
  [data-predefined-style="true"] .page .askband a.primary:hover{background:#fff}
  .vnav{border-top-color:rgba(255,255,255,.16)}
  html[data-predefined-style="true"] .page .vnav a{color:rgba(238,237,233,.86)!important}
  @media (hover:hover){
    body:not(.mobile) .page_content .image-link:hover img{box-shadow:0 14px 34px rgba(0,0,0,.55)}
  }
}

/* iPhone fixes 2026-08-23: content cleared the old overlay bar by luck of a
   spacer image; with the spacer gone it slid under the fixed bar. Give the
   whole document the bar's height. And pin the icon glyphs to the Icons font —
   iOS otherwise renders legacy PUA codepoints as emoji (the autumn leaf). */
body.mobile{padding-top:calc(59px + env(safe-area-inset-top))}
[data-predefined-style="true"] .page span[aria-hidden="true"]{
  font-family:Icons,"Inter",sans-serif}