/* ════════════════════════════════════════════════════════════
   CYRON PREMIUM  ·  cyron-premium.css   (loaded after cyron-themes.css)
   Editorial upgrade for Dark & Light: stronger type & rhythm, layered
   depth, refined hovers/materials, premium nav — token-based so it works
   in both themes. Additive; existing markup/IDs untouched.
════════════════════════════════════════════════════════════ */

/* ── GSAP owns ONLY the hero intro when motion is active (section reveals stay on
      the reliable CSS observer, so a blocked scroll can never hide content). ── */
html.motion-ready .mv-hero .reveal{transition:none;}

/* ── Lenis owns smoothing → kill native CSS smooth-scroll so they don't fight (lag) ── */
html.lenis{scroll-behavior:auto;}
html.lenis,html.lenis body{scroll-behavior:auto !important;}

/* ── subtle premium film-grain — NO blend mode (a blended fixed layer forces a
      full-viewport recomposite every scroll frame → jank). Flat low-opacity
      fixed layer is a stable GPU layer, cheap on scroll. ── */
.mv-home::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.03;background-size:170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
html[data-theme="light"] .mv-home::before{opacity:.02;}

/* ═══════════ NAV — refined, editorial ═══════════ */
.mv-home header.nav{height:auto;}
.mv-home .nav-in{height:74px;}
.mv-home .brand{font-family:var(--mv-grotesk);font-weight:700;letter-spacing:.02em;font-size:14px;gap:11px;}
.mv-home .brand .dot{width:9px;height:9px;box-shadow:0 0 16px var(--mv-red),0 0 30px var(--accent-soft-2);}
.mv-home .nlink{position:relative;font-weight:600;letter-spacing:.06em;}
.mv-home .nlink::before{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1.5px;
  background:var(--mv-red);transform:scaleX(0);transform-origin:right;transition:transform .34s cubic-bezier(.2,.7,.2,1);border-radius:2px;}
.mv-home .nlink:hover::before,.mv-home .nlink.active::before{transform:scaleX(1);transform-origin:left;}
.mv-home .nlink.active::after{display:none;}

/* ═══════════ HERO — bigger, more confident ═══════════ */
.mv-roles{letter-spacing:-.025em;line-height:.94;}
.mv-hero-blurb{font-size:clamp(15px,1.15vw,17px);line-height:1.6;}
.mv-scrollcue{opacity:.85;}
/* premium CTA with light sweep */
.mv-btn{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,color .3s,background .3s,box-shadow .3s;}
.mv-btn::after{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.2,.7,.2,1);}
.mv-btn:hover::after{left:130%;}
.mv-btn.solid:hover{box-shadow:0 18px 44px -16px var(--mv-red);}

/* ═══════════ SECTION rhythm & headers ═══════════ */
.mv-sec{padding:clamp(84px,11vw,168px) 0;}
.mv-ey{font-size:11px;letter-spacing:.4em;}
.mv-sec-title{letter-spacing:-.03em;}
.mv-sec-head{margin-bottom:clamp(44px,5.5vw,76px);}

