/* =========================================================
   Elie Yacoub — Portfolio
   Single stylesheet. CSS variables at top. Mobile-first.
   ========================================================= */

:root {
  --bg:        #0a0a0a;
  --bg-elev:   #141414;
  --bg-elev-2: #1a1a1a;
  --text:      #f2f2f2;
  --text-mut:  #989898;
  --line:      #252525;
  --accent:    #767676;
  --accent-text: #0a0a0a;
  --maxw:      1200px;
  --gutter:    clamp(20px, 5vw, 64px);
  --radius:    14px;
  --radius-lg: 28px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur:       .6s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Base ---------- */
html, body { background: var(--bg); }
body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: pageFadeIn .6s var(--ease) both;
}
main { flex: 1; }

@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

h1, h2, h3, h4 {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 7vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }

p.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--text-mut); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--accent);
  color: var(--accent-text);
  padding: .75rem 1.25rem;
  z-index: 200;
  border-radius: var(--radius);
  transition: top .2s var(--ease);
  font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* ---------- Eyebrow / section heading pattern ---------- */
.eyebrow {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: .9rem;
}
.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head p { margin-top: 1rem; }

section { padding-block: clamp(3.5rem, 9vw, 7rem); }

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-size: .95rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease);
}
.btn-primary:hover::before { left: 130%; }
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-arrow { transition: transform .25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Top nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,10,.72);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 26px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
.nav-links a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-mut);
  position: relative;
  padding-block: .3rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .25s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a.btn { color: var(--accent-text); }
.nav-links a.btn::after { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.nav-toggle:hover { transform: scale(1.06); filter: brightness(1.08); }
.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  background: var(--accent-text);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  /* Drop the header's backdrop-filter on mobile: otherwise it becomes the
     containing block for the fixed full-screen menu, collapsing it to the
     header's height and letting page content show through (looks
     transparent). Use a near-opaque background instead. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,10,10,.95);
  }
  .nav-links {
    position: fixed;
    inset: 64px 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2rem var(--gutter);
    background: var(--bg);
    border-top: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-links.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
  .nav-links a { font-size: 1.3rem; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(6.5rem, 14vw, 10rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  --mx: 50%;
  --my: 35%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(118,118,118,.16), transparent 60%);
  mix-blend-mode: screen;
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-content .eyebrow { color: var(--accent); }
.hero-content h1 { max-width: 16ch; }
.hero-content p.lead { max-width: 42ch; margin-top: 1.25rem; }
.hero-actions { margin-top: 2.25rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.read-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: .25rem;
}
.read-more .btn-arrow { transition: transform .25s var(--ease); }
.read-more:hover { color: var(--accent); border-color: var(--accent); }
.read-more:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Hero portrait (arch/blob shape) + floating stat card ---------- */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
  width: 100%;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
}
.hero-portrait-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
}
@media (min-width: 1000px) {
  .hero-portrait-wrap { justify-content: flex-end; }
}
.hero-portrait {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 3/4;
  border-radius: 220px 220px var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  z-index: 1;
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero-portrait-wrap::before {
  content: "";
  position: absolute;
  top: 8%;
  right: 8%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,118,118,.35), transparent 70%);
  z-index: 0;
}
/* ---------- Pillars (What I do) — numbered items with arrow link ---------- */
.pillars {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 760px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  background: var(--bg-elev);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background-color .3s var(--ease);
}
.pillar:hover { background: var(--bg-elev-2); }
.pillar .index {
  font-family: "Manrope", sans-serif;
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: .05em;
}
.pillar h3 { margin-top: .25rem; }
.pillar p { color: var(--text-mut); flex: 1; }
.pillar .arrow-btn { align-self: flex-start; margin-top: .5rem; }

/* ---------- Reusable circular arrow button ---------- */
.arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1.1rem;
  transform: rotate(-45deg);
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  flex-shrink: 0;
}
.arrow-btn:hover,
a:hover .arrow-btn,
.pillar:hover .arrow-btn,
.process-step:hover .arrow-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  transform: rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  .arrow-btn { transform: none; }
  .arrow-btn:hover, a:hover .arrow-btn, .pillar:hover .arrow-btn, .process-step:hover .arrow-btn { transform: none; }
}

.accent-text { color: var(--accent); }

/* ---------- Project cards / grid ---------- */
.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: block;
  position: relative;
}
.card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.card:hover .card-media img,
.card:focus-visible .card-media img { transform: scale(1.05); }
.card:hover .card-media,
.card:focus-visible .card-media {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -22px rgba(0,0,0,.65), 0 0 0 1px var(--accent);
}
.card-media .arrow-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--bg);
  opacity: 0;
  transform: scale(.7) rotate(-45deg);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.card:hover .card-media .arrow-btn,
.card:focus-visible .card-media .arrow-btn {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  background: var(--accent);
  color: var(--accent-text);
}
@media (prefers-reduced-motion: reduce) {
  .card-media .arrow-btn { transform: none; }
  .card:hover .card-media .arrow-btn { transform: none; }
}

.card-tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: rgba(10,10,10,.7);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: var(--radius);
}
.card-body { padding-top: 1rem; }
.card-title {
  font-family: "Manrope", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
}
.card-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .25s var(--ease);
}
.card:hover .card-title::after,
.card:focus-visible .card-title::after { width: 100%; }
.card-meta {
  margin-top: .35rem;
  color: var(--text-mut);
  font-size: .88rem;
}

.card.card-lg .card-media { aspect-ratio: 16/10; }
@media (min-width: 900px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Clients logo wall (auto-scrolling marquee) ---------- */
.clients-wall {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 1.75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
}
.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(2.25rem, 6vw, 4rem);
  animation: clientsScroll 34s linear infinite;
}
.clients-wall:hover .clients-track { animation-play-state: paused; }
@keyframes clientsScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.client-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 48px;
}
.client-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Force every logo to a uniform off-white silhouette at rest so the
     wall reads cohesively on the dark theme regardless of the source
     logo's own colors; reveal true brand color on hover. */
  filter: brightness(0) invert(1);
  opacity: .6;
  transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.client-logo:hover img {
  opacity: 1;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    row-gap: 1.5rem;
  }
  .client-logo--dup { display: none; }
}

