/* Founder Garage Studio · "Werkbank": the garage as a precise workshop.
   One rule set: six type sizes, one section spacing, radius 4 for containers, square photos with crop marks,
   one glass card, one dark surface, one primary button. */
:root {
  --paper: #F4F2EC;
  --paper-2: #ECE8DF;
  --line: #DCD7CC;
  --graphite: #1C1F1D;
  --ink-soft: #5A5E58;
  --evergreen: #2F4A3A;
  --sage: #8EA58C;
  --moss: #738A6E;
  --on-dark: #F4F2EC;
  --on-dark-soft: #B8C4BA;
  --signal: #E8572A;      /* large text and button fill only (3.2:1 on paper) */
  --signal-ink: #B5401A;  /* small text on paper (5:1) */
  --signal-dark: #F08A62; /* accent on evergreen (3.9:1) */
  --signal-hover: #F0703F; /* primary button hover */
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal);
  --glass: rgba(255, 255, 255, .58);
  --glass-edge: rgba(255, 255, 255, .8);
  --frost: blur(20px) saturate(150%);

  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-display: clamp(3.1rem, 8.6vw, 8.25rem);
  --fs-h2: clamp(2.3rem, 5vw, 4.5rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.75rem);
  --fs-lead: clamp(1.1rem, 1.5vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .8125rem;

  --r: 4px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --section: clamp(80px, 10vw, 128px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r); }
.dark :focus-visible, .foot :focus-visible { --paper: var(--evergreen); }
.foot :focus-visible { --paper: var(--graphite); }
.skip { position: absolute; left: 12px; top: -100px; z-index: 30; padding: .6rem .9rem; border-radius: var(--r); background: var(--graphite); color: var(--paper); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--graphite); font: 400 var(--fs-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
h1 { font-size: var(--fs-display); line-height: .94; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); line-height: 1; margin-bottom: 3rem; max-width: 18ch; }
h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 36rem; }
.label, .idx { font: 500 var(--fs-small)/1.4 var(--mono); letter-spacing: .02em; color: var(--ink-soft); }
.idx { margin-bottom: 1.2rem; color: var(--signal-ink); }
.sub { margin: 4rem 0 1.4rem; }

/* Sections: one spacing, two surfaces */
.section { padding: var(--section) 0; }
.section.dark { background: var(--evergreen); color: var(--on-dark); }
.dark .lead, .dark .label, .dark dd { color: var(--on-dark-soft); }
.dark .idx { color: var(--signal-dark); }
.dark dt { color: var(--signal-dark); }

/* Hairline workshop grid, behind hero and the sections that need texture */
.hero { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; background-position: -1px -1px; }

/* Crop marks: four corner ticks on every photo */
.crop { position: relative; display: block; }
.crop::after { content: ""; position: absolute; inset: 10px; pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) top left / 14px 1.5px, linear-gradient(currentColor, currentColor) top left / 1.5px 14px,
    linear-gradient(currentColor, currentColor) top right / 14px 1.5px, linear-gradient(currentColor, currentColor) top right / 1.5px 14px,
    linear-gradient(currentColor, currentColor) bottom left / 14px 1.5px, linear-gradient(currentColor, currentColor) bottom left / 1.5px 14px,
    linear-gradient(currentColor, currentColor) bottom right / 14px 1.5px, linear-gradient(currentColor, currentColor) bottom right / 1.5px 14px;
  background-repeat: no-repeat; color: rgba(255, 255, 255, .9); mix-blend-mode: difference; }

/* Buttons and links: one primary, one ghost, one link */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .8rem 1.4rem; border-radius: var(--r); border: 0; background: var(--signal); color: var(--graphite); font: 700 var(--fs-body)/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .3s var(--ease), background .3s; }
.btn:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); background: var(--signal-hover); }
.btn:active { transform: translateY(1px) scale(.985); transition-duration: .08s; }
.btn-ghost:active { background: var(--graphite); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--graphite); box-shadow: inset 0 0 0 1.5px var(--graphite); }
.btn-ghost:hover { background: var(--graphite); color: var(--paper); }
.btn-small { min-height: 40px; padding: .55rem 1rem; }
.link { font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; transition: border-color .25s, color .25s; }
.link:hover { border-color: var(--signal); }
.link::after { content: " ↗"; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2rem; }

/* Cards: one glass card */
.card { position: relative; border-radius: var(--r); background: var(--glass); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 1px 0 var(--line), 0 18px 40px -30px rgba(28, 31, 29, .45); }