/* ═══════════ CARDS — layered depth + refined hover ═══════════ */
.mv-tcard,.mv-vcard{border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 20px 50px -40px #000;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s,background .4s;}
.mv-tcard:hover,.mv-vcard:hover{transform:translateY(-8px);}
html[data-theme="light"] .mv-tcard,html[data-theme="light"] .mv-vcard{box-shadow:0 18px 44px -34px rgba(24,24,40,.35);}

/* work cards — cinematic image zoom + reveal of meta */
.mv-home .wcard .wimg{overflow:hidden;}
.mv-home .wcard .wimg img,.mv-home .wcard .wimg{transition:filter .6s,transform .8s cubic-bezier(.2,.7,.2,1);}
.mv-home .wcard:hover .wimg{transform:translateY(-6px) scale(1.012);}
.mv-home .wcard .wgo{position:relative;padding-bottom:3px;}
.mv-home .wcard .wgo::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.mv-home .wcard:hover .wgo::after{transform:scaleX(1);}

/* chips — subtle glass */
.mv-chip{transition:transform .25s,border-color .25s,color .25s,background .25s;}
.mv-chip:hover{transform:translateY(-2px);}

/* stat numbers — tighter, more editorial */
.mv-home .mv-stats .snum{letter-spacing:-.03em;}

/* ═══════════ PLURAL DEPTH: soft gradient wash behind key sections ═══════════ */
#about,#contact{position:relative;}
#about::before,#contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 60% at 15% 0%,var(--accent-soft),transparent 60%);opacity:.5;}

/* ═══════════ CONTACT — big premium mail ═══════════ */
.mv-mail{transition:color .3s,letter-spacing .3s;}
.mv-mail:hover{letter-spacing:-.015em;}

/* ═══════════ FOOTER refinement ═══════════ */
.mv-foot{padding-top:clamp(60px,7vw,100px);}

/* ═══════════ REDUCED MOTION — everything calm ═══════════ */
@media(prefers-reduced-motion:reduce){
  .mv-btn::after{display:none;}
  html.motion-ready .mv-home .reveal{transition:opacity .5s ease;}
}

/* ═══════════ DARK EDITORIAL PUSH — luxury-agency drama ═══════════ */
/* gradient hairline dividers between sections (more refined than a flat border) */
html[data-theme="dark"] .mv-sec{border-top:0;position:relative;}
html[data-theme="dark"] .mv-sec::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 22%,rgba(255,255,255,.14) 78%,transparent);}
/* bigger, tighter, more confident section titles */
html[data-theme="dark"] .mv-sec-title{font-size:clamp(36px,5.2vw,80px);letter-spacing:-.035em;}
html[data-theme="dark"] .mv-ey{color:var(--mv-red-2);}
/* dramatic top vignette + a faint spotlight behind the hero name */
html[data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,rgba(110,99,255,.10),transparent 55%);}
/* refined glass surfaces */
html[data-theme="dark"] .mv-tcard,html[data-theme="dark"] .mv-vcard{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));}
/* stronger stat presence */
html[data-theme="dark"] .mv-home .mv-stats .snum{text-shadow:0 0 40px rgba(154,140,255,.18);}

/* ═══════════ MOBILE polish ═══════════ */
@media(max-width:780px){
  .mv-sec{padding:clamp(60px,14vw,96px) 0;}
  .mv-home::before{opacity:.035;}
  html[data-theme="dark"] body::after{display:none;}
}



/* ════════════════════════════════════════════════════════════
   LAYOUT PASS — even section rhythm, 2-up mobile grids,
   tools/software logo grid, centred section heads
════════════════════════════════════════════════════════════ */

/* 1 · one consistent vertical rhythm for EVERY section */
:root{--sec-gap:clamp(72px,8vw,132px);}
.mv-home .mv-sec,
.mv-home .prefooter-marquee,
html[data-theme="immersive"] .mv-sec{padding-top:var(--sec-gap)!important;padding-bottom:var(--sec-gap)!important;}
html[data-theme="immersive"] .mv-sec{min-height:0!important;}
.mv-home .parallax-band{padding:0;min-height:clamp(300px,34vw,420px)}
.mv-home .parallax-inner{padding:var(--sec-gap) var(--pad)}

/* 2 · centred section head variant */
.mv-sec-head.center{align-items:center;text-align:center;margin-left:auto;margin-right:auto;}
.mv-sec-head.center .mv-ey{justify-content:center;}

/* 3 · tools & software logo grid — ALWAYS 5 across */
.mv-toolwrap{margin-top:clamp(22px,3vw,34px);}
.mv-toolwrap-head{font-family:var(--mv-grotesk);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mv-muted);margin-bottom:14px;}
/* Full width of the story grid, tiles kept at their original ~97px.
   auto-fill wraps to as many rows as the uploads need - still unlimited. */
.mv-toolwrap{grid-column:1 / -1;}
.mv-toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:clamp(8px,1vw,14px);}
@media(max-width:780px){.mv-toolgrid{grid-template-columns:repeat(5,1fr);}}
.tool-logo{aspect-ratio:1;border:1px solid var(--mv-line);border-radius:12px;
  background:rgba(255,255,255,.03);display:grid;place-items:center;padding:12px;
  transition:border-color .25s,background .25s,transform .25s;cursor:pointer;}