/* ---------- Stat band ---------- */
.stat-band {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 2.5rem;
}
@media (min-width: 760px) {
  .stat-band { grid-template-columns: repeat(var(--stat-cols, 4), 1fr); }
}
.stat {
  text-align: left;
}
.stat-value {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.stat-label {
  margin-top: .6rem;
  color: var(--text-mut);
  font-size: .88rem;
  letter-spacing: .02em;
}

/* ---------- Process steps ---------- */
.process-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.process-step {
  background: var(--bg-elev);
  padding: 1.75rem clamp(1rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  align-items: center;
  transition: background-color .3s var(--ease);
}
.process-step:hover { background: var(--bg-elev-2); }
.process-step .num {
  font-family: "Manrope", sans-serif;
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 600;
}
.process-step h3 { font-size: 1.1rem; }
.process-step p { color: var(--text-mut); margin-top: .4rem; }

/* ---------- Resume-style timeline (About page career history) ---------- */
.resume-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .resume-grid { grid-template-columns: repeat(2, 1fr); }
}
.resume-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.resume-item:hover { border-color: var(--accent); transform: translateY(-4px); }
.resume-item .arrow-btn { transform: none; }
.resume-item:hover .arrow-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.resume-item .years {
  color: var(--accent);
  font-size: .85rem;
  font-family: "Manrope", sans-serif;
  letter-spacing: .02em;
}
.resume-item h3 { margin-top: .3rem; font-size: 1.2rem; }
.resume-item .company { color: var(--text-mut); font-size: .92rem; margin-top: .2rem; display: block; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-brand h2 { font-size: 1.6rem; }
.footer-brand p { color: var(--text-mut); margin-top: .75rem; max-width: 32ch; }
.footer-col h4 {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 1rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
}
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a { color: var(--text); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: var(--text-mut);
  font-size: .85rem;
}

/* ---------- Scroll to top ---------- */
.scroll-top {
  position: fixed;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 90;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { filter: brightness(1.08); }

/* ---------- Filter bar (Work page) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2.5rem;
}
.filter-btn {
  padding: .55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .88rem;
  color: var(--text-mut);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.filter-btn:hover { color: var(--text); border-color: var(--text-mut); }
.filter-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.work-card[hidden] { display: none; }

/* ---------- Page hero (simple pages) ---------- */
.page-hero {
  padding-top: clamp(3.5rem, 10vw, 7rem);
  padding-bottom: 1rem;
}
.page-hero .eyebrow { color: var(--accent); }
.page-hero h1 { max-width: 20ch; }
.page-hero p.lead { margin-top: 1.25rem; max-width: 46ch; }

/* ---------- Project (case study) ---------- */
.project-hero {
  position: relative;
  padding-top: clamp(6rem, 14vw, 9rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.project-hero .eyebrow { color: var(--accent); }
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.75rem;
  color: var(--text-mut);
  font-size: .92rem;
}
.project-meta strong { color: var(--text); display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); margin-bottom: .25rem; font-weight: 500; }
.project-meta span { color: var(--text); font-family: "Manrope", sans-serif; }
.project-hero-media {
  margin-top: 2.5rem;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
}
.project-hero-media img,
.project-hero-media video { width: 100%; height: 100%; object-fit: cover; }

.project-section { border-bottom: 1px solid var(--line); }
.project-section:last-of-type { border-bottom: none; }
.project-section-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .project-section-grid { grid-template-columns: 1fr 2fr; }
}
.project-section-label {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.project-section-body p { color: var(--text-mut); max-width: 62ch; }
.project-section-body p + p { margin-top: 1rem; }

.project-video { aspect-ratio: 16/9; border: 1px solid var(--line); overflow: hidden; background: var(--bg-elev); }
.project-video iframe, .project-video video { width: 100%; height: 100%; }

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
.gallery-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.06); }

/* ---------- Activations (interactive stations: on-site photo + screen design) ---------- */
.activations {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
.activation {
  display: grid;
  gap: 1.25rem;
}
.activation-head {
  display: grid;
  gap: .5rem;
}
.activation-num {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: .04em;
}
.activation-title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.activation-caption { color: var(--text-mut); max-width: 68ch; }
.activation-media {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .activation-media { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.activation-figure {
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}
.activation-figure img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.activation-figure:hover img,
.activation-figure:focus-visible img { transform: scale(1.03); }
.activation-figcaption {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
  background: rgba(10,10,10,.7);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 100px;
  pointer-events: none;
}
.activation-zoom {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(10,10,10,.6);
  border: 1px solid var(--line);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.activation-figure:hover .activation-zoom,
.activation-figure:focus-visible .activation-zoom { opacity: 1; }
/* A portrait on-site photo alongside a wide screen render: let the
   figure grow to keep both readable rather than hard-cropping. */
.activation-figure.is-portrait img { object-fit: contain; background: var(--bg); }

/* ---------- Storyboard (sequential panoramic screen frames) ---------- */
.storyboard {
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
}
.storyboard-frame {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
}
.storyboard-num {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  line-height: 1;
}
.storyboard-caption {
  color: var(--text-mut);
  font-size: clamp(.92rem, 1.6vw, 1.05rem);
  max-width: 62ch;
}
.storyboard-media {
  position: relative;
  aspect-ratio: 2886 / 474;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  padding: 0;
  width: 100%;
  cursor: zoom-in;
  display: block;
}
.storyboard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.storyboard-media:hover img,
.storyboard-media:focus-visible img { transform: scale(1.03); }
.storyboard-zoom {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10,10,10,.65);
  border: 1px solid var(--line);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.storyboard-media:hover .storyboard-zoom,
.storyboard-media:focus-visible .storyboard-zoom { opacity: 1; }
@media (min-width: 820px) {
  .storyboard-frame {
    grid-template-columns: 4.5rem 1fr;
    column-gap: 1.75rem;
    align-items: start;
  }
  .storyboard-num {
    grid-row: 1 / span 2;
    padding-top: .2rem;
    font-size: 1.5rem;
    position: sticky;
    top: 96px;
  }
  .storyboard-caption { order: -1; }
}

/* ---------- Lab (motion + video-edit samples) ---------- */
.lab-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.lab-section + .lab-section { padding-top: 0; }
.lab-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .lab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lab-grid { grid-template-columns: repeat(3, 1fr); } }
/* a group of vertical clips (9:16) reads better narrower — 5 across on wide screens */
@media (min-width: 640px)  { .lab-grid.is-shorts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .lab-grid.is-shorts { grid-template-columns: repeat(5, 1fr); } }
.card-note { margin-top: .2rem; font-size: .82rem; color: var(--text-mut); }

.video-card { display: flex; flex-direction: column; }
.video-embed {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  cursor: pointer;
  padding: 0;
}
.video-embed.is-vertical { aspect-ratio: 9 / 16; }
.video-embed img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), opacity .3s var(--ease);
}
/* Shorts thumbnails are a 4:3 frame with the vertical video centred;
   object-fit:cover in a 9:16 box crops to exactly that area. */
.video-embed.is-vertical .video-play { width: 52px; height: 52px; font-size: 1rem; }
.video-embed:hover img { transform: scale(1.05); opacity: .85; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-embed.is-playing { cursor: default; }

/* Play button */
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  padding-left: 4px;
  z-index: 2;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.6);
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.video-embed:hover .video-play { transform: translate(-50%, -50%) scale(1.1); filter: brightness(1.08); }
.video-play::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: .5;
  animation: labPulse 2.6s ease-out infinite;
}
@keyframes labPulse {
  0% { transform: scale(1); opacity: .5; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .video-play::after { animation: none; }
}

/* Provider badge */
.video-badge {
  position: absolute;
  top: .85rem; left: .85rem;
  z-index: 2;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text);
  background: rgba(10,10,10,.6);
  border: 1px solid var(--line);
  padding: .3rem .6rem;
  border-radius: 100px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Premium placeholder tile */
.video-embed.is-placeholder {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-elev-2), var(--bg));
}
.video-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000000, transparent 75%);
  opacity: .5;
}
.video-card .card-body { padding-top: .9rem; }

.next-project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-block: clamp(2.5rem, 6vw, 4rem);
  transition: border-color .3s var(--ease);
}
.next-project:hover { border-color: var(--accent); }
.next-project .label { color: var(--text-mut); font-size: .85rem; }
.next-project .title { font-family: "Manrope", sans-serif; font-size: clamp(1.4rem, 3.5vw, 2.2rem); margin-top: .5rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: var(--gutter);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 85vh; width: auto; border: 1px solid var(--line); }
.lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.lightbox-nav:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

/* ---------- About ---------- */
.about-intro {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 800px) {
  .about-intro { grid-template-columns: 1fr 1.3fr; }
}
.about-portrait { border: 1px solid var(--line); aspect-ratio: 4/5; overflow: hidden; background: var(--bg-elev); border-radius: 220px 220px var(--radius-lg) var(--radius-lg); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-facts { margin-top: 2rem; display: grid; gap: .75rem; color: var(--text-mut); font-size: .92rem; }
.about-facts strong { color: var(--text); }

/* ---------- Info boxes (icon + label, used on About / Contact) ---------- */
.info-box-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.info-box-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.info-box-item .icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--accent);
}
.info-box-item .label { display: block; font-size: .8rem; color: var(--text-mut); }
.info-box-item a,
.info-box-item span.value { color: var(--text); font-weight: 500; }
.info-box-item a:hover { color: var(--accent); }

.tag-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag {
  padding: .6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text-mut);
  background: var(--bg-elev);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.tag:hover { border-color: var(--accent); color: var(--text); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}
