/* ==========================================================================
   site.css — everything that is NOT part of the exported Framer layout:
   custom cursor, hover states and animation helpers.
   Edit freely. framer.css holds the page layout; fonts.css the @font-face rules.
   ========================================================================== */

/* Page background behind the white main column (Framer "html body" style) */
html body { background: var(--token-2d0a1fe9-66b7-4e55-9ef6-2872c40c6330, #141414); }

/* Page margin lines (the 0.5px left/right borders of the main column) run all the way to the top and bottom edges:
   the column sits inside the page's 16px padding, so extend its border layer by that much both ways. */
.framer-iIh91 .framer-wyw1tb::after { top: -16px; bottom: -16px; height: auto; }   /* Framer also set height:100%, which kept the lines 32px short of the page bottom */

/* ---------- Custom cursor (black dot that follows the pointer) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }
}
.framer-B28n3.framer-1gy2dxo, .framer-B28n3 .framer-1gy2dxo { display: block; }
.framer-B28n3.framer-1bg66sn { align-content: center; align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0px; height: min-content; justify-content: center; overflow: hidden; padding: 0px; position: relative; width: min-content; }
.framer-B28n3 .framer-3bkzt7 { align-content: center; align-items: center; aspect-ratio: 1 / 1; display: flex; flex: none; flex-direction: row; flex-wrap: nowrap; gap: 4px; height: 16px; justify-content: center; overflow: visible; padding: 0px; position: relative; width: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.framer-B28n3 .framer-zmrsuq { flex: none; height: auto; position: relative; white-space: pre; width: auto; }
.framer-B28n3 .framer-1sidqoj { flex: none; height: 16px; position: relative; width: 16px; }
.framer-B28n3.framer-v-1lsc00o .framer-3bkzt7, .framer-B28n3.framer-v-1a17pj4 .framer-3bkzt7, .framer-B28n3.framer-v-1s271px .framer-3bkzt7 { aspect-ratio: unset; height: min-content; padding: 4px 8px 4px 8px; width: min-content; }
.framer-B28n3.framer-v-1bcarpy .framer-3bkzt7 { aspect-ratio: unset; height: min-content; padding: 4px 12px 4px 8px; width: min-content; }
.framer-B28n3.is-pressed .framer-3bkzt7 { transform: scale(.6); }
.framer-B28n3.is-small .framer-3bkzt7 { transform: scale(.75); }           /* smaller dot over company links */
.framer-B28n3.is-small.is-pressed .framer-3bkzt7 { transform: scale(.5); }
#custom-cursor { transition: opacity .2s; }
#custom-cursor .cursor-label p { margin: 0; line-height: 1.2; }
@media (hover: none), (pointer: coarse) { #custom-cursor { display: none !important; } }

/* ---------- Preloader ---------- */
.framer-1ceeo7g-container { position: fixed; inset: 0; z-index: 10; height: 100vh; height: 100dvh; }
.framer-1ceeo7g-container.is-done { pointer-events: none; }
.framer-1ceeo7g-container.is-hidden { display: none; }
body.scroll-locked { overflow: hidden; position: fixed; width: 100%; }
/* Smiley loading screen (hand-drawn smiley traced from Ana's drawing). The white sheet (.loader) and the face
   (.loader-stage > .loader-fly > .loader-hop > svg) are separate layers: the eyes pop in and look toward the pointer,
   the smile draws as the counter runs (it is the progress bar), the face hops, then the sheet lifts with a curved
   bottom edge while the face flies into the black smiley tab on the left. Timings: CONFIG.preloader in js/site.js. */
.loader { position: absolute; inset: 0; background: #fff;
  transition: transform .55s cubic-bezier(.77,.02,.24,1.02), border-radius .55s cubic-bezier(.77,.02,.24,1.02); }
.loader.is-out { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 22% 22%; }
.loader-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.loader-fly { will-change: transform, opacity; }
.loader-lean { transform-origin: 50% 80%; will-change: transform; }   /* tilts toward the pointer (js) */
.loader-lean.is-giggle { animation: loader-giggle .5s ease-in-out; }
@keyframes loader-giggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -7deg; } 40% { rotate: 6deg; } 60% { rotate: -4deg; } 80% { rotate: 2deg; } }
.loader-hop { transform-origin: 50% 100%; }
.loader-hop.is-hop { animation: loader-hop .42s cubic-bezier(.3,.7,.4,1); }
@keyframes loader-hop {
  0% { transform: none; }
  22% { transform: scale(1.08, .88); }
  55% { transform: translateY(-16%) scale(.95, 1.07); }
  80% { transform: translateY(0) scale(1.04, .96); }
  100% { transform: none; }
}
.loader-face { display: block; width: clamp(110px, 12vw, 170px); height: auto; overflow: visible; }
.loader-eyes { will-change: transform; }
.loader-eye { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.loader-eye.is-in { transform: scale(1); }
.loader-smile { transform-box: fill-box; transform-origin: 50% 0%; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.loader-happy .loader-smile { transform: scale(1.07, 1.12); }   /* wider grin */
.loader-count { position: absolute; right: 24px; bottom: 20px; font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 14px; line-height: 1; color: #000; font-variant-numeric: tabular-nums; }

/* ---------- Hero collage: cards fly from the centre to their place ---------- */
.framer-wzf0K .framer-npu125, .framer-wzf0K .framer-1b3wuo9, .framer-wzf0K .framer-1jztunr, .framer-wzf0K .framer-19m7w39, .framer-wzf0K .framer-s9hzd0, .framer-wzf0K .framer-17enr7h { will-change: transform; }

/* ---------- Hero collage layouts ----------
   Five cards: #2 dancers (.framer-npu125), #3 spotlight (.framer-1b3wuo9), #4 sofa (.framer-1jztunr),
   #5 café photo (.framer-19m7w39), #6 blurred portrait (.framer-17enr7h).
   Positions are % of the collage box (960x640 on desktop); each card is anchored by its top-left corner. */
.framer-wzf0K .framer-19m7w39 { width: 44%; }
.framer-wzf0K .framer-17enr7h { aspect-ratio: 1; }
.framer-wzf0K[class*="framer-v-"]:not(.framer-v-1ktbeq1) .framer-17enr7h { aspect-ratio: 1; height: var(--framer-aspect-ratio-supported, 192px); }

/* arrangement 0 */
.framer-wzf0K.framer-v-1lh49cs .framer-19m7w39 { width: 44%; height: var(--framer-aspect-ratio-supported, 282px); top: 4%; left: 2%; }
.framer-wzf0K.framer-v-1lh49cs .framer-npu125  { width: 24%; height: var(--framer-aspect-ratio-supported, 154px); top: 0%; left: 50%; }
.framer-wzf0K.framer-v-1lh49cs .framer-1b3wuo9 { width: 32%; height: var(--framer-aspect-ratio-supported, 205px); top: 28%; left: 66%; }
.framer-wzf0K.framer-v-1lh49cs .framer-1jztunr { width: 28%; height: 179px; top: 58%; left: 4%; }
.framer-wzf0K.framer-v-1lh49cs .framer-17enr7h { width: 20%; top: 50%; left: 38%; }
/* arrangement 1 */
.framer-wzf0K.framer-v-10kxe09 .framer-1b3wuo9 { width: 34%; height: var(--framer-aspect-ratio-supported, 218px); top: 2%; left: 2%; }
.framer-wzf0K.framer-v-10kxe09 .framer-npu125  { width: 24%; height: var(--framer-aspect-ratio-supported, 154px); top: 6%; left: 40%; }
.framer-wzf0K.framer-v-10kxe09 .framer-19m7w39 { width: 46%; height: var(--framer-aspect-ratio-supported, 294px); top: 36%; left: 50%; }
.framer-wzf0K.framer-v-10kxe09 .framer-17enr7h { width: 20%; top: 44%; left: 2%; }
.framer-wzf0K.framer-v-10kxe09 .framer-1jztunr { width: 26%; height: 179px; top: 66%; left: 22%; }
/* arrangement 2 */
.framer-wzf0K.framer-v-p1qgkt .framer-19m7w39 { width: 48%; height: var(--framer-aspect-ratio-supported, 307px); top: 2%; left: 50%; bottom: auto; }
.framer-wzf0K.framer-v-p1qgkt .framer-1jztunr { width: 28%; height: 179px; top: 4%; left: 4%; }
.framer-wzf0K.framer-v-p1qgkt .framer-17enr7h { width: 20%; top: 44%; left: 2%; }
.framer-wzf0K.framer-v-p1qgkt .framer-npu125  { width: 24%; height: var(--framer-aspect-ratio-supported, 154px); top: 40%; left: 26%; bottom: auto; }
.framer-wzf0K.framer-v-p1qgkt .framer-1b3wuo9 { width: 36%; height: var(--framer-aspect-ratio-supported, 230px); top: 58%; left: 56%; }
/* arrangement 3 */
.framer-wzf0K.framer-v-107v6w3 .framer-1b3wuo9 { width: 30%; height: var(--framer-aspect-ratio-supported, 192px); top: 2%; left: 2%; }
.framer-wzf0K.framer-v-107v6w3 .framer-19m7w39 { width: 34%; height: var(--framer-aspect-ratio-supported, 217px); top: 2%; left: 60%; }   /* was 43.5% wide, much bigger than the rest */
.framer-wzf0K.framer-v-107v6w3 .framer-17enr7h { width: 20%; top: 50%; left: 78%; }
.framer-wzf0K.framer-v-107v6w3 .framer-1jztunr { width: 28%; height: 179px; top: 40%; left: 8%; }
.framer-wzf0K.framer-v-107v6w3 .framer-npu125  { width: 28%; height: var(--framer-aspect-ratio-supported, 179px); top: 54%; left: 44%; }

/* phones: the collage box is 600x400 in the Framer build, wider than the screen, so covers flew off the edges.
   Fit the box to the screen (a bit taller than wide-screen proportions) and let the same percentages place the covers. */
@media (max-width: 1023.98px) {
  .framer-gdk7ch-container { width: min(600px, calc(100vw - 48px)) !important; height: calc(min(600px, 100vw - 48px) * .92) !important; }
  .framer-gdk7ch-container > a.framer-wzf0K { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }
  .framer-wzf0K .framer-1jztunr { height: auto !important; aspect-ratio: 168 / 179; }
}
/* phones: the hero text ("Strategic designer…", the paragraph, Manifesto) lines up with the Work and Underside
   text below (24px inside the margin lines) instead of sitting 30px further in, with less air around it */
@media (max-width: 1023.98px) {
  .framer-1g74l74 { padding: 0 !important; gap: 20px !important; }
  .framer-1v3rdo6 { padding-bottom: 64px !important; }
  .framer-WO4kD .framer-xaannp { padding-left: 0 !important; padding-right: 0 !important; }   /* footer "A product of a fleeting mental juncture." starts on the same line as the text above */
}

/* settled covers float gently, as if drifting in space; a small wiggle is added while hovered */
@keyframes cover-float {
  0%   { translate: 0 0; rotate: 0deg; }
  25%  { translate: 6px -10px; rotate: 0.8deg; }
  50%  { translate: -4px -4px; rotate: -0.6deg; }
  75%  { translate: -8px 8px; rotate: 0.5deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes cover-wiggle {
  0% { rotate: 0deg; } 20% { rotate: -3deg; } 40% { rotate: 3deg; } 60% { rotate: -2deg; } 80% { rotate: 2deg; } 100% { rotate: 0deg; }
}
.framer-wzf0K [data-framer-name^="Cover"] { transform-origin: 50% 50%; }
.framer-wzf0K [data-framer-name^="Cover"].cover-settled { animation: cover-float var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite; }
.framer-wzf0K [data-framer-name^="Cover"].cover-settled:hover { animation: cover-float var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite, cover-wiggle .7s ease-in-out infinite; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .framer-wzf0K [data-framer-name^="Cover"].cover-settled, .framer-wzf0K [data-framer-name^="Cover"].cover-settled:hover { animation: none; } }

/* ---------- Header links: Home, Work, Underside (next to Contact) ----------
   Plain text; on hover a black block fades in behind the word and the text turns white
   (after cristianaaraujo.com). Work opens blokovnik.com; Underside goes to the coming-soon page (underside.html).
   The Contact button's black box is the same size as this block. */
.framer-O71Xe .nav-links { display: flex; align-items: center; gap: 20px; margin-left: auto; margin-right: 24px; }
.framer-O71Xe .framer-1nw60nf { display: none; }   /* Framer's empty 'Menu items' slot reserved 248px and pushed Contact off narrower screens */
.framer-O71Xe.framer-v-12er5r8 .nav-links { margin-right: 0; gap: 12px; }   /* phone header: Contact already sits 16px away */
.framer-O71Xe.framer-v-12er5r8 .framer-nentp8 { flex: none; width: auto; }                  /* phone: the name takes only its width, the links get the rest */
.framer-O71Xe.framer-v-12er5r8 .framer-fbetan { min-width: 0; gap: 12px; }
.framer-O71Xe.framer-v-12er5r8 .nav-link-title { --framer-font-size: 16px; font-size: 16px; }
@media (max-width: 479px) { .framer-O71Xe .nav-links { display: none; } }
/* header items (Home, Work, Underside, Contact) are smaller and tighter than the name beside them */
.framer-O71Xe .nav-link-title, .framer-O71Xe a.contact-button .framer-text { --framer-font-size: 16px; --framer-letter-spacing: -.04em; font-size: 16px !important; letter-spacing: -.04em !important; }
@media (max-width: 1023.98px) { .framer-O71Xe .nav-link-title, .framer-O71Xe a.contact-button .framer-text { --framer-font-size: 15px; font-size: 15px !important; } }   /* narrow phones: no room next to the name and Contact; the squares follow the hero anyway */
.nav-link { position: relative; display: inline-flex; align-items: center; color: #000; text-decoration: none; white-space: nowrap; }
.nav-link-title { position: relative; z-index: 1; color: #000; transition: color .15s; }
.nav-link-cover { position: absolute; z-index: 0; inset: -1px -5px -2px -5px; background: #000; opacity: 0; transition: opacity .2s ease; }
.nav-link:hover .nav-link-cover, .nav-link:focus-visible .nav-link-cover { opacity: 1; }
.nav-link:hover .nav-link-title, .nav-link:focus-visible .nav-link-title { color: #fff; }
.nav-link:focus-visible { outline: none; }
html { scroll-behavior: smooth; }
#work, #underside { scroll-margin-top: 72px; }
/* Contact: same black box as the Work / Underside hover block (text padding 5px sides, 1px top, 2px bottom) */
.framer-O71Xe a.framer-1j8wilo.contact-button { padding: 1px 5px 2px !important; height: auto !important; min-height: 0 !important; width: auto !important; }

/* ---------- Buttons ---------- */
/* Contact pill: black with white text */
.framer-O71Xe a.framer-1j8wilo.contact-button { text-decoration: none; background-color: #000 !important; transition: background-color .2s ease, box-shadow .2s ease; }
.framer-O71Xe a.framer-1j8wilo.contact-button .framer-text { --framer-text-color: #fff; color: #fff; transition: color .2s ease; }
/* hover: inverts to white with black text and a hairline outline like the page's margin lines */
.framer-O71Xe a.framer-1j8wilo.contact-button:hover { background-color: #fff !important; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .24); }
.framer-O71Xe a.framer-1j8wilo.contact-button:hover .framer-text { --framer-text-color: #000; color: #000; }
/* All buttons and cursor labels are square-cornered black tags (no pills) */
.framer-O71Xe a.framer-1j8wilo.contact-button,
.framer-4m8e7t-container > a, .framer-107wixp-container > a { border-radius: 0 !important; }   /* MANIFESTO buttons */
.framer-1jdhydv, .framer-1pkeiwe { border-radius: 0 !important; }   /* LinkedIn / Instagram markers in the footer: squares, not dots */
.framer-B28n3.framer-v-1lsc00o, .framer-B28n3.framer-v-1a17pj4, .framer-B28n3.framer-v-1s271px, .framer-B28n3.framer-v-1bcarpy,
.framer-B28n3.framer-v-1lsc00o .framer-3bkzt7, .framer-B28n3.framer-v-1a17pj4 .framer-3bkzt7, .framer-B28n3.framer-v-1s271px .framer-3bkzt7, .framer-B28n3.framer-v-1bcarpy .framer-3bkzt7 { border-radius: 0 !important; }
/* LinkedIn and Instagram (footer): on hover the little black square grows into a black block behind the arrow and
   the word, which turn white. The whole item is the link. */
.framer-jwl6tf [data-framer-name^="Address"], .framer-WO4kD .framer-18b1qem { overflow: visible !important; }   /* Framer clipped these, which cut the block off */
.framer-jwl6tf [data-framer-name="Country"] { isolation: isolate; align-self: flex-start; width: max-content !important; overflow: visible !important; }
.framer-jwl6tf [data-framer-name="Country"] > div:not([data-framer-name]) { position: static !important; flex: none !important; width: auto !important; }
.framer-jwl6tf [data-framer-name="Country"] > div:not([data-framer-name]) p { white-space: nowrap; }   /* so the link can cover the whole item */
.framer-jwl6tf [data-framer-name="Country"]::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; right: calc(100% - 13px); bottom: calc(100% - 13px); background: #000; transition: inset .35s cubic-bezier(.2,.8,.2,1); }
.framer-jwl6tf [data-framer-name="Country"]:hover::before, .framer-jwl6tf [data-framer-name="Country"]:focus-within::before { left: -8px; top: -6px; right: 9px; bottom: -6px; }
.framer-jwl6tf [data-framer-name="Country"] a.framer-text::after { content: ""; position: absolute; inset: -6px 9px -6px -8px; }
.framer-jwl6tf [data-framer-name="Country"] a.framer-text { transition: color .2s ease .05s !important; }
.framer-jwl6tf [data-framer-name="Country"]:hover a.framer-text, .framer-jwl6tf [data-framer-name="Country"]:focus-within a.framer-text { color: #fff !important; --framer-link-hover-text-color: #fff; --framer-link-hover-text-decoration: none; text-decoration: none !important; outline: none; }
.framer-jwl6tf [data-framer-name="Icon [Arrow]"] { transition: filter .2s ease .05s, transform .35s cubic-bezier(.2,.8,.2,1); }
.framer-jwl6tf [data-framer-name="Country"] > div:not([data-framer-name="Dot"]):not([data-framer-name="Icon [Arrow]"]) { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
/* the arrow and word slide left over the square's spot, so the block has even space on both sides */
.framer-jwl6tf [data-framer-name="Country"]:hover > [data-framer-name="Icon [Arrow]"], .framer-jwl6tf [data-framer-name="Country"]:focus-within > [data-framer-name="Icon [Arrow]"],
.framer-jwl6tf [data-framer-name="Country"]:hover > div:not([data-framer-name="Dot"]):not([data-framer-name="Icon [Arrow]"]), .framer-jwl6tf [data-framer-name="Country"]:focus-within > div:not([data-framer-name="Dot"]):not([data-framer-name="Icon [Arrow]"]) { transform: translateX(-17px) !important; }   /* !important: Framer sets transform:none inline on the text */
.framer-jwl6tf [data-framer-name="Country"]:hover [data-framer-name="Icon [Arrow]"], .framer-jwl6tf [data-framer-name="Country"]:focus-within [data-framer-name="Icon [Arrow]"] { filter: invert(1); }
/* Manifesto (hero and footer) is not live yet and the cursor already shows a black "Soon" tag, so its hover is quieter:
   a thin underline draws in under the word, left to right. The span is added by js/site.js. */
a[title="Download File"] { background-color: transparent !important; }
a[title="Download File"] .manifesto-word { position: relative; }
a[title="Download File"] .manifesto-word::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: .5px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .6s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
a[title="Download File"]:hover .manifesto-word::after, a[title="Download File"]:focus-visible .manifesto-word::after { transform: scaleX(1); transform-origin: left center; }   /* draws in from the left, slides out to the right on leave; slow ease in and out */
a[title="Download File"]:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .framer-jwl6tf [data-framer-name="Country"]::before, a[title="Download File"] .manifesto-word::after { transition: none; } }

/* ---------- Closing call to action ("Ready to create something together?") ---------- */
.framer-iIh91 .framer-1v3rdo6 { overflow: clip; }   /* was hidden, which stops sticky positioning inside it; clip crops the same */
.cta { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 64px 0 24px; font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; color: #000; }
.cta-title { margin: 0; font-size: clamp(26px, 2.7vw, 38px); font-weight: 400; line-height: 1.1; letter-spacing: -0.04em; }
.cta-sub { margin: 16px 0 0; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; color: #000; }   /* footer link style (Instrument Sans 14px), in sentence case */
.cta-chair { display: block; width: clamp(150px, 14vw, 200px); height: auto; aspect-ratio: 200 / 210; overflow: visible; color: #000; margin: 40px 0 0; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cta-chair .chair { display: none; }
.cta-chair .chair.is-on { display: inline; }   /* one silhouette at a time */
.cta-chair:hover { transform: scale(1.05); }   /* slight zoom in on hover, back out on leave */
@media (prefers-reduced-motion: reduce) { .cta-chair { transition: none; } }
.cta-button { margin: 20px 0 0; padding: 1px 5px 2px; background: #000; color: #fff; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; text-decoration: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }   /* same as the header's Contact button */
.cta-button:hover, .cta-button:focus-visible { background: #fff; color: #000; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .24); outline: none; }
@media (min-width: 1281px) { .cta-button { font-size: 20px; } }

/* ---------- 404 page ---------- */
.page-404 .framer-1ceeo7g-container { display: none; }

/* Motion-reduced users: skip the intro */
@media (prefers-reduced-motion: reduce) {
  [data-framer-appear-id] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Work | Underside (right after the hero) ----------
   Two squares side by side, each with a description and one visual.
   The section breaks out of the wrapper's 24px side padding so its outer edges sit exactly on the
   page's margin lines (.framer-wyw1tb::after); it only draws the lines those don't: top, bottom
   and the divider between the squares, in the same 0.5px colour. Stacks on phones (<= 1023px). */
.framer-iIh91 .framer-1v3rdo6 { height: auto; }           /* was a fixed Framer height; content changed */
.work-underside {
  --wu-line: .5px solid var(--token-7da4a576-6690-47ef-8d99-1c9712cfecf7, #0000003d);
  display: grid; grid-template-columns: 1fr 1fr;
  /* two squares side by side = a 2:1 section; the rows (description / visual / list) are shared via subgrid,
     so both visuals start and end at the same height whatever the description length */
  aspect-ratio: 2 / 1; min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto;
  width: calc(100% + 48px); margin: 0 -24px; flex: none;
  border-top: var(--wu-line); border-bottom: var(--wu-line);
  font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; color: #000;
}
.work-underside .wu-square {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; padding: 24px;
  color: inherit; text-decoration: none; background: #fff;
}
.work-underside .wu-square + .wu-square { border-left: var(--wu-line); }
.work-underside .wu-head { display: flex; flex-direction: column; gap: 12px; }
.work-underside .wu-head h2 { margin: 0; font-size: 32px; line-height: 1; letter-spacing: -0.04em; font-weight: 400; }
.work-underside .wu-head p { margin: 0; max-width: 42ch; font-size: 14px; line-height: 1.2; }
.work-underside .wu-visual { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12% 20%; }
.work-underside .wu-visual > img,
.work-underside .wu-visual > video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.work-underside .wu-head p.wu-wide { max-width: 64ch; }

/* Work photo: fills the square's width and is cropped in height (centred) */
.work-underside .wu-visual--fill { padding: 24px 0; }
.work-underside .wu-visual--fill > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 50%; }

/* Chrome-style light browser window around the Work screenshot (macOS light-mode Chrome), square corners, no shadow, hairline outline.
   It fills the Work frame; the chrome is sized in cqw (% of the window's width) so it keeps its proportions,
   and the page screenshot fills the rest, cropped from the top. The whole window scales as one on hover. */
/* the frame is a size container so the window can be sized against both its width and height:
   the window keeps its own proportions (6.1cqw chrome + 1911x900 slides ≈ 1.88:1) and fits inside 84% of the frame, centred */
.work-underside .wu-visual--frame { container-type: size; }
.work-underside .wu-browser { container-type: inline-size; aspect-ratio: 1.88; width: min(84cqw, 84cqh * 1.88); height: auto; display: flex; flex-direction: column; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.work-underside .wu-browser-chrome { flex: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #202124; border-bottom: 1px solid #dadce0; }
.work-underside .wu-browser-tabs { display: flex; align-items: flex-end; height: 3.2cqw; padding: 0 1cqw; background: #dee1e6; }
.work-underside .wu-dots { display: flex; gap: .6cqw; align-self: center; margin-right: 1.2cqw; }
.work-underside .wu-dots i { width: .85cqw; height: .85cqw; border-radius: 50%; background: #ff5f57; }
.work-underside .wu-dots i:nth-child(2) { background: #febc2e; }
.work-underside .wu-dots i:nth-child(3) { background: #28c840; }
.work-underside .wu-tab { display: flex; align-items: center; justify-content: space-between; width: 20cqw; height: 2.5cqw; padding: 0 .9cqw; border-radius: .6cqw .6cqw 0 0; background: #fff; font-size: 1.05cqw; white-space: nowrap; }
.work-underside .wu-tab-title { overflow: hidden; text-overflow: ellipsis; }
.work-underside .wu-tab b { font-weight: 400; color: #5f6368; font-size: 1.2cqw; }
.work-underside .wu-newtab { align-self: center; margin-left: 1.2cqw; color: #5f6368; font-size: 1.5cqw; line-height: 1; }
.work-underside .wu-browser-toolbar { display: flex; align-items: center; gap: 1.1cqw; height: 2.9cqw; padding: 0 1.1cqw; background: #fff; }
.work-underside .wu-browser-toolbar svg { flex: none; width: 1.25cqw; height: 1.25cqw; fill: none; stroke: #5f6368; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.work-underside .wu-url { flex: 1; display: flex; align-items: center; height: 2cqw; padding: 0 1.1cqw; border-radius: 1cqw; background: #f1f3f4; color: #202124; font-size: 1.05cqw; white-space: nowrap; }
.work-underside .wu-avatar { flex: none; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px #dadce0; }
.work-underside .wu-kebab { flex: none; display: flex; flex-direction: column; gap: .2cqw; }
.work-underside .wu-kebab i { width: .3cqw; height: .3cqw; border-radius: 50%; background: #5f6368; }
/* slides stack on top of each other and switch instantly (no fade); each is cropped to the frame, from the top unless the slide sets its own object-position */
.work-underside .wu-slides { position: relative; flex: 1; min-height: 0; background: #fff; }
.work-underside .wu-slides > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; visibility: hidden; }
.work-underside .wu-slides > .is-active { visibility: visible; }
.work-underside .wu-square:hover .wu-browser { transform: scale(1.03); }

/* Underside: light grey panel (same frame as the Work visual) holding the smiley animation */
.work-underside .wu-panel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 6% 18%; background: #f2f2f2; }
.work-underside .wu-panel > * { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.work-underside .wu-panel > .wu-smiley { width: 100%; height: 100%; }
.work-underside .wu-square:hover .wu-panel > * { transform: scale(1.03); }

/* Clicks: the Work image opens blokovnik.com (the link wraps it without changing its layout); the whole Underside
   square opens the Underside page through an invisible link over it, with its own links (Explore list) kept on top */
.work-underside .wu-visual-link { display: contents; }
.work-underside .wu-square-link { position: absolute; inset: 0; z-index: 1; }
.work-underside .wu-square .wu-list a { position: relative; z-index: 2; }

/* Role / Company list at the bottom of the Work square (two columns, like an "About" spec sheet) */
.work-underside .wu-list { flex: none; font-size: 14px; line-height: 1.5; }
.work-underside .wu-list h3 { margin: 0 0 12px; font-size: 15px; font-weight: 400; line-height: 1.2; }
.work-underside .wu-list dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 16px; margin: 0; }
.work-underside .wu-list dt, .work-underside .wu-list dd { margin: 0; }
.work-underside .wu-links { list-style: none; margin: 0; padding: 0; }
.work-underside .wu-links li { margin: 0; }
.work-underside .wu-list a { color: inherit; text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 2px; }
.work-underside .wu-list a:hover { text-decoration: none; }
.work-underside .wu-square:hover .wu-visual > img,
.work-underside .wu-square:hover .wu-visual > video { transform: scale(1.03); }

@media (max-width: 1023px) {
  .work-underside { grid-template-columns: 1fr; aspect-ratio: auto; grid-template-rows: none; }
  .work-underside .wu-square { display: flex; flex-direction: column; grid-row: auto; }   /* on phones the blocks grow with their content */
  .work-underside .wu-visual--fill { flex: none; aspect-ratio: 4 / 3; }
  .work-underside .wu-square + .wu-square { border-left: 0; border-top: var(--wu-line); }
  .work-underside .wu-head h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-underside .wu-visual > img, .work-underside .wu-visual > video, .work-underside .wu-panel > *, .work-underside .wu-browser { transition: none; }
}