.tool-logo:hover{border-color:var(--mv-red);background:rgba(255,255,255,.06);transform:translateY(-3px);}
.tool-logo img{width:100%;height:100%;object-fit:contain;display:block;}
.tool-logo.is-empty{cursor:default;border-style:dashed;}
.tool-logo.is-empty span{color:var(--mv-muted);font-size:18px;line-height:1;}
.tool-logo.is-empty:hover{transform:none;border-color:var(--mv-line);background:rgba(255,255,255,.03);}
html[data-theme="light"] .tool-logo{background:#fff;border-color:var(--line);}

/* 4 · mobile: two-up work cards and testimonials (never a single tall column) */
@media(max-width:780px){
  .mv-home #work-grid.work-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important;}
  .mv-home .wcard:nth-child(even){margin-top:0!important;}
  .mv-home .wcard .wt{font-size:15px;}
  .mv-home .wcard .wd{font-size:12.5px;}
  .mv-tgrid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;}
  .mv-tcard{padding:16px!important;}
  .mv-tcard blockquote{font-size:13px!important;line-height:1.5;}
  .mv-tcard .tc-avatar{width:32px;height:32px;font-size:12px;}
  .mv-tcard .tc-name{font-size:12.5px;}
  .mv-tcard .tc-role{font-size:11px;}
  .mv-toolgrid{gap:7px;grid-template-columns:repeat(5,1fr);}
  .tool-logo{border-radius:9px;padding:8px;}
}
@media(max-width:430px){
  .mv-home #work-grid.work-grid{gap:12px!important;}
  .mv-home .wcard .wd{display:none;}
}

/* company logo sits immediately before the company name on work pages */
.page-title{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);flex-wrap:wrap;}
.page-title .co-logo{height:clamp(38px,4.4vw,64px);width:auto;max-width:170px;object-fit:contain;display:block;flex:0 0 auto;}
html[data-theme="light"] .page-title .co-logo{filter:none;}

/* ═══════════ FOOTER — mobile responsive ═══════════ */
@media(max-width:780px){
  .mv-foot{padding-top:clamp(40px,8vw,64px);}
  /* brand full-width, the two link columns side by side underneath */
  .mv-foot-grid{grid-template-columns:1fr 1fr!important;gap:20px 18px;}
  .mv-foot-grid>:first-child{grid-column:1 / -1;}
  .mv-foot-brand{font-size:clamp(26px,8.5vw,38px);line-height:.95;}
  .mv-foot-tag{font-size:12.5px;max-width:100%;margin-top:10px;}
  .mv-foot-col h5{margin-bottom:8px;}
  .mv-foot-col a,.mv-foot-col button{padding:5px 0;font-size:13.5px;}
  .mv-foot-base{
    flex-direction:column;align-items:flex-start;gap:10px;
    margin-top:26px;padding-top:16px;
    padding-bottom:84px;      /* clear the floating Samyaza bubble */
    font-size:10px;line-height:1.6;
  }
  .mv-foot-base .totop{align-self:flex-start;}
}
@media(max-width:340px){
  .mv-foot-grid{grid-template-columns:1fr!important;}
}

/* company page: the logo leads, the name is small supporting text */
.page-title.has-logo{align-items:center;gap:clamp(10px,1.2vw,18px);}
.page-title.has-logo .co-logo{height:clamp(46px,5.4vw,86px);max-width:260px;}
.page-title .pt-name{font-size:clamp(18px,1.9vw,26px);font-weight:600;letter-spacing:-.01em;opacity:.9;}
/* when a logo exists the name can step back further */
.page-title.has-logo .co-logo + .pt-name{font-size:clamp(15px,1.5vw,20px);opacity:.72;}


/* ── Selected Work ──
   Reverted to the stock reveal behaviour (the shared one-shot .reveal fade).
   Only the section padding is tuned here. */
.mv-home #work{padding-top:clamp(44px,4.5vw,72px)!important;
               padding-bottom:clamp(44px,4.5vw,72px)!important;}
@media(max-width:780px){
  .mv-home #work{padding-top:clamp(34px,7vw,52px)!important;
                 padding-bottom:clamp(34px,7vw,52px)!important;}
}

/* ── Collaborations heading stays on one line ── */
#client-logos .sec-title,#client-logos .mv-sec-title{
  max-width:none;white-space:nowrap;font-size:clamp(24px,3vw,46px);
}
@media(max-width:720px){
  #client-logos .sec-title,#client-logos .mv-sec-title{white-space:normal;}
}


/* the clicked-image lightbox shows its name again (tools, logos, gallery) */
.lb-card.image-only.has-caption .lb-meta{display:block!important;text-align:center;padding-top:14px}
.lb-card.image-only.has-caption #lbT{
  font-family:var(--mv-display);font-weight:700;font-size:clamp(15px,1.5vw,21px);
  color:var(--mv-cream);letter-spacing:-.01em}
.lb-card.image-only.has-caption #lbB{
  font-family:var(--mv-grotesk);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mv-cream-2);margin-bottom:4px}