.contact-form-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.contact-detail .info-box-item { align-items: center; }
.form-field { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.form-field label { font-size: .85rem; color: var(--text-mut); }
.form-field input,
.form-field textarea {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--text);
  padding: .9rem 1rem;
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--accent); outline: none; }
.form-note { margin-top: 1rem; color: var(--text-mut); font-size: .85rem; }
.form-status { margin-top: 1rem; font-size: .9rem; }
.form-status[data-state="success"] { color: #9c9c9c; }
.form-status[data-state="error"] { color: #888888; }

.contact-detail { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-detail a.big-link {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  border-bottom: 1px solid var(--line);
  padding-bottom: .3rem;
  display: inline-block;
}
.contact-detail a.big-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 404 ---------- */
.error-page {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.error-page::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,118,118,.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.error-page > * { position: relative; z-index: 1; }
.error-page .code {
  font-family: "Manrope", sans-serif;
  font-size: clamp(5rem, 20vw, 12rem);
  color: var(--accent);
  line-height: 1;
  font-weight: 700;
}

/* ---------- Utility ---------- */
.mt-2 { margin-top: 2rem; }
.text-mut { color: var(--text-mut); }
.center { text-align: center; }

/* =========================================================
   Desktop shell (index.html) — original desktop-OS-style UI.
   Not affiliated with, or using assets from, Apple.
   ========================================================= */
.desktop-body { overflow: hidden; height: 100vh; }
.desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  --wcol: clamp(520px, 44vw, 640px);   /* reserved widget column on the left — apps never cover it */
  --wpad: clamp(10px, 1.5vw, 16px);
  --dock-space: 96px;                   /* space at the bottom kept clear for the dock */
  -webkit-user-select: none; user-select: none;   /* no text copy from the cursor on the desktop */
  /* deep space — two faint nebula washes over a near-black sky (static, free to paint) */
  background:
    radial-gradient(1100px 780px at 12% -12%, rgba(98,98,98,.30), transparent 60%),
    radial-gradient(900px 720px at 88% 112%, rgba(103,103,103,.24), transparent 62%),
    radial-gradient(700px 520px at 70% 18%, rgba(116,116,116,.12), transparent 65%),
    linear-gradient(180deg, #090909 0%, #0c0c0c 45%, #070707 100%);
}
/* star canvas + the soft light that trails the cursor — both sit under every widget */
.starfield { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
.cursor-glow {
  position: absolute; top: 0; left: 0;
  width: 540px; height: 540px; margin: -270px 0 0 -270px;
  border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(118,118,118,.11), rgba(131,131,131,.07) 42%, transparent 68%);
  opacity: 0; transition: opacity .6s var(--ease);
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }
.desktop::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(125% 95% at 50% 45%, transparent 58%, rgba(6,6,6,.5));
  pointer-events: none;
}

/* Menu bar */
.menubar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 40px; z-index: 500;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0 1rem;
  background: rgba(10,10,10,.55);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  font-size: .82rem; color: var(--text);
}
.menubar .mb-logo { display: flex; align-items: center; }
.menubar .mb-logo img { height: 18px; width: auto; }
.menubar .mb-app { font-weight: 600; }
.menubar .mb-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; color: var(--text-mut); }
.menubar .mb-clock { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Shared app icon — a glowing neon outline glyph (no solid tile) */
.app-tile {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border-radius: 16px;
  color: var(--tint);
  background: none; border: 0; box-shadow: none;
  transition: transform .3s var(--ease);
}
/* soft light bloom behind the glyph — blooms on hover */
.app-tile::before {
  content: "";
  position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint) 62%, transparent) 0%, transparent 68%);
  opacity: 0; filter: blur(9px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.app-tile .glyph {
  position: relative;
  width: 40px; height: 40px;
  overflow: visible;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tint) 55%, transparent));
  transition: filter .35s var(--ease), transform .3s var(--ease);
}
/* hover / focus: the light comes up */
.dock-item:hover .app-tile::before,
.desktop-icon:hover .app-tile::before,
.dock-item:focus-visible .app-tile::before,
.desktop-icon:focus-visible .app-tile::before { opacity: 1; transform: scale(1.12); }
.dock-item:hover .glyph,
.desktop-icon:hover .glyph,
.dock-item:focus-visible .glyph,
.desktop-icon:focus-visible .glyph {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tint) 85%, transparent))
          drop-shadow(0 0 18px color-mix(in srgb, var(--tint) 45%, transparent));
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .app-tile, .app-tile::before, .app-tile .glyph { transition: none; }
  .dock-item:hover .glyph, .desktop-icon:hover .glyph { transform: none; }
}
.app-label {
  font-size: .78rem; color: var(--text);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  text-align: center;
}

/* ---------- Widget board (iPad-style home) ---------- */
.home-widgets {
  position: fixed;
  inset: 40px auto 104px 0;   /* fixed left column — apps never cover it */
  width: var(--wcol);
  overflow: hidden;           /* no scroll — the grid is sized to fit */
  z-index: 40;
  display: flex;
  justify-content: flex-start;  /* pinned to the left */
  align-items: flex-start;
  padding: var(--wpad);
}
.widgets-grid {
  /* 4×4 grid; cell fits both the column width and the vertical space (no scroll, no clipping) */
  --cell: min( calc((var(--wcol) - 2 * var(--wpad) - 36px) / 4), calc((100vh - 180px) / 4) );
  display: grid;
  grid-template-columns: repeat(4, var(--cell));
  grid-auto-rows: var(--cell);
  gap: 12px;
  align-content: start;
}
@media (max-width: 1024px)  {
  .home-widgets { inset: 40px 0 88px 0; width: 100%; overflow-y: auto; justify-content: center; -webkit-overflow-scrolling: touch; }
  /* mobile springboard — every widget is the same small square */
  .widgets-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 12px; width: 100%; max-width: 420px; }
  .widgets-grid .widget { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 1; padding: .55rem; border-radius: 20px; }
  /* Type is sized for the small square tile: a fixed cap, shrinking further on
     narrow phones (the grid is max-width capped, so vw alone would overshoot). */
  .widgets-grid .wclock { font-size: min(1.4rem, 6vw); }
  .widgets-grid .wclock-sub, .widgets-grid .wl-head span, .widgets-grid .wf-tag { display: none; }

  /* clock centred */
  .widgets-grid .widget-clock { align-items: flex-start; }

  /* stat tiles (1.5M / 21K+) — these had no mobile size and were still at 2rem */
  .widgets-grid .ws-value { font-size: min(1.35rem, 5.8vw); }
  .widgets-grid .ws-label { font-size: min(.64rem, 2.7vw); margin-top: .3rem; line-height: 1.25; }

  /* featured: let the image read, clamp the title to 2 lines */
  .widgets-grid .widget-featured::after { background: linear-gradient(180deg, transparent 38%, rgba(8,8,8,.8)); }
  .widgets-grid .widget-featured .wf-meta { padding: .55rem; }
  .widgets-grid .widget-featured .wf-kicker { display: none; }
  .widgets-grid .widget-featured .wf-title { font-size: min(.68rem, 2.9vw); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* worklist: head + first two rows only */
  .widgets-grid .widget-list { padding: .6rem; }
  .widgets-grid .wl-head { font-size: min(.68rem, 2.9vw); margin-bottom: .2rem; }
  .widgets-grid .wl-row:nth-of-type(n+3) { display: none; }
  .widgets-grid .wl-row { padding: .12rem 0; }
  .widgets-grid .wl-thumb { width: min(24px, 6.4vw); height: min(24px, 6.4vw); }
  .widgets-grid .wl-sub, .widgets-grid .wl-arrow { display: none; }
  .widgets-grid .wl-title { font-size: min(.63rem, 2.7vw); }

  /* profile: avatar over a single name line */
  .widgets-grid .widget-profile { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .4rem; }
  .widgets-grid .widget-profile .wp-role, .widgets-grid .widget-profile > .wl-arrow { display: none; }
  .widgets-grid .widget-profile .wp-avatar { width: min(40px, 10.6vw); height: min(40px, 10.6vw); }
  .widgets-grid .widget-profile .wp-name { font-size: min(.68rem, 2.9vw); }

  /* contact: icon-only buttons in a row */
  .widgets-grid .widget-contact { justify-content: center; gap: .5rem; }
  .widgets-grid .widget-contact .wc-head { text-align: center; font-size: min(.68rem, 2.9vw); }
  .widgets-grid .widget-contact .wc-actions { justify-content: center; gap: min(.25rem, 1vw); }
  .widgets-grid .widget-contact .wc-btn { width: min(30px, 7.4vw); height: min(30px, 7.4vw); }
  .widgets-grid .widget-contact .wc-btn span[aria-hidden] { font-size: min(.8rem, 3.2vw); }
}

.widget {
  position: relative;
  border-radius: 22px;
  padding: .9rem;
  background: linear-gradient(160deg, rgba(42,42,42,.55), rgba(19,19,19,.42));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: saturate(160%) blur(26px);
  -webkit-backdrop-filter: saturate(160%) blur(26px);
  box-shadow:
    0 24px 50px -26px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 .5px rgba(255,255,255,.04);
  overflow: hidden;
  text-align: left;
  color: var(--text);
  display: flex;
  flex-direction: column;
}
/* top sheen — the frosted-glass highlight */
.widget::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent);
  pointer-events: none;
}
.widget > * { position: relative; }
.widget.w2 { grid-column: span 2; }
.widget.h2 { grid-row: span 2; }
button.widget { cursor: pointer; transition: transform .25s var(--ease), border-color .25s var(--ease); font: inherit; }
button.widget:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
button.widget:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wl-arrow { color: var(--text-mut); font-size: 1.4rem; line-height: 1; }