/* Header */
.top { position: fixed; top: 12px; left: max(12px, calc(50% - 680px)); right: max(12px, calc(50% - 680px)); z-index: 20; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.4rem; padding: .5rem .5rem .5rem .9rem; border-radius: var(--r); background: rgba(244, 242, 236, .72); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 10px 30px -18px rgba(28, 31, 29, .35); }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.stamp { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); background: var(--graphite); color: var(--paper); font: 700 .78rem/1 var(--mono); letter-spacing: .02em; box-shadow: inset 0 0 0 2px var(--graphite), inset 0 0 0 3px var(--paper); }
.clocks { display: flex; gap: 1.1rem; font: 500 var(--fs-small)/1 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.links { display: flex; gap: 1.4rem; font-weight: 600; }
.links a { position: relative; padding: .3rem 0; text-decoration: none; color: var(--ink-soft); transition: color .25s; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.links a:hover { color: var(--graphite); }
.links a:hover::after, .links a[aria-current="true"]::after { transform: none; }
.links a[aria-current="true"] { color: var(--graphite); }
.top-actions { display: flex; align-items: center; gap: .6rem; }
.lang { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: var(--r); font: 700 var(--fs-small)/1 var(--mono); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.btn-small .short { display: none; }
.menu-toggle { display: none; min-height: 40px; padding: 0 .9rem; border: 0; border-radius: var(--r); background: var(--graphite); color: var(--paper); font: 700 var(--fs-small)/1 var(--mono); cursor: pointer; }

/* Hero */
.hero { padding: 7.5rem 0 0; }
.hero h1 { margin: .4rem 0 2.2rem; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .line > span { display: inline-block; animation: rise 1.1s calc(.15s + var(--i) * .13s) var(--ease) both; }
.hero h1 .line:last-child { color: var(--evergreen); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem 3rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.lead, .hero-facts, .hero-actions { animation: fade 1s .7s var(--ease) both; }
.hero-facts { margin: 1.2rem 0 1.8rem; font: 700 var(--fs-lead)/1.3 var(--sans); letter-spacing: -.01em; color: var(--graphite); }
.hero-futures .lead { margin-bottom: 0; }
.why-lead { margin-bottom: 2rem; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.strip { margin-top: clamp(2.6rem, 5vw, 4rem); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; background: var(--paper); }
.strip-track { display: flex; gap: 14px; width: max-content; animation: marquee 80s linear infinite; }
.strip { position: relative; }
.strip:hover .strip-track, .strip.paused .strip-track { animation-play-state: paused; }
.strip-toggle { position: absolute; right: var(--gutter); bottom: 24px; min-height: 36px; padding: 0 .8rem; border: 0; border-radius: var(--r); background: rgba(28, 31, 29, .78); color: var(--paper); font: 500 var(--fs-small)/1 var(--mono); cursor: pointer; backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); }
.strip-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.strip li { height: clamp(180px, 22vw, 290px); flex: none; }
.strip img { height: 100%; width: auto; }
.strip li.crop::after { inset: 8px; }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* Logos */
.logobar { padding: 3rem 0 0; }
.logobar ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem 2rem; margin-top: 1.6rem; align-items: center; }
.logobar li { display: grid; place-items: center; min-height: 60px; }
.logobar img { height: var(--h); width: var(--w); max-width: 160px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .62; mix-blend-mode: multiply; transition: filter .4s, opacity .4s; }
.logobar img:hover { filter: none; opacity: 1; }

/* 01 Six weeks: the multiplier */
.equation { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1.35fr; align-items: stretch; }
.factor, .result { min-height: 168px; padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-start; font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.12; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.op { align-self: center; justify-self: center; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: var(--evergreen); }
.result { border-radius: var(--r); background: var(--evergreen); color: var(--on-dark); }
.result span:last-child { color: var(--on-dark-soft); }
.weeks-label { margin-top: 2.6rem; }
.weeks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: .8rem; }
.wk { display: flex; flex-direction: column; justify-content: flex-start; gap: .35rem; min-height: 76px; padding: .8rem 1rem; border-radius: var(--r); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); transform-origin: left; }
.wk span { font: 500 var(--fs-small)/1 var(--mono); color: var(--ink-soft); }
.wk strong { font-weight: 800; line-height: 1.15; }
.wk-2 { grid-column: span 3; background: var(--sage); box-shadow: none; }
.wk-2 span { color: var(--graphite); }
.wk-3 { background: var(--signal); box-shadow: none; }
.wk-3 span { color: var(--graphite); }
.weeks.reveal.in .wk { animation: grow .8s var(--ease) both; }
.weeks.reveal.in .wk-1 { animation-delay: .12s; }
.weeks.reveal.in .wk-2 { animation-delay: .24s; }
.weeks.reveal.in .wk-3 { animation-delay: .5s; }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
.after { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; border-top: 1.5px solid var(--graphite); }
.after li { padding-top: 1.2rem; }
.after strong { display: block; font-size: var(--fs-lead); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.after span { display: block; margin-top: .4rem; color: var(--ink-soft); }

/* 02 Projects */
.cases { border-top: 1px solid var(--line); }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.case { display: flex; flex-direction: column; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s; }
.case:hover { transform: translateY(-4px); }
.case-visual { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.case-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.case:hover .case-visual img { transform: scale(1.04); }
.case-visual.blank { display: grid; place-items: end start; padding: 1.4rem; background: var(--evergreen); color: var(--on-dark); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -.03em; background-image: linear-gradient(rgba(244, 242, 236, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 242, 236, .1) 1px, transparent 1px); background-size: 40px 40px; }
.case-text { padding: 1.5rem 1.5rem 1.7rem; }
.case-text h3 { margin: .4rem 0 1rem; }
dl { display: grid; gap: .6rem; }
dl > div { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; }
dt { font: 500 var(--fs-small)/1.6 var(--mono); color: var(--signal-ink); }
dd { color: var(--graphite); }
.thumbs { display: flex; gap: .6rem; margin-top: 1.2rem; }
.zoom { all: unset; cursor: zoom-in; display: block; position: relative; width: 100%; box-sizing: border-box; }
.zoom:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.thumbs img { width: 120px; aspect-ratio: 3 / 2; object-fit: cover; }
.more { margin-top: 1.4rem; }
.more summary { list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary { margin-bottom: 1rem; }
.more .when-open, .more[open] .when-closed { display: none; }
.more[open] .when-open { display: inline; }
.more[open] summary:not(:hover) { background: transparent; color: var(--graphite); }
.cv-toggle { display: none; margin-top: 1rem; }
.less-end { margin-top: 1rem; }
/* The one radius exception: phone screenshots keep their device corners (18px). */

/* 03 Mindtrek */
.mindtrek { overflow: hidden; }
.mindtrek-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mindtrek .lead { color: var(--on-dark); margin-bottom: 1.6rem; }
.mindtrek dd { color: var(--on-dark); }
.mindtrek .link { color: var(--on-dark); }
.phones { position: relative; height: clamp(440px, 46vw, 620px); }
.phone { position: absolute; top: 50%; left: 50%; width: clamp(150px, 15vw, 228px); transform: translate(calc(-50% + (var(--i) - 1.5) * 62%), -50%) rotate(calc((var(--i) - 1.5) * 4deg)); transition: transform 1.1s var(--ease) calc(var(--i) * 90ms); }
.phone img { width: 100%; height: auto; border-radius: 18px; /* device corners, documented exception */ box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.phone:nth-child(2), .phone:nth-child(3) { z-index: 2; }
.phones:not(.in) .phone { transform: translate(calc(-50% + (var(--i) - 1.5) * 20%), -20%); }

/* 04 About + partner */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.portrait { margin: 0; position: sticky; top: 7rem; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about .lead { margin-bottom: 1rem; }
.cv { border-top: 1.5px solid var(--graphite); }
.cv li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.cv .label { color: var(--signal-ink); padding-top: .2rem; }
.cv h3 { font-size: var(--fs-body); margin-bottom: .3rem; letter-spacing: -.01em; }
.cv p { color: var(--ink-soft); }
.partner { margin-top: var(--section); }
.partner-card { display: grid; grid-template-columns: minmax(160px, 26%) 1fr; border-radius: var(--r); overflow: hidden; background: var(--evergreen); color: var(--on-dark); }
.partner-card img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: center 25%; }
.partner-card > div { padding: clamp(1.4rem, 3vw, 2.4rem); align-self: center; }
.partner-card .label { color: var(--signal-dark); }
.partner-card h3 { margin: .5rem 0 .2rem; }
.partner-card .role { font-weight: 700; color: var(--on-dark-soft); margin-bottom: 1rem; }
.partner-card .link { display: inline-block; margin-top: 1.2rem; color: var(--on-dark); }

/* 05 Gallery */
.gallery { border-top: 1px solid var(--line); }
.gallery ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery figcaption { margin-top: .6rem; }

/* 06 Fit */
.fit { border-top: 1px solid var(--line); }
.fit-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.statement { margin-top: 2rem; font-weight: 800; letter-spacing: -.025em; font-size: var(--fs-h3); line-height: 1.15; }
.not { padding: 1.8rem; }
.not ul { margin-top: 1rem; }
.not li { position: relative; padding: .65rem 0 .65rem 1.6rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.not li::before { content: "×"; position: absolute; left: 0; font-weight: 800; color: var(--signal-ink); }

/* 07 FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-list details { break-inside: avoid; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child, .faq-list details:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; font-weight: 700; font-size: var(--fs-lead); letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font: 500 var(--fs-lead)/1 var(--mono); color: var(--signal-ink); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.faq-list details p { padding: 0 0 1.4rem; color: var(--ink-soft); max-width: 40rem; }

/* Legal pages */
.legal-top { grid-template-columns: 1fr auto; }
.legal { padding-top: 9rem; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: 2.4rem; }
.legal section { max-width: 46rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.legal h2 { font-size: var(--fs-h3); margin-bottom: .8rem; max-width: none; }
.legal p { color: var(--ink-soft); margin-bottom: .5rem; }
.legal a { color: var(--graphite); }

/* 08 Close */
.close-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.close h2 { margin-bottom: 0; }
.close .lead { margin-bottom: 1.6rem; }
.close-mail { margin-top: 1.2rem; color: var(--on-dark-soft); }
.close-mail .link { color: var(--on-dark); }
.close-mail .link::after { content: ""; }

/* Footer */
.foot { background: var(--graphite); color: var(--on-dark-soft); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.6rem; padding-bottom: 2rem; font-size: var(--fs-small); }
.foot .brand { font-weight: 500; letter-spacing: 0; white-space: normal; }
.foot .stamp { background: var(--paper); color: var(--graphite); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--graphite); }
.foot .label { color: var(--on-dark-soft); }
.foot nav { display: flex; gap: 1.2rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--on-dark); }

/* Lightbox */
.lightbox { padding: 0; border: 0; max-width: min(92vw, 1100px); max-height: 88vh; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(28, 31, 29, .86); }
.lightbox img { display: block; max-width: min(92vw, 1100px); max-height: 88vh; width: auto; height: auto; }
.lightbox-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: var(--r); border: 0; background: var(--paper); color: var(--graphite); font: 700 var(--fs-lead)/1 var(--sans); cursor: pointer; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.case.reveal.in:hover { transform: translateY(-4px); transition-delay: 0ms; }

/* Responsive */
@media (max-width: 1100px) {
  .top { grid-template-columns: auto 1fr auto; }
  .links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; padding: .4rem; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -20px rgba(28, 31, 29, .4); }
  .links.open { display: flex; }
  .links a { padding: .9rem .8rem; border-bottom: 1px solid var(--line); color: var(--graphite); }
  .links a::after { top: .9rem; bottom: .9rem; right: auto; left: 0; width: 2px; height: auto; transform: scaleY(0); }
  .links a:hover::after, .links a[aria-current="true"]::after { transform: none; }
  .links a[aria-current="true"] { padding-left: 1.1rem; }
  .links a:last-child { border-bottom: 0; }
  .menu-toggle { display: inline-block; }
  .clocks { display: none; }
  .top { grid-template-columns: 1fr auto; }
  }
@media (max-width: 860px) {
  .mindtrek-grid, .about-grid, .fit-grid, .close-grid, .partner-card, .case-grid, .faq-list { grid-template-columns: 1fr; }
  .faq-list details:nth-last-child(2) { border-bottom: 0; }
  .portrait { position: static; max-width: 420px; }
  .partner-card img { min-height: 0; aspect-ratio: 4 / 3; }
  .gallery ul { grid-template-columns: 1fr 1fr; }
  .after { grid-template-columns: 1fr 1fr; }
  .logobar ul { grid-template-columns: repeat(4, 1fr); }
  .equation { grid-template-columns: 1fr; gap: 4px; }
  .op { display: none; }
  .factor, .result { min-height: 0; padding: .9rem 1rem; }
  .factor:not(:first-of-type)::before, .result::before { font-weight: 800; margin-right: .4rem; color: var(--evergreen); }
  .factor:not(:first-of-type)::before { content: "×"; }
  .result::before { content: "="; color: var(--on-dark-soft); }
  .phones { height: 460px; }
}
@media (max-width: 620px) {
  .clocks { display: none; }
  .logobar ul { grid-template-columns: repeat(3, 1fr); gap: 1.2rem .8rem; }
  .logobar img { height: calc(var(--h) * .72); width: calc(var(--w) * .72); max-width: 100%; }
  .logobar li { min-height: 44px; }
  .top { grid-template-columns: 1fr auto; top: 8px; left: 8px; right: 8px; gap: .5rem; }
  .brand-name { font-size: .95rem; }
  .btn-small .long { display: none; }
  .btn-small .short { display: inline; }
  .hero { padding-top: 7.5rem; }
  .after,   .weeks { grid-template-columns: 1fr 1fr; }
  .wk-2, .wk-3 { grid-column: span 2; }
  dl > div, .cv li { grid-template-columns: 1fr; gap: .15rem; }
  .gallery ul { grid-template-columns: 1fr 1fr; gap: 1.2rem .6rem; }
  .cv li:nth-child(n+4) { display: none; }
  .cv.open li { display: grid; }
  .cv-toggle { display: inline-flex; }
  .phones { height: 400px; }
  .phone { width: 160px; }
  .phone:nth-child(1), .phone:nth-child(4) { display: none; }
  .phone:nth-child(2) { transform: translate(-88%, -50%) rotate(-3deg); }
  .phone:nth-child(3) { transform: translate(-12%, -50%) rotate(3deg); }
  .foot .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .top .brand-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .strip-toggle { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .strip { overflow-x: auto; }
}

/* ===== Futures draft (body.futures): artifact hero, problem, triggers, sprint days, map, engagement ===== */
.hero-futures { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.hero-futures h1 { font-size: clamp(2.25rem, 4.9vw, 4.9rem); max-width: 22ch; margin-bottom: 2.2rem; line-height: .98; }
.hero-futures .lead { margin-bottom: 2rem; }
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.split-head { position: sticky; top: 7rem; }
.split-head .lead { margin-top: 2rem; }
.split h2 { margin-bottom: 0; }
.why-cols { border-top: 1.5px solid var(--graphite); }
.why-cols li { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.why-cols strong { display: block; font-size: var(--fs-lead); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.why-cols span { display: block; color: var(--ink-soft); }
.contains { display: block; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--line); font: 500 var(--fs-small)/1.5 var(--mono); color: var(--signal-ink); }
.statement + .why-body { margin-top: .6rem; }
.about .why-cols + .statement { margin-top: 2rem; }

.method { border-top: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; background-position: -1px -1px; }
.method .lead { margin-bottom: 2.4rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: step; }
.step { padding: 1.5rem; display: flex; flex-direction: column; }
.step h3 { margin: .3rem 0 .4rem; }
.step-what { font-weight: 600; margin-bottom: 1.2rem; }
.step-receive { margin-bottom: 1rem; font-size: .95rem; line-height: 1.4; }
.step-receive .label { display: block; margin-bottom: .15rem; color: var(--signal-ink); }
.step-methods summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: .5rem 0; border-top: 1px solid var(--line); }
.step-methods summary::-webkit-details-marker { display: none; }
.step-methods summary::after { content: "+"; font: 500 var(--fs-small)/1 var(--mono); color: var(--signal-ink); }
.step-methods[open] summary::after { content: "−"; }
.step-methods summary:focus-visible { box-shadow: var(--focus); }
.step-tools li { padding: .4rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.step-note { margin-top: auto; padding-top: 1.2rem; color: var(--ink-soft); font-size: .95rem; }


.sprint { border-top: 1px solid var(--line); }
.sprint .lead { margin-bottom: 1.6rem; }
.decision-label { margin-top: .8rem; color: var(--signal-ink); }
.after-six { margin-top: 2.4rem; }

.situations-label { margin-top: 2rem; }
.situations li { position: relative; padding: .55rem 0 .55rem 1.2rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.situations li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 6px; height: 6px; background: var(--signal); }
.cases .lead { margin-bottom: 2rem; }

.signals { border-top: 1px solid var(--line); }
.signals .lead { margin-bottom: 2rem; }
.signal-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.signal-list li { padding: 1.5rem; }
.signal-text { font-weight: 700; margin: .5rem 0 1rem; line-height: 1.35; }
.signal-sowhat { color: var(--ink-soft); font-size: .95rem; }
.signal-sowhat .label { display: block; color: var(--signal-ink); margin-bottom: .3rem; }
.signals-note { margin-top: 1.4rem; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .split, .steps, .signal-list { grid-template-columns: 1fr; }
  .split-head { position: static; }
  .split h2 { margin-bottom: 2rem; }
}
@media (max-width: 620px) {
  .why-cols li { grid-template-columns: 1fr; gap: .4rem; }
}

/* Hero artifacts: three cards from 2029, laid on the table one after another */
.artifacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: stretch; }
.artifact { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 1rem 1rem 1.1rem; border-radius: var(--r); background: var(--glass); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 1px 0 var(--line), 0 18px 40px -30px rgba(28, 31, 29, .45); opacity: 0; transform: translateY(16px) rotate(-1deg); transition: opacity .7s var(--ease) calc(.4s + var(--i) * .22s), transform .7s var(--ease) calc(.4s + var(--i) * .22s); }
.artifact { --rest: 0px; }
.artifact:nth-child(1) { --rest: 12px; }
.artifact:nth-child(2) { --rest: -10px; }
.artifact:nth-child(3) { --rest: 6px; }
.artifacts.in .artifact { opacity: 1; transform: translateY(var(--rest)); }
.artifacts.in .artifact-dropped { opacity: .85; }
.card:not(.case)::after, .artifact::after { content: ""; position: absolute; inset: 8px; pointer-events: none;
  background: linear-gradient(currentColor, currentColor) top left / 10px 1.5px, linear-gradient(currentColor, currentColor) top left / 1.5px 10px, linear-gradient(currentColor, currentColor) bottom right / 10px 1.5px, linear-gradient(currentColor, currentColor) bottom right / 1.5px 10px; background-repeat: no-repeat; color: var(--sage); }
.artifact-meta { display: flex; justify-content: space-between; font: 500 var(--fs-small)/1.2 var(--mono); color: var(--ink-soft); }
.artifact-kind { margin-top: .9rem; font: 500 var(--fs-small)/1.2 var(--mono); color: var(--signal-ink); }
.artifact-body { margin-top: .5rem; flex: 1; }
.artifact-main { font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; }
.artifact-sub { margin-top: .4rem; font-size: .9rem; color: var(--ink-soft); }
.artifact-assume { margin-top: .9rem; font-size: .85rem; line-height: 1.35; color: var(--graphite); }
.artifact-assume .label { display: block; margin-bottom: .15rem; }
.artifacts-note { margin-top: .9rem; font: 500 var(--fs-small)/1.5 var(--mono); color: var(--ink-soft); max-width: 40rem; }
.artifact-state { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--line); font: 500 var(--fs-small)/1.3 var(--mono); color: var(--ink-soft); }
.artifact-state .dot { display: inline-block; width: 8px; height: 8px; margin-right: .5rem; background: var(--line); vertical-align: 1px; }
.artifact-built { box-shadow: inset 0 0 0 2px var(--signal), 0 1px 0 var(--line), 0 24px 50px -30px rgba(28, 31, 29, .5); }
.artifact-built .artifact-state { color: var(--graphite); }
.artifact-built .dot { background: var(--signal); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 87, 42, .45); } 50% { box-shadow: 0 0 0 7px rgba(232, 87, 42, 0); } }
.artifact-changed .dot { background: var(--sage); }
.artifact-dropped { opacity: .85; }
.artifact-dropped .artifact-main { text-decoration: line-through; text-decoration-color: var(--ink-soft); text-decoration-thickness: 1.5px; }
@media (max-width: 1100px) { .artifacts { max-width: 760px; } }
@media (max-width: 620px) { .artifacts { grid-template-columns: 1fr; } .artifact { min-height: 0; --rest: 0px !important; } }

/* Decision gate on the futures week strip: orange hairline after week 2 */
.futures .weeks { position: relative; }
.futures .wk-1 { position: relative; }
.futures .wk-1::after { content: ""; position: absolute; top: -8px; bottom: -8px; right: -3px; width: 2px; background: var(--signal); }
.futures .decision-label { margin-top: 1rem; }

@media (max-width: 620px) {
  .futures .wk-1::after { top: auto; bottom: -5px; right: 0; left: 0; width: auto; height: 2px; }
  .futures .decision-label { margin-top: .6rem; padding-left: .6rem; border-left: 2px solid var(--signal); }
}

/* Triggers: four quotes from the buyer, same card as the old signal list */
.when { border-top: 1px solid var(--line); }
.when .lead { margin-bottom: 2rem; }
.triggers { grid-template-columns: repeat(2, 1fr); }
.triggers .signal-text { margin-bottom: 0; font-weight: 600; }
.who { max-width: 40rem; }

/* Ten working days: a strip of cells; client sessions in signal, observation outlined, studio days plain */
.days-label { margin-top: 3rem; }
.days { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: .8rem; }
.day { display: flex; flex-direction: column; gap: .35rem; min-height: 76px; padding: .7rem .6rem; border-radius: var(--r); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); transform-origin: left; }
.day span { font: 500 var(--fs-small)/1 var(--mono); color: var(--ink-soft); }
.day strong { font-size: .85rem; font-weight: 800; line-height: 1.15; }
.day-session { background: var(--signal); box-shadow: none; }
.day-session span { color: var(--graphite); }
.day-observe { background: var(--paper); box-shadow: inset 0 0 0 2px var(--signal); }
.days.reveal.in .day { animation: grow .8s calc(var(--i) * .07s) var(--ease) both; }
.dim { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: .5rem; }
.dim span { grid-column: span 5; position: relative; padding-top: 14px; font: 500 var(--fs-small)/1.2 var(--mono); color: var(--ink-soft); text-align: center; }
.dim span::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--moss); }
.dim span::after { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 9px; border-left: 1px solid var(--moss); border-right: 1px solid var(--moss); }
.days-legend { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1rem; font: 500 var(--fs-small)/1.4 var(--mono); color: var(--ink-soft); }
.days-legend li { display: flex; align-items: center; gap: .5rem; }
.days-legend i { width: 12px; height: 12px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.days-legend .lg-session i { background: var(--signal); box-shadow: none; }
.days-legend .lg-observe i { background: var(--paper); box-shadow: inset 0 0 0 2px var(--signal); }

/* Deliverables and the Strategic Futures Map */
.get { border-top: 1px solid var(--line); }
.get .split-head .lead { max-width: 30rem; }
.decide { margin-top: calc(var(--section) * .55); }
.decide .sub { margin: 0 0 2rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.decide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem clamp(2rem, 5vw, 5rem); border-top: 1.5px solid var(--graphite); padding-top: 2rem; }
.decide-grid strong { display: block; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; max-width: 16ch; }
.decide-grid span { display: block; margin-top: .6rem; color: var(--ink-soft); max-width: 34rem; }
.deliverables { grid-template-columns: repeat(3, 1fr); }
.get-after { margin-top: 1.6rem; color: var(--ink-soft); max-width: 40rem; }
.about .why-cols { margin-top: 0; }
.about h2 { margin-bottom: 2.4rem; }
.about .sub + .lead { margin-top: 0; }
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: calc(var(--section) * .8); padding-top: calc(var(--section) * .5); border-top: 1px solid var(--line); }
.map-title { margin-top: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.map-grid .lead { margin-top: 1.2rem; }
.map-cells { margin-top: 2rem; }
.map-cells li { padding: .9rem 0; border-top: 1px solid var(--line); }
.map-cells strong { display: block; font-weight: 800; letter-spacing: -.01em; }
.map-cells span { display: block; margin-top: .25rem; color: var(--ink-soft); font-size: .95rem; }
.map { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0; }
.map > div, .map-head { padding: 1rem; border-radius: var(--r); }
.map-head { grid-column: 1 / -1; padding-bottom: .4rem; }
.map-head strong { display: block; margin-top: .3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.map-center { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; background: var(--evergreen); color: var(--on-dark); font-size: .9rem; line-height: 1.35; }
.map-center span:last-child { text-align: right; }
.map-tension { width: 40px; height: 2px; background: var(--signal); position: relative; }
.map-tension::before, .map-tension::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; background: var(--signal); transform: rotate(45deg); }
.map-tension::before { left: -5px; } .map-tension::after { right: -5px; }
.map-cell { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.map-fields { grid-column: 1 / -1; }
.map-lines { margin-top: .6rem; }
.map-lines li { position: relative; padding: .35rem 0 .35rem 1.3rem; font-size: .9rem; line-height: 1.35; }
.map-lines i, .map-legend i { position: absolute; left: 0; top: .62rem; width: 11px; height: 11px; border-radius: 50%; }
.observed i { background: var(--signal); }
.concluded i, .assessed i { background: var(--sage); }
.untested i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.map-fields table { width: 100%; margin-top: .6rem; border-collapse: collapse; table-layout: fixed; font-size: .9rem; }
.map-fields thead th:first-child { width: 38%; }
.map-fields th { text-align: left; font-weight: 700; padding: .5rem .4rem .5rem 0; border-top: 1px solid var(--line); line-height: 1.3; }
.map-fields thead th { font: 500 var(--fs-small)/1.3 var(--mono); color: var(--ink-soft); border-top: 0; }
.map-fields td { padding: .5rem .4rem; border-top: 1px solid var(--line); vertical-align: top; font: 500 var(--fs-small)/1.3 var(--mono); color: var(--ink-soft); }
.map-fields td i, .map-ratings i { display: inline-block; position: static; width: 11px; height: 11px; margin-right: .45rem; vertical-align: -1px; border-radius: 2px; }
.r-holds i { background: var(--signal); }
.r-adapt i { background: linear-gradient(90deg, var(--signal) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--signal); }
.r-drop i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.map figcaption { grid-column: 1 / -1; padding: .6rem 1rem .6rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; font: 500 var(--fs-small)/1.4 var(--mono); color: var(--ink-soft); }
.map-legend + .map-legend { margin-top: .5rem; }
.map-legend li { position: relative; padding-left: 1.1rem; }
.map-legend i { top: .3rem; }
.map-ratings li { padding-left: 0; }

/* Why PioneerSight and engagement */
.why-ps { border-top: 1px solid var(--line); }
.why-body { margin-top: .6rem; }
.glance { margin-top: calc(var(--section) * .6); padding-top: calc(var(--section) * .45); border-top: 1px solid var(--line); align-items: start; }
.glance .sub { margin: 0 0 1.4rem; }
.glance dl > div { grid-template-columns: 9rem 1fr; padding: .9rem 0; border-top: 1px solid var(--line); margin: 0; }
.glance dl { gap: 0; }
.glance dt { font: 500 var(--fs-small)/1.5 var(--mono); color: var(--signal-ink); }
.glance .scan { margin-top: 3.4rem; }
.scan h3 { margin: .5rem 0 .8rem; }
.scan p:last-child { color: var(--ink-soft); }

@media (max-width: 1100px) { .days { grid-template-columns: repeat(5, 1fr); } .dim { grid-template-columns: 1fr 1fr; } .dim span { grid-column: auto; } }
@media (max-width: 860px) {
  .triggers, .deliverables, .map-grid, .decide-grid { grid-template-columns: 1fr; }
  .glance dl > div { grid-template-columns: 1fr; gap: .2rem; }
  .glance .scan { margin-top: 0; }
}
@media (max-width: 620px) { .days { grid-template-columns: repeat(2, 1fr); } .dim { display: none; } .day { min-height: 0; } .map { grid-template-columns: 1fr; } .map-center { grid-template-columns: 1fr; } .map-center span:last-child { text-align: left; } .map-tension { display: none; } .map-fields td span { display: none; } }

/* 404 */
.nf { min-height: 100dvh; display: grid; place-items: center; padding: 9rem 0 4rem; }
.nf .wrap { max-width: 44rem; }
.nf h1 { font-size: var(--fs-h2); margin-bottom: 1.2rem; }
.nf .code { margin-bottom: 1.6rem; color: var(--signal-ink); }
.nf .lead { margin-bottom: 2rem; }
.nf .actions { margin-top: 0; }

/* ===== Consolidated copy (19 Oct 2026): situations hero, problem, studio, glance, cases ===== */
.hero-futures .lead + .lead { margin-top: 1rem; }
.hero-statement { margin: 1.6rem 0 2rem; font-size: var(--fs-lead); }
.situations-title { margin-bottom: 1rem; font-size: 1.15rem; letter-spacing: -.01em; max-width: 24ch; }
.artifact { min-height: 0; }
.artifact .artifact-main { margin-top: .6rem; }
.artifacts-note { margin-top: 1rem; max-width: 40rem; }
.problem { border-top: 1px solid var(--line); }
.problem-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.problem-grid h2 { margin-bottom: 0; }
.problem-paras .lead { max-width: 40rem; }
.problem-paras .lead + .lead { margin-top: 1rem; }
.problem .statement { max-width: 40rem; }
.method-sub { margin: -1.6rem 0 1.2rem; color: var(--signal-ink); }
.step-paras p { font-size: .95rem; color: var(--ink-soft); }
.step-paras p + p { margin-top: .6rem; }
.step-paras { margin-bottom: 1.4rem; }
.quote { margin-top: 2.6rem; max-width: 44rem; padding-left: 1.2rem; border-left: 3px solid var(--signal); }
.get .deliverables { margin-top: 0; }
.map-legend-intro { margin-top: 1.6rem; }
.map-legend-desc li { position: relative; padding-left: 1.4rem; }
.map-legend-desc li i { position: absolute; left: 0; top: 1.25rem; width: 11px; height: 11px; border-radius: 50%; }
.map-statement { font-size: var(--fs-lead); }
.studio { border-top: 1px solid var(--line); }
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.studio-grid .lead + .lead { margin-top: 1rem; }
.points-title { margin-bottom: .6rem; }
.points li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 .6rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.points li .label { grid-row: span 2; color: var(--signal-ink); }
.points strong { font-weight: 800; letter-spacing: -.01em; }
.points li > span:last-child { color: var(--ink-soft); font-size: .95rem; margin-top: .2rem; }
.studio-after { margin-top: 1.6rem; max-width: 44rem; }
.scan p { font-size: .95rem; color: var(--ink-soft); }
.scan p + p { margin-top: .6rem; }
.scan-statement { margin-top: 1.2rem; font-size: 1.05rem; color: var(--graphite); }
.case-sub { font-weight: 700; margin: .2rem 0 .6rem; }
.case-body { color: var(--ink-soft); font-size: .95rem; }
.cases-note { margin-top: 2rem; max-width: 48rem; }
.mindtrek .lead + .lead { margin-top: 1rem; }
.faq-answer { padding: 0 0 1.4rem; max-width: 40rem; }
.faq-answer p { color: var(--ink-soft); }
.faq-answer p + p { margin-top: .8rem; }
.close .lead + .lead { margin-top: .8rem; }
@media (max-width: 1100px) { .situations-wrap { max-width: 760px; } }
@media (max-width: 860px) { .problem-grid, .studio-grid { grid-template-columns: 1fr; } .problem-grid h2 { margin-bottom: 1.6rem; } }

/* ===== Bold product-studio draft (body.studio-page): portfolio tiles, minimal copy ===== */
.hero-studio h1 { font-size: clamp(4rem, 12vw, 11rem); max-width: none; }
.hero-studio .hero-row { margin-top: 1rem; }
.hero-studio .lead { max-width: 34rem; font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--graphite); }
.tested-line { margin-top: 3rem; max-width: 30ch; }
.work { border-top: 1px solid var(--line); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.6rem); }
.tile-visual { display: block; width: 100%; padding: 0; border: 0; background: var(--paper-2); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); cursor: zoom-in; }
.tile-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile:hover .tile-visual img { transform: scale(1.04); }
.tile-visual:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.tile-text { padding: 1rem 0 0; }
.tile-text h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.tile-text p { color: var(--ink-soft); max-width: 36rem; }
.tile-text .thumbs { margin-top: .8rem; }
.about-studio h2 { margin-bottom: 1.6rem; }
.about-lines li { padding: .8rem 0; border-top: 1px solid var(--line); font-size: var(--fs-lead); color: var(--ink-soft); }
.about-lines li:first-child { color: var(--graphite); }
.studio-page .mindtrek h2 { margin-bottom: 1rem; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } }
.studio-page .cv { display: none; margin-top: 2rem; }
.studio-page .cv.open { display: block; }
.studio-page .cv-toggle { display: inline-flex; margin-top: 1.6rem; }
.studio-page .about-lines li:last-child { border-bottom: 1px solid var(--line); }

/* ===== Cutting mat (Schneidematte) for the studio draft ===== */
:root { --mat: #1F6E52; --mat-deep: #195C44; --mat-line: rgba(244, 242, 236, .2); --mat-line-strong: rgba(244, 242, 236, .42); --mat-dot: rgba(244, 242, 236, .4); }
.studio-page .mat { position: relative; background-color: var(--mat); color: var(--paper);
  background-image: radial-gradient(circle, var(--mat-dot) 1px, transparent 1.6px), linear-gradient(var(--mat-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line-strong) 1px, transparent 1px), linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 40px 40px, 200px 200px, 200px 200px, 40px 40px, 40px 40px; background-position: 20px 20px, 0 0, 0 0, 0 0, 0 0; }
.studio-page .mat > .wrap { position: relative; z-index: 1; }
.studio-page .hero-studio { padding-top: 10rem; padding-bottom: 5rem; overflow: hidden; }
.studio-page .hero-studio .idx { color: rgba(244, 242, 236, .75); }
.studio-page .hero-studio h1, .studio-page .hero h1 .line:last-child { color: var(--paper); }
.studio-page .hero-studio .lead { color: rgba(244, 242, 236, .9); }
.studio-page .hero-studio .strip { position: relative; z-index: 1; margin-top: clamp(2.6rem, 5vw, 4rem); border-color: rgba(244, 242, 236, .35); background: transparent; }
.mat-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mat-angles { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; fill: none; stroke: rgba(244, 242, 236, .5); stroke-width: 1.2; }
.mat-angles circle { fill: var(--mat); stroke: rgba(244, 242, 236, .7); }
.mat-angles text { fill: var(--paper); stroke: none; font: 500 13px var(--mono); text-anchor: middle; }
.mat-ruler { position: absolute; stroke: rgba(244, 242, 236, .75); stroke-width: 1; }
.mat-ruler text { fill: rgba(244, 242, 236, .8); stroke: none; font: 500 8.5px var(--mono); }
.mat-ruler-h { top: 0; left: 0; }
.mat-ruler-b { top: auto; bottom: 0; transform: scaleY(-1); }
.mat-ruler-v { top: 0; left: 0; }
.mat-ruler-r { left: auto; right: 0; transform: scaleX(-1); }
.studio-page .mat .label, .studio-page .mat .lead, .studio-page .mat .close-mail { color: rgba(244, 242, 236, .8); }
.studio-page .mat h2, .studio-page .mat h3, .studio-page .mat .link, .studio-page .mat .close-mail .link { color: var(--paper); }
/* Optimistic call to action: green on paper, paper on the mat. Orange stays for labels and marks. */
.studio-page .btn:not(.btn-ghost) { background: var(--mat); color: var(--paper); }
.studio-page .btn:not(.btn-ghost):hover { background: #27865F; }
.studio-page .mat .btn:not(.btn-ghost) { background: var(--paper); color: var(--mat-deep); }
.studio-page .mat .btn:not(.btn-ghost):hover { background: #fff; }
.studio-page .mat .btn-ghost { color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
.studio-page .strip-toggle { background: rgba(244, 242, 236, .9); color: var(--mat-deep); }
@media (max-width: 860px) { .mat-ruler-v { display: none; } .mat-angles text { font-size: 16px; } }

/* ===== Studio draft, 26 Oct 2026: founder, "On the mat", caption-second tiles, proof after work, Apple-style feedback ===== */
.studio-page .hero-studio h1 { letter-spacing: -.045em; line-height: .9; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(244, 242, 236, .3); }
.founder-chip { display: flex; align-items: center; gap: .8rem; }
.founder-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(244, 242, 236, .85); }
.founder-chip > span { display: grid; line-height: 1.3; }
.founder-chip strong { font-weight: 700; color: var(--paper); }
.founder-chip span span { color: rgba(244, 242, 236, .85); }
.studio-page .on-mat { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .8rem; border-radius: 16px; background: rgba(20, 50, 38, .45); color: var(--paper); letter-spacing: .04em; }
.on-mat .dot { width: 8px; height: 8px; border-radius: 50%; background: #F08A62; box-shadow: 0 0 0 3px rgba(240, 138, 98, .25); }
.mat-angles { stroke: rgba(244, 242, 236, .22); stroke-width: 1; }
.work-intro { margin: -1.6rem 0 2.2rem; color: var(--signal-ink); }
.tile-text h3.tile-client { font: 500 var(--fs-small)/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .35rem; }
.tile-text p { color: var(--graphite); font-size: 1.05rem; line-height: 1.45; }
.proof { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.proof ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem 1rem; margin-top: 1rem; align-items: center; }
.proof li { display: grid; place-items: center start; min-height: 44px; }
.proof img { height: calc(var(--h) * .75); width: calc(var(--w) * .75); max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .55; mix-blend-mode: multiply; }
.mail-pill { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; padding: .3rem .3rem .3rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(244, 242, 236, .8); }
.mail-pill a { color: var(--paper); font: 500 .95rem/1 var(--mono); text-decoration: none; }
.mail-pill button { font: 600 .85rem/1 var(--sans); padding: .55rem .9rem; border: 0; border-radius: 999px; background: var(--paper); color: var(--mat-deep); cursor: pointer; transition: transform 100ms ease-out; }
.mail-pill button:active { transform: scale(.96); }
.mail-pill button:focus-visible, .mail-pill a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.studio-page .close-mail { margin-top: 1.4rem; }
/* Respond on press: instant, small, never waits for release */
.studio-page .btn:active { transform: scale(.97); transition: transform 100ms ease-out; }
.studio-page .tile-visual { transition: transform 100ms ease-out; }
.studio-page .tile-visual:active { transform: scale(.985); }
@media (prefers-reduced-transparency: reduce) {
  .studio-page .top { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .studio-page .on-mat { background: #163F30; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-page .btn:active, .studio-page .tile-visual:active, .mail-pill button:active { transform: none; }
}
@media (max-width: 620px) { .hero-meta { flex-direction: column; align-items: flex-start; } }

/* Logos as proof: larger and clearly visible (26 Oct 2026, Alex) */
.proof-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; max-width: 26ch; }
.proof ul { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2.2rem 1.6rem; margin-top: 2rem; }
.proof li { min-height: 72px; place-items: center; }
.proof img { height: calc(var(--h) * 1.35); width: calc(var(--w) * 1.35); max-width: 190px; filter: grayscale(1) contrast(1.15); opacity: .9; transition: filter .3s, opacity .3s; }
.proof img:hover { filter: none; opacity: 1; }
@media (max-width: 620px) { .proof ul { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; } .proof img { height: calc(var(--h) * 1.1); width: calc(var(--w) * 1.1); max-width: 150px; } }
.proof ul { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.proof li { place-items: center start; min-width: 0; }
.proof img { max-width: 100%; }
.proof ul { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ===== Strip on the mat as crafting materials (Basteln), 26 Oct 2026 ===== */
.studio-page .hero-studio .strip { border: 0; padding: 28px 0 36px; overflow: hidden; }
.studio-page .strip-track { gap: 34px; align-items: center; }
.studio-page .strip li.m { height: auto; position: relative; flex: none; }
.studio-page .strip li.m img { display: block; height: clamp(150px, 17vw, 230px); width: auto; }
.studio-page .strip li.m { filter: drop-shadow(0 10px 12px rgba(10, 30, 22, .35)); }
/* Polaroid: white frame, deep bottom edge */
.m-polaroid { background: #FBFAF6; padding: 9px 9px 34px; transform: rotate(-2.5deg) translateY(-4px); }
/* Masking tape holding a bare print */
.m-tape { transform: rotate(1.8deg) translateY(6px); }
.m-tape::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-5deg); background: rgba(232, 220, 186, .88); clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); z-index: 1; }
/* Kraft card with fibres */
.m-kraft { padding: 14px; background: #B88F5F; background-image: repeating-linear-gradient(105deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 7px), repeating-linear-gradient(15deg, rgba(60, 35, 10, .08) 0 1px, transparent 1px 5px); transform: rotate(1.2deg); }
/* Torn paper: jagged lower edge */
.m-torn { background: #FFFDF8; padding: 12px 12px 22px; transform: rotate(-1.4deg) translateY(4px); clip-path: polygon(0 0, 100% 0, 100% 94%, 94% 97%, 88% 94%, 81% 98%, 74% 95%, 67% 99%, 60% 95%, 52% 98%, 45% 94%, 38% 98%, 30% 95%, 23% 99%, 16% 95%, 9% 98%, 4% 95%, 0 98%); }
/* Index card: blue rules, red margin line */
.m-index { padding: 14px 14px 14px 38px; background-color: #FFFFFF; background-image: linear-gradient(90deg, transparent 26px, rgba(214, 72, 64, .55) 26px 27px, transparent 27px), repeating-linear-gradient(transparent 0 21px, rgba(110, 160, 210, .45) 21px 22px); transform: rotate(2deg) translateY(-6px); }
/* Washi tape on two corners */
.m-washi { transform: rotate(-1deg) translateY(3px); }
.m-washi::before, .m-washi::after { content: ""; position: absolute; width: 74px; height: 20px; background: repeating-linear-gradient(90deg, rgba(240, 138, 98, .85) 0 8px, rgba(251, 243, 219, .85) 8px 16px); z-index: 1; }
.m-washi::before { top: 8px; left: -20px; transform: rotate(-38deg); }
.m-washi::after { bottom: 8px; right: -20px; transform: rotate(-38deg); }
/* Sticky note with a curled corner */
.m-sticky { padding: 16px 16px 26px; background: #F4E27C; transform: rotate(-2deg) translateY(-2px); }
.m-sticky::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(225deg, #1F6E52 0 50%, #D9C55E 50% 100%); }
/* Cut line: dashed outline like a template on the mat */
.m-cut { outline: 2px dashed rgba(244, 242, 236, .85); outline-offset: 9px; transform: rotate(.8deg) translateY(5px); }
@media (max-width: 620px) {
  .studio-page .strip li.m img { height: 150px; }
  .studio-page .strip-track { gap: 26px; }
}
@media (prefers-reduced-motion: reduce) { .studio-page .strip li.m { transform: none; } }

/* Logo wall: equal cells with hairline dividers, heading as the first cell, every logo centred at one optical size */
.studio-page .proof { padding-top: 0; border-top: 0; }
.studio-page .proof .logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.studio-page .proof .logo-wall li { display: grid; place-items: center; min-height: 128px; padding: 1.4rem; background: var(--paper); min-width: 0; }
.studio-page .proof .logo-wall li.lw-title { place-items: center start; background: var(--paper-2); }
.studio-page .proof-title { font-size: clamp(1.15rem, 1.7vw, 1.45rem); max-width: 16ch; }
.studio-page .proof .logo-wall img { height: calc(var(--h) * 1.15); width: calc(var(--w) * 1.15); max-width: 78%; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .82; transition: filter .25s, opacity .25s, transform .25s; }
.studio-page .proof .logo-wall li:hover img { filter: none; opacity: 1; transform: scale(1.04); }
@media (max-width: 860px) { .studio-page .proof .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .studio-page .proof .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .studio-page .proof .logo-wall li { min-height: 96px; padding: 1rem; }
  .studio-page .proof .logo-wall li.lw-title { grid-column: span 2; min-height: 0; padding: 1.2rem 1rem; }
  .studio-page .proof .logo-wall li:last-child { grid-column: span 2; }
}
@media (min-width: 621px) and (max-width: 860px) { .studio-page .proof .logo-wall li.lw-title { grid-column: span 3; } .studio-page .proof .logo-wall li:last-child { grid-column: span 2; } }
@media (prefers-reduced-motion: reduce) { .studio-page .proof .logo-wall li:hover img { transform: none; } }

/* ===== taste-skill pass, 26 Oct 2026 (redesign, preserve) =====
   One accent: the mat green. Orange stays only as a material colour (washi tape).
   One shape rule: 4px on every control, card and frame; circles only for faces. */
.studio-page { --signal: #1F6E52; --signal-ink: #1F6E52; --signal-dark: #9FE0BF; --signal-hover: #27865F; }
.studio-page .on-mat .dot { background: #9FE0BF; box-shadow: 0 0 0 3px rgba(159, 224, 191, .25); }
.studio-page .on-mat, .studio-page .mail-pill, .studio-page .proof .logo-wall { border-radius: var(--r); }
.studio-page .mail-pill button { border-radius: 3px; }
.studio-page .hero-studio { padding-top: 7.5rem; }
/* Work grid with rhythm: first and last case run full width, the four between sit in pairs */
.studio-page .tiles .tile:first-child, .studio-page .tiles .tile:last-child { grid-column: 1 / -1; }
.studio-page .tiles .tile:first-child .tile-visual, .studio-page .tiles .tile:last-child .tile-visual { aspect-ratio: 21 / 9; }
/* Partner as a compact band: face, name, one line, link */
.studio-page .partner-band .partner-card { grid-template-columns: 88px 1fr auto; align-items: center; gap: 1.4rem; padding: 1.2rem 1.6rem; border-radius: var(--r); }
.studio-page .partner-band .partner-card img { width: 88px; height: 88px; min-height: 0; border-radius: 50%; object-position: center 22%; }
.studio-page .partner-band .partner-card > div { padding: 0; display: grid; grid-template-columns: 1fr auto; gap: .2rem 2rem; align-items: center; }
.studio-page .partner-band .partner-card > div > p:not(.label):not(.role) { grid-column: 1; max-width: 46rem; }
.studio-page .partner-band .partner-card .link { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; white-space: nowrap; }
.studio-page .partner-band .partner-card h3 { margin: .2rem 0 0; }
.studio-page .partner-band .partner-card .role { margin-bottom: .4rem; }
@media (max-width: 760px) {
  .studio-page .partner-band .partner-card { grid-template-columns: 64px 1fr; padding: 1.2rem; }
  .studio-page .partner-band .partner-card img { width: 64px; height: 64px; }
  .studio-page .partner-band .partner-card > div { grid-template-columns: 1fr; }
  .studio-page .partner-band .partner-card .link { grid-column: 1; grid-row: auto; margin-top: .6rem; }
}
/* Dark mode for the paper sections; the mat stays the mat */
@media (prefers-color-scheme: dark) {
  body.studio-page { --paper: #121513; --paper-2: #1A1E1B; --line: #2C322E; --graphite: #ECEAE3; --ink-soft: #A3AAA4; --glass: rgba(18, 21, 19, .62); --glass-edge: rgba(255, 255, 255, .08); color-scheme: dark; }
  .studio-page .mat { --paper: #F4F2EC; --graphite: #1C1F1D; }
  .studio-page .proof .logo-wall img { filter: grayscale(1) invert(1) brightness(1.6); mix-blend-mode: normal; opacity: .78; }
  .studio-page .proof .logo-wall li:hover img { filter: grayscale(1) invert(1) brightness(1.9); }
  .studio-page .btn:not(.btn-ghost) { color: #F4F2EC; }
  .studio-page .mat .btn:not(.btn-ghost) { background: #F4F2EC; color: #195C44; }
  .studio-page .btn-ghost { color: var(--graphite); box-shadow: inset 0 0 0 1.5px var(--graphite); }
  .studio-page .top .brand-name, .studio-page .links a { color: var(--graphite); }
}

@media (max-width: 760px) { .studio-page .partner-band .partner-card { align-items: start; } }
@media (prefers-color-scheme: dark) {
  .studio-page .top { background: rgba(18, 21, 19, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px -18px rgba(0, 0, 0, .6); }
  .studio-page .top .lang { color: var(--graphite); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); background: transparent; }
  .studio-page .top .stamp { background: #ECEAE3; color: #121513; border-color: #ECEAE3; }
  .studio-page .menu-toggle { background: #ECEAE3; color: #121513; }
}

/* Hero call button carries the founder's face: booking a call means talking to Alex */
.studio-page .hero-contact { display: grid; justify-items: end; gap: .6rem; }
.studio-page .btn-person { gap: .75rem; min-height: 56px; padding: .4rem 1.3rem .4rem .4rem; font-size: 1.05rem; }
.studio-page .btn-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(31, 110, 82, .25); }
.studio-page .hero-contact-line { font-size: .92rem; color: rgba(244, 242, 236, .85); }
@media (max-width: 760px) { .studio-page .hero-contact { justify-items: start; } }

/* ===== How we work: together first, then the studio builds; photos as craft materials ===== */
.studio-page .how { border-top: 1px solid var(--line); }
.how-lead { margin: -1.6rem 0 2.6rem; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; color: var(--ink-soft); }
.how-steps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3.4rem); margin: 0; padding: 0; list-style: none; }
.how-step { display: grid; gap: 1.6rem; align-content: start; }
.how-step-1 { grid-column: 1 / -1; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(1.6rem, 4vw, 3.6rem); }
.how-text h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.how-text p { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 34rem; }
.how-step-1 .how-text h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.how-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: center; padding: .6rem; }
.how-step-3 .how-photos { grid-template-columns: 1fr; max-width: 70%; }
.hp { margin: 0; position: relative; filter: drop-shadow(0 12px 14px rgba(28, 31, 29, .22)); }
.hp img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.how-step-3 .hp img { aspect-ratio: 4 / 3; }
.hp-polaroid { background: #FFFDF8; padding: 8px 8px 28px; transform: rotate(-2deg); }
.hp-tape { transform: rotate(1.6deg) translateY(10px); }
.hp-tape::before { content: ""; position: absolute; top: -11px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%) rotate(-4deg); background: rgba(232, 220, 186, .9); z-index: 1; clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); }
.hp-index { padding: 12px 12px 12px 34px; background-color: #FFFFFF; background-image: linear-gradient(90deg, transparent 23px, rgba(214, 72, 64, .5) 23px 24px, transparent 24px), repeating-linear-gradient(transparent 0 20px, rgba(110, 160, 210, .4) 20px 21px); transform: rotate(1.2deg); }
@media (max-width: 860px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-step-1 { grid-template-columns: 1fr; }
  .how-step-3 .how-photos { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hp { transform: none; } }
@media (prefers-color-scheme: dark) { .hp { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); } }

/* ===== Own products: Mindtrek large, Filo smaller below with a looping demo ===== */
.studio-page .products-head h2 { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.studio-page .product-name { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin-bottom: 1rem; color: var(--paper); }
.filo-row { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(244, 242, 236, .25); }
.filo-video { margin: 0; position: relative; padding: 8px; background: #FFFDF8; border-radius: var(--r); transform: rotate(-1deg); filter: drop-shadow(0 16px 18px rgba(10, 30, 22, .4)); }
.filo-video::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(232, 220, 186, .9); z-index: 1; clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); }
.filo-video video { display: block; width: 100%; height: auto; aspect-ratio: 1048 / 672; border-radius: 2px; background: #EEF0F3; }
.filo-text .product-name { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.beta-tag { display: inline-block; margin-bottom: .8rem; padding: .3rem .6rem; border-radius: var(--r); background: rgba(159, 224, 191, .18); color: #CFF1DE; font: 500 var(--fs-small)/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(159, 224, 191, .4); }
@media (max-width: 860px) { .filo-row { grid-template-columns: 1fr; } .filo-video { transform: none; } }
@media (prefers-reduced-motion: reduce) { .filo-video { transform: none; } }

/* ===== 27 Oct: making shots, three workshop photos in step 1, about gallery ===== */
.how-step-1 .how-photos { grid-template-columns: 1fr 1fr 1fr; gap: .9rem; }
.how-step-1 .how-photos .hp:nth-child(2) { transform: rotate(1.6deg) translateY(14px); }
.studio-page .portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.about-gallery { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.about-gallery ul { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: .8rem; margin: 0; padding: 0; list-style: none; align-items: end; }
.about-gallery li { position: relative; min-width: 0; }
.about-gallery .zoom { display: block; width: 100%; padding: 0; border: 0; background: var(--paper-2); border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.about-gallery img { display: block; width: 100%; height: 220px; object-fit: cover; }
.about-gallery .ag-3 img { object-position: center 25%; }
.about-gallery .credit { display: block; margin-top: .3rem; font: 500 .7rem/1.2 var(--mono); color: var(--ink-soft); }
@media (max-width: 860px) {
  .how-step-1 .how-photos { grid-template-columns: 1fr 1fr; }
  .how-step-1 .how-photos .hp:nth-child(3) { grid-column: 1 / -1; }
  .about-gallery ul { grid-template-columns: 1fr 1fr; }
  .about-gallery img { height: 150px; }
}
.about-gallery ul { align-items: start; }

/* ===== Selected work as a logo-led list (27 Oct): brand first, what was made in one line, no big photos ===== */
.work-list { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--graphite); }
.work-row { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 1.2rem clamp(1.6rem, 4vw, 3.6rem); align-items: center; padding: clamp(1.4rem, 3vw, 2.1rem) 0; border-bottom: 1px solid var(--line); }
.wr-logo { display: grid; place-items: center start; min-height: 64px; }
.wr-logo img { height: var(--h); width: var(--w); max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: .9; mix-blend-mode: multiply; transition: filter .25s, opacity .25s; }
.work-row:hover .wr-logo img { filter: none; opacity: 1; }
.wr-type { font: 500 var(--fs-small)/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--signal-ink); margin-bottom: .3rem; }
.wr-text h3 { font-size: var(--fs-h3); margin: 0 0 .35rem; }
.wr-line { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 44rem; }
.also { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.also-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.also-logos img { height: calc(var(--h) * .85); width: calc(var(--w) * .85); object-fit: contain; filter: grayscale(1); opacity: .6; mix-blend-mode: multiply; }
@media (max-width: 760px) {
  .work-row { grid-template-columns: 1fr; gap: .8rem; }
  .also-logos { gap: 1.1rem 1.8rem; }
}
@media (prefers-color-scheme: dark) {
  .studio-page .wr-logo img, .studio-page .also-logos img { filter: grayscale(1) invert(1) brightness(1.6); mix-blend-mode: normal; }
  .studio-page .work-row:hover .wr-logo img { filter: grayscale(1) invert(1) brightness(1.9); }
}

/* Selected work: four equal tiles in pairs, same 4:3 crop, no full-width blow-ups (27 Oct, Alex) */
.studio-page .tiles .tile:first-child, .studio-page .tiles .tile:last-child { grid-column: auto; }
.studio-page .tiles .tile .tile-visual, .studio-page .tiles .tile:first-child .tile-visual, .studio-page .tiles .tile:last-child .tile-visual { aspect-ratio: 4 / 3; }
/* Mindtrek on the studio page: five phones, the trek walk in the centre and on top */
.studio-page .products .phone { transform: translate(calc(-50% + (var(--i) - 2) * 52%), -50%) rotate(calc((var(--i) - 2) * 4deg)); }
.studio-page .products .phones:not(.in) .phone { transform: translate(calc(-50% + (var(--i) - 2) * 18%), -20%); }
.studio-page .products .phone:nth-child(2), .studio-page .products .phone:nth-child(4) { z-index: 2; }
.studio-page .products .phone:nth-child(3) { z-index: 3; }
@media (max-width: 620px) {
  .studio-page .products .phone:nth-child(1), .studio-page .products .phone:nth-child(5) { display: none; }
  .studio-page .products .phone:nth-child(4) { display: block; }
  .studio-page .products .phone:nth-child(2) { transform: translate(-112%, -50%) rotate(-4deg); }
  .studio-page .products .phone:nth-child(3) { transform: translate(-50%, -52%); }
  .studio-page .products .phone:nth-child(4) { transform: translate(12%, -50%) rotate(4deg); }
}

/* 27 Oct 2026: hero without the strip. The cutting mat is the surface; headline at the top, lead and call at the foot. */
.studio-page .hero-studio { min-height: clamp(600px, 94svh, 1040px); display: flex; flex-direction: column; padding-bottom: clamp(3.5rem, 8vh, 6.5rem); }
.studio-page .hero-studio > .wrap { flex: 1; display: flex; flex-direction: column; }
.studio-page .hero-studio .hero-row { margin-top: auto; padding-top: clamp(2.5rem, 6vh, 5rem); }
.studio-page .hero-studio .mat-angles { stroke: rgba(244, 242, 236, .3); }

/* What we build together: four product types, one illustration each, two by two. */
.studio-page .build-grid { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.2rem, 4vw, 3.4rem) clamp(1.2rem, 2.6vw, 2.2rem); }
.studio-page .build-item { min-width: 0; }
.studio-page .build-item img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--paper-2); }
.studio-page .build-item h3 { margin: 1.1rem 0 .35rem; font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.15; }
.studio-page .build-item p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.45; max-width: 34rem; }
@media (max-width: 720px) { .studio-page .build-grid { grid-template-columns: 1fr; } }

/* What clients say: verbatim quotes, three across, separated by a hairline, no cards. */
.studio-page .quote-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.6rem); }
.studio-page .quote { margin: 0; max-width: none; padding: 1.2rem 0 0; border-left: 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.studio-page .quote blockquote { margin: 0; }
.studio-page .quote blockquote p { margin: 0; font-size: 1.12rem; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.studio-page .quote blockquote p::before { content: "\201C"; }
.studio-page .quote blockquote p::after { content: "\201D"; }
.studio-page .quote figcaption { margin-top: auto; display: grid; gap: .15rem; }
.studio-page .quote-name { font-weight: 700; color: var(--graphite); }
.studio-page .quote-role { font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 1000px) { .studio-page .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .studio-page .quote-grid { grid-template-columns: 1fr; } }
.studio-page .quote blockquote p:lang(de)::before { content: "\201E"; }
.studio-page .quote blockquote p:lang(de)::after { content: "\201C"; }

/* About: one stage photo under the bio instead of a four-photo gallery. */
.studio-page .about-stage { margin: 2.4rem 0 0; max-width: 30rem; }
.studio-page .about-stage .zoom { all: unset; cursor: zoom-in; display: block; }
.studio-page .about-stage .zoom:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; }
.studio-page .about-stage img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.studio-page .about-stage figcaption { margin-top: .6rem; font-size: var(--fs-small); color: var(--ink-soft); }

/* 27 Oct 2026: Selected work is a trust block now. Three cases in one row, one picture each, smaller type. */
.studio-page .work .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.studio-page .work .tiles .tile { grid-column: auto; }
.studio-page .work .tiles .tile .tile-visual, .studio-page .work .tiles .tile .tile-visual img { aspect-ratio: 4 / 3; }
.studio-page .work .tile-text p { font-size: 1rem; line-height: 1.45; }
@media (max-width: 860px) { .studio-page .work .tiles { grid-template-columns: 1fr; } }
/* Ten logos since DriveNow left: the title cell spans two columns so the grid closes evenly. */
.studio-page .logo-wall .lw-title { grid-column: span 2; }
@media (max-width: 860px) { .studio-page .proof .logo-wall li:last-child { grid-column: auto; } }
@media (min-width: 621px) and (max-width: 860px) { .studio-page .proof .logo-wall li.lw-title { grid-column: span 2; } }

/* Review fixes, 27 Oct 2026 */
/* Text over the mat grid: a soft halo in the mat colour knocks the lines out behind the letters, and small text is more opaque. */
.studio-page .hero-studio .idx, .studio-page .hero-studio .lead, .studio-page .hero-contact-line { text-shadow: 0 0 6px var(--mat), 0 0 14px var(--mat), 0 0 2px var(--mat); }
.studio-page .hero-studio .idx { color: rgba(244, 242, 236, .92); }
.studio-page .hero-studio .lead { color: var(--paper); }
.studio-page .hero-contact-line { color: rgba(244, 242, 236, .94); }
/* Touch targets in the header reach 44px. */
.btn-small, .lang, .menu-toggle { min-height: 44px; }
.lang { min-width: 44px; }
/* Pause control on the Filo demo video. */
.studio-page .filo-video { position: relative; }
.studio-page .video-toggle { position: absolute; right: 12px; bottom: 12px; min-height: 36px; padding: 0 .8rem; border: 0; border-radius: var(--r); background: rgba(28, 31, 29, .78); color: var(--paper); font: 500 var(--fs-small)/1 var(--mono); cursor: pointer; }
.studio-page .video-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* Mindtrek case facts: four short rows on the mat, label in mono. */
.studio-page .case-facts { margin: 1.4rem 0 1.6rem; display: grid; gap: .7rem; max-width: 34rem; }
.studio-page .case-facts > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-top: .7rem; border-top: 1px solid rgba(244, 242, 236, .25); }
.studio-page .case-facts dt { font: 500 var(--fs-small)/1.5 var(--mono); color: rgba(244, 242, 236, .8); }
.studio-page .case-facts dd { margin: 0; color: var(--paper); font-size: .98rem; line-height: 1.45; }
@media (max-width: 560px) { .studio-page .case-facts > div { grid-template-columns: 1fr; gap: .2rem; } }
/* Same halo for all running text on the green mat sections, so grid lines never read as strike-through. */
.studio-page .mat p, .studio-page .mat dt, .studio-page .mat dd, .studio-page .mat .label, .studio-page .mat .link { text-shadow: 0 0 6px var(--mat), 0 0 14px var(--mat), 0 0 2px var(--mat); }
.studio-page .mat .btn, .studio-page .mat .btn *, .studio-page .mat .mail-pill, .studio-page .mat .mail-pill *, .studio-page .mat .beta-tag { text-shadow: none; }
/* A clear patch of mat behind text columns: same colour, feathered edges, so the grid fades out under words. */
.studio-page .mindtrek-grid > div:first-child, .studio-page .filo-text, .studio-page .close-grid > div:last-child { position: relative; z-index: 0; }
.studio-page .mindtrek-grid > div:first-child::before, .studio-page .filo-text::before, .studio-page .close-grid > div:last-child::before { content: ""; position: absolute; inset: -14px -18px; z-index: -1; background: var(--mat); border-radius: 12px; box-shadow: 0 0 22px 14px var(--mat); pointer-events: none; }

/* What we build together, v2: an index list. Small thumbnail, name, one line and concrete examples per row. */
.studio-page .build-list { list-style: none; margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.studio-page .build-row { display: grid; grid-template-columns: 132px minmax(0, 15rem) minmax(0, 1fr); grid-template-areas: "img name text"; align-items: center; column-gap: clamp(1.2rem, 3vw, 2.6rem); padding: clamp(1.1rem, 2vw, 1.5rem) 0; border-top: 1px solid var(--line); }
.studio-page .build-row img { grid-area: img; display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--paper-2); }
.studio-page .build-row h3 { grid-area: name; margin: 0; font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.studio-page .build-text { grid-area: text; min-width: 0; display: grid; gap: .65rem; }
.studio-page .build-text p { margin: 0; color: var(--graphite); font-size: 1.05rem; line-height: 1.45; max-width: 40rem; }
.studio-page .build-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.studio-page .build-examples li { font: 500 var(--fs-small)/1 var(--mono); color: var(--ink-soft); padding: .42rem .55rem; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
@media (max-width: 760px) {
  .studio-page .build-row { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "img name" "img text"; align-items: start; row-gap: .5rem; }
  .studio-page .build-row h3 { align-self: end; font-size: 1.3rem; }
}

/* Hero v3 (27 Oct 2026): lead right under the headline, four notes on the mat for what we build, call at the foot. */
.studio-page .hero-studio { min-height: clamp(600px, 90svh, 980px); }
.studio-page .hero-studio > .wrap.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "idx idx" "title title" "lead notes" "cta notes"; grid-template-rows: auto auto auto 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
.studio-page .hero-main { display: contents; }
.studio-page .hero-main .idx { grid-area: idx; }
.studio-page .hero-main h1 { grid-area: title; }
.studio-page .hero-studio .hero-main .lead { grid-area: lead; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; max-width: 34rem; font-size: clamp(1.25rem, 1.75vw, 1.6rem); line-height: 1.4; font-weight: 500; color: var(--paper); letter-spacing: -.01em; }
.studio-page .hero-grid > .hero-contact { grid-area: cta; align-self: end; margin-top: clamp(2rem, 5vh, 4rem); }
/* the notes: real paper objects lying on the mat */
.studio-page .hero-notes { grid-area: notes; align-self: center; justify-self: end; list-style: none; margin: clamp(1.5rem, 4vh, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 11.5rem)); gap: 1.4rem 1.6rem; position: relative; z-index: 1; }
.studio-page .note a { display: flex; align-items: flex-end; min-height: 8.2rem; padding: 1rem 1.1rem 1.1rem; font: 700 1.2rem/1.15 var(--sans); letter-spacing: -.015em; color: #1C1F1D; text-decoration: none; text-shadow: none; box-shadow: 0 12px 18px -8px rgba(8, 32, 22, .55), 0 2px 3px rgba(8, 32, 22, .25); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; position: relative; }
.studio-page .note-1 a, .studio-page .note-4 a { background: #F4E27C; }
.studio-page .note-2 a, .studio-page .note-3 a { background: #FBFAF6; }
.studio-page .note-1 a { transform: rotate(-3deg) translateY(4px); }
.studio-page .note-2 a { transform: rotate(2.2deg) translateY(-10px); }
.studio-page .note-3 a { transform: rotate(1.5deg) translateY(6px); }
.studio-page .note-4 a { transform: rotate(-2deg) translateY(-6px); }
/* folded corner on the yellow notes, tape on the white cards */
.studio-page .note-1 a::after, .studio-page .note-4 a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(225deg, #1F6E52 0 50%, #D9C55E 50% 100%); }
.studio-page .note-2 a::before, .studio-page .note-3 a::before { content: ""; position: absolute; top: -11px; left: 50%; width: 70px; height: 22px; transform: translateX(-50%) rotate(-4deg); background: rgba(232, 220, 186, .9); clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); }
.studio-page .note a:hover, .studio-page .note a:focus-visible { transform: rotate(0deg) translateY(-6px); box-shadow: 0 18px 24px -10px rgba(8, 32, 22, .6), 0 2px 3px rgba(8, 32, 22, .25); }
.studio-page .note a:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .studio-page .note a { transition: none; } }
@media (max-width: 860px) {
  .studio-page .hero-studio > .wrap.hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "idx" "title" "lead" "notes" "cta"; grid-template-rows: auto; }
  .studio-page .hero-notes { justify-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; margin-top: 2.2rem; }
  .studio-page .note a { min-height: 5.6rem; font-size: 1.05rem; padding: .8rem .9rem .9rem; }
}
.studio-page .hero-main h1 { margin: clamp(1rem, 2.4vh, 1.8rem) 0 0; }
.studio-page .hero-grid > .hero-contact { justify-self: start; align-items: flex-start; text-align: left; }
.studio-page .hero-grid > .hero-contact .hero-contact-line { text-align: left; }
.studio-page .hero-grid > .hero-contact { justify-items: start; }
.studio-page .hero-main h1 { margin-top: .4rem; }
.studio-page .hero-studio .hero-main .lead { margin-top: clamp(.6rem, 1.6vw, 1.2rem); }

/* Case pictures: small grey client logo on a paper plate, bottom right. */
.studio-page .work .tile-visual { position: relative; }
.studio-page .tile-logo { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; height: 34px; padding: 0 10px; border-radius: var(--r); background: rgba(251, 250, 246, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.studio-page .tile-logo img { display: block; height: 16px; width: auto; max-width: 90px; aspect-ratio: auto; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .75; }
.studio-page .work .tiles .tile:nth-child(3) .tile-visual img:first-child { object-position: 50% 28%; }
/* Logo wall title uses the full two-column cell. */
.studio-page .proof-title { max-width: 30ch; }

/* What clients say: one quote at a time. Names on the left are tabs, the quote moves vertically. */
.studio-page .quotes-grid { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.studio-page .quotes-side h2 { margin-bottom: 1.6rem; }
.studio-page .quote-tabs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.studio-page .quote-tabs button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; gap: .1rem; padding: .7rem 0 .7rem .9rem; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; transition: border-color .2s, background-color .2s; }
.studio-page .quote-tabs button:hover { background: var(--paper-2); }
.studio-page .quote-tabs button[aria-selected="true"] { border-left-color: var(--mat, #1F6E52); }
.studio-page .quote-tabs button:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
.studio-page .qt-name { font-weight: 650; color: var(--graphite); }
.studio-page .qt-org { font-size: var(--fs-small); color: var(--ink-soft); }
.studio-page .quote-tabs button[aria-selected="false"] .qt-name { color: var(--ink-soft); font-weight: 500; }
.studio-page .quotes-pause { margin-top: 1rem; all: unset; cursor: pointer; margin-top: 1rem; display: inline-block; font: 500 var(--fs-small)/1 var(--mono); color: var(--ink-soft); padding: .55rem .7rem; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.studio-page .quotes-pause:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
.studio-page .quote-stage { display: grid; overflow: hidden; padding-top: .4rem; }
.studio-page .quote-slide { grid-area: 1 / 1; margin: 0; display: grid; gap: 1.6rem; align-content: start; opacity: 0; transform: translateY(32px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.studio-page .quote-slide.is-before { transform: translateY(-32px); }
.studio-page .quote-slide.is-active { opacity: 1; transform: none; }
.studio-page .quote-slide blockquote { margin: 0; }
.studio-page .quote-slide blockquote p { margin: 0; font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.35; font-weight: 500; letter-spacing: -.015em; color: var(--graphite); text-wrap: pretty; max-width: 34ch; }
.studio-page .quote-slide blockquote p::before { content: "\201C"; }
.studio-page .quote-slide blockquote p::after { content: "\201D"; }
.studio-page .quote-slide blockquote p:lang(de)::before { content: "\201E"; }
.studio-page .quote-slide blockquote p:lang(de)::after { content: "\201C"; }
.studio-page .quote-slide figcaption { display: grid; gap: .15rem; }
@media (prefers-reduced-motion: reduce) { .studio-page .quote-slide { transform: none !important; transition: opacity .2s; } }
@media (max-width: 860px) {
  .studio-page .quotes-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .studio-page .quotes-side { display: contents; }
  .studio-page .quotes-side h2 { order: 0; margin-bottom: 0; }
  .studio-page .quote-stage { order: 1; }
  .studio-page .quote-tabs { order: 2; display: flex; flex-wrap: wrap; gap: .4rem; border: 0; }
  .studio-page .quote-tabs button { width: auto; padding: .5rem .7rem; border: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
  .studio-page .quote-tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--mat, #1F6E52); }
  .studio-page .qt-org { display: none; }
  .studio-page .quotes-pause { order: 3; justify-self: start; margin-top: 0; }
}
.studio-page .tile-logo { height: 42px; padding: 0 12px; right: 12px; bottom: 12px; }
.studio-page .tile-logo img { height: 22px; max-width: 110px; opacity: .9; filter: grayscale(1); }
@media (min-width: 861px) {
  .studio-page .quotes-grid { grid-template-rows: auto auto 1fr; row-gap: 0; }
  .studio-page .quotes-side { display: contents; }
  .studio-page .quotes-side h2 { grid-column: 1 / -1; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
  .studio-page .quote-tabs { grid-column: 1; grid-row: 2; }
  .studio-page .quotes-pause { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; }
  .studio-page .quote-stage { grid-column: 2; grid-row: 2 / 4; }
}
.studio-page .work .tiles .tile .tile-visual .tile-logo img { aspect-ratio: auto; width: auto; height: 22px; max-width: 120px; object-fit: contain; }

/* How we work, Z pattern (27 Oct 2026): one row per step, text right / left / right, loosely offset. */
.studio-page .how-steps { grid-template-columns: minmax(0, 1fr); row-gap: clamp(3rem, 7vw, 5.5rem); }
.studio-page .how-step { grid-column: auto; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: clamp(1.6rem, 4.5vw, 4rem); }
.studio-page .how-step .how-text h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
/* step 1: the team photos get more room */
.studio-page .how-step-1 .how-photos { grid-template-columns: 1fr 1.25fr 1fr; }
/* step 2: text on the left, photos on the right, text nudged in a little */
.studio-page .how-step-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.studio-page .how-step-2 .how-text { order: -1; padding-left: clamp(0rem, 4vw, 3.5rem); }
/* step 3: both screens side by side, set in from the left so the Z stays loose */
.studio-page .how-step-3 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding-left: clamp(0rem, 5vw, 4.5rem); }
.studio-page .how-step-3 .how-photos { grid-template-columns: 1fr 1fr; max-width: none; align-items: start; }
.studio-page .how-step-3 .how-photos .hp:nth-child(2) { transform: rotate(1.4deg) translateY(22px); }
@media (max-width: 860px) {
  .studio-page .how-step, .studio-page .how-step-2, .studio-page .how-step-3 { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .studio-page .how-step-2 .how-text { order: 0; padding-left: 0; }
  .studio-page .how-step-1 .how-photos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 861px) {
  .studio-page .how-step-1 { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .studio-page .how-step-1 .how-photos { grid-template-columns: 1fr 1.5fr 1fr; }
}

/* Who we are: the studio statement first, then Alex, then engineering. */
.studio-page .about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.4rem, 5vw, 5rem); align-items: start; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.studio-page .about-intro h2 { margin: 0; }
.studio-page .about-statement { display: grid; gap: 1rem; }
.studio-page .about-statement p { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--graphite); max-width: 40rem; text-wrap: pretty; }
.studio-page .about-statement p + p { color: var(--ink-soft); }
.studio-page .about-name { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.035em; line-height: 1; margin: 0 0 1.2rem; }
@media (max-width: 860px) { .studio-page .about-intro { grid-template-columns: minmax(0, 1fr); } }

/* ===== 27 Oct 2026, final pass ===== */
/* Eyebrow sits right on top of the headline. */
.studio-page .hero-main .idx { margin: 0; align-self: end; }
.studio-page .hero-main h1 { margin-top: -.06em; }

/* Header: brand left, language + call + Menu right. No row of section links. */
.studio-page .top { grid-template-columns: 1fr auto; }
.studio-page .menu-toggle { display: inline-flex; align-items: center; gap: .6rem; padding: 0 1rem 0 .9rem; }
.studio-page .burger { position: relative; width: 16px; height: 10px; }
.studio-page .burger::before, .studio-page .burger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), top .3s cubic-bezier(.2, .8, .2, 1); }
.studio-page .burger::before { top: 0; } .studio-page .burger::after { top: 8px; }
.studio-page .menu-toggle[aria-expanded="true"] .burger::before { top: 4px; transform: rotate(45deg); }
.studio-page .menu-toggle[aria-expanded="true"] .burger::after { top: 4px; transform: rotate(-45deg); }

/* The menu: a full-screen sheet of cutting mat, opening as a circle from the Menu button. */
.studio-page .menu-sheet { position: fixed; inset: 0; z-index: 19; display: grid; grid-template-rows: 1fr auto; gap: 2rem; padding: clamp(6.5rem, 14vh, 9rem) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(2.2rem + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  background-color: var(--mat); color: var(--paper);
  background-image: radial-gradient(circle, var(--mat-dot) 1px, transparent 1.6px), linear-gradient(var(--mat-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line-strong) 1px, transparent 1px), linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 40px 40px, 200px 200px, 200px 200px, 40px 40px, 40px 40px; background-position: 20px 20px, 0 0, 0 0, 0 0, 0 0;
  visibility: hidden; clip-path: circle(0 at calc(100% - 60px) 40px); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .55s; overflow-y: auto; }
.studio-page .menu-sheet.open { visibility: visible; clip-path: circle(150vmax at calc(100% - 60px) 40px); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.studio-page .menu-list { list-style: none; margin: 0; padding: 0; align-self: center; display: grid; gap: clamp(.2rem, 1vh, .6rem); max-width: 1280px; width: 100%; margin-inline: auto; }
.studio-page .menu-list li { opacity: 0; transform: translateY(18px); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.studio-page .menu-sheet.open .menu-list li { opacity: 1; transform: none; }
.studio-page .menu-sheet.open .menu-list li:nth-child(1) { transition-delay: .12s; } .studio-page .menu-sheet.open .menu-list li:nth-child(2) { transition-delay: .16s; }
.studio-page .menu-sheet.open .menu-list li:nth-child(3) { transition-delay: .20s; } .studio-page .menu-sheet.open .menu-list li:nth-child(4) { transition-delay: .24s; }
.studio-page .menu-sheet.open .menu-list li:nth-child(5) { transition-delay: .28s; } .studio-page .menu-sheet.open .menu-list li:nth-child(6) { transition-delay: .32s; }
.studio-page .menu-list a { display: inline-block; position: relative; padding: .1rem 0; font: 800 clamp(2.4rem, 7.2vw, 5.6rem)/1 var(--sans); letter-spacing: -.045em; color: var(--paper); text-decoration: none; text-shadow: 0 0 10px var(--mat), 0 0 22px var(--mat); }
.studio-page .menu-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .14em; background: #F4E27C; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); z-index: -1; }
.studio-page .menu-list a:hover::after, .studio-page .menu-list a:focus-visible::after, .studio-page .menu-list a[aria-current="true"]::after { transform: none; }
.studio-page .menu-list a:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.studio-page .menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; max-width: 1280px; width: 100%; margin-inline: auto; }
.studio-page .menu-foot .btn-person { background: var(--paper); color: var(--mat-deep); }
.studio-page .menu-mail { font: 500 var(--fs-small)/1 var(--mono); color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(244, 242, 236, .5); padding-bottom: .2rem; text-shadow: 0 0 8px var(--mat); }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .studio-page .menu-sheet, .studio-page .menu-sheet.open { clip-path: none; transition: none; }
  .studio-page .menu-list li { transition: none; transform: none; }
}

/* Who we are: a team board on the mat. */
.studio-page .team-section { overflow: hidden; }
.studio-page .team-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.4rem, 5vw, 5rem); align-items: start; margin-bottom: clamp(3rem, 7vw, 5rem); }
.studio-page .team-intro h2 { margin: 0; }
.studio-page .team-statement { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--paper); max-width: 40rem; position: relative; z-index: 0; }
.studio-page .team-statement::before, .studio-page .member-text::before { content: ""; position: absolute; inset: -14px -18px; z-index: -1; background: var(--mat); border-radius: 12px; box-shadow: 0 0 22px 14px var(--mat); pointer-events: none; }
.studio-page .team-board { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.studio-page .member-lead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start; }
.studio-page .member-photos { position: relative; padding-bottom: 3.2rem; }
.studio-page .member-portrait { margin: 0; background: #FBFAF6; padding: 10px 10px 40px; transform: rotate(-2deg); box-shadow: 0 16px 24px -12px rgba(8, 32, 22, .6), 0 2px 4px rgba(8, 32, 22, .3); }
.studio-page .member-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.studio-page .member-stage { position: absolute; right: -8%; bottom: 0; width: 62%; margin: 0; transform: rotate(3deg); box-shadow: 0 14px 20px -10px rgba(8, 32, 22, .6); }
.studio-page .member-stage::before { content: ""; position: absolute; top: -11px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%) rotate(-5deg); background: rgba(232, 220, 186, .92); z-index: 1; clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); }
.studio-page .member-stage .zoom { all: unset; cursor: zoom-in; display: block; }
.studio-page .member-stage .zoom:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.studio-page .member-stage img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.studio-page .member-text { position: relative; z-index: 0; }
.studio-page .member-text .label, .studio-page .member-eng .mono { font: 500 var(--fs-small)/1.4 var(--mono); letter-spacing: .02em; }
.studio-page .member-text .label { color: #F4E27C; margin: 0 0 .6rem; }
.studio-page .member-name { font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -.035em; line-height: 1; margin: 0 0 1.2rem; color: var(--paper); }
.studio-page .team-section .about-lines li { color: rgba(244, 242, 236, .82); border-color: rgba(244, 242, 236, .22); font-size: 1.05rem; }
.studio-page .team-section .about-lines li:first-child { color: var(--paper); }
.studio-page .team-section .about-lines li:last-child { border-bottom-color: rgba(244, 242, 236, .22); }
.studio-page .team-section .cv { border-top-color: rgba(244, 242, 236, .4); }
.studio-page .team-section .cv li { border-bottom-color: rgba(244, 242, 236, .2); }
.studio-page .team-section .cv .label { color: #F4E27C; }
.studio-page .team-section .cv h4 { margin: 0 0 .3rem; font-size: var(--fs-body); color: var(--paper); }
.studio-page .team-section .cv p { color: rgba(244, 242, 236, .8); }
.studio-page .team-section .cv-toggle { color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); background: transparent; }
/* the engineering card and the network note: paper objects lying on the mat */
.studio-page .team-side { display: grid; gap: 2.4rem; padding-top: 1rem; }
.studio-page .member-card { position: relative; color: #1C1F1D; text-shadow: none; box-shadow: 0 14px 20px -10px rgba(8, 32, 22, .6), 0 2px 3px rgba(8, 32, 22, .25); }
.studio-page .member-card p, .studio-page .member-card h3, .studio-page .member-card a { text-shadow: none; }
.studio-page .member-eng { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; padding: 1.1rem; background: #FBFAF6; transform: rotate(1.4deg); }
.studio-page .member-eng::before { content: ""; position: absolute; top: -11px; left: 30%; width: 70px; height: 22px; transform: rotate(-4deg); background: rgba(232, 220, 186, .92); clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); }
.studio-page .member-eng img { width: 96px; height: 96px; object-fit: cover; object-position: center 25%; filter: grayscale(.15); }
.studio-page .member-eng .mono { margin: 0 0 .3rem; color: #5A5E58; }
.studio-page .member-eng h3 { margin: 0 0 .35rem; font-size: 1.25rem; color: #1C1F1D; }
.studio-page .member-eng p { margin: 0; color: #3C403C; font-size: .98rem; line-height: 1.45; }
.studio-page .member-eng .link { display: inline-block; margin-top: .6rem; color: #1C1F1D; font-size: .95rem; }
.studio-page .member-network { padding: 1.2rem 1.3rem 1.6rem; background: #F4E27C; transform: rotate(-2deg); max-width: 22rem; justify-self: start; margin-left: 8%; }
.studio-page .member-network::after { content: ""; position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; background: linear-gradient(225deg, var(--mat) 0 50%, #D9C55E 50% 100%); }
.studio-page .member-network h3 { margin: 0 0 .4rem; font-size: 1.25rem; color: #1C1F1D; }
.studio-page .member-network p { margin: 0; color: #2E312D; line-height: 1.45; }
@media (max-width: 1000px) { .studio-page .team-board { grid-template-columns: minmax(0, 1fr); } .studio-page .team-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .studio-page .member-network { margin-left: 0; } }
@media (max-width: 760px) {
  .studio-page .team-intro, .studio-page .member-lead { grid-template-columns: minmax(0, 1fr); }
  .studio-page .member-photos { max-width: 340px; }
  .studio-page .team-side { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .studio-page .member-portrait, .studio-page .member-stage, .studio-page .member-eng, .studio-page .member-network { transform: none; } }

/* Quotes, minimal: one at a time, two arrows and a counter. */
.studio-page .quotes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.4rem, 5vw, 5rem); align-items: start; }
.studio-page .quotes-grid > h2 { margin: 0; grid-column: auto; }
.studio-page .quote-main { display: grid; gap: 1.6rem; min-width: 0; }
.studio-page .quote-stage { grid-column: auto; grid-row: auto; }
.studio-page .quote-nav { display: flex; align-items: center; gap: .9rem; font: 500 var(--fs-small)/1 var(--mono); color: var(--ink-soft); }
.studio-page .quote-nav button { all: unset; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--graphite); font: 600 1.05rem/1 var(--mono); transition: background-color .2s, transform .1s; }
.studio-page .quote-nav button:hover { background: var(--paper-2); }
.studio-page .quote-nav button:active { transform: scale(.96); }
.studio-page .quote-nav button:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
.studio-page .q-cur { color: var(--graphite); font-weight: 700; }
@media (max-width: 860px) { .studio-page .quotes-grid { grid-template-columns: minmax(0, 1fr); } }
.studio-page .hero-main h1 { margin-top: -.14em; }
.studio-page .mat .member-card .link, .studio-page .mat .member-card p, .studio-page .mat .member-card h3 { text-shadow: none; }
.studio-page .mat .member-card .link { color: #1C1F1D; }
@media (min-width: 861px) {
  .studio-page .quotes-grid { grid-template-rows: auto 1fr; row-gap: 2rem; }
  .studio-page .quote-main { display: contents; }
  .studio-page .quotes-grid > h2 { grid-column: 1; grid-row: 1; }
  .studio-page .quote-nav { grid-column: 1; grid-row: 2; align-self: start; }
  .studio-page .quote-stage { grid-column: 2; grid-row: 1 / 3; }
}
.studio-page .mat { overflow-x: clip; }
.studio-page .hero-studio > .wrap.hero-grid { row-gap: 0; }
.studio-page .hero-main h1 { margin-top: .5rem; }
.studio-page .hero-studio .hero-main .lead { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.studio-page .hero-notes { margin-top: clamp(2rem, 4vw, 3rem); }
/* Menu is quiet: icon + word, no fill, so "Book a call" stays the only button. */
.studio-page .menu-toggle, .studio-page .menu-toggle:hover { background: transparent; color: var(--graphite); box-shadow: none; padding: 0 .4rem 0 .6rem; font-weight: 600; }
.studio-page .menu-toggle:hover .menu-word { text-decoration: underline; text-underline-offset: .25em; }
.studio-page .menu-toggle:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .studio-page .menu-toggle, .studio-page .menu-toggle:hover { background: transparent; color: #ECEAE3; } }

/* Review 2 (27 Oct 2026) */
/* hero notes: each jumps to its own row, with an arrow so it reads as a link */
.studio-page .note a { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.studio-page .note-arrow { align-self: flex-end; font: 600 1rem/1 var(--mono); opacity: .55; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.studio-page .note a:hover .note-arrow, .studio-page .note a:focus-visible .note-arrow { opacity: 1; transform: translateY(3px); }
.studio-page .build-row { scroll-margin-top: 6rem; }
/* problem line in the client's own words */
.studio-page .build-text .build-problem { margin: 0; font-weight: 600; color: var(--graphite); }
.studio-page .build-text .build-problem::before { content: "\201C"; } .studio-page .build-text .build-problem::after { content: "\201D"; }
.studio-page .build-text .build-problem:lang(de)::before { content: "\201E"; } .studio-page .build-text .build-problem:lang(de)::after { content: "\201C"; }
.studio-page .build-text .build-problem + p { color: var(--ink-soft); }
/* CV as a wide panel on the mat */
.studio-page .cv-panel { margin-top: clamp(2.4rem, 5vw, 3.6rem); padding-top: 1.6rem; border-top: 1px solid rgba(244, 242, 236, .3); position: relative; z-index: 0; }
.studio-page .cv-panel::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) - 18px) -18px; z-index: -1; background: var(--mat); box-shadow: 0 0 22px 14px var(--mat); border-radius: 12px; pointer-events: none; }
.studio-page .cv-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.studio-page .cv-panel-head h3 { margin: 0; color: var(--paper); font-size: var(--fs-h3); }
.studio-page .cv-close { all: unset; cursor: pointer; font: 500 var(--fs-small)/1 var(--mono); color: var(--paper); padding: .6rem .8rem; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .5); }
.studio-page .cv-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.studio-page .cv-wide { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 4vw, 3.4rem); border-top: 0; }
.studio-page .cv-wide li { display: grid !important; }
@media (max-width: 860px) { .studio-page .cv-wide { grid-template-columns: minmax(0, 1fr); } }
/* three quiet links beside the Menu on wide screens */
.studio-page .quick-links { display: none; }
@media (min-width: 1100px) {
  .studio-page .top { grid-template-columns: auto 1fr auto; }
  .studio-page .quick-links { display: flex; gap: 1.6rem; justify-self: end; margin-right: .8rem; font-weight: 600; }
  .studio-page .quick-links a { color: var(--ink-soft); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
  .studio-page .quick-links a:hover, .studio-page .quick-links a[aria-current="true"] { color: var(--graphite); border-bottom-color: #F4E27C; }
}
.studio-page .note-arrow { align-self: flex-start; }
/* Who we are: a third photo, taped bottom left, overlapping the stage photo. */
.studio-page .member-photos { padding-bottom: 6.5rem; }
.studio-page .member-group { position: absolute; left: -6%; bottom: 1.2rem; width: 56%; margin: 0; transform: rotate(-3.5deg); box-shadow: 0 14px 20px -10px rgba(8, 32, 22, .6); z-index: 1; }
.studio-page .member-group::before { content: ""; position: absolute; top: -10px; left: 24%; width: 70px; height: 22px; transform: rotate(4deg); background: rgba(232, 220, 186, .92); z-index: 1; clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); }
.studio-page .member-group .zoom { all: unset; cursor: zoom-in; display: block; }
.studio-page .member-group .zoom:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.studio-page .member-group img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.studio-page .member-stage { z-index: 2; bottom: -1rem; }
@media (max-width: 760px) { .studio-page .member-group { left: -2%; } .studio-page .member-photos { padding-bottom: 5.5rem; } }
@media (prefers-reduced-motion: reduce) { .studio-page .member-group { transform: none; } }
/* How we work: the ownership line under the lead */
.studio-page .how-lead { margin-bottom: .4rem; }
.studio-page .how-sub { margin: 0 0 2.6rem; font-size: var(--fs-lead); color: var(--ink-soft); max-width: 40rem; }

/* New logo (28 Oct 2026): ee as lenses. Wordmark in the header, compact mark on narrow phones, cream wordmark in the footer. */
.studio-page .brand-logo { gap: 0; }
.studio-page .brand-word img { display: block; height: 22px; width: auto; }
.studio-page .brand-mark { display: none; width: 34px; height: 34px; border-radius: 8px; }
.studio-page .foot-brand { gap: 1rem; flex-wrap: wrap; }
.studio-page .foot-brand img { display: block; height: 18px; width: auto; }
@media (max-width: 520px) {
  .studio-page .brand-word { display: none; }
  .studio-page .brand-mark { display: block; }
}

/* Header lockup (28 Oct 2026, final): lens icon carries the sun, wordmark beside it. Phones: icon only. */
.studio-page .brand-logo { gap: .55rem; }
.studio-page .brand-logo .brand-mark { display: block; width: 34px; height: 34px; border-radius: 9px; }
.studio-page .foot-brand .foot-icon { height: 28px; width: 28px; border-radius: 7px; }
@media (max-width: 520px) { .studio-page .brand-word { display: none; } }
/* Quick links: same ink as the rest of the header, yellow underline marks hover and the current section. */
@media (min-width: 1100px) {
  .studio-page .quick-links a { color: var(--graphite); font-weight: 600; border-bottom: 2px solid transparent; }
  .studio-page .quick-links a:hover, .studio-page .quick-links a[aria-current="true"] { color: var(--graphite); border-bottom-color: #F4E27C; }
}
@media (prefers-color-scheme: dark) { .studio-page .quick-links a, .studio-page .quick-links a:hover { color: #ECEAE3; } }
/* Revert 28 Oct: wordmark only in the header; the compact mark shows on phones only. */
.studio-page .brand-logo .brand-mark { display: none; }
@media (max-width: 520px) { .studio-page .brand-logo .brand-mark { display: block; } }
/* Plain name until the final logo exists (28 Oct 2026). */
.studio-page .foot-name { font-weight: 800; letter-spacing: -.02em; color: var(--paper); font-size: 1.05rem; }
.studio-page .top .stamp { display: none; }
@media (max-width: 560px) { .studio-page .top .stamp { display: inline-grid; } }
/* Hero fills exactly one screen, so no empty strip of the next section shows below it (14" MacBook and similar). */
.studio-page .hero-studio { min-height: clamp(600px, 100svh, 1080px); }

/* FAQ (28 Oct 2026): one column of questions, heading on the left. Opening one never stretches a neighbour. */
.studio-page .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.4rem, 5vw, 5rem); align-items: start; }
.studio-page .faq-grid h2 { margin: 0; }
.studio-page .faq-list { grid-template-columns: minmax(0, 1fr); }
.studio-page .faq-list details:nth-last-child(2) { border-bottom: 0; }
.studio-page .faq-list details:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .studio-page .faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* Dark mode, calmer (29 Oct 2026): one deep-green family instead of bright green against near-black.
   Mat sections get a dimmer forest and fainter grid; plain sections a green-tinted dark instead of black. */
@media (prefers-color-scheme: dark) {
  :root { --mat: #173F30; --mat-deep: #123326; --mat-line: rgba(244, 242, 236, .09); --mat-line-strong: rgba(244, 242, 236, .2); --mat-dot: rgba(244, 242, 236, .2); }
  body.studio-page { --paper: #111A15; --paper-2: #17221C; --line: #25322B; background: #111A15; }
  .studio-page .mat-angles { stroke: rgba(244, 242, 236, .14); }
  .studio-page .mat-ruler { stroke: rgba(244, 242, 236, .4); }
  .studio-page .mat-ruler text { fill: rgba(244, 242, 236, .45); }
  .studio-page .foot { background: #0C130F; }
}