/* ── Footer: glass panel ── */
.mv-foot{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 -24px 60px -40px rgba(0,0,0,.9);
  overflow:hidden;
}
/* a soft sheen so the glass reads as glass rather than a flat tint */
.mv-foot::before{
  content:"";position:absolute;inset:0 0 auto 0;height:180px;pointer-events:none;
  background:radial-gradient(120% 100% at 20% 0%,rgba(255,255,255,.07),transparent 70%);
}
.mv-foot > *{position:relative;z-index:1}
html[data-theme="light"] .mv-foot{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.45));
  border-top-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 -24px 60px -46px rgba(0,0,0,.25);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mv-foot{background:rgba(20,20,24,.94)}
  html[data-theme="light"] .mv-foot{background:rgba(250,250,252,.96)}
}

/* ── Footer social icons (icons only, never the URL) ── */
.mv-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.mv-social-link{
  width:36px;height:36px;border-radius:10px;
  display:inline-grid;place-items:center;
  color:var(--mv-cream-2);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  transition:color .22s,border-color .22s,background .22s,transform .22s;
}
.mv-social-link:hover{
  color:#fff;border-color:var(--mv-red,#8b7bff);
  background:rgba(255,255,255,.11);transform:translateY(-2px);
}
.mv-social-link svg{display:block}
html[data-theme="light"] .mv-social-link{
  color:#333;border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.04);
}
html[data-theme="light"] .mv-social-link:hover{color:#000;background:rgba(0,0,0,.08)}

/* ── hero Download CV sits beside Ask Samyaza ── */
.hero-v2 a.mv-btn#heroCv{text-decoration:none;}
.hero-v2 a.mv-btn#heroCv[hidden]{display:none!important;}

/* ── Selected Work cards with an uploaded image ── */
.mv-home .wcard .wimg.has-img{
  background:var(--bg-2);position:relative;overflow:hidden;display:block;
}
.mv-home .wcard .wimg.has-img img,
.mv-home .wcard .wimg.has-img video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.mv-home .wcard:hover .wimg.has-img img,
.mv-home .wcard:hover .wimg.has-img video{transform:scale(1.05);}
/* keep the year chip readable over a photo */
.mv-home .wcard .wimg.has-img .wyr{
  position:absolute;top:10px;right:10px;z-index:2;
  background:rgba(6,6,6,.62);backdrop-filter:blur(6px);
  padding:3px 9px;border-radius:999px;
}

/* ════════════════════════════════════════════════════════════
   SELECTED WORK CARDS — rebuilt
   Equal heights (grid rows stretch, body flexes, CTA pinned to the
   bottom), one uniform image ratio, and a restrained hover: lift +
   accent hairline + image push-in + arrow slide.
════════════════════════════════════════════════════════════ */
.mv-home #work-grid.work-grid{align-items:stretch;}

.mv-home #work .wcard{
  position:relative;display:flex;flex-direction:column;height:100%;
  margin:0;padding:0;overflow:hidden;cursor:pointer;
  border:1px solid var(--mv-line-2);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:transform .5s cubic-bezier(.2,.7,.2,1),
             border-color .4s ease, box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
.mv-home #work .wcard:hover,
.mv-home #work .wcard:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
  outline:none;
}

/* one ratio for every tile, so rows line up whatever the source image is */
.mv-home #work .wcard .wimg{
  position:relative;aspect-ratio:16/10;width:100%;height:auto;flex:0 0 auto;
  overflow:hidden;border-radius:0;border:0;margin:0;
  display:grid;place-items:center;
}
.mv-home #work .wcard .wimg img,
.mv-home #work .wcard .wimg video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease;
}
.mv-home #work .wcard:hover .wimg img,
.mv-home #work .wcard:hover .wimg video{transform:scale(1.06);}

/* year chip floats over the image corner */
.mv-home #work .wcard .wyr{
  position:absolute;top:14px;right:14px;z-index:3;
  font-family:var(--mv-grotesk);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mv-cream);
  padding:5px 11px;border-radius:999px;
  background:rgba(6,6,6,.55);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* body flexes so every CTA sits on the same baseline */
.mv-home #work .wcard .wbody{
  flex:1 1 auto;display:flex;flex-direction:column;
  padding:clamp(16px,1.5vw,22px) clamp(16px,1.6vw,24px) clamp(18px,1.7vw,26px);
  gap:7px;
}
.mv-home #work .wcard .wt{
  font-family:var(--mv-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,1.5vw,22px);line-height:1.15;color:var(--mv-cream);margin:0;
}
.mv-home #work .wcard .wd{
  font-family:var(--mv-grotesk);font-size:clamp(12.5px,1vw,14px);
  line-height:1.55;color:var(--mv-cream-2);margin:0;
  /* two lines max keeps every body the same height */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em;
}
.mv-home #work .wcard .wgo{
  margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mv-grotesk);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mv-cream);
}
.mv-home #work .wcard .wgo-a{
  display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.mv-home #work .wcard:hover .wgo-a{transform:translateX(6px);}

/* hairline that draws across the top edge on hover */
.mv-home #work .wcard-glow{
  position:absolute;left:0;top:0;height:2px;width:100%;z-index:4;
  background:linear-gradient(90deg,transparent,var(--mv-red,#8b7bff),transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.mv-home #work .wcard:hover .wcard-glow{transform:scaleX(1);}

html[data-theme="light"] .mv-home #work .wcard{
  background:#fff;border-color:var(--line);
  box-shadow:0 12px 30px -22px rgba(0,0,0,.25);
}
html[data-theme="light"] .mv-home #work .wcard:hover{
  box-shadow:0 26px 50px -30px rgba(0,0,0,.35);
}
html[data-theme="light"] .mv-home #work .wcard .wyr{
  background:rgba(255,255,255,.82);color:var(--ink);border-color:rgba(0,0,0,.12);
}

@media(prefers-reduced-motion:reduce){
  .mv-home #work .wcard,
  .mv-home #work .wcard .wimg img,
  .mv-home #work .wcard .wgo-a,
  .mv-home #work .wcard-glow{transition:none;}
  .mv-home #work .wcard:hover{transform:none;}
}

/* The 64x30 diagonal hatch marks in the top corners were decoration from the
   old tile. They read as a rendering artifact, so the rebuilt card drops them
   on every state - placeholder and photo alike. They lived in
   cyron-layers.css as .mv-home .wcard .wimg::before / ::after. */
.mv-home #work .wcard .wimg::before{content:none!important;}
.mv-home #work .wcard .wimg:not(.has-img)::after{content:none!important;}

/* ════════════════════════════════════════════════════════════
   TOOLS DOCK  —  RocketDock-style magnification + tooltip
   Transform-only, so the grid never reflows.
════════════════════════════════════════════════════════════ */
.mv-toolgrid.is-dock{overflow:visible;}
.mv-toolgrid.is-dock .tool-logo{
  position:relative;
  appearance:none;-webkit-appearance:none;
  font:inherit;color:inherit;cursor:pointer;
  transform-origin:50% 85%;               /* grows upward, like a dock */
  transition:transform .26s cubic-bezier(.2,.8,.25,1),
             border-color .26s ease, box-shadow .26s ease, background .26s ease;
  will-change:transform;
}
.mv-toolgrid.is-dock .tool-logo:hover,
.mv-toolgrid.is-dock .tool-logo:focus-visible{
  border-color:rgba(139,123,255,.85);
  background:rgba(139,123,255,.10);
  box-shadow:0 0 0 1px rgba(139,123,255,.35),
             0 18px 44px -14px rgba(139,123,255,.55);
  outline:none;
}
.mv-toolgrid.is-dock .tool-logo:focus-visible{
  box-shadow:0 0 0 2px var(--bg,#060606), 0 0 0 4px rgba(139,123,255,.9),
             0 18px 44px -14px rgba(139,123,255,.55);
}

/* ── the floating tooltip ── */
.dock-tip{
  position:fixed;z-index:9999;left:0;top:0;
  pointer-events:none;
  display:flex;flex-direction:column;gap:3px;
  padding:12px 16px 13px;
  max-width:min(300px,calc(100vw - 24px));
  border-radius:14px;
  background:rgba(14,14,17,.94);
  border:1px solid rgba(139,123,255,.55);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.9),
             0 0 0 1px rgba(139,123,255,.14),
             0 0 34px -8px rgba(139,123,255,.35);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(6px) scale(.97);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.25,1);
}
.dock-tip.is-on{opacity:1;transform:translateY(0) scale(1);}
.dock-tip.is-measuring{opacity:0;transform:none!important;transition:none!important;}
.dock-tip-name{
  font-family:var(--mv-display,inherit);font-weight:700;
  font-size:15.5px;line-height:1.2;letter-spacing:-.01em;color:#fff;
}
.dock-tip-desc{
  font-family:var(--mv-grotesk,inherit);
  font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.68);
}
/* the little pointer under the card */
.dock-tip-tail{
  position:absolute;bottom:-6px;left:var(--tail-x,50%);
  width:12px;height:12px;margin-left:-6px;
  background:rgba(14,14,17,.94);
  border-right:1px solid rgba(139,123,255,.55);
  border-bottom:1px solid rgba(139,123,255,.55);
  transform:rotate(45deg);border-bottom-right-radius:3px;
}
.dock-tip.is-below .dock-tip-tail{
  bottom:auto;top:-6px;
  border:0;border-left:1px solid rgba(139,123,255,.55);
  border-top:1px solid rgba(139,123,255,.55);
  border-top-left-radius:3px;border-bottom-right-radius:0;
}
html[data-theme="light"] .dock-tip{
  background:rgba(255,255,255,.97);border-color:rgba(85,69,214,.45);
}
html[data-theme="light"] .dock-tip-name{color:#111;}
html[data-theme="light"] .dock-tip-desc{color:rgba(0,0,0,.6);}
html[data-theme="light"] .dock-tip-tail{background:rgba(255,255,255,.97);
  border-color:rgba(85,69,214,.45);}

@media(prefers-reduced-motion:reduce){
  .mv-toolgrid.is-dock .tool-logo{transition:none;transform:none!important;}
  .dock-tip{transition:none;transform:none;}
}

/* ════════════════════════════════════════════════════════════
   MOBILE TYPE — nothing should out-run the screen
════════════════════════════════════════════════════════════ */
@media(max-width:780px){
  /* long single roles ("GD/Creative Technologist") must be allowed to break */
  .hero-v2 .mv-roles{
    font-size:clamp(24px,7.2vw,34px);
    max-width:100%;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;
  }
  /* placeholder watermarks were spilling out of their tiles */
  .mv-home .ph-wm{
    font-size:clamp(9px,2.6vw,12px);
    max-width:92%;text-align:center;overflow-wrap:anywhere;line-height:1.25;
  }
  /* headings and body copy: keep every long word inside the column */
  .mv-home .mv-sec-title,
  .mv-home .mv-story-lead,
  .mv-home .mv-lead,
  .mv-home .wt,.mv-home .wd,
  .mv-home .mv-principle h3,.mv-home .mv-principle p,
  .mv-home .mv-exp-list li,
  .mv-home .mv-vcard h3,.mv-home .mv-vcard p,
  .mv-home .mv-tcard blockquote,
  .mv-home .mv-contact-sub,
  .mv-home .mv-goal p{
    overflow-wrap:anywhere;
  }
  .mv-home .mv-mail{font-size:clamp(13px,3.6vw,18px);overflow-wrap:anywhere;}
  .mv-home .mv-foot-brand{font-size:clamp(30px,10vw,46px);}
}
@media(max-width:430px){
  .hero-v2 .mv-roles{font-size:clamp(22px,7.6vw,30px);}
  .mv-home .mv-sec-title{font-size:clamp(24px,8.2vw,34px);}
}

/* ── Lightbox gallery navigation ── */
.lb-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:60;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  font-size:30px;line-height:1;padding-bottom:4px;
  color:#fff;background:rgba(12,12,16,.62);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .22s,border-color .22s,transform .22s,opacity .22s;
}
.lb-nav:hover{background:rgba(139,123,255,.28);border-color:rgba(139,123,255,.8);}
.lb-nav:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(139,123,255,.9);}
.lb-prev{left:clamp(10px,2.4vw,34px);}
.lb-next{right:clamp(10px,2.4vw,34px);}
.lb-nav[hidden]{display:none!important;}
.lb-prev:hover{transform:translateY(-50%) translateX(-3px);}
.lb-next:hover{transform:translateY(-50%) translateX(3px);}

.lb-count{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:clamp(14px,3vh,30px);z-index:60;
  font-family:var(--mv-grotesk,inherit);font-size:12px;letter-spacing:.16em;
  color:rgba(255,255,255,.82);
  padding:7px 15px;border-radius:999px;
  background:rgba(12,12,16,.62);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.lb-count[hidden]{display:none!important;}

/* the controls only exist while the lightbox is open */
.lb:not(.open) .lb-nav,
.lb:not(.open) .lb-count{display:none!important;}

@media(max-width:640px){
  .lb-nav{width:44px;height:44px;font-size:25px;}
  .lb-prev{left:8px;} .lb-next{right:8px;}
}
@media(prefers-reduced-motion:reduce){
  .lb-nav{transition:none;}
  .lb-prev:hover,.lb-next:hover{transform:translateY(-50%);}
}