/* Clock widget — extra-frosted glass */
.widget-clock {
  justify-content: center;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(214,214,214,.05));
  backdrop-filter: saturate(180%) blur(40px);
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 .5px rgba(255,255,255,.08);
}
.wclock { font-family: "Manrope", sans-serif; font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.wclock-sub { color: rgba(255,255,255,.85); font-size: .85rem; margin-top: .5rem; text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* Featured project */
.widget-featured { justify-content: flex-end; color: #ffffff; padding: 0; }
.widget-featured::before {
  content: ""; position: absolute; inset: 0;
  height: 100%;   /* overrides the 45% sheen height on .widget::before — without this the shot only filled the top of the tile */
  background-image: var(--shot); background-size: cover; background-position: center;
  transition: transform .5s var(--ease), opacity .45s var(--ease);
}
/* crossfade while the tile rotates to the next project */
.widget-featured.is-swapping::before { opacity: 0; }
.widget-featured.is-swapping .wf-meta,
.widget-featured.is-swapping .wf-tag { opacity: 0; transition: opacity .45s var(--ease); }
.widget-featured .wf-meta, .widget-featured .wf-tag { transition: opacity .45s var(--ease); }
/* black scrim rising from the bottom: image reads at the top, text stays legible */
.widget-featured::after {
  content: ""; position: absolute; inset: 0; height: 100%;
  background: linear-gradient(180deg,
    rgba(7,7,7,0) 0%,
    rgba(7,7,7,.12) 38%,
    rgba(7,7,7,.55) 62%,
    rgba(7,7,7,.88) 82%,
    rgba(7,7,7,.96) 100%);
}
.widget-featured:hover::before { transform: scale(1.05); }
.widget-featured .wf-tag {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  background: rgba(10,10,10,.6); border: 1px solid rgba(255,255,255,.18); padding: .28rem .6rem; border-radius: 100px;
}
.widget-featured .wf-meta { position: relative; z-index: 2; padding: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.wf-kicker { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.wf-title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.15; }

/* Selected work list (chart) */
.widget-list { padding: .8rem .9rem; gap: 0; }
.wl-head { display: flex; justify-content: space-between; align-items: baseline; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: .35rem; }
.wl-head span { font-size: .72rem; color: var(--text-mut); font-weight: 500; }
.wl-row {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .3rem .1rem; background: none; border: 0; border-top: 1px solid var(--line);
  cursor: pointer; text-align: left; color: var(--text); font: inherit;
}
.wl-row:first-of-type { border-top: 0; }
.wl-row:hover { color: var(--accent); }
.wl-rank { width: 1rem; color: var(--text-mut); font-size: .8rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.wl-thumb { width: 32px; height: 32px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; border: 1px solid var(--line); }
.wl-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.wl-title { font-size: .84rem; line-height: 1.25; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-sub { font-size: .72rem; line-height: 1.2; color: var(--text-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-row .wl-arrow { font-size: 1.1rem; flex-shrink: 0; }

/* Profile */
.widget-profile { flex-direction: row; align-items: center; gap: .9rem; }
.wp-avatar { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid var(--line); flex-shrink: 0; }
.wp-txt { flex: 1; min-width: 0; }
.wp-name { display: block; font-family: "Manrope", sans-serif; font-weight: 700; }
.wp-role { display: block; font-size: .8rem; color: var(--text-mut); }

/* Stat tile */
.widget-stat { justify-content: center; }
.ws-value { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 2rem; color: var(--accent); line-height: 1; }
.ws-label { color: var(--text-mut); font-size: .78rem; margin-top: .45rem; }

/* App-shortcut widget (Lab) */

/* Contact */
.widget-contact { gap: .55rem; }
.wc-head { font-family: "Manrope", sans-serif; font-weight: 700; }
/* Icon-only round buttons — the text label stays in the DOM for screen readers */
.wc-actions { display: flex; gap: .5rem; flex-wrap: nowrap; }
.wc-btn {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  color: var(--text);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.wc-btn span[aria-hidden] { color: var(--accent); font-weight: 600; font-size: 1.02rem; line-height: 1; }
.wc-btn:hover { border-color: var(--accent); transform: translateY(-2px); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); }
.wc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dock */
.dock {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 400;
  display: flex; align-items: flex-end; gap: 1rem;
  padding: .5rem .85rem;
  background: linear-gradient(180deg, rgba(52,52,52,.5), rgba(19,19,19,.42));
  backdrop-filter: saturate(170%) blur(24px);
  -webkit-backdrop-filter: saturate(170%) blur(24px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  box-shadow: 0 24px 55px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.22);
}
.dock-item {
  position: relative;
  display: block;
  transition: transform .22s var(--ease);
  transform-origin: bottom center;
}
.dock-item .app-tile { width: 52px; height: 52px; border-radius: 14px; }
.dock-item .glyph { width: 36px; height: 36px; }
.dock-item .app-label {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  white-space: nowrap; padding: .25rem .55rem; border-radius: 8px;
  background: rgba(10,10,10,.9); border: 1px solid var(--line);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
  font-size: .72rem;
}
.dock-item:hover .app-label { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Dock magnification (CSS approximation) */
.dock-item:hover { transform: scale(1.42) translateY(-8px); }
.dock-item:hover + .dock-item,
.dock-item:has(+ .dock-item:hover) { transform: scale(1.18) translateY(-3px); }
.dock-item.is-open::after {
  content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .dock-item, .dock-item:hover, .dock-item:hover + .dock-item { transition: none; transform: none; }
}
/* Small screens: scale the dock to the viewport so no icon is ever clipped */
@media (max-width: 720px) {
  .dock {
    gap: clamp(4px, 2.2vw, 16px);
    padding: .45rem clamp(.35rem, 1.6vw, .85rem);
    max-width: calc(100vw - 16px);
    border-radius: 20px;
  }
  .dock-item .app-tile { width: clamp(38px, 12vw, 52px); height: clamp(38px, 12vw, 52px); border-radius: 12px; }
  .dock-item .glyph { width: clamp(26px, 8.4vw, 36px); height: clamp(26px, 8.4vw, 36px); }
  .dock-item:hover { transform: none; }          /* no magnification on touch — it would overflow */
  .dock-item:hover + .dock-item,
  .dock-item:has(+ .dock-item:hover) { transform: none; }
}

/* Windows */
.windows-layer { position: fixed; inset: 40px 0 0 0; z-index: 100; pointer-events: none; }
.window {
  position: absolute;
  width: min(760px, 92vw); height: min(70vh, 620px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: block;
  padding: 0;               /* .window is a <section>; cancel the global section padding */
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.85);
  pointer-events: auto;
}
.window.is-focused { border-color: rgba(255,255,255,.22); }
.window.is-min { display: none; }
/* Zoom = full width across the whole desktop, covering the widgets too.
   top:0 is the menubar's bottom (the layer is already offset 40px); the dock stays clear. */
.window.is-max { left: 0 !important; top: 0 !important; width: 100vw !important; height: calc(100vh - 40px - var(--dock-space)) !important; }
.window.is-dragging { user-select: none; }

/* Resize handles — thin strips on the edges, larger targets at the corners.
   They live inside the window because .window clips its overflow. */
.window-rs { position: absolute; z-index: 6; touch-action: none; }
.window-rs-n  { top: 0; left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.window-rs-s  { bottom: 0; left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.window-rs-e  { right: 0; top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
.window-rs-w  { left: 0; top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
.window-rs-ne { top: 0; right: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.window-rs-nw { top: 0; left: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.window-rs-se { bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.window-rs-sw { bottom: 0; left: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.window.is-max .window-rs { display: none; }              /* nothing to resize when full screen */
.window.is-resizing { user-select: none; }
/* let the pointer keep streaming to us instead of into the embedded page */
.window.is-resizing iframe, .window.is-dragging iframe { pointer-events: none; }
.window-bar {
  display: flex; align-items: center; gap: .75rem;
  height: 42px; padding: 0 .85rem;
  background: linear-gradient(180deg, rgba(39,39,39,.9), rgba(25,25,25,.85));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  cursor: grab;
  flex-shrink: 0;
}
.window { border-color: rgba(255,255,255,.14); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.window-bar:active { cursor: grabbing; }
.window-controls { display: flex; gap: .5rem; }
.wc { width: 13px; height: 13px; border-radius: 50%; border: none; cursor: pointer; transition: filter .2s var(--ease); }
.wc:hover { filter: brightness(1.2); }
.wc-close { background: #7a7a7a; }
.wc-min { background: #999999; }
.wc-zoom { background: #787878; }
.window-title { font-weight: 600; font-size: .9rem; color: var(--text); }
.window-open { margin-left: auto; color: var(--text-mut); font-size: 1rem; }
.window-open:hover { color: var(--accent); }
/* Keep each app title visually centered in its desktop window while the
   controls and open link stay pinned to their respective edges. */
.window-bar { position: relative; }
.window-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: 42%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: center;
}
/* Absolute-fill below the 42px title bar — guarantees the content fills
   the window (flex-grow was leaving an empty band). */
.window-body { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; background: var(--bg); }
.window-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.window-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-mut); font-size: .9rem;
}

/* On phones: windows don't open (taps navigate); dock stays, widgets reflow. */
@media (max-width: 1024px) {
  .windows-layer { display: none; }
  .home-widgets { inset: 40px 0 100px 0; }
}

/* ---------- App mode: strip site chrome when framed / ?app=1 ---------- */
body.is-app { animation: none; min-height: 0; }
body.is-app .site-header,
body.is-app .site-footer,
body.is-app #scroll-top,
body.is-app .scroll-top { display: none !important; }
/* Compress the full-page vertical rhythm so content fills the window
   instead of leaving big empty bands top, middle and bottom. */
body.is-app main { padding-top: 0; }
body.is-app section { padding-block: clamp(1.4rem, 3vw, 2.4rem) !important; }
body.is-app main > section:first-child,
body.is-app #project-root > section:first-child,
body.is-app #lab-root > section:first-child { padding-top: 1.5rem !important; }
body.is-app .page-hero,
body.is-app .project-hero,
body.is-app .hero { padding-top: 1.5rem !important; padding-bottom: .5rem !important; }
body.is-app .hero { min-height: 0; }
body.is-app .section-head { margin-bottom: 1.5rem; }
body.is-app .project-section-grid { gap: 1.25rem; }
/* Let the last section breathe to the window's bottom edge */
body.is-app main > section:last-child,
body.is-app #project-root > section:last-child { padding-bottom: 2rem !important; }

/* ---------- Guide bot ---------- */
.bot-launch {
  position: fixed; right: 22px; bottom: 22px; z-index: 450;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-text);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 88%, #ffffff 8%), color-mix(in srgb, var(--accent) 70%, #000000 22%));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.4);
  cursor: pointer; transition: transform .25s var(--ease), filter .25s var(--ease);
}
.bot-launch:hover { transform: scale(1.07); filter: brightness(1.06); }
.bot-launch svg { width: 26px; height: 26px; }
.bot-launch.is-active { transform: scale(.9); }

.bot-panel {
  position: fixed; right: 22px; bottom: 90px; z-index: 451;
  width: min(340px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  display: none; flex-direction: column;
  padding: 0;               /* .bot-panel is a <section>; cancel the global section padding */
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(44,44,44,.72), rgba(17,17,17,.62));
  backdrop-filter: saturate(160%) blur(28px);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.2);
}
.bot-panel.is-open { display: flex; animation: botPop .28s var(--ease) both; }
@keyframes botPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bot-panel.is-open { animation: none; } }
/* Small screens: the dock spans most of the width, so lift the bot clear above it */
@media (max-width: 720px) {
  .bot-launch { right: 14px; bottom: 92px; width: 48px; height: 48px; }
  .bot-launch svg { width: 22px; height: 22px; }
  .bot-panel { right: 14px; bottom: 150px; max-height: min(58vh, 440px); }
}

.bot-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.bot-ava { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text); }
.bot-ava svg { width: 18px; height: 18px; }
.bot-title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: .95rem; }
.bot-close { margin-left: auto; color: var(--text-mut); font-size: .95rem; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; }
.bot-close:hover { color: var(--text); background: rgba(255,255,255,.08); }

.bot-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.bot-msg {
  max-width: 85%; padding: .6rem .8rem; border-radius: 16px; font-size: .86rem; line-height: 1.45;
}
.bot-bot { align-self: flex-start; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-bottom-left-radius: 5px; }
.bot-me { align-self: flex-end; background: var(--accent); color: var(--accent-text); border-bottom-right-radius: 5px; font-weight: 500; }

.bot-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem 1rem 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.bot-chip {
  font-size: .78rem; padding: .45rem .75rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color: var(--text); cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.bot-chip:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ---------- Draggable desktop icons ---------- */
.desktop-icons { position: fixed; top: 44px; right: 0; bottom: 100px; left: var(--wcol); z-index: 55; pointer-events: none; }  /* app area, right of the widgets */
.desktop-icon {
  position: absolute; width: 82px;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  pointer-events: auto; cursor: grab; touch-action: none;
  transition: transform .18s var(--ease);
}
.desktop-icon:hover .app-tile { transform: translateY(-3px); }
.desktop-icon.is-dragging {
  cursor: grabbing; z-index: 60;
  transition: none;          /* transform is driven per-frame; no lag */
  will-change: transform;
}
.desktop-icon.is-dragging .glyph { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tint) 90%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--tint) 50%, transparent)); }
.desktop-icon:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; border-radius: 14px; }
@media (max-width: 1024px) { .desktop-icons { display: none; } }

/* ---------- Colored (tinted) widgets ---------- */
.widget.tint {
  background: linear-gradient(160deg, color-mix(in srgb, var(--wtint) 82%, #ffffff 8%), color-mix(in srgb, var(--wtint) 64%, #000000 26%));
  border-color: rgba(255,255,255,.24);
  color: #ffffff;
}
.widget.tint .ws-value { color: #ffffff; }
.widget.tint .ws-label { color: rgba(255,255,255,.82); }

/* ---------- Widget drag-to-reorder ---------- */
.widget { touch-action: manipulation; }
.widget-dragging { opacity: .92; transform: scale(1.04); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9) !important; cursor: grabbing; z-index: 5; }
body.is-reordering { cursor: grabbing; }
body.is-reordering .widget:not(.widget-dragging) { transition: transform .2s var(--ease); }

/* ---------- Personal studio desktop ---------- */
.desktop { background: #232323; --dock-space: 94px; user-select: text; }
.desktop::after { display: none; }
.menubar { background: #1c1c1c; border-color: #434343; font-size: .72rem; }
.menubar .mb-logo img { height: 20px; }
.home-widgets { inset: 40px 0 94px; width: 100%; overflow-y: auto; padding: 28px clamp(22px, 5vw, 80px) 20px; display: block; }
.studio-board { max-width: 1440px; margin: auto; }
.studio-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; }
.studio-label, .studio-section-label, .folder-tab, .sheet-foot, .studio-bottom { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.studio-label { color: #b3b3b3; }
.studio-intro h1 { font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 600; letter-spacing: -.025em; line-height: .97; margin-top: 10px; text-transform: uppercase; }
.studio-dot { color: #9c9c9c; }
.studio-description { font-size: .9rem; line-height: 1.7; color: #cbcbcb; padding-bottom: 5px; }
.studio-section-label { display: flex; justify-content: space-between; color: #b3b3b3; border-top: 1px solid #494949; padding-top: 12px; margin-bottom: 28px; }
.studio-projects { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-bottom: 30px; }
.project-folder { position: relative; display: block; text-align: left; background: #bdbdbd; color: #222222; border-radius: 0 6px 6px 6px; padding: 8px; box-shadow: 0 8px 16px #00000022; transition: transform .2s ease; }
.folder-tab { position: absolute; top: -17px; left: 0; background: #bdbdbd; border-radius: 5px 10px 0 0; height: 20px; padding: 3px 14px 0; font-size: .55rem; }
.project-folder:nth-child(2), .project-folder:nth-child(2) .folder-tab { background: #bbbbbb; }
.project-folder:nth-child(3), .project-folder:nth-child(3) .folder-tab { background: #b6b6b6; }
.folder-image { display: block; position: relative; overflow: hidden; }
.folder-image img { width: 100%; aspect-ratio: 1.95; object-fit: cover; transition: transform .4s ease; }
.folder-open { position: absolute; bottom: 8px; right: 10px; background: #ebebeb; border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 30px; }
.folder-caption { display: flex; flex-direction: column; padding: 10px 5px 4px; }
.folder-caption strong { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 600; line-height: 1.15; }
.folder-caption > span { margin-top: 5px; font-size: .62rem; }
.project-folder:hover { transform: translateY(-4px); }
.project-folder:hover img { transform: scale(1.025); }
.studio-process { display: grid; grid-template-columns: 1.35fr 1fr .75fr; gap: 24px; align-items: start; }
.process-sheet { background: #e2e2e2; color: #343434; padding: 14px; text-align: left; box-shadow: 0 8px 15px #00000022; transform: rotate(-1deg); }
.sheet-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: .8rem; font-weight: 700; }
.sheet-heading > span { font-size: .6rem; font-weight: 400; }
.process-sheet img { width: 100%; margin-top: 5px; }
.sheet-foot { display: block; margin-top: 10px; font-size: .52rem; }
.process-photo { background: #343434; padding: 8px; text-align: left; transform: rotate(1deg); }
.process-photo img { width: 100%; aspect-ratio: 2; object-fit: cover; }
.process-photo > span { display: flex; justify-content: space-between; font-size: .7rem; padding: 10px 4px 2px; }
.studio-note { padding: 4px 0; }
.studio-note .studio-label { color: #b5b5b5; font-size: .57rem; }
.studio-note p { font-size: clamp(.95rem, 1.4vw, 1.25rem); line-height: 1.5; margin: 12px 0 18px; }
.studio-note a { font-size: .7rem; border-bottom: 1px solid #8b8b8b; padding-bottom: 5px; }
.studio-bottom { display: flex; justify-content: space-between; color: #9c9c9c; font-size: .53rem; padding-top: 24px; }
.dock { gap: 7px; bottom: 12px; padding: 8px 14px; border-radius: 12px; background: #181818f2; box-shadow: 0 5px 25px #00000033; border-color: #4e4e4e; align-items: center; }
.dock-item { display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 6px; }
.dock-item .app-tile { width: 26px; height: 26px; }
.dock-item .glyph { width: 23px; height: 23px; filter: none !important; }
.dock-item .glyph g { stroke: #c9c9c9; fill: none; }
.dock-item .app-label { position: static; opacity: 1; transform: none !important; background: none; border: none; padding: 0; font-size: .72rem; text-shadow: none; }
.dock-item .app-tile::before { display: none; }
.dock-item:hover, .dock-item:hover + .dock-item, .dock-item:has(+ .dock-item:hover) { transform: none; }
.dock-item:hover { background: #343434; }
.dock-item.is-open::after { background: #a6a6a6; bottom: -5px; }
.window-title { font-size: .8rem; }
h1, h2 { letter-spacing: -.015em; }
@media (max-width: 1024px) {
  .home-widgets { padding: 28px; }
  .studio-intro h1 { font-size: 5rem; }
  .studio-projects { gap: 16px; }
  .studio-process { grid-template-columns: 1.2fr 1fr; gap: 20px; }
  .studio-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
  .studio-note p { flex: 1; font-size: .9rem; }
}
@media (max-width: 600px) {
  .home-widgets { inset: 40px 0 88px; padding: 25px 20px; }
  .studio-intro { display: block; margin-bottom: 25px; }
  .studio-intro h1 { font-size: clamp(3.7rem, 16vw, 5.7rem); }
  .studio-label { font-size: .53rem; }
  .studio-description { font-size: .8rem; margin-top: 16px; }
  .studio-section-label { font-size: .52rem; }
  .studio-section-label > span:last-child { display: none; }
  .studio-projects { grid-template-columns: 1fr; gap: 32px; }
  .folder-caption strong { font-size: 1.8rem; }
  .folder-caption > span { font-size: .7rem; }
  .studio-process { grid-template-columns: 1fr; }
  .studio-note { display: block; padding-top: 16px; }
  .studio-bottom { font-size: .44rem; gap: 10px; }
  .dock { width: calc(100% - 24px); gap: 0; padding: 7px; justify-content: space-around; }
  .dock-item { flex-direction: column; padding: 3px 5px; gap: 3px; }
  .dock-item .app-label { font-size: .58rem; }
  .dock-item .app-tile { width: 24px; height: 24px; }
}
@media (min-width: 1100px) and (max-height: 800px) {
  .home-widgets { padding-top: 20px; }
  .studio-intro { margin-bottom: 20px; }
  .studio-intro h1 { font-size: 4.9rem; }
  .studio-projects { margin-bottom: 22px; }
  .folder-image img { aspect-ratio: 2.7; }
  .studio-section-label { margin-bottom: 23px; }
  .studio-process { grid-template-columns: 1.15fr .8fr .8fr; }
  .process-sheet img { max-height: 45px; object-fit: cover; }
  .studio-bottom { padding-top: 16px; }
}

/* An original desktop: folders and loose prints, with room to arrange them. */
.desktop { background: radial-gradient(ellipse at 18% 45%, #414141 0%, #303030 38%, #212121 80%); }
.home-widgets { padding: 0; overflow: hidden; }
.personal-desktop { position: relative; width: 100%; height: 100%; min-height: 460px; }
.desktop-signature { position: absolute; left: 7%; top: 13%; pointer-events: none; }
.desktop-signature h1 { font: 600 clamp(5rem, 11vw, 10rem)/.81 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -.025em; color: #d2d2d2; margin: 20px 0 22px; }
.desktop-signature h1 span { color: #a6a6a6; }
.desktop-signature > p:last-child { font-size: .75rem; color: #c4c4c4; }
.desktop-instruction { position: absolute; left: 7%; bottom: 6%; font-size: .8rem; color: #d2d2d2; }
.desktop-instruction span { color: #a9a9a9; font-size: .67rem; }
.desk-object { position: absolute; width: 140px; display: flex; flex-direction: column; align-items: center; padding: 9px; border-radius: 8px; touch-action: none; user-select: none; cursor: grab; }
.desk-object:hover, .desk-object:focus-visible { background: #ffffff0a; }
.desk-object.is-moving { z-index: 10; cursor: grabbing; background: #ffffff12; }
.desk-slot-0 { left: 57%; top: 10%; }
.desk-slot-1 { left: 76%; top: 12%; }
.desk-slot-2 { left: 57%; top: 43%; }
.desk-slot-3 { left: 76%; top: 45%; }
.desk-slot-4 { left: 37%; top: 60%; transform: rotate(-5deg); }
.desk-slot-5 { left: 55%; top: 76%; transform: rotate(3deg); }
.desk-slot-6 { left: 78%; top: 76%; transform: rotate(-3deg); }
.tactile-folder { position: relative; width: 102px; height: 76px; margin: 12px 0 12px; background: color-mix(in srgb, var(--folder-color), #000000 18%); border-radius: 3px 6px 6px 6px; box-shadow: 0 9px 13px #11111160; }
.tactile-folder::before { content:''; position:absolute; left:0; top:-9px; width:43px; height:14px; border-radius:5px 9px 0 0; background: inherit; }
.folder-paper { position:absolute; inset: 3px 8px 8px; background:#e9e9e9; transform:rotate(-5deg); border-radius:2px; box-shadow:0 -3px 0 #d5d5d5; transition:transform .2s; }
.folder-front { position:absolute; inset:12px -2px -1px; background:linear-gradient(170deg, color-mix(in srgb,var(--folder-color),#ffffff 12%),var(--folder-color)); border-radius:4px 4px 6px 6px; border-top:1px solid #ffffff70; transform:skewX(-4deg); display:flex; align-items:flex-end; padding:8px; }
.folder-front span { color:#393939; font-size:.43rem; letter-spacing:.12em; }
.desk-object:hover .folder-paper { transform:translateY(-4px) rotate(-7deg); }
.desk-title { font-size:.75rem; line-height:1.25; text-align:center; color:#ededed; text-shadow:0 1px 4px #00000088; }
.desk-note { margin-top:4px; font-size:.53rem; color:#b5b5b5; }
.desktop-print { width:113px; padding:5px 5px 3px; background:#dbdbdb; box-shadow:0 8px 15px #11111170; margin-bottom:9px; }
.desktop-print img { width:100%; height:63px; object-fit:cover; }
.desktop-print > span { display:block; color:#414141; font-size:.4rem; text-align:left; letter-spacing:.09em; margin-top:4px; }
.window { border-radius: 7px; }
.window-bar { background: #313131; }
.wc { border-radius: 3px; width: 17px; height: 17px; background: #646464; color: #ebebeb; font-size: 12px; line-height: 15px; }
.wc-close::after { content:'×'; }.wc-min::after { content:'−'; }.wc-zoom::after { content:'+'; }
.wc-close { background:#696969; }
.menubar .mb-app { max-width:60vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media (max-width:1024px) {
  .home-widgets { padding:24px; overflow-y:auto; }
  .personal-desktop { height:auto; min-height:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 12px; }
  .desktop-signature { position:static; grid-column:1/-1; padding:12px 0 20px; }
  .desktop-signature h1 { font-size:5rem; }
  .desktop-signature h1 br { display:none; }
  .desktop-instruction { position:static; grid-column:1/-1; grid-row:2; margin-bottom:12px; }
  .desk-object { position:static; width:100%; transform:none; touch-action:manipulation; }
}
@media (max-width:600px) {
  .personal-desktop { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .desktop-signature h1 { font-size:4.3rem; }
  .desktop-signature h1 br { display:block; }
  .desktop-signature > p:last-child { font-size:.66rem; }
}

/* Desktop chrome: engraved identity bar and a tactile app tray. */
.menubar { padding-inline:20px; gap:13px; background:linear-gradient(180deg,#292929f5,#202020f5); border-bottom:1px solid #a5a5a52c; box-shadow:0 2px 12px #0b0b0b20; }
.menubar .mb-logo { width:29px; height:29px; justify-content:center; padding:0; border:1px solid #b8b8b855; border-radius:7px; background:linear-gradient(145deg,#464646,#2e2e2e); box-shadow:inset 0 1px #ffffff20,0 2px 4px #00000033; }
.mb-logo > span { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:19px; line-height:1; letter-spacing:-.04em; }
.mb-brand-dot { color:#b0b0b0; }
.mb-logo:hover { border-color:#c0c0c0; transform:translateY(-1px); }
.mb-divider { height:19px; width:1px; background:#9b9b9b33; }
.mb-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.mb-caption { font-size:8px; letter-spacing:.15em; color:#a3a3a3; }
.menubar .mb-app { font-size:11px; font-weight:600; color:#ebebeb; max-width:40vw; }
.menubar .mb-right { gap:12px; flex-shrink:0; }
.mb-location { display:flex; align-items:center; gap:7px; font-size:10px; color:#cbcbcb; }
.mb-location-dot { width:5px; height:5px; background:#b1b1b1; border-radius:50%; }
.mb-zone { color:#8d8d8d; font-size:8px; }
.menubar .mb-clock { font-size:11px; color:#dfdfdf; padding:3px 8px; border:1px solid #bdbdbd25; border-radius:5px; background:#1414142e; }
.dock { padding:9px 13px 8px; gap:8px; border-radius:19px; background:linear-gradient(160deg,#424242ed,#2b2b2bf5); border:1px solid #aaaaaa60; box-shadow:inset 0 1px #ececec2b,0 12px 32px #09090950,0 2px 5px #00000033; backdrop-filter:blur(24px); }
.dock-item { flex-direction:column; gap:6px; padding:2px 9px 4px; border-radius:10px; min-width:65px; }
.dock-item .app-tile { width:40px; height:38px; border-radius:10px; background:linear-gradient(145deg,color-mix(in srgb,var(--dock-color),#ffffff 12%),var(--dock-color)); border:1px solid #ffffff45; box-shadow:inset 0 1px #ffffff55,0 3px 5px #0f0f0f40; transition:transform .2s ease,box-shadow .2s ease; }
.dock-item .glyph { width:25px; height:25px; }
.dock-item .glyph g { stroke:#363636; stroke-width:1.45; }
.dock-work { --dock-color:#bbbbbb; }
.dock-lab { --dock-color:#aeaeae; }
.dock-about { --dock-color:#b5b5b5; }
.dock-contact { --dock-color:#b8b8b8; }
.dock-resume { --dock-color:#cfcfcf; margin-left:7px; position:relative; }
.dock-resume::before { content:''; position:absolute; left:-8px; height:42px; top:7px; width:1px; background:#b6b6b63d; }
.dock-item .app-label { font-size:10px; font-weight:500; color:#e6e6e6; letter-spacing:.01em; }
.dock-item:hover { background:#d7d7d710; }
.dock-item:hover .app-tile, .dock-item:focus-visible .app-tile { transform:translateY(-4px) rotate(-3deg); box-shadow:inset 0 1px #ffffff55,0 7px 9px #0f0f0f55; }
.dock-item.is-open::after { width:4px; height:4px; bottom:-3px; background:#bababa; box-shadow:0 0 0 2px #bababa15; }
@media (max-width:700px) {
 .mb-caption { display:none; }
 .menubar { padding-inline:12px; gap:10px; }
 .mb-zone { display:none; }
 .menubar .mb-app { max-width:38vw; }
 .dock { width:auto; max-width:calc(100% - 24px); gap:3px; padding:8px 8px 7px; }
 .dock-item { min-width:55px; padding-inline:7px; }
 .dock-item .app-tile { width:36px; height:35px; }
 .dock-resume { margin-left:5px; }
 .dock-resume::before { left:-5px; }
}
@media (max-width:370px) {
 .dock-item { min-width:48px; padding-inline:4px; }
 .mb-location { display:none; }
}

/* Shared studio pages — editorial type, warm paper and olive ink. */
.studio-page {
 --bg:#e3e3e3; --bg-elev:#dadada; --bg-elev-2:#d1d1d1;
 --text:#2b2b2b; --text-mut:#636363; --line:#bbbbbb;
 --accent:#565656; --accent-text:#eeeeee;
 --radius:5px; --radius-lg:8px;
 background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif;
 font-size:15px; line-height:1.75;
}
.studio-page h1,.studio-page h2,.studio-page h3,.studio-page h4,
.studio-page .card-title,.studio-page .next-project .title,.studio-page .stat-value {
 font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:600; letter-spacing:-.015em; line-height:1.05;
}
.studio-page h1 { font-size:clamp(3.3rem,7.5vw,6.6rem); text-wrap:balance; }
.studio-page h2 { font-size:clamp(2.3rem,4.5vw,3.6rem); }
.studio-page h3 { font-size:clamp(1.6rem,2.8vw,2.2rem); }
.studio-page p { text-wrap:pretty; }
.studio-page p.lead { font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.65; max-width:58ch; }
.studio-page .eyebrow,.studio-page .project-section-label { font-size:.68rem; letter-spacing:.15em; font-weight:600; color:var(--accent); }
.studio-page .accent-text { color:inherit; }
.studio-page section { padding-block:clamp(2.5rem,5vw,4.5rem); }
.studio-page .page-hero { padding-top:3rem; padding-bottom:0; }
.studio-page .page-hero h1 { margin-top:12px; }
.studio-page .project-hero { padding-top:3rem; }
.studio-page .project-hero h1 { max-width:23ch; margin-top:12px; }
.studio-page .project-hero > .lead { margin-top:1.3rem; }
.studio-page .site-header { background:#e3e3e3f2; border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.studio-page .nav { min-height:66px; }
.studio-page .nav-logo { background:#323232; padding:7px; border-radius:7px; }
.studio-page .nav-logo { width:43px; height:43px; justify-content:center; border:1px solid #666666; box-shadow:inset 0 1px #ffffff28, 0 3px 8px #28282822; }
.studio-page .brand-mark { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:1.5rem; line-height:1; font-weight:600; letter-spacing:-.06em; color:#ededed; }
.studio-page .brand-mark span { color:#a6a6a6; }
.studio-page .nav-links a { font-size:.78rem; font-weight:600; }
.studio-page .btn { border-radius:5px; font-size:.8rem; padding:.8rem 1.2rem; }
.studio-page .btn-primary { background:#373737; color:#ededed; border:1px solid #484848; box-shadow:inset 0 1px #ffffff25; }
.studio-page .btn-primary::before { display:none; }
.studio-page .nav-links a.btn { color:#ededed; }
.studio-page .btn-ghost { border-color:#9c9c9c; }
.studio-page .filter-bar { gap:8px; }
.studio-page .filter-btn { border-radius:5px 5px 0 0; font-size:.75rem; border-color:var(--line); padding:.6rem 1rem; }
.studio-page .filter-btn[aria-pressed="true"] { background:#373737; border-color:#373737; color:#ededed; }
.studio-page .grid { gap:30px 24px; }
.studio-page .card { padding:9px; background:#eeeeee; border:1px solid #c5c5c5; border-radius:5px; box-shadow:0 4px 9px #2a2a2a09; }
.studio-page .card-media { border:0; border-radius:2px; }
.studio-page .card-body { padding:14px 7px 9px; }
.studio-page .card-title { font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.1; }
.studio-page .card-title::after { display:none; }
.studio-page .card-meta,.studio-page .card-note { font-size:.72rem; line-height:1.65; margin-top:9px; color:var(--text-mut); }
.studio-page .card-tag { color:#ebebeb; background:#2b2b2be6; font-size:.57rem; border-radius:3px; letter-spacing:.1em; }
.studio-page .arrow-btn { background:#373737; color:#ededed; border:0; }
.studio-page .project-meta { gap:20px 40px; padding:18px 0; border-block:1px solid var(--line); font-size:.85rem; }
.studio-page .project-meta strong { font-size:.59rem; letter-spacing:.15em; color:var(--accent); }
.studio-page .project-hero-media { border:7px solid #eeeeee; border-radius:4px; box-shadow:0 4px 20px #2a2a2a10; margin-top:28px; }
.studio-page .project-section-grid { gap:24px; }
.studio-page .project-section-body p { font-size:1rem; line-height:1.85; color:#4b4b4b; }
.studio-page .project-section-label { padding-top:5px; }
.studio-page .gallery { gap:18px; }
.studio-page .gallery-item { border:6px solid #eeeeee; border-radius:3px; box-shadow:0 3px 9px #2a2a2a10; }
.studio-page .activation-title { font-size:2rem; }
.studio-page .activation-num,.studio-page .storyboard-num { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:500; }
.studio-page .activation-caption,.studio-page .storyboard-caption { font-size:.88rem; line-height:1.8; }
.studio-page .activation-figure,.studio-page .storyboard-media { border-radius:3px; border:5px solid #eeeeee; }
.studio-page .activation-figcaption { background:#2b2b2be6; color:#ededed; border-radius:3px; }
.studio-page .stat-band { background:#d5d5d5; border:1px solid #b9b9b9; border-radius:5px; }
.studio-page .stat-value { font-size:3.5rem; color:#373737; }
.studio-page .stat-label { font-size:.72rem; color:#636363; }
.studio-page .timeline-item,.studio-page .pillar,.studio-page .process-step { background:#ececec; border:1px solid var(--line); border-radius:5px; box-shadow:none; }
.studio-page .timeline-year { font-size:.7rem; letter-spacing:.08em; }

/* Career milestones read as one connected timeline. */
.studio-page .timeline { position:relative; display:grid; gap:24px; margin-top:32px; padding:4px 0 4px 34px; }
.studio-page .timeline::before { content:""; position:absolute; left:8px; top:12px; bottom:12px; width:2px; background:#aaaaaa; }
.studio-page .timeline-item { position:relative; padding:20px 24px 22px; }
.studio-page .timeline-item::before { content:""; position:absolute; left:-33px; top:27px; width:14px; height:14px; border-radius:50%; background:#373737; border:4px solid #e3e3e3; box-shadow:0 0 0 1px #909090; }
.studio-page .timeline-item::after { content:""; position:absolute; left:-20px; top:33px; width:20px; height:1px; background:#aaaaaa; }
.studio-page .timeline-year { display:inline-block; color:#565656; font-family:'Barlow Condensed',sans-serif; font-size:1.25rem; letter-spacing:.03em; margin-bottom:8px; }
.studio-page .timeline-item h3 { font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:5px; }
.studio-page .timeline-item p { color:#5a5a5a; max-width:62ch; }
@media (min-width:800px) {
 .studio-page .timeline { padding-left:0; padding-right:0; gap:0; }
 .studio-page .timeline::before { left:50%; transform:translateX(-50%); }
 .studio-page .timeline-item { width:calc(50% - 34px); margin-bottom:28px; }
 .studio-page .timeline-item:nth-child(even) { margin-left:auto; }
 .studio-page .timeline-item::before { left:auto; right:-42px; top:29px; }
 .studio-page .timeline-item::after { left:auto; right:-34px; top:35px; }
 .studio-page .timeline-item:nth-child(even)::before { right:auto; left:-42px; }
 .studio-page .timeline-item:nth-child(even)::after { right:auto; left:-34px; }
}
.studio-page .about-portrait,.studio-page .hero-portrait { border-radius:3px; border:8px solid #eeeeee; }
.studio-page .about-facts { font-size:.84rem; line-height:1.8; }
.studio-page .tag { font-size:.72rem; border-radius:4px; background:#ececec; }
.studio-page .tag-list { display:flex; flex-wrap:wrap; gap:10px; }
.studio-page .tag { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:9px 14px; border:1px solid #b6b6b6; color:#555555; }
.studio-page .tag-software { background:#e0e0e0; border-color:#aeaeae; }
.studio-page .tag-icon { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:5px; font:600 .68rem/1 'Manrope',sans-serif; letter-spacing:-.04em; background:#373737; color:#ededed; }
.studio-page .tag-ps .tag-icon { background:#393939; }
.studio-page .tag-id .tag-icon { background:#484848; }
.studio-page .tag-ai .tag-icon { background:#626262; }
.studio-page .tag-ae .tag-icon { background:#424242; }
.studio-page .tag-pr .tag-icon { background:#3c3c3c; }
.studio-page .tag-web .tag-icon { background:#545454; font-size:.58rem; }
.studio-page .footer-col li a { display:inline-flex; align-items:center; gap:10px; }
.studio-page .social-icon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:#373737; color:#ededed; font:600 .7rem/1 'Manrope',sans-serif; }
.studio-page .social-instagram { font-size:1rem; }
.studio-page .social-email { font-size:.85rem; }
.studio-page .form-field label { font-size:.72rem; font-weight:600; letter-spacing:.03em; }
.studio-page input,.studio-page textarea { background:#f1f1f1; border:1px solid #b3b3b3; border-radius:5px; color:var(--text); }
.studio-page .form-note { font-size:.72rem; }
.studio-page .big-link { font-family:'Manrope',sans-serif; font-size:clamp(.85rem,1.8vw,1.15rem); overflow-wrap:anywhere; }
.studio-page .info-box-item .icon { background:#d3d3d3; color:#373737; border-radius:7px; }
.studio-page .info-box-item .icon { width:48px; height:48px; border-color:#b6b6b6; }
.studio-page .info-box-item .icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.studio-page .info-box-item .icon-linkedin span { font:600 1.1rem/1 'Manrope',sans-serif; letter-spacing:-.08em; }
.studio-page .next-project { background:#d5d5d5; padding:24px; border:1px solid #b9b9b9; border-radius:5px; }
.studio-page .next-project .title { font-size:clamp(1.7rem,3.3vw,2.7rem); }
.studio-page .next-project .label { font-size:.64rem; letter-spacing:.13em; }
.studio-page .site-footer { background:#d7d7d7; border-top:1px solid #b4b4b4; }
.studio-page .footer-brand h2 { font-size:2.6rem; }
.studio-page .footer-col h4 { font-family:'Manrope',sans-serif; font-size:.65rem; letter-spacing:.12em; }
.studio-page .footer-brand p,.studio-page .footer-col a,.studio-page .footer-bottom { font-size:.76rem; color:#555555; }
.studio-page .hero { background:none; min-height:auto; }
.studio-page .hero::after,.studio-page .hero-portrait-wrap::before { display:none; }
.studio-page .clients-wall { background:#363636; border-radius:5px; }
.studio-page.is-app .project-hero h1 { font-size:clamp(2.8rem,7vw,4.6rem); }
.studio-page.is-app .page-hero h1 { font-size:clamp(3rem,8vw,5rem); }
.studio-page.is-app { --gutter:clamp(20px,4vw,44px); }
@media(max-width:760px) {
 .studio-page .site-header { background:rgba(227,227,227,.97); backdrop-filter:none; -webkit-backdrop-filter:none; }
 .studio-page .nav-links { z-index:200; background:rgba(227,227,227,.98); border-color:var(--line); box-shadow:0 18px 35px rgba(41,41,41,.14); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
 .studio-page .project-meta { gap:18px 24px; }
 .studio-page .gallery { gap:10px; }
 .studio-page .project-hero-media { border-width:4px; }
 .studio-page .project-section-body p { font-size:.94rem; }
}

/* The Lab is a contact sheet: even compact windows keep two clips per row. */
.studio-page .lab-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.studio-page .lab-grid.is-shorts { grid-template-columns:repeat(2,minmax(0,1fr)); }
.studio-page .lab-grid .video-card { min-width:0; }
@media(max-width:380px) {
 .studio-page .lab-grid, .studio-page .lab-grid.is-shorts { gap:9px; }
 .studio-page .lab-grid .card-title { font-size:1.25rem; }
}
/* Keep small labels readable regardless of a project's brand accent. */
.studio-page .project-section-label,.studio-page .project-meta strong,
.studio-page .project-hero .eyebrow { color:#565656; }

/* Shared, consistently sized contact glyphs. */
.studio-page .social-icon { flex-shrink:0; }
.studio-page .social-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }